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>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
|
||||||
<td><p><var>$columns-gutter</var></p></td>
|
<td><p><var>$columns-gutter</var></p></td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td><p><code>$grid-gutter</code></p></td>
|
<td><p><code>$grid-gutter</code></p></td>
|
||||||
<td><p>Espace (« gouttière ») entre les éléments disposés en grille.</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>Largeur maximale de la page "mobile"</p></td>
|
||||||
<td><p><var>null</var></p></td>
|
<td><p><var>null</var></p></td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td><p><code>$nav-mobile-limit</code></p></td>
|
<td><p><code>$nav-mobile-limit</code></p></td>
|
||||||
<td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
|
<td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>
|
||||||
|
|
|
@ -636,7 +636,7 @@ div.bookingcalendar {
|
||||||
#login-page.methods2 > .block {
|
#login-page.methods2 > .block {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
width: calc(50% - 2em);
|
width: calc(50% - 2em);
|
||||||
margin: 0;
|
margin-left: 0;
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
@ -645,7 +645,7 @@ div.bookingcalendar {
|
||||||
#login-page.methods3 > .block {
|
#login-page.methods3 > .block {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
width: calc(33% - 2em);
|
width: calc(33% - 2em);
|
||||||
margin: 0;
|
margin-left: 0;
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
@ -657,7 +657,11 @@ div.bookingcalendar {
|
||||||
@media screen and ($max-mobile-viewport) {
|
@media screen and ($max-mobile-viewport) {
|
||||||
width: auto;
|
width: auto;
|
||||||
float: none;
|
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-min-width: 0 !default;
|
||||||
$sidebar-position: left !default;
|
$sidebar-position: left !default;
|
||||||
$sidebar-columns-gutter: $columns-gutter !default;
|
$sidebar-columns-gutter: $columns-gutter !default;
|
||||||
|
$edge-gutter: legacy !default;
|
||||||
|
$edge-gutter-mobile: $edge-gutter !default;
|
||||||
|
|
||||||
// custom media queries
|
// custom media queries
|
||||||
// @media ($max-mobile-viewport) {}
|
// @media ($max-mobile-viewport) {}
|
||||||
|
@ -41,7 +43,6 @@ div#page {
|
||||||
div#page div#main-content-wrapper,
|
div#page div#main-content-wrapper,
|
||||||
div#page main {
|
div#page main {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-width,
|
.page-width,
|
||||||
|
@ -54,18 +55,16 @@ div#page main {
|
||||||
}
|
}
|
||||||
|
|
||||||
@if ($mobile-width) {
|
@if ($mobile-width) {
|
||||||
.page-width,
|
.page-width,
|
||||||
.footer-width {
|
.footer-width {
|
||||||
@media ($max-mobile-viewport) {
|
@media ($max-mobile-viewport) {
|
||||||
max-width: $mobile-width;
|
max-width: $mobile-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div#header {
|
div#header {
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 0.7em;
|
|
||||||
& h1 {
|
& h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -118,7 +117,6 @@ div#main-content {
|
||||||
|
|
||||||
@media screen and ($max-mobile-viewport) {
|
@media screen and ($max-mobile-viewport) {
|
||||||
#columns-wrapper {
|
#columns-wrapper {
|
||||||
padding: 0 0.7em;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.column {
|
.column {
|
||||||
|
@ -129,13 +127,13 @@ div#main-content {
|
||||||
.central-content {
|
.central-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
#sidebar {
|
#sidebar {
|
||||||
|
margin: 0;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
// don't apply min-width on mobile
|
// don't apply min-width on mobile
|
||||||
@if $sidebar-min-width != 0 {
|
@if $sidebar-min-width != 0 {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
margin: 0 0.7em;
|
|
||||||
div.cell {
|
div.cell {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
@ -155,16 +153,66 @@ div#main-content {
|
||||||
|
|
||||||
@if $footer-full-width-background {
|
@if $footer-full-width-background {
|
||||||
#footer-wrapper {
|
#footer-wrapper {
|
||||||
padding: 0.7em 0 1.5em 0;
|
padding-top: 0.7em;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
background-color: $footer-background;
|
background-color: $footer-background;
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
#footer {
|
#footer {
|
||||||
padding: 0.7em 0.7em 1.5em 0.7em;
|
padding-top: 0.7em;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
background-color: $footer-background;
|
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) {
|
@media screen and ($max-mobile-viewport) {
|
||||||
.pk-desktop-only, .desktop-only {
|
.pk-desktop-only, .desktop-only {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
|
@ -70,7 +70,6 @@ $nav-mobile-bottom-bar-badge-background: #e22 !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.gru-nav {
|
div.gru-nav {
|
||||||
padding: 0;
|
|
||||||
height: $nav-height;
|
height: $nav-height;
|
||||||
border-radius: $nav-border-radius;
|
border-radius: $nav-border-radius;
|
||||||
font-family: $nav-font-family;
|
font-family: $nav-font-family;
|
||||||
|
|
Loading…
Reference in New Issue