CSS: manage sidebar-columns-gutter since #sidebar margin (#70656)

Instead #sidebar > .cell margin
This commit is contained in:
Thomas Jund 2022-10-19 18:06:20 +02:00
parent d245aebe87
commit 744559306d
42 changed files with 49 additions and 74 deletions

View File

@ -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;

View File

@ -160,6 +160,7 @@ div#header {
#sidebar {
max-width: 100%;
flex: 0 0 auto;
margin-right: 0;
}
#columns {
display: flex;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -573,7 +573,6 @@ div#registration-blocks {
}
div#sidebar {
margin-right: 2.5em;
h1, h2, h3 {
@include after-line($purple);
}

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -93,7 +93,6 @@ div#nav {
#sidebar {
box-shadow: 3px 3px 20px 0px #dedede;
margin-right: 2.5em;
}
div.linkcell.has-asset-picture {

View File

@ -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;

View File

@ -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;

View File

@ -320,6 +320,7 @@ main {
.gru-content #sidebar {
background-color: $gray-light;
padding: $columns-gutter;
padding-top: 2rem;
& + #columns-wrapper {

View File

@ -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;

View File

@ -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;
}
}
}

View File

@ -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) {

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -177,7 +177,7 @@ div#page {
div#sidebar {
border-right: 2px solid #d6d6d6;
margin-right: 30px;
padding-right: 20px;
}
.cell.wcsformsofcategorycell {

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -70,8 +70,6 @@ footer {
}
#sidebar {
box-sizing: content-box;
padding-right: 40px;
@media screen and (max-width: $nav-mobile-limit) {
padding-right: 0;
}

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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);

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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;