[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

View File

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

View File

@ -137,7 +137,6 @@
flex: 0 0 calc( 2em - 2*.5em ); flex: 0 0 calc( 2em - 2*.5em );
margin: 1em .5em; margin: 1em .5em;
margin-left: 0;
font-weight: bold; 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;
}
}
} }
} }

View File

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

View File

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