feat: rework menus
This commit is contained in:
Kazhnuz
parent
edacd881c3
commit
3bf7672b06
8 changed files with 171 additions and 160 deletions
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<section class="container-big">
|
||||
<div class="columns">
|
||||
|
||||
|
||||
|
|
|
|||
117
css/style.css
117
css/style.css
|
|
@ -603,7 +603,7 @@ header h1 {
|
|||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75em;
|
||||
padding: 0.75rem;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
.container-big {
|
||||
padding-left: 64px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
#wrapper {
|
||||
background-color: #fdf6e3;
|
||||
|
|
@ -673,7 +679,7 @@ ul.social li a:hover {
|
|||
*
|
||||
*
|
||||
*/
|
||||
.card {
|
||||
.card, .menu {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
background-color: #eee8d5;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
|
|
@ -681,22 +687,23 @@ ul.social li a:hover {
|
|||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
/* Menu handling */
|
||||
}
|
||||
.card .card-body {
|
||||
padding: 0;
|
||||
.card-body, .menu-body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.card .card-body:not(:last-child) {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.card-header {
|
||||
.card-header, .menu-header {
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 0.75rem !important;
|
||||
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;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
padding: 0px;
|
||||
|
|
@ -705,8 +712,39 @@ ul.social li a:hover {
|
|||
font-weight: 600;
|
||||
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;
|
||||
background-color: #eee8d5;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
|
|
@ -715,15 +753,17 @@ ul.social li a:hover {
|
|||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.smallcard-header, .toast-header, .menu-header {
|
||||
.smallcard-header, .toast-header {
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 0.75rem !important;
|
||||
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;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
padding: 0px;
|
||||
|
|
@ -733,23 +773,6 @@ ul.social li a:hover {
|
|||
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 */
|
||||
.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;
|
||||
|
|
@ -956,21 +979,11 @@ p .btn:last-child {
|
|||
}
|
||||
|
||||
.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;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.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-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.label:before, label.label:before, a.label:before, .chip:before, a.chip:before {
|
||||
|
|
@ -983,13 +996,23 @@ p .btn:last-child {
|
|||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.label:focus, label.label:focus, a.label:focus, .chip:focus, a.chip:focus {
|
||||
outline: none;
|
||||
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);
|
||||
|
||||
.menu-label {
|
||||
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 {
|
||||
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);
|
||||
outline: none;
|
||||
.menu-label:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.1875rem;
|
||||
right: -0.1875rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
.navbar .btn-link {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
48
index.html
48
index.html
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container" id="page-content">
|
||||
<section class="container-big" id="page-content">
|
||||
<div class="columns">
|
||||
|
||||
|
||||
|
|
@ -210,44 +210,16 @@ In id suscipit elit.</code></pre>
|
|||
</div>
|
||||
|
||||
<aside class="sidebar column col-3">
|
||||
<ul class="menu menu-primary">
|
||||
<li class="menu-header"><i class="fa fa-folder"></i> Catégories</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">
|
||||
Images
|
||||
</a>
|
||||
<div class="menu-badge">
|
||||
<label class="label label-primary">2</label>
|
||||
<section class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
|
||||
<a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
|
||||
<a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
|
||||
<div class="menu-divider">LIENS</div>
|
||||
<a href="#" class="menu-element">Images <span class="menu-label label-primary">2</span></a>
|
||||
</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="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>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
60
preview.html
60
preview.html
|
|
@ -45,12 +45,12 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<section class="container-big">
|
||||
<div class="columns">
|
||||
|
||||
<aside class="sidebar column col-3">
|
||||
|
||||
<section class="card card-info" style="margin-bottom:2em;">
|
||||
<section class="card card-info">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-info"></i> #Inktober2017
|
||||
</div>
|
||||
|
|
@ -61,55 +61,47 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu menu-green" style="margin-bottom:2em;">
|
||||
<div class="menu-header bg-green">
|
||||
<section class="card card-green">
|
||||
<div class="card-header bg-green">
|
||||
<i class="fa fa-fw fa-feed"></i> Dernières publications
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<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>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
#Inktober2017 - Test
|
||||
</a>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">#Inktober2017 - Test</a>
|
||||
<a href="#" class="menu-element">#Inktober2017 - Test</a>
|
||||
<a href="#" class="menu-element">#Inktober2017 - Test</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu menu-secondary" style="margin-bottom:2em;">
|
||||
<div class="menu-header">
|
||||
<section class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-folder-open"></i> Catégories
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">
|
||||
Cras justo odio
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
<span class="menu-label label-primary">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Images</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Canard</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Test</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Fak u garon</a>
|
||||
<a href="#" class="menu-element">Images</a>
|
||||
<a href="#" class="menu-element">Canard</a>
|
||||
<a href="#" class="menu-element">Test</a>
|
||||
<a href="#" class="menu-element">Fak u garon</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="menu menu-orange" style="margin-bottom:2em;">
|
||||
<div class="menu-header">
|
||||
<section class="card menu-orange">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-calendar-o"></i> Archive
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
2017
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">
|
||||
2017 <span class="menu-label label-primary">14</span>
|
||||
</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
|
||||
<span class="badge badge-primary badge-pill">2</span>
|
||||
<span class="menu-label label-primary">2</span>
|
||||
</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
|
||||
<span class="badge badge-primary badge-pill">3</span>
|
||||
<span class="menu-label label-primary">3</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,16 @@ $button_small: 0.375rem;
|
|||
}
|
||||
|
||||
.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
|
||||
|
|
|
|||
|
|
@ -25,13 +25,15 @@ $card-smallpad: 0.75rem;
|
|||
padding: $size/2;
|
||||
padding-bottom: $size/2!important;
|
||||
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 {
|
||||
font-size:1em;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-light;;
|
||||
color:$color-light;
|
||||
font-weight:600;
|
||||
line-height:1.5em;
|
||||
}
|
||||
|
|
@ -43,55 +45,62 @@ $card-smallpad: 0.75rem;
|
|||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card, .menu {
|
||||
@include card($card-bigpad);
|
||||
|
||||
.card-body {
|
||||
padding:0;
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
&-body {
|
||||
padding:0!important;
|
||||
margin:0!important;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
}
|
||||
|
||||
/* Menu handling */
|
||||
|
||||
&-menu {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smallcard, .toast, .menu {
|
||||
.smallcard, .toast {
|
||||
@include card($card-smallpad);
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu handling */
|
||||
|
||||
.menu {
|
||||
li {
|
||||
@include border-radius();
|
||||
padding:0.2em 0em 0.2em;
|
||||
margin:0;
|
||||
|
||||
&.menu-item {
|
||||
:hover {
|
||||
background-color:rgba(0,0,0,0.1);
|
||||
color: $color-dark;
|
||||
}
|
||||
|
||||
.menu-badge {
|
||||
:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 0.4em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* COLORIZE CARDS and TOASTS */
|
||||
|
||||
.card, .smallcard, .menu {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ header h1 {
|
|||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75em;
|
||||
padding: 0.75rem;
|
||||
color: $color-light;
|
||||
a {
|
||||
color: $color-light;
|
||||
|
|
@ -68,6 +68,12 @@ header h1 {
|
|||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
padding-left:64px;
|
||||
padding-right:64px;
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
|
|
|
|||
Reference in a new issue