kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feat: rework menus

Browse source
This commit is contained in:
Kazhnuz 2019-10-17 14:04:20 +02:00
parent edacd881c3
commit 3bf7672b06
8 changed files with 171 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
color-test.html
View file

@ -45,7 +45,7 @@
</div> </div>
</header> </header>
<section class="container"> <section class="container-big">
<div class="columns"> <div class="columns">

117
css/style.css
View file

@ -603,7 +603,7 @@ header h1 {
.navbar { .navbar {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
padding: 0.75em; padding: 0.75rem;
color: #fdf6e3; color: #fdf6e3;
} }
.navbar a { .navbar a {
@ -617,6 +617,12 @@ header h1 {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
} }
/* ------------------ CONTAINERS ------------------- */
.container-big {
padding-left: 64px;
padding-right: 64px;
}
/* ------------------ PAGE ------------------- */ /* ------------------ PAGE ------------------- */
#wrapper { #wrapper {
background-color: #fdf6e3; background-color: #fdf6e3;
@ -673,7 +679,7 @@ ul.social li a:hover {
* *
* *
*/ */
.card { .card, .menu {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
background-color: #eee8d5; background-color: #eee8d5;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
@ -681,22 +687,23 @@ ul.social li a:hover {
margin: 0; margin: 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 1.5rem; padding: 1.5rem;
/* Menu handling */
} }
.card .card-body { .card-body, .menu-body {
padding: 0; padding: 0 !important;
margin: 0 !important;
} }
.card .card-body:not(:last-child) { .card-header, .menu-header {
padding-bottom: 1.5rem;
}
.card-header {
font-size: 1.1em; font-size: 1.1em;
font-weight: 600; font-weight: 600;
border-radius: 0; border-radius: 0;
padding: 0.75rem; padding: 0.75rem;
padding-bottom: 0.75rem !important; padding-bottom: 0.75rem !important;
margin-left: -3rem; margin-left: -3rem;
margin-bottom: 0.75rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
} }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 { .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 {
font-size: 1em; font-size: 1em;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
padding: 0px; padding: 0px;
@ -705,8 +712,39 @@ ul.social li a:hover {
font-weight: 600; font-weight: 600;
line-height: 1.5em; line-height: 1.5em;
} }
.card-menu, .menu-menu {
display: flex;
flex-direction: column;
}
.card-menu .menu-element, .menu-menu .menu-element {
display: flex;
line-height: 1.5rem;
padding-right: 0.75rem;
padding-left: 0.325rem;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
margin: 0;
justify-content: space-between;
}
.card-menu a, .menu-menu a {
text-decoration: none;
color: #d33682;
background-color: transparent;
}
.card-menu a:hover, .menu-menu a:hover {
text-decoration: none;
color: #d33682;
background-color: rgba(0, 0, 0, 0.1);
}
.card-menu .menu-divider, .menu-menu .menu-divider {
position: relative;
left: -0.325rem;
font-weight: 600;
padding-top: 0.325rem;
padding-bottom: 0.325rem;
}
.smallcard, .toast, .menu { .smallcard, .toast {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
background-color: #eee8d5; background-color: #eee8d5;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
@ -715,15 +753,17 @@ ul.social li a:hover {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 0.75rem; padding: 0.75rem;
} }
.smallcard-header, .toast-header, .menu-header { .smallcard-header, .toast-header {
font-size: 1.1em; font-size: 1.1em;
font-weight: 600; font-weight: 600;
border-radius: 0; border-radius: 0;
padding: 0.75rem; padding: 0.75rem;
padding-bottom: 0.75rem !important; padding-bottom: 0.75rem !important;
margin-left: -3rem; margin-left: -3rem;
margin-bottom: 0.75rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
} }
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 { .smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10 {
font-size: 1em; font-size: 1em;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
padding: 0px; padding: 0px;
@ -733,23 +773,6 @@ ul.social li a:hover {
line-height: 1.5em; line-height: 1.5em;
} }
/* Menu handling */
.menu li {
border-radius: 0px 0px 0px 0px;
padding: 0.2em 0em 0.2em;
margin: 0;
}
.menu li.menu-item :hover {
background-color: rgba(0, 0, 0, 0.1);
color: #002b36;
}
.menu li.menu-item .menu-badge :hover {
background-color: transparent;
}
.menu li .label {
padding: 0 0.4em 0;
}
/* COLORIZE CARDS and TOASTS */ /* COLORIZE CARDS and TOASTS */
.card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header { .card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header {
background-color: #268bd2 !important; background-color: #268bd2 !important;
@ -956,21 +979,11 @@ p .btn:last-child {
} }
.label, label.label, a.label, .chip, a.chip { .label, label.label, a.label, .chip, a.chip {
padding: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
margin: 0.1875rem;
margin-top: 0.125rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
position: relative; position: relative;
z-index: 1; z-index: 1;
overflow: visible; overflow: visible;
} padding-left: 0.375rem;
.label:hover, .label:active, .label:focus, a:hover > .label, a:active > .label, a:focus > .label, label.label:hover, label.label:active, label.label:focus, a:hover > label.label, a:active > label.label, a:focus > label.label, a.label:hover, a.label:active, a.label:focus, a:hover > a.label, a:active > a.label, a:focus > a.label, .chip:hover, .chip:active, .chip:focus, a:hover > .chip, a:active > .chip, a:focus > .chip, a.chip:hover, a.chip:active, a.chip:focus, a:hover > a.chip, a:active > a.chip, a:focus > a.chip { padding-right: 0.375rem;
text-decoration: none; text-decoration: none;
} }
.label:before, label.label:before, a.label:before, .chip:before, a.chip:before { .label:before, label.label:before, a.label:before, .chip:before, a.chip:before {
@ -983,13 +996,23 @@ p .btn:last-child {
z-index: -1; z-index: -1;
transform: skewX(-15deg); transform: skewX(-15deg);
} }
.label:focus, label.label:focus, a.label:focus, .chip:focus, a.chip:focus {
outline: none; .menu-label {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); position: relative;
z-index: 1;
overflow: visible;
padding-left: 0.375rem;
padding-right: 0.375rem;
} }
.label:focus:before, label.label:focus:before, a.label:focus:before, .chip:focus:before, a.chip:focus:before { .menu-label:before {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3); content: " ";
outline: none; position: absolute;
top: 0;
left: -0.1875rem;
right: -0.1875rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
} }
.navbar .btn-link { .navbar .btn-link {

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

48
index.html
View file

@ -45,7 +45,7 @@
</div> </div>
</header> </header>
<section class="container" id="page-content"> <section class="container-big" id="page-content">
<div class="columns"> <div class="columns">
@ -210,44 +210,16 @@ In id suscipit elit.</code></pre>
</div> </div>
<aside class="sidebar column col-3"> <aside class="sidebar column col-3">
<ul class="menu menu-primary"> <section class="card card-primary">
<li class="menu-header"><i class="fa fa-folder"></i> Catégories</li> <div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
<li class="menu-item"> <div class="card-menu">
<a href="#"> <a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
Images <a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
</a> <a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
<div class="menu-badge"> <div class="menu-divider">LIENS</div>
<label class="label label-primary">2</label> <a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
</div> </div>
</li> </section>
<li class="menu-item">
<a href="#">
Images
</a>
<div class="menu-badge">
<label class="label label-primary">2</label>
</div>
</li>
<li class="menu-item">
<a href="#">
Images
</a>
<div class="menu-badge">
<label class="label label-primary">2</label>
</div>
</li>
<li class="divider" data-content="LINKS">
</li>
<li class="menu-item">
<a href="#">
Images
</a>
<div class="menu-badge">
<label class="label label-primary">2</label>
</div>
</li>
</ul>
</aside> </aside>
</div> </div>

60
preview.html
View file

@ -45,12 +45,12 @@
</div> </div>
</header> </header>
<section class="container"> <section class="container-big">
<div class="columns"> <div class="columns">
<aside class="sidebar column col-3"> <aside class="sidebar column col-3">
<section class="card card-info" style="margin-bottom:2em;"> <section class="card card-info">
<div class="card-header"> <div class="card-header">
<i class="fa fa-fw fa-info"></i>&nbsp; #Inktober2017 <i class="fa fa-fw fa-info"></i>&nbsp; #Inktober2017
</div> </div>
@ -61,55 +61,47 @@
</div> </div>
</section> </section>
<section class="menu menu-green" style="margin-bottom:2em;"> <section class="card card-green">
<div class="menu-header bg-green"> <div class="card-header bg-green">
<i class="fa fa-fw fa-feed"></i>&nbsp; Dernières publications <i class="fa fa-fw fa-feed"></i>&nbsp; Dernières publications
</div> </div>
<div class="list-group list-group-flush"> <div class="card-menu">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> <a href="#" class="menu-element">#Inktober2017 - Test</a>
#Inktober2017 - Test <a href="#" class="menu-element">#Inktober2017 - Test</a>
</a> <a href="#" class="menu-element">#Inktober2017 - Test</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
#Inktober2017 - Test
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
#Inktober2017 - Test
</a>
</div> </div>
</section> </section>
<section class="menu menu-secondary" style="margin-bottom:2em;"> <section class="card card-secondary">
<div class="menu-header"> <div class="card-header">
<i class="fa fa-fw fa-folder-open"></i>&nbsp; Catégories <i class="fa fa-fw fa-folder-open"></i>&nbsp; Catégories
</div> </div>
<div class="list-group list-group-flush"> <div class="card-menu">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> <a href="#" class="menu-element">
Cras justo odio Cras justo odio
<span class="badge badge-primary badge-pill">14</span> <span class="menu-label label-primary">14</span>
</a> </a>
<a href="#" class="list-group-item list-group-item-action">Images</a> <a href="#" class="menu-element">Images</a>
<a href="#" class="list-group-item list-group-item-action">Canard</a> <a href="#" class="menu-element">Canard</a>
<a href="#" class="list-group-item list-group-item-action">Test</a> <a href="#" class="menu-element">Test</a>
<a href="#" class="list-group-item list-group-item-action">Fak u garon</a> <a href="#" class="menu-element">Fak u garon</a>
</div> </div>
</section> </section>
<section class="card menu-orange">
<section class="menu menu-orange" style="margin-bottom:2em;"> <div class="card-header">
<div class="menu-header">
<i class="fa fa-fw fa-calendar-o"></i>&nbsp; Archive <i class="fa fa-fw fa-calendar-o"></i>&nbsp; Archive
</div> </div>
<div class="list-group list-group-flush"> <div class="card-menu">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> <a href="#" class="menu-element">
2017 2017 <span class="menu-label label-primary">14</span>
<span class="badge badge-primary badge-pill">14</span>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> <a href="#" class="menu-element">
2016 2016
<span class="badge badge-primary badge-pill">2</span> <span class="menu-label label-primary">2</span>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> <a href="#" class="menu-element">
2015 2015
<span class="badge badge-primary badge-pill">3</span> <span class="menu-label label-primary">3</span>
</a> </a>
</div> </div>
</section> </section>

11
scss/_buttons.scss
View file

@ -96,7 +96,16 @@ $button_small: 0.375rem;
} }
.label, label.label, a.label, .chip, a.chip { .label, label.label, a.label, .chip, a.chip {
@include button($button_small); @include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
.menu-label {
@include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
} }
// NAVBAR SPECIAL BUTTONS // NAVBAR SPECIAL BUTTONS

67
scss/_cards.scss
View file

@ -25,13 +25,15 @@ $card-smallpad: 0.75rem;
padding: $size/2; padding: $size/2;
padding-bottom: $size/2!important; padding-bottom: $size/2!important;
margin-left: -$size*2; margin-left: -$size*2;
margin-bottom:0.75rem;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em; font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3); text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px; padding:0px;
margin:0px; margin:0px;
color:$color-light;; color:$color-light;
font-weight:600; font-weight:600;
line-height:1.5em; line-height:1.5em;
} }
@ -43,52 +45,59 @@ $card-smallpad: 0.75rem;
} }
} }
.card { .card, .menu {
@include card($card-bigpad); @include card($card-bigpad);
.card-body { &-body {
padding:0; padding:0!important;
&:not(:last-child) { margin:0!important;
padding-bottom: 1.5rem;
}
} }
&-header { &-header {
@include card-header($card-bigpad); @include card-header($card-bigpad);
} }
}
.smallcard, .toast, .menu {
@include card($card-smallpad);
&-header {
@include card-header($card-bigpad);
}
}
/* Menu handling */ /* Menu handling */
.menu { &-menu {
li { display:flex;
@include border-radius(); flex-direction: column;
padding:0.2em 0em 0.2em; .menu-element {
display:flex;
line-height:1.5rem;
padding-right:0.75rem;
padding-left:0.325rem;
padding-top:0.325rem;
padding-bottom:0.325rem;
margin:0; margin:0;
justify-content: space-between;
&.menu-item {
:hover {
background-color:rgba(0,0,0,0.1);
color: $color-dark;
} }
.menu-badge { a {
:hover { text-decoration:none;
color: $color-violet;
background-color:transparent; background-color:transparent;
&:hover {
text-decoration:none;
color: $color-violet;
background-color:rgba(0,0,0,0.1);
}
}
.menu-divider {
position: relative;
left: -0.325rem;
font-weight: 600;
padding-top:0.325rem;
padding-bottom:0.325rem;
} }
} }
} }
.label { .smallcard, .toast {
padding: 0 0.4em 0; @include card($card-smallpad);
} &-header {
@include card-header($card-bigpad);
} }
} }

8
scss/_global.scss
View file

@ -57,7 +57,7 @@ header h1 {
.navbar { .navbar {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
padding: 0.75em; padding: 0.75rem;
color: $color-light; color: $color-light;
a { a {
color: $color-light; color: $color-light;
@ -68,6 +68,12 @@ header h1 {
.dropdown-menu { .dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow; box-shadow: $narrow-shadow, $inset-shadow;
} }
/* ------------------ CONTAINERS ------------------- */
.container-big {
padding-left:64px;
padding-right:64px;
}
/* ------------------ PAGE ------------------- */ /* ------------------ PAGE ------------------- */