ptut-vhost/webpack/scss/header.scss

156 lines
2.5 KiB
SCSS

@import 'constants';
#HEADER{
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc( #{$header-height-noratio} - 1px );
background-color: $header-bg;
border-bottom: 1px solid #e3e7eb;
// flex properties
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: #{$header-font-size-ratio}em;
z-index: 150;
/* (1) Version management */
& > div.departments,
& > div.versions{
/* (1.1) Version status */
& > div.current{
display: block;
position: relative;
margin-left: 1em;
padding: .5em 1em;
padding-left: 2em;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 2px #fff;
transition: box-shadow .2s ease-in-out;
cursor: pointer;
// hover animation
&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }
// color state
&:before{
content: '';
display: block;
position: absolute;
top: calc( 50% - .7em/2 );
left: calc( 1em/2 + .7em/2 );
width: .7em;
height: .7em;
border-radius: 50%;
background-color: $form-invalid-color;
}
&[data-id='-1']:before{
background-color: $form-valid-color;
}
}
/* (1.2) Version dialog (to switch to another) */
& > div.department-dialog,
& > div.version-dialog{
display: block;
position: absolute;
margin-top: 0;
margin-left: 0;
&.department-dialog{ margin-left: 1em; }
// padding: 1em .5em;
border: 1px solid #ddd;
border-top: 0;
border-radius: 0 0 3px 3px;
background-color: #fff;
// box-shadow: 0 2px 2px #ddd;
overflow: hidden;
/* (1.2.1) version items */
& > span{
display: block;
position: relative;
padding: .5em 1em;
padding-left: 2em;
background-color: #fff;
transition: background-color .2s ease-in-out;
cursor: pointer;
// hover animation
&:hover{ background-color: darken(#fff, 5%); }
// color state
&:before{
content: '';
display: block;
position: absolute;
top: calc( 50% - .7em/2 );
left: calc( 1em/2 + .7em/2 );
width: .7em;
height: .7em;
border-radius: 50%;
background-color: $form-invalid-color;
}
&[data-id='-1']:before{
background-color: $form-valid-color;
}
}
}
}
/* (2) Department | Version layout */
& > div.departments > div.current{
margin-right: 0;
padding-left: 1em;
border-radius: 3px 0 0 3px;
&:before{ content: none; }
}
& > div.versions > div.current{
margin-left: 0;
border-radius: 0 3px 3px 0;
border-left: 0;
}
}