entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

toulouse-2022: add styles for details & summary html elements (#83734)
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Thomas Jund 2023-11-20 19:43:29 +01:00
parent 55cb153a49
commit ceb5fb87b7
2 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
static/toulouse-2022/_custom.scss
View File

@ -49,6 +49,15 @@ h3, .h3 {
}
}
h4, .h4 {
font-size: $fz-4m;
font-weight: 700;
line-height: 1.5;
@media ($min-desktop-viewport) {
font-size: $fz-4;
}
}
.chapo {
font-size: 21em / $base-font-m;
font-weight: 300;
@ -105,6 +114,53 @@ a {
}
}
// details
details {
&.header-white, &.header-gray {
border: 1px solid $gray-6;
padding: $widget-padding;
padding-bottom: 0;
overflow: hidden;
margin-bottom: 1rem;
summary {
position: relative;
@extend .h4;
display: block;
padding: $widget-padding;
margin: -1*extract-top($widget-padding) -1*extract-right($widget-padding);
margin-bottom: 0;
padding-right: calc( #{extract-right($widget-padding)} + 1.5em);
cursor: pointer;
&::after {
@extend .h3;
font-family: FontAwesome;
content: $cell-open-foldable-icon;
position: absolute;
right: extract-right($widget-padding);
width: 1em;
text-align: right;
color: $salmon-dark;
text-shadow: 0 1px currentColor;
height: 1em;
line-height: 1;
}
}
&[open] {
summary {
border-bottom: 1px solid $gray-6;
&::after {
content: $cell-close-foldable-icon;
}
}
}
}
&.header-gray {
summary {
background-color: $gray-6;
}
}
}
//
// GLOBAL LAYOUT
//
@ -186,7 +242,7 @@ div#header, div#nav {
padding-left: 1em;
}
@media (max-width: $very-small-limit) {
font-size: $fz-4;
font-size: $fz-5;
line-height: 1.1;
}
}
@ -409,7 +465,7 @@ div#side {
}
a {
display: block;
font-size: $fz-4;
font-size: $fz-5;
font-weight: bold;
color: $salmon-dark;
padding: 0;

6
static/toulouse-2022/_vars.scss
View File

@ -24,7 +24,9 @@ $fz-2: 36em / $base-font;
$fz-2m: 26em / $base-font-m;
$fz-3: 26em / $base-font;
$fz-3m: 22em / $base-font-m;
$fz-4: 20em / $base-font;
$fz-4: 22em / $base-font;
$fz-4m: 18em / $base-font-m;
$fz-5: 20em / $base-font;
$fz-small: 15em / $base-font;
$fz-xsmall: 13em / $base-font;
@ -110,7 +112,7 @@ $wcs-steps-small-layout-limit: $mobile-limit;
$widget-border: 1px solid $gray-6;
$widget-focus-border: 1px solid $gray-3;
$widget-unique-checkbox-position: left;
$widget-padding: 0.74em 1.5em;
$widget-padding: 0.74rem 1.5rem;
$form-accent-color: $gray-3;
$buttons-order: cancel, previous, submit;