CSS: manage sidebar-columns-gutter since #sidebar margin (#70656)
Instead #sidebar > .cell margin
This commit is contained in:
parent
d245aebe87
commit
744559306d
|
@ -4,7 +4,7 @@ $font-family: Roboto, sans-serif;
|
|||
$font-size: 1em;
|
||||
$mobile-limit: 1100px;
|
||||
|
||||
$sidebar-width: 400px;
|
||||
$sidebar-width: 380px;
|
||||
|
||||
$primary-color: #001c76;
|
||||
$secondary-color: #e6007e;
|
||||
|
|
|
@ -160,6 +160,7 @@ div#header {
|
|||
#sidebar {
|
||||
max-width: 100%;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
#columns {
|
||||
display: flex;
|
||||
|
|
|
@ -44,7 +44,7 @@ $back-top-icon-character: "\f062";
|
|||
// Header
|
||||
$header-logo-size: 250px 60px;
|
||||
$toplinks-style: none;
|
||||
$sidebar-width: 30%;
|
||||
$sidebar-width: 26%;
|
||||
$nav-after-image: false;
|
||||
|
||||
$nav-color: $gray;
|
||||
|
|
|
@ -27,7 +27,7 @@ $very-small-limit: 35em;
|
|||
$columns-gutter: 60rem / $base-font;
|
||||
// $sidebar-columns-gutter: 120em / $base-font;
|
||||
$sidebar-columns-gutter: $columns-gutter;
|
||||
$sidebar-width: (320rem / $base-font) + $sidebar-columns-gutter;
|
||||
$sidebar-width: 320rem / $base-font;
|
||||
|
||||
$font-size: 100% / ( 16 / $base-font );
|
||||
$font-family: Lato, sans-serif;
|
||||
|
|
|
@ -29,7 +29,7 @@ $notification_info_color: #e4e4de;
|
|||
$notification_error_color: #cc3333;
|
||||
|
||||
$sidebar-position: left;
|
||||
$sidebar-width: 275px;
|
||||
$sidebar-width: 255px;
|
||||
|
||||
$title-weight: bold;
|
||||
$title-transform: uppercase;
|
||||
|
|
|
@ -41,7 +41,7 @@ $font-size: 93.75%;
|
|||
$width: 95rem;
|
||||
$mobile-limit: 1024px;
|
||||
$mobile-width: none;
|
||||
$sidebar-width: 25%;
|
||||
$sidebar-width: 22%;
|
||||
$sidebar-min-width: 18rem;
|
||||
$sidebar-columns-gutter: 40px;
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ $title-weight: bold;
|
|||
$title-color: #ffffff;
|
||||
$title-background: $primary-color;
|
||||
|
||||
$sidebar-width: 410px;
|
||||
$sidebar-width: 390px;
|
||||
$sidebar-position: right;
|
||||
|
||||
$nav-after-image: false;
|
||||
|
|
|
@ -573,7 +573,6 @@ div#registration-blocks {
|
|||
}
|
||||
|
||||
div#sidebar {
|
||||
margin-right: 2.5em;
|
||||
h1, h2, h3 {
|
||||
@include after-line($purple);
|
||||
}
|
||||
|
|
|
@ -2,6 +2,8 @@ $primary-color: #f4f7fa;
|
|||
$purple: #88446b;
|
||||
$green: #cbd05d;
|
||||
$width: 1316px;
|
||||
$sidebar-width: 300px;
|
||||
$sidebar-columns-gutter: 2.5em;
|
||||
|
||||
$font-family: Montserrat, sans-serif;
|
||||
$font-color: #000;
|
||||
|
|
|
@ -230,13 +230,6 @@ div#sidebar {
|
|||
}
|
||||
}
|
||||
|
||||
.gru-content #sidebar div.cell {
|
||||
margin-right: 40px;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
#content div.trackingcodeinputcell {
|
||||
background: url(img/trackingcode.png) 2rem 1rem no-repeat;
|
||||
border: 1px solid #c6c6c6;
|
||||
|
|
|
@ -3,6 +3,8 @@ $primary-color: #da3838;
|
|||
$font-size: 1.25em;
|
||||
$font-family: "Barlow Condensed", sans-serif;
|
||||
$link-color: $primary-color;
|
||||
$sidebar-width: 260px;
|
||||
$sidebar-columns-gutter: 40px;
|
||||
|
||||
$width: 1200px;
|
||||
$nav-mobile-limit: 50000px;
|
||||
|
|
|
@ -93,7 +93,6 @@ div#nav {
|
|||
|
||||
#sidebar {
|
||||
box-shadow: 3px 3px 20px 0px #dedede;
|
||||
margin-right: 2.5em;
|
||||
}
|
||||
|
||||
div.linkcell.has-asset-picture {
|
||||
|
|
|
@ -2,6 +2,7 @@ $primary-color: #ae2217;
|
|||
$secondary-color: #f4f4f4;
|
||||
$tertiary-color: #0f183b;
|
||||
$width: 1200px;
|
||||
$sidebar-columns-gutter: 2.5em;
|
||||
|
||||
$border-radius: 3px;
|
||||
$font-size: 1.25em;
|
||||
|
|
|
@ -30,7 +30,7 @@ $cell-entry-hover-color: #FFFFFF;
|
|||
$cell-entry-hover-effect: top-to-bottom;
|
||||
$cell-entry-hover-background: #999999;
|
||||
$cell-entry-border: 1px solid transparent;
|
||||
$sidebar-width: 250px;
|
||||
$sidebar-width: 230px;
|
||||
$menucell-hover-border: 5px solid #999;
|
||||
|
||||
$button-background: #CCC;
|
||||
|
|
|
@ -320,6 +320,7 @@ main {
|
|||
|
||||
.gru-content #sidebar {
|
||||
background-color: $gray-light;
|
||||
padding: $columns-gutter;
|
||||
padding-top: 2rem;
|
||||
|
||||
& + #columns-wrapper {
|
||||
|
|
|
@ -23,8 +23,8 @@ $width: 1120px;
|
|||
$mobile-limit: 64em;
|
||||
$very-small-limit: 560px;
|
||||
$columns-gutter: 1.5rem;
|
||||
$sidebar-columns-gutter: $columns-gutter;
|
||||
$sidebar-width: calc(240em / 17 + #{$sidebar-columns-gutter});
|
||||
$sidebar-columns-gutter: 0;
|
||||
$sidebar-width: calc(265em / 17);
|
||||
$grid-gutter: $columns-gutter;
|
||||
|
||||
$nav-color: $blue;
|
||||
|
|
|
@ -7,7 +7,7 @@ $footer-background: #666666 !default;
|
|||
$footer-full-width-background: true !default;
|
||||
$footer-color: white !default;
|
||||
$footer-link-color: $link-color !default;
|
||||
$sidebar-width: 300px !default;
|
||||
$sidebar-width: 280px !default;
|
||||
$sidebar-max-width: $sidebar-width !default;
|
||||
$sidebar-min-width: 0 !default;
|
||||
$sidebar-position: left !default;
|
||||
|
@ -109,14 +109,12 @@ div#main-content {
|
|||
@if $sidebar-position == right {
|
||||
order: 1;
|
||||
}
|
||||
div.cell {
|
||||
@if $sidebar-position == left {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-columns-gutter;
|
||||
} @else {
|
||||
margin-left: $sidebar-columns-gutter;
|
||||
margin-right: 0px;
|
||||
}
|
||||
@if $sidebar-position == left {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-columns-gutter;
|
||||
} @else {
|
||||
margin-left: $sidebar-columns-gutter;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -132,20 +132,7 @@ a:hover {
|
|||
//
|
||||
// LAYOUT
|
||||
//
|
||||
// sidebar <-> columns gutter
|
||||
@media ($min-desktop-viewport) {
|
||||
.gru-content {
|
||||
#sidebar {
|
||||
div.cell {
|
||||
@if $sidebar-position == left {
|
||||
margin-right: $sidebar-columns-gutter;
|
||||
} @else {
|
||||
margin-left: $sidebar-columns-gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3cols layout
|
||||
.theme-3cols-layout {
|
||||
@media ($min-desktop-viewport) {
|
||||
|
|
|
@ -37,7 +37,7 @@ $font-family: $source-sans;
|
|||
$link-decoration: underline;
|
||||
$sidebar-position: right;
|
||||
$sidebar-max-width: 400px;
|
||||
$sidebar-width: 26%;
|
||||
$sidebar-width: 21%;
|
||||
$sidebar-min-width: 290px;
|
||||
|
||||
$nav-background: $cyan-dark;
|
||||
|
|
|
@ -35,7 +35,7 @@ $footer-link-color: black;
|
|||
$footer-menucell-separator: none;
|
||||
|
||||
$sidebar-position: left;
|
||||
$sidebar-width: 265px;
|
||||
$sidebar-width: 245px;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-weight: bold;
|
||||
|
|
|
@ -25,7 +25,7 @@ $width: 1200em / $base-font;
|
|||
$mobile-limit: 64em;
|
||||
$very-small-limit: 35em;
|
||||
$columns-gutter: 30px;
|
||||
$sidebar-width: 310px + $columns-gutter;
|
||||
$sidebar-width: 310px;
|
||||
|
||||
$primary-color: $cyan;
|
||||
$body-background: white;
|
||||
|
|
|
@ -12,7 +12,7 @@ $primary-color: $darkblue;
|
|||
$link-color: $blue;
|
||||
$width: 1120px;
|
||||
$pwa-desktop-nav-width: 635px;
|
||||
$sidebar-width: 270px;
|
||||
$sidebar-width: 250px;
|
||||
$sidebar-position: right;
|
||||
$body-background: white;
|
||||
|
||||
|
|
|
@ -28,7 +28,7 @@ $width: 1220rem / 15;
|
|||
$mobile-limit: 64em;
|
||||
$very-small-limit: 35em;
|
||||
$columns-gutter: 2rem;
|
||||
$sidebar-width: 20rem;
|
||||
$sidebar-width: 18rem;
|
||||
$sidebar-position: right;
|
||||
|
||||
$nav-background: transparent;
|
||||
|
|
|
@ -115,8 +115,6 @@ div.gru-nav > ul {
|
|||
#sidebar {
|
||||
background-color: $white-blue;
|
||||
padding-top: 2em;
|
||||
// change Sidebar gutter with columns
|
||||
margin-right: 20px;
|
||||
.gru-content & div.cell {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
|
|
|
@ -35,7 +35,7 @@ $mobile-limit: 64em;
|
|||
$very-small-limit: 35em;
|
||||
$mobile-width: 50em;
|
||||
$columns-gutter: 2rem;
|
||||
$sidebar-width: calc(33% + 1rem);
|
||||
$sidebar-width: calc(33% - 1rem);
|
||||
|
||||
$primary-color: $blue;
|
||||
$link-color: $red;
|
||||
|
|
|
@ -177,7 +177,7 @@ div#page {
|
|||
|
||||
div#sidebar {
|
||||
border-right: 2px solid #d6d6d6;
|
||||
margin-right: 30px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.cell.wcsformsofcategorycell {
|
||||
|
|
|
@ -29,6 +29,7 @@ $footer-color: #646464;
|
|||
$category-toggled-background: $primary-color;
|
||||
$cell-border: none;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-columns-gutter: 30px;
|
||||
$grid-gutter: 0px;
|
||||
$widget-border: 2px solid #b4b4b4;
|
||||
$wcs-steps-spacing: 0.5rem;
|
||||
|
|
|
@ -61,7 +61,7 @@ $link-color: $primary-color;
|
|||
$width: 1280px;
|
||||
$columns-gutter: 2rem;
|
||||
$grid-gutter: 2rem;
|
||||
$sidebar-width: 33%;
|
||||
$sidebar-width: calc(33% - #{$columns-gutter });
|
||||
$sidebar-min-width: 300px;
|
||||
|
||||
$header-logo-size: 137px 30px;
|
||||
|
|
|
@ -31,11 +31,6 @@
|
|||
}
|
||||
|
||||
#content div#sidebar {
|
||||
order: 2;
|
||||
div.cell {
|
||||
margin-left: 20px;
|
||||
margin-right: 0;
|
||||
}
|
||||
div.cell.dashboard-title {
|
||||
margin-top: 0;
|
||||
h3 {
|
||||
|
|
|
@ -3,6 +3,7 @@ $secondary-color: #f05923;
|
|||
$ternary-color: #F7EFE2;
|
||||
|
||||
$width: 1150px;
|
||||
$sidebar-position: right;
|
||||
$mobile-limit: 800px;
|
||||
$font-size: 0.875em;
|
||||
$font-family: "Roboto", arial, helvetica, sans-serif;
|
||||
|
|
|
@ -15,7 +15,7 @@ $primary-color: $green;
|
|||
$mobile-limit: 800px;
|
||||
$very-small-limit: 360px;
|
||||
$width: 1280px;
|
||||
$sidebar-width: 400px;
|
||||
$sidebar-width: 380px;
|
||||
$sidebar-position: right;
|
||||
$body-background: #eee;
|
||||
$title-font-family: "Geometric 231", $font-family;
|
||||
|
|
|
@ -5,7 +5,7 @@ $red2: darken($red, 20%);
|
|||
$blue: #00a0bd;
|
||||
|
||||
$width: 1240px;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 220px;
|
||||
|
||||
$font-color: #3c3c3b;
|
||||
$font-family: "Oswald", sans-serif;
|
||||
|
|
|
@ -37,7 +37,7 @@ $nav-border-color: $white;
|
|||
$nav-button-background: $black;
|
||||
$nav-item-selected-background: #2D2D2D;
|
||||
$nav-mobile-menu-background: $pale-primary-color;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 220px;
|
||||
$steps-color: #9B9B9B;
|
||||
$title-weight: bold;
|
||||
$width: 1243.97px;
|
||||
|
|
|
@ -70,8 +70,6 @@ footer {
|
|||
}
|
||||
|
||||
#sidebar {
|
||||
box-sizing: content-box;
|
||||
padding-right: 40px;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
@ -5,7 +5,8 @@ $blue2: #2f8dda; // lighter
|
|||
$turquoise: #3eb2af;
|
||||
|
||||
$width: 1240px;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-columns-gutter: 60px;
|
||||
|
||||
$font-color: #020202;
|
||||
$font-family: Din, sans-serif;
|
||||
|
|
|
@ -208,12 +208,6 @@ div#sidebar {
|
|||
}
|
||||
}
|
||||
|
||||
.gru-content #sidebar div.cell {
|
||||
margin-right: 40px;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
#content div.cell.with-borders {
|
||||
border: 1px solid #c6c6c6;
|
||||
|
|
|
@ -11,6 +11,9 @@ $font-family: "Roboto", sans-serif;
|
|||
$link-color: $primary-color;
|
||||
|
||||
$width: 1200px;
|
||||
$sidebar-width: 300px;
|
||||
$sidebar-columns-gutter: 40px;
|
||||
|
||||
$nav-mobile-limit: 50000px;
|
||||
$nav-button-background: transparent;
|
||||
$nav-button-color: $green;
|
||||
|
|
|
@ -9,7 +9,7 @@ $font-family: Roboto, sans-serif;
|
|||
$primary-color: $green;
|
||||
$very-small-limit: 360px;
|
||||
$width: 1180px;
|
||||
$sidebar-width: 493px;
|
||||
$sidebar-width: 473px;
|
||||
$sidebar-position: left;
|
||||
$border-radius: 0;
|
||||
|
||||
|
@ -67,4 +67,4 @@ $wcs-step-current-color: #fff;
|
|||
$wcs-step-current-background: $steps-background;
|
||||
$wcs-step-marker-background: hsla(0,0%,100%,0.6);
|
||||
$wcs-step-current-marker-color: #000;
|
||||
$wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
|
||||
$wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
|
||||
|
|
|
@ -27,7 +27,7 @@ $mobile-limit: 64em;
|
|||
$very-small-limit: 35em;
|
||||
$columns-gutter: 40em / 15;
|
||||
$sidebar-position: right;
|
||||
$sidebar-width: 480em / 15;
|
||||
$sidebar-width: 400em / 15;
|
||||
$sidebar-columns-gutter: 80em / 15;
|
||||
$grid-gutter: 2rem;
|
||||
$columns-gutter: 2rem;
|
||||
|
|
|
@ -318,8 +318,8 @@ body.page-connect {
|
|||
}
|
||||
}
|
||||
.gru-content #sidebar {
|
||||
flex: 0 0 $sidebar-width + 150px;
|
||||
max-width: $sidebar-width + 150px;
|
||||
flex: 0 0 $sidebar-width + 170px;
|
||||
max-width: $sidebar-width + 170px;
|
||||
margin-top: calc(0.4em + 60px);
|
||||
overflow: auto;
|
||||
height: 60vh;
|
||||
|
|
|
@ -181,7 +181,7 @@ $dashboard_items: profil, demandes, paiements, porte-documents;
|
|||
|
||||
#sidebar {
|
||||
border-right: 2px solid #d6d6d6;
|
||||
margin-right: 10px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
div#gauche + div#rub_service {
|
||||
|
|
|
@ -26,6 +26,7 @@ $footer-background: #7A7979;
|
|||
$category-toggled-background: $primary-color;
|
||||
$cell-border: 0px; // != none, to avoid "OR" between login blocks
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-columns-gutter: 10px;
|
||||
$grid-gutter: 0px;
|
||||
$widget-border: 2px solid #b4b4b4;
|
||||
|
||||
|
|
Loading…
Reference in New Issue