eurelien-cd28-2022: add theme (#71581)
gitea-wip/publik-base-theme/pipeline/pr-main This commit looks good
Details
gitea-wip/publik-base-theme/pipeline/pr-main This commit looks good
Details
This commit is contained in:
parent
39cfacdb33
commit
33dc4ec008
|
|
@ -0,0 +1,202 @@
|
|||
div#main-content {
|
||||
margin-top: $space-xlarge;
|
||||
}
|
||||
|
||||
.cd28-page-header {
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
max-width: $header-width;
|
||||
width: 100%;
|
||||
background: url("img/page-banner.jpeg");
|
||||
background-size: 100% 100%;
|
||||
|
||||
&--content > div {
|
||||
max-width: $width;
|
||||
margin: $space-xlarge;
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-left: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %big-title-1;
|
||||
&::before {
|
||||
background-image: url("img/title-img-white.svg");
|
||||
}
|
||||
}
|
||||
|
||||
h2:not(:first-child) {
|
||||
@extend %big-title-2;
|
||||
&::before {
|
||||
background-image: url("img/title-img-white.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.cell {
|
||||
h1 {
|
||||
@extend %big-title-1;
|
||||
}
|
||||
|
||||
h2:not(:first-child) {
|
||||
@extend %big-title-2;
|
||||
}
|
||||
|
||||
> div > h2:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.link-list-cell.has-asset-picture,
|
||||
.gru-content div.wcsformsofcategorycell.has-asset-picture {
|
||||
position: relative;
|
||||
> div {
|
||||
> h2:first-child {
|
||||
padding-left: 4rem;
|
||||
padding-top: 1.2rem;
|
||||
padding-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
picture {
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
img {
|
||||
padding: 0;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.cell.foldable {
|
||||
border: $border-width-0 solid $gray-5;
|
||||
border-radius: $border-radius;
|
||||
|
||||
div > h2:first-child {
|
||||
outline: none;
|
||||
border: $border-width-3 solid transparent;
|
||||
border-radius: $border-radius !important;
|
||||
|
||||
&::after {
|
||||
font-family: "RemixIcon";
|
||||
content: "\ea4e"; // arrow-down-s-line
|
||||
}
|
||||
}
|
||||
|
||||
&.folded {
|
||||
div > h2:first-child {
|
||||
&::after {
|
||||
content: "\ea78"; // arrow-up-s-line
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
div > h2:first-child {
|
||||
border-color: $gray-3;
|
||||
background: $gray-2;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:focus-within {
|
||||
border-color: transparent;
|
||||
div > h2:first-child {
|
||||
outline: none;
|
||||
border-color: $gray-2;
|
||||
background: $gray-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.textcell, .cd28-page-header {
|
||||
h1, h2, h3, h4, h5, p, table {
|
||||
margin: 0 $space-medium 0.7em $space-medium;
|
||||
}
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
> li {
|
||||
margin: 0 $space-medium;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: $border-width-0 solid $gray-5;
|
||||
}
|
||||
|
||||
> a {
|
||||
border: $border-width-3 solid transparent;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&::before {
|
||||
margin-right: $space-small;
|
||||
content: "\ea6e"; // arrow-right-s-line
|
||||
font-family: "RemixIcon";
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: none;
|
||||
border-color: $yellow-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-items-pagination {
|
||||
button {
|
||||
padding: $space-large;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 100%;
|
||||
font-family: RemixIcon;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.cell.cd-28-shadow {
|
||||
box-shadow: $shadow-1;
|
||||
}
|
||||
|
||||
.cd28-info-block {
|
||||
padding: $space-large;
|
||||
|
||||
&.border {
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: $space-large;
|
||||
margin-right: $space-large;
|
||||
margin-top: -$space-large;
|
||||
margin-bottom: -$space-large;
|
||||
}
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
&.border::before { background: $yellow-4; }
|
||||
&.background { background: $yellow-1; }
|
||||
}
|
||||
|
||||
&.blue {
|
||||
&.border::before { background: $blue-4; }
|
||||
&.background { background: $blue-1; }
|
||||
}
|
||||
|
||||
&.green {
|
||||
&.border::before { background: $green-4; }
|
||||
&.background { background: $green-1; }
|
||||
}
|
||||
|
||||
&.pink {
|
||||
&.border::before { background: $pink-4; }
|
||||
&.background { background: $pink-1; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
div#footer {
|
||||
position: relative;
|
||||
padding: 0 $space-large;
|
||||
|
||||
h6 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cd28-yellow {
|
||||
color: $yellow-4;
|
||||
}
|
||||
|
||||
a {
|
||||
@include link(white, black);
|
||||
}
|
||||
|
||||
a.pk-button, a.pk-big-button {
|
||||
@extend %button;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a.cd28-button-secondary {
|
||||
@extend .cd28-button-secondary-dark;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
div.cell {
|
||||
img {
|
||||
margin: 0 $space-medium;
|
||||
}
|
||||
hr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cd28-footer-links .links-list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: none;
|
||||
> a {
|
||||
@include link(white, black);
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
margin: $space-xsmall $space-medium;
|
||||
font-size: $font-size-0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-top {
|
||||
position: absolute;
|
||||
top: calc(-#{$space-medium} - #{$back-top-icon-size} / 2);
|
||||
right: $space-medium;
|
||||
z-index: 100;
|
||||
|
||||
&--link {
|
||||
@extend %button;
|
||||
|
||||
width: $back-top-icon-size;
|
||||
height: $back-top-icon-size;
|
||||
border-radius: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: "\ea78"; // arrow-up-s-line
|
||||
font-size: $font-size-6;
|
||||
font-family: "RemixIcon";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--link-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
div#header {
|
||||
padding-top: $header-mobile-padding-v;
|
||||
padding-right: $header-mobile-padding-h;
|
||||
padding-left: $header-mobile-padding-h;
|
||||
max-width: $header-width;
|
||||
|
||||
// bottom padding is managed by the nav
|
||||
padding-bottom: 0;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-top: $header-desktop-padding-v;
|
||||
padding-right: $header-desktop-padding-h;
|
||||
padding-left: $header-desktop-padding-h;
|
||||
}
|
||||
}
|
||||
|
||||
div#top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: $font-size;
|
||||
padding-left: 0;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-bottom: $header-desktop-padding-v;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
position: static;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: $header-desktop-padding-v;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
margin-top: $space-small;
|
||||
}
|
||||
|
||||
.login, .logged-in {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
gap: $space-small;
|
||||
|
||||
.login-link, .account-link {
|
||||
@extend %button;
|
||||
margin: 0;
|
||||
padding: $space-xsmall $space-small;
|
||||
}
|
||||
|
||||
.user-info--separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logout, .registration {
|
||||
@extend .cd28-button-secondary-dark;
|
||||
margin: 0;
|
||||
padding: $space-xsmall $space-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
.site-nav {
|
||||
@media($max-mobile-viewport) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gru-nav-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div.gru-nav .gru-nav-button {
|
||||
position: absolute;
|
||||
|
||||
top: calc(#{$header-mobile-padding-v} + (#{$header-logo-height} - #{$nav-menu-side}) / 2);
|
||||
right: $space-small;
|
||||
|
||||
&.toggled + ul {
|
||||
height: 100vh;
|
||||
// add the maximum header-height as bottom padding, to allow scrolling to the bottom of the menu
|
||||
padding-bottom: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
flex-grow: 1;
|
||||
margin-right: $space-medium;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
// navigation makes bottom padding of header, so it opens right
|
||||
// beneath
|
||||
margin-top: $header-mobile-padding-v;
|
||||
height: 0;
|
||||
// cancell header horizontal padding for the menu to screen width
|
||||
margin-right: -$header-mobile-padding-h;
|
||||
margin-left: -$header-mobile-padding-h;
|
||||
}
|
||||
|
||||
.menu, .submenu {
|
||||
margin: 0;
|
||||
|
||||
&--link {
|
||||
display: flex;
|
||||
border: $border-width-1 solid transparent;
|
||||
padding: $space-small $space-medium;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
padding: $space-small $space-large;
|
||||
}
|
||||
|
||||
&:focus-visible, &:focus-within {
|
||||
border-color: $yellow-4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $yellow-4;
|
||||
border-color: $yellow-4;
|
||||
color: $gray-9;
|
||||
}
|
||||
}
|
||||
|
||||
&--label {
|
||||
flex-grow: 1;
|
||||
font-weight: $font-weight-6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
@media($max-mobile-viewport) {
|
||||
padding: 0 $space-medium;
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
&--item {
|
||||
@media($max-mobile-viewport) {
|
||||
&:not(:first-child) {
|
||||
border-top: $border-width-0 solid $gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
// Menu items create the bottom padding for the header here, so
|
||||
// they reach the bottom of the header and stay hovered when
|
||||
// moving the mouse to the submenu.
|
||||
height: calc(#{$header-logo-height} + #{$header-desktop-padding-v});
|
||||
padding-bottom: $header-desktop-padding-v;
|
||||
|
||||
// border-bottom when mouse in in submenu
|
||||
&:hover .menu--link {
|
||||
border-bottom-color: $yellow-4;
|
||||
|
||||
&:after {
|
||||
content: "\ea78"; // arrow-up-s-line
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:focus-within {
|
||||
.menu--link {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected .menu--link {
|
||||
border-bottom-color: $yellow-4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
margin: 0;
|
||||
// right padding is set to small to let space for the dropdown icon
|
||||
@media($min-desktop-viewport) {
|
||||
padding-right: $space-small;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "\ea6e"; // arrow-right-s-line
|
||||
font-family: "RemixIcon";
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
content: "\ea4e"; // arrow-down-s-line
|
||||
margin-left: $space-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
padding: 0 $space-medium;
|
||||
|
||||
// dekstop menu dropdown
|
||||
@media($min-desktop-viewport) {
|
||||
position: absolute;
|
||||
top: calc(#{$header-logo-height} + 2 * #{$header-desktop-padding-v});
|
||||
box-shadow: $shadow-8;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
&--item:not(:first-child) {
|
||||
border-top: $border-width-0 solid $gray-3;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
border-top-color: $gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
&::before {
|
||||
content: "\ea6e"; // arrow-right-s-line
|
||||
font-family: "RemixIcon";
|
||||
margin-right: $space-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
@mixin cd28-title($desktop-size, $mobile-size, $weight, $color) {
|
||||
color: $color;
|
||||
letter-spacing: $letterspacing-1;
|
||||
line-height: $lineheight-1;
|
||||
font-size: $mobile-size;
|
||||
font-weight: $weight;
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
font-size: $desktop-size;
|
||||
}
|
||||
}
|
||||
|
||||
.cd28-title-header {
|
||||
margin: 0 0 0 1em;
|
||||
line-height: 1;
|
||||
font-weight: $font-weight-4;
|
||||
letter-spacing: $letterspacing-0;
|
||||
color: $gray-7;
|
||||
}
|
||||
|
||||
@mixin cd28-big-title($desktop-header-size, $mobile-header-size) {
|
||||
position: relative;
|
||||
min-height: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
padding-bottom: 1em;
|
||||
|
||||
& .cd28-title-header {
|
||||
font-size: $mobile-header-size;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $desktop-header-size;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 2.5em;
|
||||
height: 1em;
|
||||
display: block;
|
||||
content: "";
|
||||
background: url("img/title-img-yellow.svg");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
padding-left: 2.6em;
|
||||
padding-bottom: 0;
|
||||
&::before {
|
||||
bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include cd28-title($font-size-9, $font-size-8, $font-weight-8, $gray-9);
|
||||
}
|
||||
|
||||
%big-title-1 {
|
||||
@extend h1;
|
||||
@include cd28-big-title($font-size-7, $font-size-6);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include cd28-title($font-size-8, $font-size-7, $font-weight-8, $gray-9);
|
||||
}
|
||||
|
||||
%big-title-2 {
|
||||
@extend h2;
|
||||
@include cd28-big-title($font-size-6, $font-size-5);
|
||||
}
|
||||
|
||||
h3 { @include cd28-title($font-size-7, $font-size-6, $font-weight-7, $gray-9); }
|
||||
h4 { @include cd28-title($font-size-6, $font-size-5, $font-weight-7, $gray-9); }
|
||||
h5 { @include cd28-title($font-size-5, $font-size-3, $font-weight-7, $gray-9); }
|
||||
h6 { @include cd28-title($font-size-4, $font-size-2, $font-weight-6, $gray-7); }
|
||||
|
||||
header, main, footer {
|
||||
font-weight: $font-weight-5;
|
||||
font-size: $font-size-1;
|
||||
line-height: $lineheight-3;
|
||||
letter-spacing: $letterspacing-0;
|
||||
|
||||
& .small {
|
||||
font-size: $font-size-0;
|
||||
}
|
||||
|
||||
& .large {
|
||||
font-size: $font-size-2;
|
||||
}
|
||||
}
|
||||
|
||||
%title {
|
||||
letter-spacing: $letterspacing-1;
|
||||
line-height: $lineheight-1;
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $font-size-3;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin link($color, $hover-color) {
|
||||
color: $color;
|
||||
background: transparent;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: $color;
|
||||
color: $hover-color;
|
||||
font-weight: $font-weight-5;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include link($blue-5, white);
|
||||
}
|
||||
|
||||
.cd28-external-link {
|
||||
&::after {
|
||||
content: "\ecaf"; // external-link-line
|
||||
font-family: "RemixIcon";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
// colors
|
||||
$alert-1: #FFE9E9;
|
||||
$alert-2: #C60C0C;
|
||||
$black: #0C0C12;
|
||||
$blue-1: #E9FBFF;
|
||||
$blue-4: #007C94;
|
||||
$blue-5: #005A6B;
|
||||
$gray-10: #27283B;
|
||||
$gray-1: #FAFAFC;
|
||||
$gray-2: #E2E1E6;
|
||||
$gray-3: #C0C0CA;
|
||||
$gray-5: #9696A1;
|
||||
$gray-6: #80808C;
|
||||
$gray-7: #6B6B78;
|
||||
$gray-8: #525364;
|
||||
$gray-9: #3f3f4f;
|
||||
$green-1: #EEFFF0;
|
||||
$green-4: #008910;
|
||||
$information-1: #E9FFFE;
|
||||
$information-2: #006AC4;
|
||||
$pink-1: #FFEAF7;
|
||||
$pink-4: #C10680;
|
||||
$success-1: #EEFFF0;
|
||||
$success-2: #03880F;
|
||||
$warning-1: #FFF2EB;
|
||||
$warning-2: #E86826;
|
||||
$yellow-1: #fffae5;
|
||||
$yellow-2: #ffeb99;
|
||||
$yellow-3: #ffdc4c;
|
||||
$yellow-4: #ffcd00;
|
||||
$yellow-5: #e5b900;
|
||||
|
||||
$shadow-1: 0px 4px 8px rgba(39, 40, 59, 0.16);
|
||||
$shadow-8: 0px 0px 10px rgba(12, 12, 18, 0.4);
|
||||
|
||||
// typo
|
||||
$base-font: 10 / 16;
|
||||
|
||||
$font-size-0: 1.4rem * $base-font;
|
||||
$font-size-1: 1.6rem * $base-font;
|
||||
$font-size-2: 1.8rem * $base-font;
|
||||
$font-size-3: 2rem * $base-font;
|
||||
$font-size-4: 2.4rem * $base-font;
|
||||
$font-size-5: 2.8rem * $base-font;
|
||||
$font-size-6: 3.6rem * $base-font;
|
||||
$font-size-7: 4.5rem * $base-font;
|
||||
$font-size-8: 5.7rem * $base-font;
|
||||
$font-size-9: 7.2rem * $base-font;
|
||||
|
||||
$font-weight-4: 400;
|
||||
$font-weight-5: 500;
|
||||
$font-weight-6: 600;
|
||||
$font-weight-7: 700;
|
||||
$font-weight-8: 800;
|
||||
|
||||
$lineheight-0: 100%;
|
||||
$lineheight-1: 125%;
|
||||
$lineheight-2: 137.5%;
|
||||
$lineheight-3: 150%;
|
||||
|
||||
$letterspacing-0: 0;
|
||||
$letterspacing-1: 0.25rem;
|
||||
|
||||
// borders & layout
|
||||
$border-width-0: 1px;
|
||||
$border-width-1: 2px;
|
||||
$border-width-2: 3px;
|
||||
$border-width-3: 4px;
|
||||
|
||||
$border-radius-0: 0.5rem * $base-font;
|
||||
$border-radius-1: 1rem * $base-font;
|
||||
$border-radius-2: 1.5rem * $base-font;
|
||||
$border-radius-3: 3.2rem * $base-font;
|
||||
$border-radius-4: 4rem * $base-font;
|
||||
|
||||
$space-xsmall: 0.5rem * $base-font;
|
||||
$space-small: 1rem * $base-font;
|
||||
$space-medium: 1.5rem * $base-font;
|
||||
$space-large: 2rem * $base-font;
|
||||
$space-xlarge: 3rem * $base-font;
|
||||
|
||||
|
||||
// fonts
|
||||
$primary-color: $yellow-4;
|
||||
$font-family: Raleway, Arial, sans-serif;
|
||||
$font-size: $font-size-1;
|
||||
|
||||
$font-color: $gray-9;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-color: $gray-9;
|
||||
$title-weight: $font-weight-7;
|
||||
$title-font-size: $font-size-4;
|
||||
|
||||
// layout & general
|
||||
$width: 1100px;
|
||||
$header-width: 1600px;
|
||||
$border-radius: 10px;
|
||||
$form-sidebar-width: 25%;
|
||||
|
||||
// header & nav
|
||||
$header-mobile-padding-v: $space-small;
|
||||
$header-mobile-padding-h: $space-medium;
|
||||
$header-desktop-padding-v: $space-medium;
|
||||
$header-desktop-padding-h: $space-xlarge;
|
||||
$header-background-color: black;
|
||||
$header-logo-height: 50px;
|
||||
$header-logo-size: 217px $header-logo-height;
|
||||
$toplinks-style: none;
|
||||
|
||||
// nav
|
||||
$nav-background: black;
|
||||
$nav-color: white;
|
||||
$nav-active-color: white;
|
||||
|
||||
$nav-border-radius: 0;
|
||||
$nav-border-color: transparent;
|
||||
$nav-menu-side: 24px;
|
||||
$nav-menu-color: white !default;
|
||||
$nav-button-background: black;
|
||||
$nav-button-color: white;
|
||||
$nav-submenu-background: white;
|
||||
$nav-submenu-color: $gray-9;
|
||||
|
||||
$nav-item-selected-border: 0 0 2px 0 solid $yellow-4;
|
||||
$nav-item-selected-background: transparent !default;
|
||||
$nav-item-selected-color: white;
|
||||
$nav-item-hover-background: transparent; // we handle that on the menu--link, not on menu--item
|
||||
$nav-item-hover-color: $gray-9;
|
||||
|
||||
$nav-mobile-menu-background: white;
|
||||
$nav-mobile-menu-item-color: $gray-9;
|
||||
$nav-item-spacing: 0px !default;
|
||||
|
||||
$nav-after-image: false;
|
||||
|
||||
// footer
|
||||
$footer-background: black;
|
||||
$footer-link-color: white;
|
||||
$back-top-display: block;
|
||||
$back-top-icon-size: 64px;
|
||||
$back-top-layout-direction: vertical !default; // horizontal || vertical
|
||||
$back-top-layout-position: static (right: 0, top: 0);
|
||||
|
||||
|
||||
// widgets
|
||||
$widget-color: $gray-8;
|
||||
$form-accent-color: $yellow-4;
|
||||
$widget-border-radius: $border-radius-1;
|
||||
$widget-padding: $space-large;
|
||||
$widget-unique-checkbox-position: left !default;
|
||||
|
||||
// we handle it with outline, as it grows on focus & hover, to avoid inputs
|
||||
// being resized because of box-sizing: border-box
|
||||
$widget-border: 0;
|
||||
$widget-focus-border: 0;
|
||||
$widget-focus-outline: $border-width-3 solid $gray-8;
|
||||
|
||||
$button-background: $primary-color;
|
||||
$button-color: $black;
|
||||
$button-border-radius: $border-radius-3;
|
||||
$button-border: $border-width-3 solid transparent;
|
||||
$button-hover-background: $yellow-5;
|
||||
$button-focus-outline: 0px;
|
||||
$cancel-button-style: ".cd28-button-secondary";
|
||||
|
||||
// Notifications
|
||||
$notification-icon-size: 20px;
|
||||
$notification-style: border-bar;
|
||||
$notification_error_color: $alert-2;
|
||||
$notification_info_color: $information-2;
|
||||
$notification_success_color: $success-2;
|
||||
$notification_warning_color: $warning-2;
|
||||
|
||||
// cells
|
||||
$cell-background: white !default;
|
||||
$cell-border: none;
|
||||
|
||||
$cell-entry-color: $black;
|
||||
$cell-entry-font-weight: 500;
|
||||
$cell-entry-border-color: $gray-5;
|
||||
$cell-entry-border: 0; //we handle bottom border in %cell-links-list
|
||||
$cell-entry-hover-background: $yellow-4;
|
||||
|
||||
// wcs
|
||||
$wcs-steps-background: transparent !default;
|
||||
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
|
||||
|
||||
// Step
|
||||
$wcs-step-color: $gray-9; // color for default marker & label
|
||||
$wcs-step-current-color: $gray-9;
|
||||
$wcs-step-background: transparent !default;
|
||||
$wcs-step-current-background: $yellow-1;
|
||||
$wcs-step-border-bottom: $gray-5;
|
||||
$wcs-step-current-border-bottom: none;
|
||||
$buttons-order: previous, cancel (grow), submit;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
.form-content {
|
||||
h1, h2, h3, h4, h5, p, table {
|
||||
margin: 0 $space-medium 0.7em $space-medium;
|
||||
}
|
||||
|
||||
&--sidebox {
|
||||
box-shadow: $shadow-8;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: $space-large;
|
||||
}
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
padding: 0 $space-small;
|
||||
|
||||
div.tracking-code-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
@extend %button;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a, button {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
&.step-before {
|
||||
color: $gray-7;
|
||||
}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
// global placeholders & classes
|
||||
%button {
|
||||
padding: $space-medium $space-xlarge;
|
||||
box-shadow: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-5;
|
||||
background: $yellow-4;
|
||||
transition: 0s;
|
||||
|
||||
&:hover, &:focus{
|
||||
font-weight: $font-weight-7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
border-color: $yellow-3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $yellow-3;
|
||||
border-color: $yellow-5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: transparent;
|
||||
background: $gray-2;
|
||||
font-weight: $font-weight-5;
|
||||
color: $gray-5;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cd28-button-secondary {
|
||||
@extend %button;
|
||||
|
||||
outline: 1px solid $black;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $gray-2;
|
||||
border-color: $gray-3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $gray-3;
|
||||
border-color: $gray-2;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.cd28-button-secondary-dark {
|
||||
@extend %button;
|
||||
|
||||
outline: 1px solid white;
|
||||
background: $black;
|
||||
color: white;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-10;
|
||||
border-color: $gray-8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $gray-8;
|
||||
border-color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
div.file-button,
|
||||
.select2-selection,
|
||||
select {
|
||||
// use outline to avoid widget being resized when border grows
|
||||
margin: $border-width-3;
|
||||
outline-color: $gray-5;
|
||||
outline-style: solid;
|
||||
outline-width: $border-width-0;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline-color: $gray-8;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-width: $border-width-1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-width: $border-width-3;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
&, &:hover {
|
||||
border-radius: $widget-border-radius;
|
||||
outline-width: $border-width-0;
|
||||
outline-color: $gray-5;
|
||||
background: $gray-2;
|
||||
color: $gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$check-widget-size: 1rem;
|
||||
$check-widget-border-width: $border-width-1;
|
||||
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
@include vendor-prefix('appearance', 'none');
|
||||
|
||||
position: relative;
|
||||
width: $check-widget-size;
|
||||
height: $check-widget-size;
|
||||
margin: 0 $space-small 0 0;
|
||||
|
||||
outline: none;
|
||||
border: $check-widget-border-width solid $gray-5;
|
||||
padding: 0;
|
||||
|
||||
transition: 0s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $check-widget-border-width solid $yellow-4;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: $yellow-4;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
border-radius: 0;
|
||||
|
||||
&:checked {
|
||||
background: $yellow-4;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -#{$check-widget-border-width};
|
||||
left: -#{$check-widget-border-width};
|
||||
|
||||
content: "\eb7b"; // check-line
|
||||
font-size: 1rem;
|
||||
font-family: "RemixIcon";
|
||||
}
|
||||
}
|
||||
|
||||
.widget-readonly & { // read-only checkbox are not set read-only in WCS ?
|
||||
border-color: $gray-5;
|
||||
background: $gray-2;
|
||||
|
||||
&:checked {
|
||||
background: $gray-5;
|
||||
|
||||
&::after {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
&:checked {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(50% - #{$check-widget-size} / 4);
|
||||
left: calc(50% - #{$check-widget-size} / 4);
|
||||
width: calc(#{$check-widget-size} / 2);
|
||||
height: calc(#{$check-widget-size} / 2);
|
||||
border-radius: 100%;
|
||||
background: $yellow-4;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
border-color: $gray-5;
|
||||
background: $gray-2;
|
||||
|
||||
&::after {
|
||||
background: $gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.CheckboxWidget:not(.widget-readonly),
|
||||
div.RadiobuttonsWidget:not(.widget-readonly) .content label {
|
||||
color: $gray-8;
|
||||
&:focus-within, &:hover {
|
||||
font-weight: $font-weight-7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
div.CheckboxWidget.widget-readonly,
|
||||
div.RadiobuttonsWidget.widget-readonly .content label {
|
||||
color: $gray-5;
|
||||
}
|
||||
|
||||
div.RadiobuttonsWidget .content label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
&--open {
|
||||
.select2-selection {
|
||||
&--single, &--multiple {
|
||||
border-radius: $widget-border-radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
box-shadow: $shadow-8;
|
||||
|
||||
&--below, &--above {
|
||||
border-radius: $widget-border-radius 0 0 $widget-border-radius;
|
||||
}
|
||||
|
||||
&--below {
|
||||
top: $space-xsmall !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
&__options {
|
||||
border-radius: $widget-border-radius 0 0 $widget-border-radius;
|
||||
}
|
||||
|
||||
&__option{
|
||||
&--highlighted[aria-selected] {
|
||||
font-weight: 700;
|
||||
background: $gray-1;
|
||||
color: $gray-8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget .title .required {
|
||||
color: $alert-2;
|
||||
}
|
||||
|
||||
span.helptext, div.hint {
|
||||
font-size: $font-size-0;
|
||||
}
|
||||
|
||||
.errornotice, .warningnotice, .successnotice, .infonotice {
|
||||
padding: $space-large;
|
||||
border-width: 0 0 0 44px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&::before {
|
||||
top: calc(50% - #{$notification-icon-size} / 2);
|
||||
left: -42px;
|
||||
content: "\ee59"; // information-line
|
||||
font-family: "RemixIcon";
|
||||
}
|
||||
}
|
||||
|
||||
.errornotice {
|
||||
background: $alert-1;
|
||||
}
|
||||
|
||||
.warningnotice {
|
||||
background: $warning-1;
|
||||
}
|
||||
|
||||
.successnotice {
|
||||
background: $success-1;
|
||||
}
|
||||
|
||||
.infonotice {
|
||||
background: $information-1;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"label": "Eurelien (CD28) - 2022",
|
||||
"variables": {
|
||||
"theme_color": "#ffcd00"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="131" height="51" viewBox="0 0 131 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.57556 0H65.2429L57.1673 51H0.5L8.57556 0Z" fill="white"/>
|
||||
<path d="M130.233 0L122.153 51H65.4902L73.5658 0H130.233Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 249 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="130" height="51" viewBox="0 0 130 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.07556 0H64.7429L56.6673 51H0L8.07556 0Z" fill="#FFCD00"/>
|
||||
<path d="M129.732 0L121.652 51H64.9893L73.0648 0H129.732Z" fill="#FFCD00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 251 B |
|
|
@ -0,0 +1,14 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import '../includes/fonts/raleway';
|
||||
@import '../includes/fonts/remixicon';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'typo';
|
||||
@import 'widgets';
|
||||
@import 'header';
|
||||
@import 'nav';
|
||||
@import 'footer';
|
||||
@import 'content';
|
||||
@import 'wcs';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
|
||||
{% block before-main-content %}
|
||||
<header class="cd28-page-header">
|
||||
<div class="cd28-page-header--content">
|
||||
{% placeholder "page-header" name="En-tête de la page" optional=True acquired=True%}
|
||||
{% skeleton_extra_placeholder page-header-default %}
|
||||
{% end_skeleton_extra_placeholder %}
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class="cell-items-pagination"{% if data_cell_reference %} data-cell-reference="{{ data_cell_reference }}"{% endif %} data-paginate-by="{{ paginate_by|default:10 }}" hidden>
|
||||
<button class="cell-items-pagination-prev" disabled></a>
|
||||
<button class="cell-items-pagination-next" disabled></a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{% extends 'theme.html' %}
|
||||
|
||||
{# move nav #}
|
||||
{% block header-content %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block top-links %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block after-header %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{% extends "wcs/base.html" %}
|
||||
|
||||
{% block placeholder-page-header-default %}
|
||||
<div class="cd28-page-header--wcs-default">
|
||||
{% if title %}
|
||||
{% with title|split:" " as title_elements %}
|
||||
{% if title_elements|length > 1 %}
|
||||
<h1>
|
||||
<span class="cd28-title-header">{{ title_elements|first }}</span>
|
||||
{{ title_elements|slice:"1:"|join:" " }}
|
||||
</h1>
|
||||
{% else %}
|
||||
<h1>{{ title }}</h1>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% if view.formdef.description %}
|
||||
{{ view.formdef.description | safe }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block wcs-form-title %}{% endblock %}
|
||||
Loading…
Reference in New Issue