new project NIR
Boris Voropaev
parent
97bee86342
commit
ce6d4177ea
68
angular.json
68
angular.json
|
|
@ -77,6 +77,9 @@
|
|||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
},
|
||||
|
||||
|
||||
|
||||
"vniigaz-v2": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
|
|
@ -135,6 +138,7 @@
|
|||
],
|
||||
"index": "src/vniigaz-v2/index.html"
|
||||
},
|
||||
|
||||
"vniigaz-v2-prod": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
|
|
@ -192,6 +196,67 @@
|
|||
"node_modules/swiper/swiper-bundle.css"
|
||||
],
|
||||
"index": "src/vniigaz-v2/index.html"
|
||||
},
|
||||
|
||||
|
||||
|
||||
"nir": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/nir.env.dev.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/grid/grid.component.ts",
|
||||
"with": "src/nir/component/layout/grid/grid.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/header/header.component.ts",
|
||||
"with": "src/nir/component/layout/header/header.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/footer/footer.component.ts",
|
||||
"with": "src/nir/component/layout/footer/footer.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/layout/jumbotron/jumbotron.component.ts",
|
||||
"with": "src/nir/component/layout/jumbotron/jumbotron.component.ts"
|
||||
},
|
||||
{
|
||||
"replace": "src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts",
|
||||
"with": "src/nir/component/pages/menu/slider-menu/slider-menu.component.ts"
|
||||
}
|
||||
],
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "node_modules/tinymce",
|
||||
"output": "/tinymce/"
|
||||
},
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "src/nir/",
|
||||
"output": "/assets/"
|
||||
}
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src/nir/css"
|
||||
]
|
||||
},
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"node_modules/swiper/swiper-bundle.css"
|
||||
],
|
||||
"index": "src/nir/index.html"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
|
|
@ -207,6 +272,9 @@
|
|||
},
|
||||
"vniigaz-v2": {
|
||||
"browserTarget": "front:build:vniigaz-v2"
|
||||
},
|
||||
"nir": {
|
||||
"browserTarget": "front:build:nir"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl: 'http://api.nircms.lc',
|
||||
clientId: 2,
|
||||
clientSecret: 'm5VOU2mv0psRFIL32QRGvKmtaE57ijGS4FTBMyn9',
|
||||
project: null,
|
||||
licence: 'POUFLO4YW7SU',
|
||||
defaultLocale: 'ru'
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const environment = {
|
||||
production: true,
|
||||
apiUrl: 'https://api-vniigaz-cert-v2.testnir.ru',
|
||||
clientId: 2,
|
||||
clientSecret: 'uMYJ7jTYfSKst631D9gKlSwlNF0bWlcrR1d5mTKX',
|
||||
project: null,
|
||||
licence: '',
|
||||
defaultLocale: 'ru'
|
||||
};
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<div class="footer layout-corral">
|
||||
<div class="block">
|
||||
<div class="logo">
|
||||
<img src="assets/images/logo_vniigaz_wt_280x110.svg" alt="">
|
||||
<div *ngIf="!isLoggedIn" class="footer-login">
|
||||
<a (click)="login()">Вход в личный кабинет</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div>
|
||||
<a href="tel:+74986574518">+7 (498) 657-45-18</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:info@vniigaz-cert.ru">info@vniigaz-cert.ru</a>
|
||||
</div>
|
||||
<div>
|
||||
142717, Российская Федерация, Московская область, г. Видное, посёлок Развилка, ВНИИГАЗ
|
||||
</div>
|
||||
<div class="icons">
|
||||
<a href="https://vk.com/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/vk_white_29x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://ok.ru/group/59746745647125" target="_blank">
|
||||
<img src="assets/images/icons/ok_orange_28x28.svg" alt="">
|
||||
</a>
|
||||
<a href="https://dzen.ru/vniigazcert" target="_blank">
|
||||
<img src="assets/images/icons/zen_black_28x28.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="copyright">
|
||||
<div>
|
||||
© 1998–{{year}} ЧУ СЦ ВНИИГАЗ-Сертификат
|
||||
</div>
|
||||
<div class="nir">
|
||||
<a href="https://nirgroup.ru">Работает на платформе НИР</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {AuthenticationService} from "@app/_services";
|
||||
|
||||
@Component({
|
||||
selector: 'footer',
|
||||
templateUrl: 'footer.component.html',
|
||||
styleUrls: ['footer.component.scss']
|
||||
})
|
||||
export class FooterComponent {
|
||||
|
||||
public year = new Date().getFullYear();
|
||||
|
||||
constructor(public authService: AuthenticationService) {
|
||||
}
|
||||
|
||||
get isLoggedIn() {
|
||||
return this.authService.isLoggedIn;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.popup('login');
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<router-outlet name="auth"></router-outlet>
|
||||
<router-outlet name="slider"></router-outlet>
|
||||
|
||||
<div class="wrapper" [class.this-root-page] = "isRootPage">
|
||||
<header class="space"></header>
|
||||
<jumbotron></jumbotron>
|
||||
<div class="space content-sapce">
|
||||
<div class="content-grid layout-corral">
|
||||
<left-content></left-content>
|
||||
<div class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<right-content></right-content>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="space"></footer>
|
||||
</div>
|
||||
<fullscreen-gallery></fullscreen-gallery>
|
||||
<cms-dialog></cms-dialog>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Subscription} from "rxjs";
|
||||
import {ListsService} from "@app/_services";
|
||||
import { PagesService } from '@app/_services/pages.service';
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
templateUrl: 'grid.component.html',
|
||||
styleUrls: ['grid.component.scss']
|
||||
})
|
||||
export class GridComponent {
|
||||
|
||||
public classActive = '';
|
||||
|
||||
public bright: number = 150;
|
||||
public contrast: number = 100;
|
||||
|
||||
subscription?: Subscription;
|
||||
|
||||
constructor(
|
||||
private listsService: ListsService, private pagesService: PagesService
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscription = this.listsService.result('class').subscribe(val => {
|
||||
this.classActive = val;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return this.pagesService.currentPage && this.pagesService.currentPage.parents && this.pagesService.currentPage.parents.data.length == 0
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="header layout-corral" [class.rootpage]="isRootPage">
|
||||
<a class="burger" (click)="openMobileMenu()">
|
||||
<ico *ngIf="!isRootPage" ico="burger_blue_40dp" [size]="36"></ico>
|
||||
<ico *ngIf="isRootPage" ico="burger_white_40dp" [size]="36"></ico>
|
||||
</a>
|
||||
<a [routerLink]="rootPage?.link" class="logo">
|
||||
<img *ngIf="!isRootPage" src="assets/images/logo_vniigaz.svg" alt="ВНИИГАЗ">
|
||||
<img *ngIf="isRootPage" src="assets/images/logo_vniigaz_wt_280x110.svg" alt="ВНИИГАЗ">
|
||||
</a>
|
||||
|
||||
<pages-menu class="lvl-0"></pages-menu>
|
||||
|
||||
<div class="inline center header-right">
|
||||
<locale></locale>
|
||||
<a class="btn vnii" href="https://ais.vniigaz-cert.ru/" target="_blank">Личный кабинет (АИС СЦ)</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
import {PagesService} from "@app/_services/pages.service";
|
||||
|
||||
@Component({
|
||||
selector: 'header',
|
||||
templateUrl: 'header.component.html',
|
||||
styleUrls: ['header.component.scss']
|
||||
})
|
||||
export class HeaderComponent {
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
public pagesService: PagesService
|
||||
) {
|
||||
}
|
||||
// ngOnInit(){
|
||||
// this.pagesService.root().subscribe(
|
||||
// resp=> this.pagesService.rootPages = resp
|
||||
// )
|
||||
// }
|
||||
|
||||
get rootPage() {
|
||||
return this.pagesService.rootPage;
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
|
||||
}
|
||||
|
||||
openMobileMenu(){
|
||||
this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="jumbotron-bg space" [ngStyle]="bgStyle" [class.rootpage-jumbotron]="isRootPage">
|
||||
<div class="jumbotron-content layout-corral">
|
||||
<header-user-bar></header-user-bar>
|
||||
<div class="jumbotron-content-center">
|
||||
<h1 [ngStyle]="h1Style">{{name}}</h1>
|
||||
<!-- <h1 *ngIf="isRootPage" [ngStyle]="h1Style">
|
||||
Сертификация<br>
|
||||
продукции, работ и услуг</h1> -->
|
||||
<h4 *ngIf="since">
|
||||
<a href="https://vniigaz.gazprom.ru/" target="_blank">Учреждено в 1998</a>
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="space jumbotron-edit-field" *ngIf="editable">
|
||||
<div class="layout-corral jumbotron-edit-field-row">
|
||||
<div class="switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { PagesService } from '@app/_services/pages.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { AuthenticationService } from '@app/_services';
|
||||
|
||||
@Component({
|
||||
selector: 'jumbotron',
|
||||
templateUrl: './jumbotron.component.html',
|
||||
styleUrls: ['./jumbotron.component.scss']
|
||||
})
|
||||
export class JumbotronComponent {
|
||||
private subscription:Subscription
|
||||
public currentPage:any;
|
||||
public pagePicture:any;
|
||||
|
||||
|
||||
|
||||
constructor(
|
||||
private pagesService: PagesService,
|
||||
public authService: AuthenticationService,
|
||||
){}
|
||||
|
||||
ngOnInit(){
|
||||
this.subscription = this.pagesService.currentPageSubject.subscribe(
|
||||
resp=> {
|
||||
this.currentPage = resp;
|
||||
console.log(this.currentPage)
|
||||
if (this.currentPage) {
|
||||
if(this.currentPage.picture){
|
||||
this.pagePicture = this.currentPage.picture.data.links.open
|
||||
}else{
|
||||
let parents = this.currentPage.parents.data
|
||||
let content = parents.map(page=>page.picture).filter(page=>page)
|
||||
this.pagePicture = content.pop()?.data.links.open
|
||||
}
|
||||
}else{this.pagePicture = null;}
|
||||
}
|
||||
)
|
||||
}
|
||||
ngOnDestoy(){
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
get name(){
|
||||
let name:string
|
||||
if(this.currentPage){
|
||||
name = this.currentPage?.h1 || this.currentPage?.name;
|
||||
let parents = this.currentPage?.parents?.data
|
||||
if(parents){
|
||||
if (parents[1]?.type.name=='nav-page'){
|
||||
if (parents[2]) name = parents[2].h1|| parents[2].name
|
||||
}else{
|
||||
if (parents[1]) name = parents[1].h1|| parents[1].name
|
||||
}
|
||||
}
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
||||
get bgStyle(){
|
||||
let height = 70;
|
||||
let pictURL:string;
|
||||
if (this.pagePicture){
|
||||
height = 150;
|
||||
pictURL = this.pagePicture;
|
||||
}
|
||||
|
||||
return {
|
||||
'background-image' : `url(${pictURL})`||'none',
|
||||
'height': (this.mainPage?700:pictURL?400:height) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
get h1Style(){
|
||||
return {
|
||||
color: this.pagePicture?'var(--white)':'var(--second-act)',
|
||||
'align-self': this.mainPage?'center':'flex-start',
|
||||
'text-align': this.mainPage?'center':'left',
|
||||
'width': this.mainPage?'900px':null,
|
||||
'border-bottom':this.mainPage?null:'12px solid #2EB2E8'
|
||||
}
|
||||
}
|
||||
|
||||
get mainPage(){
|
||||
return this.currentPage?.parents?.data.length === 0;
|
||||
}
|
||||
|
||||
get editable(){
|
||||
return this.currentPage&&(this.authService.privileges?.admin|| this.authService.privileges?.editor);
|
||||
}
|
||||
|
||||
get editMode(){
|
||||
return this.pagesService.editMode;
|
||||
}
|
||||
|
||||
toggleEditMode(){
|
||||
this.pagesService.editMode = !this.pagesService.editMode;
|
||||
}
|
||||
|
||||
get isRootPage(){
|
||||
return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
|
||||
}
|
||||
|
||||
get since(){
|
||||
return this.currentPage?.link === '/'
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<slider side="left">
|
||||
|
||||
<div body>
|
||||
<pages-menu *ngIf="rootPages" [root]="rootPages" class="top-menu"></pages-menu>
|
||||
<div class="btn-menu">
|
||||
<div>
|
||||
<a href="https://ais.vniigaz-cert.ru/" target="_blank">
|
||||
Личный кабинет (АИС СЦ)
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<locale></locale>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</slider>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
import {PagesService} from "@app/_services/pages.service";
|
||||
|
||||
@Component({
|
||||
selector: 'slider-menu',
|
||||
templateUrl: './slider-menu.component.html',
|
||||
styleUrls: ['./slider-menu.component.scss']
|
||||
})
|
||||
export class SliderMenuComponent {
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
public pagesService: PagesService
|
||||
) {
|
||||
}
|
||||
|
||||
get rootPages() {
|
||||
return this.pagesService.rootPages;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
.administration-page{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
h2{
|
||||
color: var(--second-act);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.site-admin-control{
|
||||
|
||||
.site-admin-control-toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.site-admin-page-block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.site-admin-company{
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
ico.page-lable{
|
||||
background-color: var(--prime);
|
||||
border-radius: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
administrate-site-pages{
|
||||
>pages-tree{
|
||||
display: block;
|
||||
margin-bottom: 128px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
.page-control {
|
||||
display: none;
|
||||
}
|
||||
.logo, .page-lable{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ico.page-control{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color:var(--second);
|
||||
&:hover{
|
||||
color: var(--second-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
pages-tree{
|
||||
|
||||
.item:not(.home){
|
||||
.bar{
|
||||
padding-left: 50px;
|
||||
|
||||
}
|
||||
.item .bar{
|
||||
padding-left: 100px;
|
||||
}
|
||||
.item .item .bar{
|
||||
padding-left: 150px;
|
||||
}
|
||||
.item .item .item .bar{
|
||||
padding-left: 200px;
|
||||
}
|
||||
|
||||
.item .item .item .item .bar{
|
||||
padding-left: 250px;
|
||||
}
|
||||
|
||||
.item .item .item .item .item .bar{
|
||||
padding-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid var(--second-dis) 1px;
|
||||
|
||||
.left {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mid {
|
||||
flex-grow: 1;
|
||||
padding: 0 16px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
border-radius: 100px;
|
||||
background-color: var(--prime);
|
||||
color: #ffffff;
|
||||
cursor: move;
|
||||
&:hover{
|
||||
background-color: var(--prime-act);
|
||||
}
|
||||
span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px 0;
|
||||
a {
|
||||
color: var(--dadk);
|
||||
&:nth-child(2){
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-shrink: 1;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
administrate-licence{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: var(--dark);
|
||||
.default{
|
||||
|
||||
.caption{
|
||||
color: var(--second);
|
||||
}
|
||||
.value{
|
||||
&.ok{
|
||||
color: #14A92D
|
||||
}
|
||||
&.warn{
|
||||
color: #E51F30
|
||||
}
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
users-list{
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
border-top: var(--second-dis) solid 1px;
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
users-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 72px;
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
.item{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.left{
|
||||
.avatar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
border-radius: 100px;
|
||||
background-color: var(--prime);
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
.user-data{
|
||||
.name{
|
||||
&::after{
|
||||
content: '•';
|
||||
color: var(--second);
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.Administrator{
|
||||
color: #E51F30;
|
||||
}
|
||||
.Editor{
|
||||
color: #A39600
|
||||
}
|
||||
.User{
|
||||
color: #14A92D;
|
||||
}
|
||||
}
|
||||
.position{
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
ico{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--second) ;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--second-act) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,660 @@
|
|||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
|
||||
|
||||
|
||||
* {
|
||||
font-family: "PT Sans";
|
||||
}
|
||||
|
||||
// li {
|
||||
// list-style-image: url("~src/assets/images/icons/add_24dp.svg");
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
// font-weight: 500;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 1.125rem;
|
||||
// letter-spacing: 0.02em;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
.toggle-hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inline{
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.center{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
$layout-width: 1280px;
|
||||
$page-width: 840px;
|
||||
|
||||
$pxl:40px;
|
||||
$pl:32px;
|
||||
$p:24px;
|
||||
$ps:16px;
|
||||
$pxs:8px;
|
||||
$pxxs:4px;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.size-little {
|
||||
* {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
h1 {font-size: 1.5rem;}
|
||||
}
|
||||
.size-middle {
|
||||
* {
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.size-large {
|
||||
* {
|
||||
font-size: 1.25rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
h1 {font-size: 3rem;}
|
||||
}
|
||||
.image-hidden {
|
||||
img, svg {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
*, *::after, *::before {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.style-brown {
|
||||
filter: sepia(150%) !important;
|
||||
}
|
||||
.style-white-black {
|
||||
filter: grayscale(100%) !important;;
|
||||
}
|
||||
.style-black-white {
|
||||
filter: grayscale(100%) invert(100%) !important;;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
|
||||
--smart: 688px;
|
||||
--medium: 1048px;
|
||||
--xs: 4px;
|
||||
--s: 8px;
|
||||
--m: 16px;
|
||||
--l: 24px;
|
||||
--xl: 36px;
|
||||
--xxl: 48px;
|
||||
|
||||
--radius-1: 12px;
|
||||
--radius-2: 20px;
|
||||
--white: #ffffff;
|
||||
--light: #F6F6F6;
|
||||
|
||||
|
||||
--prime: #0070BA;
|
||||
--prime-hov: #005799;
|
||||
--prime-act: #004077;
|
||||
--prime-dis: #A1CAE5;
|
||||
|
||||
|
||||
|
||||
--second: #6C6C6C;
|
||||
--second-hov: #4D4D4D;
|
||||
--second-act: #2D2D2D;
|
||||
--second-dis: #C0C0C0;
|
||||
|
||||
--dark: #1F1F1F;
|
||||
--blue-0: #2EB2E8;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.style-color{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.mat-calendar-body-selected {
|
||||
background-color: #0079c2;
|
||||
}
|
||||
|
||||
button.mat-calendar-body-cell:hover{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button.mat-calendar-body-cell{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){
|
||||
background-color: rgba(0, 162, 255,0.3);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tox-promotion, .tox-statusbar__branding {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {scrollbar-color:transparent transparent; scrollbar-width:none;}
|
||||
*::-webkit-scrollbar-track {background-color:transparent;}
|
||||
*::-webkit-scrollbar {width:0; height:0; background-color:transparent;}
|
||||
*::-webkit-scrollbar-thumb {background-color:transparent; border-radius:2rem;}
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: "PT Sans";
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: var(--second-act);
|
||||
background-color: var(--light);
|
||||
font-size: 20px;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.limiter {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 76px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 76px; /* 100% */
|
||||
letter-spacing: 0.76px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 60px; /* 120% */
|
||||
letter-spacing: 0.5px;
|
||||
margin:0;
|
||||
}
|
||||
h3 {
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 44px; /* 120% */
|
||||
letter-spacing: 0.36px;
|
||||
margin:0;
|
||||
}
|
||||
h4 {
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--prime);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: var(--prime-hov);
|
||||
};
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
|
||||
span.link {
|
||||
font-weight: normal;
|
||||
color: #86898E;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: calc(100% + 80px);
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 32px;
|
||||
text-align: center;
|
||||
animation: fade-in-and-scale 0.5s infinite;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
background-image: radial-gradient(rgba(44,134,205,1), rgba(44,134,205,0));
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.op-63{
|
||||
opacity: 0.63;
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
.locale{
|
||||
position: relative;
|
||||
.locale-btn{
|
||||
display: inline-flex;
|
||||
}
|
||||
.dropdown{
|
||||
top: 27px;
|
||||
left: -120px;
|
||||
}
|
||||
img{
|
||||
height:18px;
|
||||
width:27px;
|
||||
object-fit: cover;
|
||||
border: 1px solid lightgray;
|
||||
&:hover{
|
||||
border-color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px) {
|
||||
.fullwidth {
|
||||
width: 100vw;
|
||||
margin-left: calc((1160px - 100vw) / 2);
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes slide-from-right {
|
||||
0% {transform: translateX(100%);}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes slide-from-left {
|
||||
0% {transform: translateX(-100%);}
|
||||
100% {transform: translateX(0);}
|
||||
}
|
||||
|
||||
@keyframes slide-from-top-and-fade-in {
|
||||
0% {transform: translateY(-100%); opacity: 0}
|
||||
100% {transform: translateY(0); opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes slide-from-bottom-and-fade-in {
|
||||
0% {transform: translateY(100%); opacity: 0}
|
||||
100% {transform: translateY(0); opacity: 1}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fade-in-and-scale {
|
||||
0% {transform:scale(0.3); opacity:0;}
|
||||
100% {transform:scale(1); opacity:0.5;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
h1{
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
h2{
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
h3{
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h4{
|
||||
color:var(--second);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
|
||||
.limiter {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.fullwidth {
|
||||
width: calc(100% + 48px);
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
file-ico{
|
||||
width: 52px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
|
||||
modal{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
.modal-overlay{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(62, 61, 64, 0.7);
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal-bar{
|
||||
position: fixed;
|
||||
max-width: 800px;
|
||||
max-height: 100vh;
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--second-dis);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
.modal-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: -1px;
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
padding: 14px 24px;
|
||||
h4{
|
||||
margin: 0;
|
||||
}
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 36px 24px;
|
||||
overflow-y: auto;
|
||||
img{
|
||||
width: 330px;
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
.modal-footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.combobox {
|
||||
position: relative;
|
||||
font-family: "PT Sans";
|
||||
border: solid 1px var(--second-dis);
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
color: var(--second-act);
|
||||
padding: 8px 12px 8px 16px;
|
||||
background: no-repeat left 16px center / 140px 16px url('~src/assets/images/icons/placeholder.svg');
|
||||
|
||||
&:hover{
|
||||
border-color: var(--second);
|
||||
outline: none;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--prime);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
&:disabled{
|
||||
border-color: #EDEDED;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
.caption {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
p {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.faded {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
display: none;
|
||||
width: 100%;
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.active .toggle:after {
|
||||
background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 1px);
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
margin-bottom: 50px;
|
||||
background-color: #ffffff;
|
||||
border: #dfdfdf solid 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.empty {
|
||||
padding: 10px 16px;
|
||||
background-color: #f7f7f7;
|
||||
color: #7f7f7f;
|
||||
.add {
|
||||
display: block;
|
||||
color: #2c86cd;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.title {
|
||||
padding: 8px 16px;
|
||||
border-bottom: #dfdfdf solid 1px;
|
||||
margin: 0 !important;
|
||||
cursor: pointer;
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
&.faded {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.selected {
|
||||
background-color: #e3eff9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.toggle {
|
||||
.caption {
|
||||
display: none;
|
||||
}
|
||||
.filter {
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 8px 8px 0 0;
|
||||
|
||||
.name {
|
||||
padding-right: 8px;
|
||||
line-height: 20px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.faded {
|
||||
color: #7f7f7f;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
border: none;
|
||||
//background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
button, .btn, a.btn {
|
||||
display: inline-flex;
|
||||
padding: 8px 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--prime);
|
||||
background:var(--prime);
|
||||
color: #FFF;
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
|
||||
&:hover{
|
||||
border: 1px solid var(--prime-hov);
|
||||
background: var(--prime-hov);
|
||||
}
|
||||
|
||||
&:active{
|
||||
border: 1px solid #004077;
|
||||
background: #004077;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #A1CAE5;
|
||||
background: #A1CAE5;
|
||||
}
|
||||
|
||||
&.outline{
|
||||
background:#FFF;
|
||||
color: var(--prime);
|
||||
&:hover{
|
||||
border: 1px solid var(--prime-hov);
|
||||
color: var(--prime-hov);
|
||||
}
|
||||
|
||||
&:active{
|
||||
border: 1px solid #004077;
|
||||
color: #004077;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border: 1px solid #A1CAE5;
|
||||
color: #A1CAE5;
|
||||
}
|
||||
}
|
||||
|
||||
&.clear,&.icon{
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--second-act);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 133.333% */
|
||||
letter-spacing: 100%;
|
||||
}
|
||||
|
||||
&.trash,&.add-child,&.edit,&.delete,&.close-blue,&.move{
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: center no-repeat;
|
||||
|
||||
}
|
||||
|
||||
&.trash {
|
||||
background-image: url('~src/assets/images/icons/trash_grey_24dp.svg');
|
||||
}
|
||||
&.add-child {
|
||||
background-image: url('~src/assets/images/icons/add_web_page_24dp.svg');
|
||||
}
|
||||
&.edit {
|
||||
background-image: url('~src/assets/images/icons/edit_24dp.svg');
|
||||
}
|
||||
&.close-blue {
|
||||
background-image: url('~src/assets/images/icons/close_blue_24dp.svg');
|
||||
};
|
||||
&.move {
|
||||
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
div.move{
|
||||
cursor: move;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
|
||||
}
|
||||
|
||||
// .inline-menu.default {
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// gap: 24px;
|
||||
// padding: 8px 24px;
|
||||
// background-color: #F5F4F4;
|
||||
// border: #E8E8E8 solid 1px;
|
||||
// border-radius: 4px;
|
||||
// button {
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// &.add {background-image: url('~src/assets/images/icons/note_add_20.svg');}
|
||||
// &.edit {background-image: url('~src/assets/images/icons/edit_20.svg');}
|
||||
// &.delete {background-image: url('~src/assets/images/icons/trash_20.svg');}
|
||||
// &.move {background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');}
|
||||
// }
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
// color: #ffffff;
|
||||
// padding: 11px 24px;
|
||||
// background: var(--orange-2);
|
||||
// border: 1px solid var(--orange-2);
|
||||
// border-radius: 4px;
|
||||
// font-weight: 500;
|
||||
// font-size: 0.875rem;
|
||||
// line-height: 18px;
|
||||
// letter-spacing: 0.02em;
|
||||
// text-transform: uppercase;
|
||||
|
||||
|
||||
// &.with-icon {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: center;
|
||||
// padding: 8px 20px 8px 12px;
|
||||
// &:before {
|
||||
// display: block;
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// margin-right: 8px;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// content: "";
|
||||
// }
|
||||
// &.add {
|
||||
// &:before {
|
||||
// //background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.small {
|
||||
// height: 28px;
|
||||
// padding: 4px 16px;
|
||||
// }
|
||||
// &.danger {
|
||||
// background-color: #db373a;
|
||||
// }
|
||||
// &.secondary {
|
||||
// background-color: var(--white);
|
||||
// color: var(--orange-2);
|
||||
// border: var(--orange-2) solid 1px;
|
||||
// &.danger {
|
||||
// border-color: #db373a;
|
||||
// color: #db373a;
|
||||
// }
|
||||
// }
|
||||
// &.icon {
|
||||
// width: 24px;
|
||||
// height: 24px;
|
||||
// padding: 0;
|
||||
// border-color: transparent;
|
||||
// background: transparent none 50% 50% no-repeat;
|
||||
// //&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');}
|
||||
// //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');}
|
||||
// &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');}
|
||||
// &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
|
||||
// //&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');}
|
||||
// &.checkbox {
|
||||
// display: flex;
|
||||
// width: 18px;
|
||||
// height: 18px;
|
||||
// border: solid 1px #7f7f7f;
|
||||
// border-radius: 2px;
|
||||
// &.checked,&.mixed {
|
||||
// background-color: #2c86cd;
|
||||
// border-color: #2c86cd;
|
||||
// }
|
||||
// &.checked {
|
||||
// //background-image: url('~src/assets/images/icons/checkbox_24dp.svg');
|
||||
// }
|
||||
// &.mixed {
|
||||
// &:before {
|
||||
// display: block;
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
// margin: auto;
|
||||
// background-color: #ffffff;
|
||||
// content: "";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
.documents.list.default {
|
||||
font-size: 20px;
|
||||
.items {
|
||||
.item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
.value{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
.description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.none {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 24px;
|
||||
button {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documents.list.inline {
|
||||
.item {
|
||||
display: inline-block;
|
||||
padding: 3px 30px 3px 12px;
|
||||
margin: 0 12px 4px 0;
|
||||
border: solid 1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
//background: #e3eff9 url('~src/assets/images/icons/open_in_new_18dp.svg') calc(100% - 8px) 50% no-repeat;
|
||||
font-size: 0.875rem;
|
||||
a {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
.documents.list.default {
|
||||
.buttons {
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
.dropdown {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
right: 24px;
|
||||
top: 62px;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: var(--second-dis) solid 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--white);
|
||||
border-bottom: var(--second-dis) solid 1px;
|
||||
overflow: hidden;
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
.row {
|
||||
border-bottom: none;
|
||||
}
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
>&:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
|
||||
column-gap: 12px;
|
||||
cursor: pointer;
|
||||
color: var(--second-act);
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
a, span {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
border-bottom: #E0E0E0 solid 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:last-child {
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-row {
|
||||
padding: 12px 16px 12px 32px;
|
||||
border-top: var(--second-dis) solid 1px;
|
||||
color: var(--second);
|
||||
background-color: var(--white);
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Italic.eot');
|
||||
// src: local('Open Sans Italic'), local('OpenSans-Italic'),
|
||||
// url('../fonts/sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Italic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Italic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Italic.ttf') format('truetype');
|
||||
// font-weight: normal;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Regular.eot');
|
||||
// src: local('Open Sans Regular'), local('OpenSans-Regular'),
|
||||
// url('../fonts/sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Regular.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Regular.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Regular.ttf') format('truetype');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-BoldItalic.eot');
|
||||
// src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
// font-weight: bold;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-SemiBold.eot');
|
||||
// src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-SemiBold.ttf') format('truetype');
|
||||
// font-weight: 600;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-ExtraBoldItalic.eot');
|
||||
// src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
|
||||
// font-weight: 800;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-LightItalic.eot');
|
||||
// src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-LightItalic.ttf') format('truetype');
|
||||
// font-weight: 300;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Bold.eot');
|
||||
// src: local('Open Sans Bold'), local('OpenSans-Bold'),
|
||||
// url('../fonts/sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Bold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Bold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Bold.ttf') format('truetype');
|
||||
// font-weight: bold;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-SemiBoldItalic.eot');
|
||||
// src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
|
||||
// font-weight: 600;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-ExtraBold.eot');
|
||||
// src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-ExtraBold.ttf') format('truetype');
|
||||
// font-weight: 800;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Open Sans';
|
||||
// src: url('../fonts/sans/OpenSans-Light.eot');
|
||||
// src: local('Open Sans Light'), local('OpenSans-Light'),
|
||||
// url('../fonts/sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
|
||||
// url('../fonts/sans/OpenSans-Light.woff2') format('woff2'),
|
||||
// url('../fonts/sans/OpenSans-Light.woff') format('woff'),
|
||||
// url('../fonts/sans/OpenSans-Light.ttf') format('truetype');
|
||||
// font-weight: 300;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Regular.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Italic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans';
|
||||
src: url('../fonts/ptsans/PT_Sans-Web-Bolditalic.ttf');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Sans Narrow';
|
||||
src: url('../fonts/ptsans/PTSansNarrow-Regular.ttf');
|
||||
font-style: itnormalalic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PT Sans Narrow';
|
||||
src: url('../fonts/ptsans/PTSansNarrow-Bold.ttf');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -0,0 +1,553 @@
|
|||
input, select, textarea {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
border: solid 1px var(--second-dis);
|
||||
font-family: "PT Sans";
|
||||
font-size: 20px;
|
||||
color: var(--second-act);
|
||||
background-color: #fff;
|
||||
&:hover{
|
||||
border-color: var(--second);
|
||||
outline: none;
|
||||
}
|
||||
&:focus, &:focus-visible {
|
||||
border-color: var(--prime);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
&:disabled{
|
||||
border-color: #EDEDED;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid {
|
||||
input, select, .textbox {
|
||||
border-color: #e60046!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
margin: auto 0;
|
||||
padding: 2px;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--second);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
&:before {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: var(--second-dis);
|
||||
border-radius: 9px;
|
||||
transition: transform 0.3s;
|
||||
content: '';
|
||||
}
|
||||
&.active {
|
||||
background-color:var(--prime);
|
||||
border-color:var(--prime);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
&:hover {
|
||||
background-color:var(--prime-hov);
|
||||
border-color:var(--prime-hov);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
background-color:var(--prime-act);
|
||||
border-color:var(--prime-act);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active):hover {
|
||||
border-color:var(--second-hov);
|
||||
&:before {
|
||||
background-color: var(--second);
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
field-date-single{
|
||||
input{
|
||||
background: url("/assets/images/ico/calendar_grey_24.svg") no-repeat right 12px center ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox+label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
.checkbox+label::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin-right: 0.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_base_24dp.svg");
|
||||
}
|
||||
.checkbox:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_base_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):not(:checked)+label:hover::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):checked+label:hover::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):checked:active+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_active_24dp.svg");
|
||||
}
|
||||
.checkbox:not(:disabled):not(:checked):active+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_active_24dp.svg");
|
||||
}
|
||||
.checkbox:focus:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:focus:not(:checked)+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
|
||||
}
|
||||
.checkbox:disabled:checked+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_disabled_24dp.svg");
|
||||
}
|
||||
.checkbox:disabled:not(:checked)+label::before {
|
||||
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
form-field-document{
|
||||
.area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding: 16px;
|
||||
border: var(--prime) solid 1px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
&.hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
color: var(--second-dis);
|
||||
text-align: center;
|
||||
span {
|
||||
color: var(--orange-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f7f7f7;
|
||||
.label {
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress {
|
||||
height: 4px;
|
||||
background-color: #dfdfdf;
|
||||
overflow: hidden;
|
||||
.fill {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #3ca128;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: $p;
|
||||
align-items: flex-start;
|
||||
.doc-item-header{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $pxs;
|
||||
.info{
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
max-width: 530px;
|
||||
}
|
||||
.description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--second);
|
||||
}
|
||||
file-ico{
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
.doc-item-form{
|
||||
input{
|
||||
margin-bottom: $pxs;
|
||||
}
|
||||
.doc-item-form-bar{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $pxs;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.close{
|
||||
background-color: var(--second);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.update{
|
||||
background-color: var(--prime);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
z-index: 100;
|
||||
border-radius: 12px;
|
||||
padding: $p;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
form-field-image{
|
||||
.area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding: 16px;
|
||||
border: var(--prime) dashed 3px;
|
||||
border-radius: 4px;
|
||||
border-image: url('/assets/images/ico/border_gr.svg') 3 round round;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
&.hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
color: var(--second-dis);
|
||||
text-align: center;
|
||||
span {
|
||||
color: var(--orange-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f7f7f7;
|
||||
.label {
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress {
|
||||
height: 4px;
|
||||
background-color: #dfdfdf;
|
||||
overflow: hidden;
|
||||
.fill {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #3ca128;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
column-gap: 24px;
|
||||
row-gap: 12px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
.preview {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: #0033661F solid 2px;
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.trash {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0 0 24px;
|
||||
row-gap: 8px;
|
||||
|
||||
.caption {
|
||||
color: var(--second);
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
}
|
||||
.value {
|
||||
.error {
|
||||
margin-top: 2px;
|
||||
font-size: 0.875rem;
|
||||
color: #e60046;
|
||||
}
|
||||
}
|
||||
&.readonly {
|
||||
margin: 0 0 12px;
|
||||
.caption {
|
||||
//padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
.caption {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.value {
|
||||
width: 100%;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
auth-page{
|
||||
.authentication {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.logo {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
border-right: #E0E0E0 solid 1px;
|
||||
text-align: center;
|
||||
color: #0071BB;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
max-width: 416px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.authentication {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
}
|
||||
.form {
|
||||
flex-grow: 0;
|
||||
}
|
||||
::ng-deep h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
auth-page, auth-modal{
|
||||
|
||||
|
||||
h2 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin: 0 0 16px;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
margin: 0 0 12px;
|
||||
&:last-child {margin: 0;}
|
||||
label {
|
||||
font-size: 0.875rem;
|
||||
color: #86898E;
|
||||
a {
|
||||
color: #F9B417;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
color: #D91519;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
row-gap: 18px;
|
||||
.remember {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #86898E;
|
||||
}
|
||||
}
|
||||
.forget {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 24px;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.bottom {
|
||||
flex-direction: column-reverse;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
.center{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.space{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
jumbotron{
|
||||
.jumbotron-bg{
|
||||
height: 400px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
max-height: 150vw;
|
||||
.jumbotron-content{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
.user-bar{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
header-user-bar{
|
||||
top: $pl;
|
||||
right: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
.jumbotron-content-center{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
h1{
|
||||
margin: 0;
|
||||
padding: $ps 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rootpage-jumbotron{
|
||||
.jumbotron-content{
|
||||
header-user-bar{
|
||||
top: 100px !important;
|
||||
}
|
||||
.jumbotron-content-center{
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
width: 768px;
|
||||
|
||||
h1{
|
||||
font-size: 80px;
|
||||
line-height: 95px;
|
||||
}
|
||||
h4{
|
||||
text-decoration: underline;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
font-family: PT Sans;
|
||||
margin-top: 16px;
|
||||
a{
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.jumbotron-edit-field{
|
||||
height: 60px;
|
||||
background-color: var(--white);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
.jumbotron-edit-field-row{
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pxs;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
jumbotron .jumbotron-bg.rootpage-jumbotron .jumbotron-content .jumbotron-content-center h1{
|
||||
font-size: 50px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content-sapce{
|
||||
flex-grow: 1;
|
||||
.content-grid{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 40px 0 120px;
|
||||
|
||||
left-content{
|
||||
display: none;
|
||||
}
|
||||
|
||||
right-content{
|
||||
flex-shrink: 0;
|
||||
pages-menu.current{
|
||||
pages-menu-item>.item{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
max-width: 100%;
|
||||
width: $page-width;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.this-root-page{
|
||||
.content-sapce{
|
||||
|
||||
.content-grid{
|
||||
justify-content: center;
|
||||
right-content{
|
||||
display: none;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
.this-root-page{
|
||||
.content-sapce{
|
||||
.content-grid{
|
||||
.main-content{
|
||||
margin-left: 150px;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: var(--prime-act);
|
||||
align-self: stretch;
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 40px 0;
|
||||
margin-top: 48px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
.logo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
a{
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
:hover{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&>div{
|
||||
padding-bottom: 40px;
|
||||
max-width: fit-content;
|
||||
flex-basis: 400px;
|
||||
}
|
||||
>div{
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: -16px;
|
||||
>div {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.icons a{
|
||||
margin-right: 16px;
|
||||
}
|
||||
.menu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--prime);
|
||||
}
|
||||
|
||||
.copyright{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
margin: 40px 0;
|
||||
.nir a{
|
||||
color: #6C6C6C;
|
||||
&:hover{
|
||||
color: #7c7c7c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pages-menu-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
drop-down{
|
||||
margin-left: -24px;
|
||||
}
|
||||
min-height: 24px;
|
||||
>a{
|
||||
margin-top: 4px;
|
||||
&.active {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pages{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
.footer{
|
||||
padding: 40px 24px;
|
||||
.footer-login{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.space{
|
||||
.layout-corral{
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
right-content, left-content{
|
||||
display: none;
|
||||
}
|
||||
.jumbotron-edit-field{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 900px){
|
||||
.space{
|
||||
.layout-corral, .page-corral{
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.copyright{
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
.list.item.default {
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||
.main-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
.left {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 24px;
|
||||
flex-shrink: 0;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
button {
|
||||
margin: 0 12px 0 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
p {
|
||||
margin-bottom: 14px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.yellow, .reviewing {color: #c48723;}
|
||||
.green, .active {color: #669933;}
|
||||
.red, .declined {color: #e60046;}
|
||||
.edit {
|
||||
//background-image: url("~src/assets/images/icons/edit_24dp.svg");
|
||||
}
|
||||
.delete {
|
||||
//background-image: url("~src/assets/images/icons/delete_24dp.svg");
|
||||
}
|
||||
.toggle {
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
//background-image: url("~src/assets/images/icons/arrow_down_24dp.svg");
|
||||
transition: transform 0.2s;
|
||||
&.active {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-bottom: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.list.item.default {
|
||||
padding: 16px;
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
pages-menu{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
pages-menu{
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header{
|
||||
|
||||
background-color: var(--white);
|
||||
.header{
|
||||
height: 80px;
|
||||
margin: 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
pages-menu{
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
&:not(.lvl-0){
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
&.nav{
|
||||
&::after{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top:6px;
|
||||
background-image: url('../images/ico/chevron_right_prime_24.svg');
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
&.selected::after{
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
&:hover::after{
|
||||
background-image: url('../images/ico/chevron_right_prime_hov_24.svg');
|
||||
}
|
||||
}
|
||||
|
||||
>a{
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
&.parent,&.current{
|
||||
>a {border-color: var(--prime);}
|
||||
}
|
||||
|
||||
}
|
||||
.item.nav + pages-menu.selected.lvl-1{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:100px;
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-bottom: 36px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-right{
|
||||
gap: $p;
|
||||
.locales-btn{
|
||||
drop-down {
|
||||
.on{
|
||||
svg{
|
||||
color:var(--dark)
|
||||
}
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $pxxs;
|
||||
}
|
||||
.btn.vnii{
|
||||
border-radius: 0;
|
||||
padding: 8px 24px;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
a.logo{
|
||||
img{
|
||||
width:114px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
slider[side="left"]{
|
||||
.slider-bar{
|
||||
background-color: var(--prime-act);
|
||||
padding: 40px 48px;
|
||||
width: 480px;
|
||||
max-width: 100vw;
|
||||
.header{
|
||||
background-color: var(--prime-act);
|
||||
box-shadow: none;
|
||||
padding: 0 0 28px;
|
||||
.title{
|
||||
ico svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.body{
|
||||
pages-menu{
|
||||
ico{
|
||||
|
||||
margin-top: 20px;
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
a{
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: var(--white);
|
||||
margin: 20px 0 2px 20px;
|
||||
}
|
||||
|
||||
&.top-menu{
|
||||
margin-bottom: 20px;
|
||||
&>pages-menu-item>.item>a{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
}
|
||||
.current{
|
||||
border-bottom: 2px solid var(--prime-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:40px;
|
||||
padding: 20px 0 0 ;
|
||||
border-top: 1px solid var(--prime);
|
||||
a{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.24px;
|
||||
color: #FFF;
|
||||
}
|
||||
locale{
|
||||
img{
|
||||
width: 27px;
|
||||
}
|
||||
.dropdown{
|
||||
left: 48px;
|
||||
top:-24px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
.header{
|
||||
pages-menu, >a.vnii, .header-right{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px){
|
||||
slider[side="left"]{
|
||||
.slider-bar{
|
||||
padding: 40px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
.header{
|
||||
.burger{
|
||||
display: none;
|
||||
}
|
||||
>pages-menu.top-menu{
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
pages-menu-item{
|
||||
font-size: 20px;
|
||||
.item{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sub-menu:not(.current){
|
||||
display:none;
|
||||
}
|
||||
.sub-menu>pages-menu{
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
height: 68px;
|
||||
width: 100vw;
|
||||
background-color: var(--white);
|
||||
left: 0px;
|
||||
top: 104px;
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
z-index:1;
|
||||
pages-menu-item{
|
||||
pages-menu{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
slider-menu{
|
||||
pages-menu:not(.top-menu,.open){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
right-content{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
pages-menu{
|
||||
padding-left: 0;
|
||||
}
|
||||
.item{
|
||||
min-height: 0;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.item.lvl-0{
|
||||
padding: 0;
|
||||
>a{
|
||||
display: none;
|
||||
}
|
||||
&.nav+pages-menu{
|
||||
pages-menu.lvl-2{
|
||||
width: 400px;
|
||||
margin-left: 40px;
|
||||
border-radius: 8px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
padding: 20px;
|
||||
pages-menu{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
a{
|
||||
color: var(--second);
|
||||
&:hover{
|
||||
color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
&.lvl-1{display: none;}
|
||||
&.lvl-2{
|
||||
a{
|
||||
font-family: "PT Sans Narrow";
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
&.current>a,&.parent>a{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
&.current:not(.lvl-2){
|
||||
background-color: #EDEDED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:not(.nav)+pages-menu{
|
||||
width: 360px;
|
||||
margin-left: 40px;
|
||||
border-radius: 8px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
padding: 20px;
|
||||
pages-menu{
|
||||
padding: 0;
|
||||
}
|
||||
.item{
|
||||
a{
|
||||
color: var(--second);
|
||||
&:hover{
|
||||
color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
&.lvl-1{
|
||||
a{
|
||||
font-family: "PT Sans Narrow";
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
&.current>a,&.parent>a{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
&.current:not(.lvl-1){
|
||||
background-color: #EDEDED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&+pages-menu{
|
||||
&:not(.parent,.current){
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rootpage{
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
width: 1360px;
|
||||
z-index: 1;
|
||||
.locale img{
|
||||
border: none;
|
||||
}
|
||||
pages-menu{
|
||||
a{
|
||||
color: #FFF;
|
||||
}
|
||||
.item.nav::after{
|
||||
background-image: url('../images/ico/chevron_right_white_24.svg') !important;
|
||||
}
|
||||
pages-menu{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.locale drop-down{
|
||||
svg{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
header-user-bar{
|
||||
cursor: pointer;
|
||||
.user {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 11px;
|
||||
height: 64px;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 32px;
|
||||
border: 1px solid var(--second-dis);
|
||||
|
||||
.avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
color: var(--prime);
|
||||
border: 1px solid var(--prime);
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
.initials {
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.name{
|
||||
margin: 8px 4px 0 12px;
|
||||
color: var(--second-act);
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.dropdown{
|
||||
right: 16px;
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
drop-down {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.on{
|
||||
svg{
|
||||
color:var(--dark)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media screen and (max-width: 1330px) {
|
||||
.user {
|
||||
.avatar {
|
||||
background-color: var(--white);
|
||||
margin-right: 18px;
|
||||
}
|
||||
.name{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,599 @@
|
|||
page-sections{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:24px;
|
||||
.section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
p+p{
|
||||
padding-top: 16px;
|
||||
}
|
||||
page-section:first-child{
|
||||
.menu .block .up{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
page-section:nth-last-child(2){
|
||||
.menu .block .down{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html-section {
|
||||
ul{
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
>li{
|
||||
list-style: none;
|
||||
line-height: 32px;
|
||||
text-indent: -32px;
|
||||
padding-left: 32px;
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--prime);
|
||||
margin-bottom: 5px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
*+li{
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
ul+*{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
add-section, publications-list{
|
||||
.add{
|
||||
position: relative;
|
||||
margin: 24px 0;
|
||||
|
||||
.toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
.two-lines{
|
||||
flex-grow: 1;
|
||||
height: 4px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
}
|
||||
|
||||
&.active{
|
||||
a{
|
||||
color: var(--prime-act);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown{
|
||||
left:calc( 50% - 125px );
|
||||
top:22px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
.block {
|
||||
ico{
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--second)
|
||||
};
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--second-act)
|
||||
};
|
||||
}
|
||||
}
|
||||
background: var(--light);
|
||||
border: 1px solid var(--second-dis);
|
||||
border-radius: 4px;
|
||||
padding: 8px 24px;
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 24px
|
||||
}
|
||||
}
|
||||
|
||||
cards-section{
|
||||
.cards-add{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
margin-bottom: 40px;
|
||||
ico{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
color: var(--prime) !important;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
color: var(--prime-act) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
cards-section-items{
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
cards-section-item {
|
||||
|
||||
width: 252px;
|
||||
cards-item-persons{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.image{
|
||||
width: 100%;
|
||||
height: 338px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--second-dis);
|
||||
background: url('../images/view-man.svg') var(--white) center / 65% no-repeat;
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--second);
|
||||
}
|
||||
.subtitle{
|
||||
color: var(--dark);
|
||||
}
|
||||
.subtitle{
|
||||
color: var(--dark);
|
||||
}
|
||||
.email{
|
||||
color:var(--prime)
|
||||
}
|
||||
.details a{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cards-item-partners{
|
||||
a{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 252px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--second-dis);
|
||||
background-color: var(--white);
|
||||
overflow: hidden;
|
||||
img{
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.1s;
|
||||
&:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
images-section{
|
||||
display: block;
|
||||
|
||||
.mobile{
|
||||
display: none;
|
||||
}
|
||||
.desctop{
|
||||
display: flex;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
top:24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
img{
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&.tiles{
|
||||
.item{
|
||||
margin-bottom: 16px;
|
||||
img{
|
||||
border: 1px solid var(--second-dis);
|
||||
max-height: 273px;
|
||||
max-width: 273px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item{
|
||||
max-width: 100%;
|
||||
margin-bottom: 32px;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-box{
|
||||
width: 100% !important;
|
||||
height: 75vw !important;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
|
||||
.fullscreen {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: grey;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px){
|
||||
.carousel {
|
||||
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
&.prev{
|
||||
left: 36px;
|
||||
z-index: 2;
|
||||
}
|
||||
&.next{
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
width: 100%;
|
||||
.slide {
|
||||
width: calc( 100vw - 80px );
|
||||
height: calc( (100vw - 80px) * 0.75 );
|
||||
|
||||
img {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.desctop{
|
||||
display: none !important;
|
||||
}
|
||||
.mobile{
|
||||
display: flex !important;
|
||||
}
|
||||
.fullscreen {
|
||||
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.prev{
|
||||
z-index: 5;
|
||||
margin-right: -50px;
|
||||
}
|
||||
.next{
|
||||
z-index: 5;
|
||||
margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
publications-list{
|
||||
.add a, .publication-read-more{
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.items {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
publications-list-item {
|
||||
display: block;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid var(--second-dis);
|
||||
&:last-child{
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
}
|
||||
|
||||
.date{
|
||||
color: var(--second);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
.excerpt{
|
||||
margin-top: $p;
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
}
|
||||
.name{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.publication-read-more{
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: $p;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $p;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
publication-page {
|
||||
|
||||
.date{
|
||||
color: var(--second);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
.name{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top: $p;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $p;
|
||||
};
|
||||
|
||||
.publication-page-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
gellery{
|
||||
.poster{
|
||||
height: 468px;
|
||||
max-width: calc( 100vw - 80px);
|
||||
max-height: calc( (100vw - 80px ) * 0.7 );
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
>img{
|
||||
height: 100%;
|
||||
border: 1px solid var(--second-dis);
|
||||
background-color: var(--second-dis);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.posters{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
.item{
|
||||
width: 72px;
|
||||
height: 52px;
|
||||
border: 1px solid var(--prime);
|
||||
cursor: pointer;
|
||||
:hover{
|
||||
border-color: var(--prime-act);
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
object-position: 50% 20%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gellery-fullscreen{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
top:0;
|
||||
left: 0;
|
||||
background-color: gray;
|
||||
swiper-gellery{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
video-section{
|
||||
cursor: pointer;
|
||||
.video-box{
|
||||
max-width: 720px;
|
||||
height: 405px;
|
||||
max-height: 52vw;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
.poster{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
iframe{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
button {
|
||||
background-color: transparent;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
line-height: 18px;
|
||||
border: 1px solid var(--second);
|
||||
text-align: center;
|
||||
padding: 1px 6px;
|
||||
color: var(--dark);
|
||||
&.active {
|
||||
border-color: var(--prime);
|
||||
color: var(--prime);
|
||||
}
|
||||
&.next {
|
||||
margin-right: 20px;
|
||||
border-color: transparent;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.dots {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent url("~src/assets/images/icons/more_horiz_20dp.svg") no-repeat center;
|
||||
}
|
||||
.count {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
flex-grow: 1;
|
||||
color: var(--black);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.pagination {
|
||||
.next {
|
||||
display: none;
|
||||
}
|
||||
.count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
.registry {
|
||||
.filters{
|
||||
display: flex;
|
||||
gap:24px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background-color: var(--second);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 24px;
|
||||
.name{
|
||||
color: var(--white);
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
gap: $p;
|
||||
svg{
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
drop-down{
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
registry-category {
|
||||
display: block;
|
||||
.bar{
|
||||
background-color: var(--light);
|
||||
border-top: 1px solid var(--second-dis);
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
.name{
|
||||
color: var(--dark);
|
||||
}
|
||||
.menu{
|
||||
svg{
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
|
||||
.buttons {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
padding: 16px 0 24px;
|
||||
|
||||
.search {
|
||||
flex-grow: 1;
|
||||
label {
|
||||
margin-bottom: 2px;
|
||||
color: var(--second);
|
||||
}
|
||||
input {
|
||||
height: 40px;
|
||||
padding: 8px 52px 8px 16px;
|
||||
border: 1px solid (--second-dis);
|
||||
border-radius: 12px;
|
||||
background: #ffffff url('~src/assets/images/icons/search_24dp.svg') calc(100% - 12px) 50% no-repeat;
|
||||
}
|
||||
}
|
||||
.advanced {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registry-entries {
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
registry-category{
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
margin-right: auto;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.expand {
|
||||
margin-left: 48px;
|
||||
button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: rotateZ(180deg);
|
||||
transition: transform 0.3s;
|
||||
&.less {transform: rotateZ(0);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.items {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
registry-entry {
|
||||
display: block;
|
||||
padding: 16px 24px;
|
||||
border-bottom: #E8E8E8 solid 1px;
|
||||
&:first-child {
|
||||
border-top: #E8E8E8 solid 1px;
|
||||
}
|
||||
.main {
|
||||
.name {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.menu-entry{
|
||||
display: inline-flex;
|
||||
gap: 24px;
|
||||
}
|
||||
.toggle {
|
||||
margin-left: auto;
|
||||
button {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: transparent url('~src/assets/images/icons/expand_less_20.svg') 50% 50% no-repeat;
|
||||
transform: rotateZ(180deg);
|
||||
transition: transform 0.3s;
|
||||
&.less {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.state {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
border-radius: 10px;
|
||||
background-color: #777777;
|
||||
color: #ffffff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
&.active {background-color: #28A814;}
|
||||
&.suspended,&.cancelled {background-color: #D9235F;}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 16px;
|
||||
&:last-child {margin-bottom: 0}
|
||||
&.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pagination{
|
||||
display: block;
|
||||
padding: 0 24px;
|
||||
&:first-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
registry-entry {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
.slider-bar {
|
||||
|
||||
|
||||
max-width: 720px;
|
||||
|
||||
background-color: #ffffff;
|
||||
|
||||
&.right-side{
|
||||
animation: slide-from-right 0.3s;
|
||||
right: 0;
|
||||
box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
&.left-side{
|
||||
animation: slide-from-left 0.3s;
|
||||
left: 0;
|
||||
box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
|
||||
z-index: 110;
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.title {
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
ico{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.stepper {
|
||||
padding: var(--l) 0 0;
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--l);
|
||||
.item {
|
||||
width: 150px;
|
||||
flex-shrink: 1;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
.num {
|
||||
position: relative;
|
||||
width: calc(100% - 13px);
|
||||
height: var(--l);
|
||||
padding: 4px 6px;
|
||||
margin: 0 0 4px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: #E8E9EB;
|
||||
color: #86898E;
|
||||
font-weight: bold;
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 13px;
|
||||
height: 100%;
|
||||
background: transparent url('~src/assets/images/icons/step_upcoming.svg') 100% 50% no-repeat;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
&.active {
|
||||
.num {
|
||||
background-color: #B88E12;
|
||||
color: #ffffff;
|
||||
&:after {
|
||||
background-image: url('~src/assets/images/icons/step_active.svg');
|
||||
}
|
||||
}
|
||||
.name {
|
||||
color: #B88E12;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.finished {
|
||||
.num {
|
||||
background-color: rgba(184, 142, 18, 0.2);
|
||||
color: #B88E12;
|
||||
&:after {
|
||||
background-image: url('~src/assets/images/icons/step_finished.svg');
|
||||
}
|
||||
}
|
||||
.name {
|
||||
color: #B88E12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
||||
|
||||
form-frame, object-filters{
|
||||
margin: 36px 24px;
|
||||
display: block;
|
||||
|
||||
.group .title {
|
||||
margin: 16px 0;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
form-field{
|
||||
margin-bottom: 16px;
|
||||
.field {
|
||||
.caption{
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
input, textarea, .combobox, .area p{
|
||||
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
input{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
[footer] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
button{
|
||||
font-family: PT Sans;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 171.429% */
|
||||
letter-spacing: 0.56px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.left {
|
||||
.reset {
|
||||
color: #6C6C6C;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notice {
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
button {
|
||||
margin-left: var(--l);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-overlay {
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.37);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.slider-bar {
|
||||
.header, .footer {
|
||||
padding: var(--m);
|
||||
}
|
||||
|
||||
[footer] {
|
||||
.left {
|
||||
font-size: 14px;
|
||||
}
|
||||
.right {
|
||||
button {
|
||||
padding: var(--s) var(--m);
|
||||
margin-left: var(--m);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
table.default {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
td {
|
||||
padding: 6px 0;
|
||||
&.caption {
|
||||
width: 232px;
|
||||
padding-right: 24px;
|
||||
color: #86898E;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.value {
|
||||
vertical-align: top;
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lined {
|
||||
tr {
|
||||
td {
|
||||
border-bottom: #e0e0e0 solid 1px;
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
table.default {
|
||||
tr {
|
||||
display: block;
|
||||
td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
b {
|
||||
display: block;
|
||||
padding: 14px 0 0;
|
||||
}
|
||||
&.caption {
|
||||
width: 100%;
|
||||
margin: 14px 0 6px;
|
||||
}
|
||||
&.value {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lined tr td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.tabs.default {
|
||||
display: flex;
|
||||
margin-bottom: 32px;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
box-shadow: inset 0px -1px var(--second-dis);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
&.simple {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
>div{
|
||||
margin-right: -1px;
|
||||
button {
|
||||
padding: 8px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: var(--prime) solid 1px;
|
||||
color: var(--prime);
|
||||
font-family: PT Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
cursor: pointer;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:last-child {
|
||||
|
||||
}
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background-color: var(--prime);
|
||||
border-color: var(--prime)
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--prime-act);
|
||||
border-color: var(--prime-act);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue