348 lines
9.6 KiB
SCSS
348 lines
9.6 KiB
SCSS
|
.sizerboard{
|
||
|
|
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
left : 0em;
|
||
|
|
width : 100%;
|
||
|
|
height : 100%;
|
||
|
|
overflow : hidden;
|
||
|
|
|
||
|
|
&,input,button,textarea{font-family : $font-family;}
|
||
|
|
|
||
|
|
[data-visible=false]{display : none;}
|
||
|
|
|
||
|
|
[data-icon]::before{
|
||
|
|
font-family : $font-family;
|
||
|
|
margin-right : .4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a[href]{text-decoration : none;}
|
||
|
|
a[href],[onmousedown],[onmouseup],[onclick]{
|
||
|
|
color : $color-primary;
|
||
|
|
cursor : pointer;
|
||
|
|
transition-property : color;
|
||
|
|
transition-duration : $transition-out;
|
||
|
|
&:hover,&:focus{
|
||
|
|
color : $color-secondary;
|
||
|
|
transition-duration : $transition-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
[type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
|
||
|
|
width : 100%;
|
||
|
|
box-sizing : border-box;
|
||
|
|
}
|
||
|
|
button,[type=button],[type=submit],[type=reset],[rol=button],[type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
|
||
|
|
color : $color-primary;
|
||
|
|
font-size : 1em;
|
||
|
|
border : .1em solid $color-primary;
|
||
|
|
box-shadow : 0em 0em .4em inset $color-primary;
|
||
|
|
border-radius : $border-radius;
|
||
|
|
transition-property : color,border-color,box-shadow;
|
||
|
|
transition-duration : $transition-out;
|
||
|
|
&:hover,&:focus{
|
||
|
|
color : $color-secondary;
|
||
|
|
border-color : $color-secondary;
|
||
|
|
box-shadow : 0em 0em .4em inset $color-secondary;
|
||
|
|
transition-duration : $transition-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
button,[type=button],[type=submit],[type=reset],[rol=button]{cursor : pointer;}
|
||
|
|
a[href],[onmousedown],[onmouseup],[onclick]{
|
||
|
|
outline : none;
|
||
|
|
&[disabled],&[readonly],&[data-selected=true]{&,&:hover{
|
||
|
|
color : $color-grey;
|
||
|
|
cursor : default;
|
||
|
|
}}
|
||
|
|
}
|
||
|
|
button,[type=button],[type=submit],[type=reset],[rol=button],[type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
|
||
|
|
outline : none;
|
||
|
|
box-sizing : border-box;
|
||
|
|
&[disabled],&[readonly],&[data-selected=true]{&,&:hover,&:focus{
|
||
|
|
color : $color-grey;
|
||
|
|
border-color : $color-grey;
|
||
|
|
cursor : default;
|
||
|
|
box-shadow : 0em 0em .4em inset $color-grey;
|
||
|
|
}}
|
||
|
|
}
|
||
|
|
|
||
|
|
label{
|
||
|
|
padding : 0em .4em;
|
||
|
|
font-weight : 900;
|
||
|
|
white-space : nowrap;
|
||
|
|
border : .1em solid $color-grey;
|
||
|
|
border-radius : $border-radius;
|
||
|
|
box-shadow : 0em 0em .4em inset $color-grey;
|
||
|
|
&>*{font-size : .9em;}
|
||
|
|
&::after{content : ":";}
|
||
|
|
}
|
||
|
|
|
||
|
|
.group{
|
||
|
|
display : table;
|
||
|
|
margin : 0em;
|
||
|
|
padding : 0em;
|
||
|
|
list-style-type : none;
|
||
|
|
border-collapse : collapse;
|
||
|
|
li{
|
||
|
|
display : table-cell;
|
||
|
|
&>*{
|
||
|
|
border-radius : 0em;
|
||
|
|
padding : .1em .4em;
|
||
|
|
padding-block : none;
|
||
|
|
padding-inline : none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&>:first-child>*{border-radius : $border-radius 0em 0em $border-radius;}
|
||
|
|
&>:last-child>*{border-radius : 0em $border-radius $border-radius 0em;}
|
||
|
|
}
|
||
|
|
|
||
|
|
header,main,footer{
|
||
|
|
position : absolute;
|
||
|
|
left : 0em;
|
||
|
|
width : 100%;
|
||
|
|
}
|
||
|
|
header,footer{
|
||
|
|
background-color : $color-fore;
|
||
|
|
color : $color-back;
|
||
|
|
}
|
||
|
|
|
||
|
|
header{
|
||
|
|
top : 0em;
|
||
|
|
height : $header-height;
|
||
|
|
z-index : 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
main{
|
||
|
|
top : $header-height;
|
||
|
|
bottom : $footer-height;
|
||
|
|
background-color : $color-back;
|
||
|
|
color : $color-fore;
|
||
|
|
z-index : 10;
|
||
|
|
overflow : hidden;
|
||
|
|
&>form{
|
||
|
|
display : block;
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
height : 100%;
|
||
|
|
overflow : hidden;
|
||
|
|
&>fieldset{
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
left : 0em;
|
||
|
|
right : 0em;
|
||
|
|
bottom : 0em;
|
||
|
|
margin : $box-margin;
|
||
|
|
padding : 0em;
|
||
|
|
border : none;
|
||
|
|
&>legend{
|
||
|
|
display : block;
|
||
|
|
width : 100%;
|
||
|
|
font-size : 1.2em;
|
||
|
|
font-weight : 900;
|
||
|
|
border-bottom : .15em solid $color-fore;
|
||
|
|
}
|
||
|
|
&>p{
|
||
|
|
margin : 0em;
|
||
|
|
padding : 1em 0em;
|
||
|
|
font-size : .85em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
footer{
|
||
|
|
bottom : 0em;
|
||
|
|
height : $footer-height;
|
||
|
|
z-index : 30;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-menu{
|
||
|
|
position : absolute;
|
||
|
|
bottom : 0em;
|
||
|
|
left : 50%;
|
||
|
|
margin-bottom : .2em;
|
||
|
|
margin-left : -20em;
|
||
|
|
width : 40em;
|
||
|
|
text-align : center;
|
||
|
|
ul{
|
||
|
|
margin : 0em;
|
||
|
|
padding : 0em;
|
||
|
|
list-style-type : none;
|
||
|
|
}
|
||
|
|
li{
|
||
|
|
display : inline-block;
|
||
|
|
margin : 0em 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
h1{
|
||
|
|
margin : 0em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.projects-menu{
|
||
|
|
left : 0em;
|
||
|
|
width : $projects-menu-width;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-box{
|
||
|
|
position : absolute;
|
||
|
|
top : 7.6em;
|
||
|
|
width : 100%;
|
||
|
|
&>:first-child>*{border-bottom-left-radius : 0em;}
|
||
|
|
&>:last-child>*{border-bottom-right-radius : 0em;}
|
||
|
|
&>:nth-child(2){width : 100%;}
|
||
|
|
label{
|
||
|
|
font-weight : 400;
|
||
|
|
&::after{content : "";}
|
||
|
|
}
|
||
|
|
[data-icon]{
|
||
|
|
&::before{margin : 0em;}
|
||
|
|
&+[data-i18n]{display : none;}
|
||
|
|
}
|
||
|
|
button[data-i18n=search]{display : none;}
|
||
|
|
&+nav{
|
||
|
|
position : absolute;
|
||
|
|
top : 9em;
|
||
|
|
left : 0em;
|
||
|
|
bottom : 0em;
|
||
|
|
width : 100%;
|
||
|
|
border : .1em solid $color-fore;
|
||
|
|
background-color : $color-back;
|
||
|
|
overflow : auto;
|
||
|
|
box-sizing : border-box;
|
||
|
|
border-radius : 0em 0em $border-radius $border-radius;
|
||
|
|
box-shadow : .1em .1em .2em $color-grey;
|
||
|
|
&>ul{
|
||
|
|
margin : 0em;
|
||
|
|
padding : 0em;
|
||
|
|
list-style-type : none;
|
||
|
|
// &>:last-child{border-radius : 0em 0em $border-radius $border-radius;}
|
||
|
|
}
|
||
|
|
li{
|
||
|
|
padding : .2em .4em;
|
||
|
|
border-radius : 0em;
|
||
|
|
box-sizing : border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.draw-box{
|
||
|
|
left : $projects-menu-width;
|
||
|
|
right : 0em;
|
||
|
|
.group{
|
||
|
|
position : absolute;
|
||
|
|
top : 2.6em;
|
||
|
|
left : 0em;
|
||
|
|
&>:first-child>button{border-bottom-left-radius : 0em;}
|
||
|
|
&>:last-child>button{border-bottom-right-radius : 0em;}
|
||
|
|
}
|
||
|
|
.fields{
|
||
|
|
position : absolute;
|
||
|
|
top : 4em;
|
||
|
|
left : 0em;
|
||
|
|
bottom : 0em;
|
||
|
|
width : 100%;
|
||
|
|
border : .1em solid $color-fore;
|
||
|
|
background-color : $color-back;
|
||
|
|
box-sizing : border-box;
|
||
|
|
border-radius : 0em $border-radius $border-radius $border-radius;
|
||
|
|
box-shadow : .1em .1em .2em $color-fore;
|
||
|
|
&>section{&,&>*{
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
left : 0em;
|
||
|
|
width : 100%;
|
||
|
|
height : 100%;
|
||
|
|
}}
|
||
|
|
&>section>*{border-radius : 0em $border-radius $border-radius $border-radius;}
|
||
|
|
textarea{
|
||
|
|
font-family : $font-mono;
|
||
|
|
color : $color-fore;
|
||
|
|
resize : none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.curtain{
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
left : 0em;
|
||
|
|
width : 100%;
|
||
|
|
height : 100%;
|
||
|
|
background-color : $color-back;
|
||
|
|
opacity : .8;
|
||
|
|
}
|
||
|
|
&:not([data-selected=null])>.curtain{display : none;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions-box{
|
||
|
|
position : absolute;
|
||
|
|
right : 0em;
|
||
|
|
bottom : 0em;
|
||
|
|
border : none;
|
||
|
|
&>legend,&>p{display : none;}
|
||
|
|
ul{
|
||
|
|
position : absolute;
|
||
|
|
right : 0em;
|
||
|
|
bottom : 0em;
|
||
|
|
margin : .5em;
|
||
|
|
padding : 0em;
|
||
|
|
list-style-type : none;
|
||
|
|
overflow : visible;
|
||
|
|
&>li{
|
||
|
|
display : "block";
|
||
|
|
position : relative;
|
||
|
|
text-align : right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
li{margin : .2em 0em;}
|
||
|
|
button{
|
||
|
|
min-width : 2em;
|
||
|
|
height : 2em;
|
||
|
|
text-align : right;
|
||
|
|
white-space : nowrap;
|
||
|
|
box-sizing : border-box;
|
||
|
|
border-radius : 1em;
|
||
|
|
span{
|
||
|
|
font-size : 1.3em;
|
||
|
|
font-weight : 900;
|
||
|
|
}
|
||
|
|
[data-icon]{
|
||
|
|
display : inline-block;
|
||
|
|
position : absolute;
|
||
|
|
top : 0em;
|
||
|
|
right : 0em;
|
||
|
|
width : 1.5em;
|
||
|
|
text-align : center;
|
||
|
|
margin : .2em 0em;
|
||
|
|
&::before{margin : 0em;}
|
||
|
|
}
|
||
|
|
[data-i18n]{
|
||
|
|
display : block;
|
||
|
|
padding-right : 0em;
|
||
|
|
width : 0em;
|
||
|
|
overflow : hidden;
|
||
|
|
opacity : 0;
|
||
|
|
transition-property : padding-right,width,opacity;
|
||
|
|
transition-duration : $transition-out;
|
||
|
|
}
|
||
|
|
&:hover>[data-i18n]{
|
||
|
|
padding-right : 1.3em;
|
||
|
|
width : 6em;
|
||
|
|
opacity : 1;
|
||
|
|
transition-duration : $transition-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.licences{
|
||
|
|
display : block;
|
||
|
|
width : 100%;
|
||
|
|
text-align : center;
|
||
|
|
font-size : .85em;
|
||
|
|
font-weight : 900;
|
||
|
|
img{
|
||
|
|
width : auto;
|
||
|
|
height : 1em;
|
||
|
|
}
|
||
|
|
a>*{vertical-align : middle;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|