add generic theme for "système de design de l'état" (gouv.fr) (#56624)
This commit is contained in:
parent
83e6cbcf71
commit
c4aea5246c
|
|
@ -0,0 +1,328 @@
|
|||
%button {
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border-color: $grey-400;
|
||||
color: $grey-500;
|
||||
}
|
||||
}
|
||||
|
||||
%title {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.a2-continue,
|
||||
div#services > ul > li,
|
||||
div.a2-block,
|
||||
.gru-content .cell,
|
||||
.block {
|
||||
border-bottom: 4px solid $blue-france-500;
|
||||
}
|
||||
|
||||
div.gru-content {
|
||||
margin-top: 15px;
|
||||
.cell, .block {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-buttonset button.submit-button,
|
||||
div.gru-content button.submit-button,
|
||||
div.gru-content button[name=submit] {
|
||||
background: $blue-france-500;
|
||||
&:hover {
|
||||
background: #1515c8;
|
||||
}
|
||||
color: white;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"], input[type="password"],
|
||||
input[type="url"], input[type="tel"], input[type="number"],
|
||||
input[type="search"], input[type="file"], input[type="date"],
|
||||
input[type="datetime-local"], input[type="month"], input[type="time"],
|
||||
input[type="week"], textarea, select {
|
||||
box-shadow: inset 0 -2px 0 0 $grey-600;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
&:focus:not([readonly]) {
|
||||
box-shadow: inset 0 -2px 0 0 $grey-600;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&:focus:not([readonly]) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
border-top: 2px solid $blue-france-500;
|
||||
}
|
||||
|
||||
div.file-upload-widget div.file-button div.widget-message::after {
|
||||
color: $blue-france-500;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
h3, a {
|
||||
padding-left: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service h2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
div#header {
|
||||
#top {
|
||||
min-height: 120px;
|
||||
h1 {
|
||||
min-height: 120px;
|
||||
font-size: 1rem;
|
||||
a {
|
||||
padding-left: 160px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: $grey-800;
|
||||
background: url(rf.png) left center no-repeat;
|
||||
background-size: 120px auto;
|
||||
}
|
||||
&.has-logo {
|
||||
a {
|
||||
background-image: url(/assets/header:logo);
|
||||
text-indent: 0;
|
||||
}
|
||||
}
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
padding-left: 0;
|
||||
min-height: 140px;
|
||||
a {
|
||||
margin-left: 10px;
|
||||
padding-left: 0;
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#toplinks {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
height: 120px;
|
||||
background: transparent;
|
||||
line-height: 120px;
|
||||
padding: 0;
|
||||
span.sep {
|
||||
visibility: hidden;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:last-child {
|
||||
border-left: 1px solid $grey-400;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
border-bottom: 1px solid $grey-200;
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px -16px rgba(0, 0, 0, 0.32);
|
||||
margin-bottom: 1em;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
margin-top: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav > ul {
|
||||
margin: 0;
|
||||
> li a {
|
||||
font-weight: normal;
|
||||
&:focus {
|
||||
background: $navigation-focus-hover-color;
|
||||
}
|
||||
}
|
||||
> li {
|
||||
a {
|
||||
background: white;
|
||||
&:hover {
|
||||
background: $navigation-focus-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
li ul li {
|
||||
border: 1px solid $grey-200;
|
||||
&:not(:first-child) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
a {
|
||||
border-color: transparent;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-skip:focus-within {
|
||||
position: static;
|
||||
width: auto;
|
||||
background: $grey-200;
|
||||
li {
|
||||
margin: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
position: static;
|
||||
background: transparent;
|
||||
&:focus {
|
||||
outline: 2px solid $color-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%custom-radio-checkbox-widget {
|
||||
input:focus + span {
|
||||
outline: none;
|
||||
}
|
||||
input + span {
|
||||
line-height: 2rem;
|
||||
padding-left: 2.4rem;
|
||||
&::before {
|
||||
height: 1.33rem;
|
||||
width: 1.33rem;
|
||||
}
|
||||
&::after {
|
||||
top: calc(0.61rem + 1px);
|
||||
left: calc(0.29rem + 1px);
|
||||
height: calc(0.76rem);
|
||||
width: calc(0.76rem);
|
||||
}
|
||||
}
|
||||
input[type=checkbox] + span {
|
||||
&::before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::after {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
top: calc(0.33rem + 1px);
|
||||
left: 1px;
|
||||
height: calc(1.33rem);
|
||||
width: calc(1.33rem);
|
||||
}
|
||||
}
|
||||
input[type=checkbox]:checked + span {
|
||||
&::after {
|
||||
background-image: url(check.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CheckboxWidget div.content label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.gru-content div#rub_service {
|
||||
h3 { // title field
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
color: $grey-800;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
[type=hidden] + h3 { // 1st field
|
||||
margin-top: 0;
|
||||
}
|
||||
h4 { // subtitle field
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
color: $grey-800;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.comment-field,
|
||||
div.textcell {
|
||||
p, table, ul, ol {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.cell {
|
||||
&.foldable {
|
||||
> div > h2:first-child {
|
||||
&::after {
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.add-more-items--button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#sidebar + div .a2-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.widget div.error {
|
||||
color: $error;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
font-weight: normal;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#footer {
|
||||
.links-list {
|
||||
border-top: 1px solid $grey-400;
|
||||
ul {
|
||||
display: flex;
|
||||
li {
|
||||
border: none;
|
||||
a {
|
||||
font-size: .75rem;
|
||||
color: $grey-600;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// some colours from DSFR
|
||||
$white: #fff;
|
||||
$beige: #f9f8f6;
|
||||
|
||||
$blue-france-700: #00006D;
|
||||
$blue-france-500: #000091;
|
||||
$blue-france-400: #7F7FC8;
|
||||
|
||||
$grey-800: #1e1e1e;
|
||||
$grey-700: #383838;
|
||||
$grey-600: #6a6a6a;
|
||||
$grey-500: #9c9c9c;
|
||||
$grey-400: #cecece;
|
||||
$grey-200: #f0f0f0;
|
||||
$grey-100: #f8f8f8;
|
||||
|
||||
$info: #0762c8;
|
||||
$success: #008941;
|
||||
$warning: #fa5c00;
|
||||
$error: #e10600;
|
||||
$color-focus: #2a7ffe;
|
||||
|
||||
// publik
|
||||
$primary-color: $blue-france-500;
|
||||
$navigation-focus-hover-color: #e5e5f4; // curiously not defined above
|
||||
|
||||
|
||||
$font-family: Arial, sans-serif; // Marianne not free/ready yet
|
||||
$font-size: 16px;
|
||||
$font-color: $grey-700;
|
||||
|
||||
$notification_error_color: $error;
|
||||
$notification_warning_color: $warning;
|
||||
$notification_success_color: $success;
|
||||
$notification_info_color: $info;
|
||||
$notification-style: border-bar;
|
||||
|
||||
$width: 1200px;
|
||||
|
||||
$link-color: $font-color;
|
||||
|
||||
$button-background: white;
|
||||
$button-color: $blue-france-500;
|
||||
$button-border: 1px solid $blue-france-500;
|
||||
$button-hover-background: $grey-200;
|
||||
|
||||
$widget-background: $grey-200;
|
||||
$widget-border: none;
|
||||
$widget-color: $grey-800;
|
||||
$widget-focus-outline: 2px solid $color-focus;
|
||||
$widget-focus-outline-offset: 2px;
|
||||
$widget-custom-radio-checkbox: true;
|
||||
$widget-custom-radio-checkbox-color: $blue-france-500;
|
||||
$widget-custom-radio-checkbox-border-color: $grey-800;
|
||||
$widget-custom-radio-checkbox-marker-color: $blue-france-500;
|
||||
|
||||
$footer-background: white;
|
||||
$footer-color: $font-color;
|
||||
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-item-hover-mode: bottom-border;
|
||||
$nav-active-color: $blue-france-500;
|
||||
$nav-submenu-color: $font-color;
|
||||
$nav-button-background: white;
|
||||
$nav-button-color: $grey-700;
|
||||
$nav-menu-side: 32px;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-font-size: 2rem;
|
||||
$title-color: $grey-800;
|
||||
$title-weight: bold;
|
||||
$cell-background: $beige;
|
||||
$cell-border: none;
|
||||
|
||||
$or-separator: false;
|
||||
$cell-open-foldable-icon: "+"; // plus
|
||||
$cell-close-foldable-icon: "−"; // minus
|
||||
$buttons-order: previous, cancel (grow), submit;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="3.2116mm" height="3.2116mm" version="1.1" viewBox="0 0 3.2116 3.2116" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-75.196 -63.925)">
|
||||
<path d="m75.631 65.062 0.77299 0.87186 1.6142-1.6142 0.38967 0.46682-1.9557 1.9557-1.256-1.2559z" fill="#fff" fill-rule="evenodd"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 310 B |
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"label" : "Système de Design gouv.fr",
|
||||
"settings" : {
|
||||
"combo" : {
|
||||
"COMBO_ASSET_SLOTS.update" : {
|
||||
"header:logo" : {
|
||||
"label" : "Têtière : logo (« bloc marque »)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"variables" : {
|
||||
"theme_color" : "#000091"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
Loading…
Reference in New Issue