scss: introduce $edge-gutter & $edge-gutter-mobile (#85848)
gitea/publik-base-theme/pipeline/head This commit looks good
Details
gitea/publik-base-theme/pipeline/head This commit looks good
Details
This commit is contained in:
parent
adfc8d2964
commit
e139dff369
|
@ -146,6 +146,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
|
||||
<td><p><var>$columns-gutter</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$edge-gutter</code></p></td>
|
||||
<td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
|
||||
<td><p><var>legacy</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$grid-gutter</code></p></td>
|
||||
<td><p>Espace (« gouttière ») entre les éléments disposés en grille.</p></td>
|
||||
|
@ -391,6 +396,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
<td><p>Largeur maximale de la page "mobile"</p></td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$edge-gutter-mobile</code></p></td>
|
||||
<td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
|
||||
<td><p><var>$edge-gutter</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$nav-mobile-limit</code></p></td>
|
||||
<td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
|
||||
|
|
|
@ -636,7 +636,7 @@ div.bookingcalendar {
|
|||
#login-page.methods2 > .block {
|
||||
width: 50%;
|
||||
width: calc(50% - 2em);
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 2em;
|
||||
float: left;
|
||||
}
|
||||
|
@ -645,7 +645,7 @@ div.bookingcalendar {
|
|||
#login-page.methods3 > .block {
|
||||
width: 33%;
|
||||
width: calc(33% - 2em);
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 2em;
|
||||
float: left;
|
||||
}
|
||||
|
@ -657,7 +657,11 @@ div.bookingcalendar {
|
|||
@media screen and ($max-mobile-viewport) {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin: 0.7em;
|
||||
margin-right: 0;
|
||||
@if $edge-gutter == legacy {
|
||||
margin-left: 0.7em;
|
||||
margin-right: 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,6 +12,8 @@ $sidebar-max-width: $sidebar-width !default;
|
|||
$sidebar-min-width: 0 !default;
|
||||
$sidebar-position: left !default;
|
||||
$sidebar-columns-gutter: $columns-gutter !default;
|
||||
$edge-gutter: legacy !default;
|
||||
$edge-gutter-mobile: $edge-gutter !default;
|
||||
|
||||
// custom media queries
|
||||
// @media ($max-mobile-viewport) {}
|
||||
|
@ -41,7 +43,6 @@ div#page {
|
|||
div#page div#main-content-wrapper,
|
||||
div#page main {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-width,
|
||||
|
@ -63,9 +64,7 @@ div#page main {
|
|||
}
|
||||
|
||||
div#header {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 0 0.7em;
|
||||
& h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -118,7 +117,6 @@ div#main-content {
|
|||
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
#columns-wrapper {
|
||||
padding: 0 0.7em;
|
||||
max-width: 100%;
|
||||
}
|
||||
.column {
|
||||
|
@ -129,13 +127,13 @@ div#main-content {
|
|||
.central-content {
|
||||
flex-direction: column;
|
||||
#sidebar {
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
// don't apply min-width on mobile
|
||||
@if $sidebar-min-width != 0 {
|
||||
min-width: 0;
|
||||
}
|
||||
margin: 0 0.7em;
|
||||
div.cell {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
@ -155,16 +153,66 @@ div#main-content {
|
|||
|
||||
@if $footer-full-width-background {
|
||||
#footer-wrapper {
|
||||
padding: 0.7em 0 1.5em 0;
|
||||
padding-top: 0.7em;
|
||||
padding-bottom: 1.5em;
|
||||
background-color: $footer-background;
|
||||
}
|
||||
} @else {
|
||||
#footer {
|
||||
padding: 0.7em 0.7em 1.5em 0.7em;
|
||||
padding-top: 0.7em;
|
||||
padding-bottom: 1.5em;
|
||||
background-color: $footer-background;
|
||||
}
|
||||
}
|
||||
|
||||
// edge-gutter
|
||||
@if $edge-gutter == legacy {
|
||||
div#header {
|
||||
width: 100%;
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
div#page div#main-content-wrapper,
|
||||
div#page main {
|
||||
width: 100%;
|
||||
}
|
||||
@if not $footer-full-width-background {
|
||||
#footer {
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
}
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
.central-content #sidebar {
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
#columns-wrapper {
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
.page-width,
|
||||
.header-width,
|
||||
.nav-width,
|
||||
.footer-width {
|
||||
--edge-gutter: #{$edge-gutter};
|
||||
--edge-gutter-mobile: #{$edge-gutter-mobile};
|
||||
box-sizing: content-box;
|
||||
padding-left: var(--edge-gutter);
|
||||
padding-right: var(--edge-gutter);
|
||||
@media ($max-mobile-viewport) {
|
||||
--edge-gutter: var(--edge-gutter-mobile);
|
||||
}
|
||||
}
|
||||
@if ($mobile-width) {
|
||||
.header-width,
|
||||
.nav-width {
|
||||
@media ($max-mobile-viewport) {
|
||||
--edge-gutter-mobile: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
.pk-desktop-only, .desktop-only {
|
||||
display: none !important;
|
||||
|
|
|
@ -70,7 +70,6 @@ $nav-mobile-bottom-bar-badge-background: #e22 !default;
|
|||
}
|
||||
|
||||
div.gru-nav {
|
||||
padding: 0;
|
||||
height: $nav-height;
|
||||
border-radius: $nav-border-radius;
|
||||
font-family: $nav-font-family;
|
||||
|
|
Loading…
Reference in New Issue