logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
SMMP/public_html/css/container.scss

669 lines
12 KiB
SCSS
Executable File
Raw Blame History

@import 'constants';
#WRAPPER > #CONTAINER{
/* [1] Section (contenu)
=========================================================*/
& > section{
display: none;
flex-grow: 1;
}
// @active + .list
& > section.active{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
&.contain-check-table{
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
.inline-box{
flex: 1 1 20%;
height: auto;
min-height: 10em;
}
.inline-row{
flex: 0 0 2.3em;
}
// Barre de recherche
.searchbar{
display: inline-block;
position: relative;
// width: calc( 100% - 2*1em - 2*1em );
flex: calc( 100% - 2*1em - 2*1em );
// height: 1em;
margin: 1em;
padding: .5em 1em;
padding-left: 2em;
border-radius: 3px;
border: 1px solid #b1b1b1;
// box-shadow: 0 0 1px #b7b7b7;
background: #fff url('/src/static/sub-menu-side/search@b1b1b1.svg') .5em center no-repeat;
background-size: 1em;
transition: border .4s ease-in-out;
&:hover,
&:focus{
border-color: $form-search-color;
}
}
// Erreur
.error, .in-dev{
display: inline-block;
position: relative;
// width: calc( 100% - 2*1em - 2*1em );
height: 1em;
margin: 1em;
padding: 1em;
border-radius: 3px;
border: 1px solid $form-invalid-color;
background: $form-invalid-color;
color: #fff;
text-shadow: 1px 1px darken($form-invalid-color, 10);
}
.in-dev{
border-color: $form-search-color;
background: $form-search-color;
text-shadow: 1px 1px darken($form-search-color, 10);
}
}
/* [2] INLINE-BOX pour afficher les listes de donnees
=========================================================*/
& > section > .inline-box,
& > section > .inline-row{
display: inline-block;
position: relative;
// width: calc( 50% - 2*1em - 2*1em );
flex: calc( 50% - 2*1em - 2*1em );
height: auto;
margin: 1em;
padding: 1em;
border-radius: 3px;
box-shadow: 0 0 1px #b7b7b7;
background-color: #fff;
// Lors de la recherche, quand on veut en masquer
&.hidden{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
&.selected{
border: 1px solid #7362ff;
transition: box-shadow .2s ease-in-out;
&:hover{
box-shadow: 2px 2px 7px #aaa;
}
}
/* (0) Etat des machines */
.state{
display: inline-block;
width: .7em;
height: .7em;
margin-right: .3em;
border-radius: 50% / 50%;
background-color: #ddd;
&[data-state='stopped']{ background-color: #ddd; }
&[data-state='started']{ background-color: #22E07B; }
&[data-state='signaled']{ background-color: #2E50C0; }
&[data-state='locked']{ background-color: #EA460A; }
&[data-state='detached']{
background: url('/src/static/sub-menu-side/sync@aaaaaa.svg') center center no-repeat;
background-size: auto 100%;
}
}
/* (1) Titre de l'element */
.title{
display: inline-block;
font-size: 1.15em;
font-weight: bold;
color: darken($theme-color, 2);
white-space: nowrap;
& > span{
font-size: .8em;
color: #333;
}
}
/* (2) Code RFID */
/* (3) Adresse mail */
.motheure,
.code,
.option,
.mail{
display: block;
margin: 1em;
color: #333;
white-space: nowrap;
// svg (icone)
svg{
display: inline-block;
position: relative;
margin-left: .5em;
margin-right: .5em;
margin-bottom: -.6em;
width: 1.5em;
height: 2em;
pointer-events: none;
path#stylisable{
fill: #333 !important;
pointer-events: none;
}
path#stroke-stylisable{
stroke: #333 !important;
pointer-events: none;
}
}
}
/* (4) Groupes */
.groups,
.option{
display: block;
margin: 1em;
color: #333;
// white-space: nowrap;
// svg (icone)
svg{
display: inline-block;
position: relative;
margin-left: .5em;
margin-right: .5em;
margin-bottom: -.6em;
width: 1.5em;
height: 2em;
pointer-events: none;
path{
fill: #333 !important;
pointer-events: none;
}
}
& > span:not(.ignore),
& > span.ignore > span{
display: inline-block;
position: relative;
padding: .1em .5em;
margin-right: calc( .4em + 2em );
margin-bottom: .5em;
border-radius: 3px 0 0 3px;
border: 1px solid #bdbdbd;
box-shadow: inset 0 0 2px #fafafa;
background-color: #f9f9f9;
color: #333;
cursor: default;
&.add-permission,
&.add-group,
&.add-member,
&.add-extension{
border-radius: 3px;
cursor: pointer;
& > div.dropdown{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex: 100%;
justify-content: space-between;
position: absolute;
top: calc( 100% + 5px );
left: 0;
width: 12em;
height: 500%;
border-radius: 3px;
overflow: hidden;
overflow-y: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
z-index: 100;
& > span{
padding: .5em;
padding-left: 1em;
flex: 2em 1 1;
cursor: pointer;
&:hover{
background-color: #F8F8F8;
}
}
}
}
& > span.rem-group,
& > span.icon-permission,
& > span.rem-permission,
& > span.rem-member,
& > span.rem-extension{
display: block;
position: absolute;
top: -1px;
left: 100%;
width: 1em;
height: calc( 100% - .1em - 2px );
padding: .12em .5em;
border-radius: 0 3px 3px 0;
border: 1px solid #bdbdbd;
box-shadow: inset 0 0 2px #fafafa;
background: url('/src/static/sub-menu-side/remove.svg') center center no-repeat;
background-size: auto 70%;
background-color: #f9f9f9;
color: inherit;
cursor: pointer;
&:hover{
background-image: url('/src/static/sub-menu-side/remove@#{$rd-form-invalid-color}.svg');
}
}
& > span.icon-permission,
& > span.icon-permission:hover{
border-color: #ddd;
background-color: #eee;
cursor: default;
background-image: url('/src/static/sub-menu-side/permission.svg');
}
}
}
.option > span.ignore > span{
border-radius: 3px;
margin-right: .4em;
}
/* (5) Lien vers la modification */
.link_edit,
.link_remove{
display: inline-block;
float: right;
position: relative;
width: 1em;
height: 1em;
margin-left: 1em;
cursor: pointer;
// if in a list like history/view
&.list{
float: none;
margin-left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
& > svg{
width: 100%;
height: 100%;
fill: #ddd !important;
transition: fill .4s ease-in-out;
pointer-events: none;
}
&:hover{
& > svg{
fill: $form-neutral-color !important;
}
}
}
/* (6) Lien vers la suppression */
.link_remove{
&:hover{
& > svg{
fill: $form-invalid-color !important;
}
}
}
}
/* [2-2] INLINE-ROW pour afficher des lignes
=========================================================*/
& > section.fstart{
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.searchbar{
flex: 0 0 0;
width: calc( 100% - 2*2em );
}
}
& > section > .inline-row{
width: calc( 100% - 4em - 2*1em );
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
// Sur la même ligne répartis équitablement
& > span{
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 100% 1 1;
border-left: 1px solid #ddd;
text-align: center;
&:first-child{
border-left: 0;
}
}
button{
flex: auto;
width: 5em;
}
}
/* [4] Tableau à cocher
=========================================================*/
article.check-table{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 3px;
border: 1px solid #ddd;
& > div{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
flex: 100%;
padding: .8em 0;
color: #333;
background: #f8f8f8;
border-bottom: 1px solid #eee;
transition: background .2s ease-in-out;
&:nth-child(2n){
background: #fdfdfd;
}
overflow: hidden;
& > span{
flex: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
/* (1) Gestion du checkbox hack */
input[type='checkbox']{ display: none; }
input[type='checkbox'] + label[for]{
display: inline-block;
position: absolute;
width: 1.2em;
height: 1.2em;
// border-radius: 50% / 50%;
background: url('/src/static/container/checkbox@999999.svg') center center no-repeat;
background-size: 100% auto;;
transition: box-shadow .2s ease-in-out;
cursor: pointer;
}
input[type='checkbox']:checked + label[for]{
background-image: url('/src/static/container/checkbox@checked@007dd8.svg');
}
}
}
}
/* [5] Timeline SVG
=========================================================*/
article.timeline.container{
display: block;
position: absolute;
width: calc( 100vw - #{$menu-side-width} - #{$sub-menu-side-width} - 11em );
flex: 1em;
overflow: hidden;
// overflow-x: auto;
svg.timeline{
/* (1) svg circles -> set right transform-origin */
& circle.timeline{
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
transition: transform .2s ease-in-out;
/* (2) Set cursor to pointer */
&.around{
cursor: pointer;
/* (3) Dispatch event to next nodes */
&:hover + .center{ // center node
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
&:hover + .center + image + .below{ // below node
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
/* (4) Remove center circle event */
&.center{
-webkit-pointer-events: none;
pointer-events: none;
}
/* (5) Set colors according to action type */
&.around, &.center, &.below{
&.start{ fill: #2cde8b; }
&.stop{ fill: #3a3a3a; }
&.lock{ fill: #e04343; }
&.unlock{ fill: #af1c1c; }
&.signal{ fill: #3258d8; }
&.unsignal{ fill: #2041ab; }
}
/* (6) Make around circles a bit transparent */
&.around{ opacity: .6; }
}
/* (7) Avoid icons inside center circles to block :hover */
image{
-webkit-pointer-events: none;
pointer-events: none;
}
/* (8) Default 'text' font*/
text{
fill: #444;
font-size: 14px;
font-family: 'Open Sans';
&.bold{
font-size: 16px;
font-weight: bold;
}
&.start{ fill: #2cde8b; }
&.stop{ fill: #3a3a3a; }
&.lock{ fill: #e04343; }
&.unlock{ fill: #af1c1c; }
&.signal{ fill: #3258d8; }
&.unsignal{ fill: #2041ab; }
}
}
/* (9) Timeline infobox */
div.timeline.infobox{
display: none;
position: absolute;
top: 80px;
left: 0;
width: auto;
height: auto;
padding: .5em 1em;
border: 1px solid #b1b6c0;
border-radius: 3px;
background: #d8deea;
color: #444;
&.active{
display: block;
}
}
}
}
Reference in New Issue View Git Blame Copy Permalink