feat: rework menus
This commit is contained in:
parent
edacd881c3
commit
3bf7672b06
8 changed files with 171 additions and 160 deletions
|
@ -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
117
css/style.css
|
@ -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 {
|
||||||
|
|
File diff suppressed because one or more lines are too long
48
index.html
48
index.html
|
@ -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
60
preview.html
|
@ -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> #Inktober2017
|
<i class="fa fa-fw fa-info"></i> #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> Dernières publications
|
<i class="fa fa-fw fa-feed"></i> 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> Catégories
|
<i class="fa fa-fw fa-folder-open"></i> 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> Archive
|
<i class="fa fa-fw fa-calendar-o"></i> 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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,55 +45,62 @@ $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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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);
|
@include card($card-smallpad);
|
||||||
&-header {
|
&-header {
|
||||||
@include card-header($card-bigpad);
|
@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 */
|
/* COLORIZE CARDS and TOASTS */
|
||||||
|
|
||||||
.card, .smallcard, .menu {
|
.card, .smallcard, .menu {
|
||||||
|
|
|
@ -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 ------------------- */
|
||||||
|
|
||||||
|
|
Reference in a new issue