ptut-vhost/webpack/scss/header.scss

220 lines
4.0 KiB
SCSS
Raw Permalink Normal View History

@import 'constants';
#HEADER{
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
2018-03-16 14:25:05 +00:00
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;
2018-03-16 14:25:05 +00:00
font-size: #{$header-font-size-ratio}em;
z-index: 150;
/* (1) left-side managers */
& > div.departments,
& > div.versions,
& > div.global-export{
/* (1.1) Current status */
& > div.current{
display: block;
position: relative;
margin-left: 1em;
padding: .5em 1em;
padding-left: .7em;
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%); }
// current: EXPORT / CREATE / EDIT / REMOVE icons
span.export,
span.create,
span.edit,
span.remove{
display: inline-block;
position: relative;
top: .2em;
width: 1em;
height: 1em;
border-radius: 3px;
background: center center no-repeat;
background-size: 80% auto;
&.export{
background-image: url('/asset/svg/fiche.svg@b8c0c8');
background-size: 100% auto;
&:hover{
background-image: url('/asset/svg/fiche.svg@#{$rd-form-invalid-color}');
}
}
&.create{
background-image: url('/asset/svg/plus.svg@b8c0c8');
&:hover{
background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
}
}
&.edit{
background-image: url('/asset/svg/a.svg@b8c0c8');
&:hover{
background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
}
}
&.remove{
background-image: url('/asset/svg/cross.svg@b8c0c8');
&:hover{
background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}');
}
}
&:last-child{
margin-right: .5em;
}
}
&:hover > span.export{
background-image: url('/asset/svg/fiche.svg@#{$rd-form-invalid-color}');
}
overflow: hidden;
// editable input
& > input[type='text']{
display: inline-block;
position: relative;
width: 100%;
max-width: 10em;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
// background-color: #f00;
font-size: inherit;
color: inherit;
}
}
/* (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;
&>:first-child{ border-top: 1px solid #ddd; }
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%); }
// switch+create icons
&:before{
content: '';
display: block;
position: absolute;
top: calc( 50% - 1em/2 );
left: calc( .5em/2 + 1em/2 );
2018-05-09 13:57:47 +00:00
width: 1em;
height: 1em;
background: url('/asset/svg/switch.svg@#{$rd-form-primary-color}') center center no-repeat;
background-size: auto 80%;
}
// create icon specifications
&[data-id='-1']{
2018-05-09 13:57:47 +00:00
&:before{
background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
background-size: auto 60%;
}
2018-05-09 13:57:47 +00:00
}
}
}
}
/* (2) Department | Version | Export layout */
& > div.departments > div.current{
margin-right: 0;
padding-left: 1em;
border-radius: 3px 0 0 3px;
}
& > div.versions > div.current{
margin-left: 0;
border-radius: 0;
border-left: 0;
}
& > div.global-export > div.current{
margin-left: 0;
border-radius: 0 3px 3px 0;
border-left: 0;
}
}