mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[scss.**] menu color invertion + minmod + fixed margin after search-bar

This commit is contained in:
xdrm-brackets 2018-03-13 19:23:22 +01:00
parent 9d495e2c5c
commit 3a8178a352
4 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webpack/scss/constants.scss
View File

@ -1,5 +1,5 @@
// BACKGROUND COLOR
$bg-color: #eef2f5;
$bg-color: darken(#eef2f5, 5%);
$primary-color: #545f75;
$primary-color: #54627c;
$secondary-color: #b8c0c8;
@ -25,10 +25,10 @@ $rd-form-search-color: '1d74e5';
$rd-form-invalid-color: 'ea4b35';
// Menu
$menu-bg: #fff;
$menu-bg: #333;
$menu-item-inactive: 'b9c4ce';
$menu-item-width: 3em;
$menu-width: #{$menu-item-width + 1em};
$menu-item-width: 2.5em;
$menu-width: 4em;
// Header
$header-bg: #fff;

30
webpack/scss/container.scss
View File

@ -137,7 +137,6 @@
flex: 0 0 calc( 2em - 2*.5em );
margin: 1em .5em;
margin-left: 0;
font-weight: bold;
@ -672,6 +671,35 @@
}
/* (9) Card tag list */
& > div.taglist{
display: flex;
margin-top: 1em;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
/* (9.1) inner tags */
& > span{
padding: .2em .5em;
margin-right: .5em;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #f9f9f9;
color: #999;
font-size: .8em;
}
}
}
}

4
webpack/scss/header.scss
View File

@ -13,9 +13,9 @@
border-bottom: 1px solid #e3e7eb;
// flex properties
flex-direction: row;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-items: center;
z-index: 150;

15
webpack/scss/menu.scss
View File

@ -25,6 +25,7 @@
// flex properties
flex-direction: column;
justify-content: space-around;
// justify-content: flex-start;
align-items: center;
z-index: 101;
@ -37,13 +38,13 @@
width: $menu-item-width;
height: $menu-item-width;
margin-top: .5em;
margin: .5em;
background: $menu-bg center center no-repeat;
background-size: auto 50%;
transition: all .1s ease-in-out;
transition: background-position .1s ease-in-out;
cursor: pointer;
@ -58,20 +59,16 @@
&[data-icon='login']{ background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}'); }
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}'); }
/* (2) On hover */
&:hover, &.active{
background-size: auto 55%;
}
&[data-icon='home']:hover, &[data-icon='home'].active{ background-image: url('/asset/svg/home.svg@10d197'); }
&[data-icon='teacher']:hover, &[data-icon='teacher'].active{ background-image: url('/asset/svg/teacher.svg@edb910'); }
&[data-icon='ue']:hover, &[data-icon='ue'].active{ background-image: url('/asset/svg/ue.svg@1fc9ef'); }
&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@545f75'); }
&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@dab245'); }
&[data-icon='fiche']:hover, &[data-icon='fiche'].active{ background-image: url('/asset/svg/fiche.svg@ea4C3a'); }
&[data-icon='login']:hover, &[data-icon='login'].active{ background-image: url('/asset/svg/login.svg@dab245'); }
&[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); }
/* (3) Label */
/* (2) Label */
&:after{
content: attr(data-label);
@ -100,7 +97,7 @@
z-index: -1;
}
/* (4) Display label on item hover */
/* (3) Display label on item hover */
&:hover:after{
display: block;
left: calc( 100% + 1em );