306 lines
10 KiB
SCSS
306 lines
10 KiB
SCSS
/*
|
|
Thème graphique iMio (basic)
|
|
|
|
La grande majorité des variables sont issues
|
|
de l'infrastructure SCSS d'Entr'ouvert.
|
|
|
|
Les apports iMio sont normalement préfixés "$imio-".
|
|
|
|
Documentation :
|
|
https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#generalites
|
|
*/
|
|
|
|
/*
|
|
Fonts
|
|
*/
|
|
@import "../../publik-base-theme/static/includes/fonts/opensans";
|
|
@import "../../publik-base-theme/static/includes/fonts/montserrat";
|
|
$font-family: 'Open Sans', Arial, Helvetica, sans-serif;
|
|
$title-font-family: 'Montserrat', sans-serif;
|
|
$font-size: 0.975em;
|
|
$title-font-size: $font-size * 1.1;
|
|
$title-font-style: bold;
|
|
|
|
/*
|
|
Couleurs
|
|
*/
|
|
$primary-color: #bd1f68 !default;
|
|
$darkened-primary-color: darken($primary-color, 20%);
|
|
$secondary-color: null;
|
|
$font-color: #111;
|
|
$title-color: $font-color;
|
|
$link-color: $primary-color;
|
|
$light-grey: #f2f2f2;
|
|
$light-black: #333;
|
|
$imio-buttons-hover-color: $darkened-primary-color;
|
|
$footer-link-color: $link-color;
|
|
$footer-color: white;
|
|
$footer-background: $light-black;
|
|
|
|
/*
|
|
Borders
|
|
*/
|
|
$imio-box-shadow-turned-on: true;
|
|
$imio-box-shadow-style: 0 1px 1px rgba(0, 0, 0, 0.01), 2px 2px 2px rgba(0, 0, 0, 0.07),
|
|
0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.001);
|
|
$imio-box-shadow-style-upper: 3.5px 8.7px 5.4px rgba(0, 0, 0, 0.055),
|
|
10px 25px 43px rgba(0, 0, 0, 0.11);
|
|
$border-radius: 3px;
|
|
$imio-cells-borders: true;
|
|
$imio-cells-borders-style: 1px solid rgb(226, 226, 226); // effective if activated
|
|
|
|
/*
|
|
Header
|
|
*/
|
|
$imio-header-height: 356px;
|
|
// $header-logo-size: 230px 80px;
|
|
$imio-header-logo-padding-top: 44px;
|
|
$imio-header-logo-padding-left: 50px;
|
|
$header-full-width-background: false;
|
|
|
|
/*
|
|
Généralités
|
|
*/
|
|
$width: 1618px;
|
|
$show-site-title: false;
|
|
$link-hover-decoration: underline;
|
|
$header-background-color: null;
|
|
$sidebar-position: left;
|
|
$sidebar-width: 25%;
|
|
$sidebar-max-width: $sidebar-width;
|
|
$sidebar-min-width: 15%;
|
|
$columns-gutter: 25px;
|
|
$sidebar-columns-gutter: $columns-gutter;
|
|
$grid-gutter: 1.2rem;
|
|
$mobile-limit: 800px;
|
|
$mobile-width: null;
|
|
$footer-full-width-background: true;
|
|
$imio-is-iacitizen: false !default;
|
|
|
|
/*
|
|
Formulaires
|
|
*/
|
|
$form-style: light;
|
|
$form-sidebar-position: left;
|
|
$form-sidebar-width: 18.5%;
|
|
$form-sidebar-gutter: 4%;
|
|
$form-titlebar-mode: form;
|
|
$widget-focus-outline: 1px solid $primary-color;
|
|
$widget-focus-outline-offset: 1px;
|
|
$button-background: $primary-color;
|
|
$button-color: white;
|
|
$button-border: 1px solid $primary-color;
|
|
$button-hover-background: $imio-buttons-hover-color;
|
|
$button-border-radius: $border-radius;
|
|
$button-focus-outline: $widget-focus-outline;
|
|
$button-focus-outline-offset: $widget-focus-outline-offset;
|
|
$buttons-order: previous, cancel, submit;
|
|
$widget-background: darken(white, 5%);
|
|
$widget-color: darken($font-color, 15%);
|
|
$widget-border: 1px solid #aaa;
|
|
$widget-focus-background: white;
|
|
$widget-focus-color: $widget-color;
|
|
$widget-focus-border: $widget-border;
|
|
$widget-box-shadow: 0 3px 6px #00000029;
|
|
$widget-focus-box-shadow: 0 5px 6px #00000029;
|
|
$widget-border-radius: $border-radius;
|
|
$widget-padding: 0.4em 0.7em;
|
|
$widget-custom-radio-checkbox: true;
|
|
$widget-custom-radio-checkbox-color: $button-background;
|
|
$widget-custom-radio-checkbox-border-color: $widget-custom-radio-checkbox-color;
|
|
$widget-custom-radio-checkbox-border-color: $button-background;
|
|
$widget-custom-radio-checkbox-marker-color: $widget-custom-radio-checkbox-color;
|
|
$widget-unique-checkbox-position: left;
|
|
$timetable-cell-background: transparentize($button-background, 0.8);
|
|
$timetable-cell-hover-color: $button-color;
|
|
$timetable-cell-hover-background: $button-background;
|
|
$timetable-cell-selected-color: $timetable-cell-hover-color;
|
|
$timetable-cell-selected-background: $timetable-cell-hover-background;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#formulaires
|
|
|
|
/*
|
|
Barre de navigation
|
|
*/
|
|
$nav-background: $light-grey !default;
|
|
$nav-menu-color: $font-color;
|
|
$nav-menu-side: 50px;
|
|
$nav-full-width-brackground: false;
|
|
$nav-color: #050707;
|
|
$nav-active-color: $primary-color;
|
|
$nav-border-color: $nav-active-color;
|
|
$nav-border-radius: $border-radius;
|
|
$nav-height: 3rem;
|
|
$nav-item-background: transparent;
|
|
$nav-item-selected-background: $nav-active-color;
|
|
$nav-item-selected-color: white;
|
|
$nav-item-hover-background: $imio-buttons-hover-color;
|
|
$nav-item-hover-color: $nav-item-selected-color;
|
|
$nav-item-spacing: 0px;
|
|
$nav-mobile-menu-background: $light-grey;
|
|
$nav-mobile-menu-item-color: $font-color;
|
|
$nav-item-selected-mode: background;
|
|
$nav-item-selected-border: 2px solid $nav-active-color;
|
|
$nav-item-hover-mode: background;
|
|
$nav-item-hover-border: $nav-item-selected-border;
|
|
$nav-after-image: true;
|
|
$nav-after-image-height: 275px;
|
|
// $nav-mobile-mode: hamburger;
|
|
$nav-submenu-background: $light-grey;
|
|
$nav-submenu-color: $font-color;
|
|
$nav-active-color: white;
|
|
$nav-mobile-limit: $mobile-limit;
|
|
$responsive-menu: top-to-bottom;
|
|
$nav-button-background: $nav-active-color;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#navigation
|
|
|
|
/*
|
|
Barre de navigation quand $nav-mobile-mode
|
|
a pour valeur bottom-bar.
|
|
*/
|
|
|
|
$nav-mobile-bottom-bar-height: 64px;
|
|
$nav-mobile-bottom-bar-background: $primary-color;
|
|
$nav-mobile-bottom-bar-color: white;
|
|
$nav-mobile-bottom-bar-item-hover-background: darken($primary-color, 10%);
|
|
$nav-mobile-bottom-bar-item-hover-color: white;
|
|
$nav-mobile-bottom-bar-item-selected-background: darken($primary-color, 5%);
|
|
$nav-mobile-bottom-bar-item-selected-color: white;
|
|
$nav-mobile-bottom-bar-badge-background: $darkened-primary-color;
|
|
$nav-mobile-bottom-bar-badge-color: $font-color;
|
|
$pwa-nav-limit: $mobile-limit;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#application-mobile-pwa
|
|
|
|
/*
|
|
Alertes
|
|
*/
|
|
$notification-style: border-bar;
|
|
$notification-icon-size: 3.618rem;
|
|
$notification-icon-position: top;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#messages
|
|
|
|
/*
|
|
Titres
|
|
*/
|
|
$title-background: transparent;
|
|
$title-transform: none;
|
|
$title-padding: 1.618rem;
|
|
$title-weight: bold;
|
|
$title-border-bottom: null;
|
|
$title-border-radius: $border-radius;
|
|
$title-border-top: 0;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#titres
|
|
|
|
|
|
/*
|
|
Fil d'ariane d'une démarche (blocs étapes)
|
|
Ces paramètres contrôlent le rendu du bloc
|
|
présentant les étapes ou pages d'une démarche.
|
|
|
|
Le rendu de ce bloc diffère automatiquement en
|
|
fonction de la taille de l'écran et de la
|
|
position de la sidebar $form-sidebar-position
|
|
pour s'adapter aux différents terminaux :
|
|
|
|
rendu mobile : seul l'étape courante est
|
|
affichée avec une indication du nombre
|
|
totale d'étapes;
|
|
|
|
rendu horizontal : Les marqueurs d'étapes
|
|
(chiffres) s'affichent côte à côte et sur
|
|
plusieurs itemgnes s'il le faut. Seul le
|
|
label de l'étape en cours s'affiche;
|
|
|
|
rendu vertical : (s'affiche uniquement si
|
|
la variable $form-sidebar-position a la
|
|
valeur left ou right) dispose les étapes
|
|
les unes au dessous des autres avec chacune
|
|
leur numéro et leur label.
|
|
|
|
Plusieurs options sont également disponibles pour
|
|
gérer le rendu du marqueur d'étape (chiffre).
|
|
*/
|
|
$wcs-steps-background: transparent;
|
|
$wcs-steps-spacing: 0.7rem;
|
|
$wcs-step-color: #4f4f4f;
|
|
$wcs-step-current-color: white;
|
|
$wcs-step-background: $light-grey;
|
|
$wcs-step-current-background: $imio-buttons-hover-color;
|
|
$wcs-step-border-bottom: 1px solid $wcs-step-color;
|
|
$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color;
|
|
$wcs-step-before-piled: true;
|
|
$wcs-step-marker-color: #4f4f4f;
|
|
$wcs-step-current-marker-color: #686868;
|
|
$wcs-step-marker-background: $wcs-step-background;
|
|
$wcs-step-current-marker-background: white;
|
|
$wcs-step-marker-size: 2.1em;
|
|
$wcs-step-current-marker-enlarge: 1.15;
|
|
$wcs-step-marker-type: disc tied;
|
|
$wcs-step-marker-tie-color: #c4c4c4;
|
|
$wcs-step-marker-tie-width: 0.5em;
|
|
$wcs-step-marker-background-type: solid;
|
|
$wcs-step-current-label-color: $wcs-step-current-color;
|
|
$wcs-step-current-color: solid;
|
|
$very-small-limit: 35em;
|
|
$wcs-steps-small-layout-limit: $very-small-limit;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#bloc-etapes-dune-demarche
|
|
|
|
/*
|
|
Cellules
|
|
*/
|
|
$cell-background: white;
|
|
$cell-border: if($imio-cells-borders , $imio-cells-borders-style, null);
|
|
$cell-border-radius: $border-radius;
|
|
$cell-entry-border-color: 1px solid #ccc;
|
|
$cell-entry-font-weight: bold;
|
|
$cell-entry-color: $imio-buttons-hover-color;
|
|
$cell-entry-hover-background: $imio-buttons-hover-color;
|
|
$cell-entry-hover-color: white;
|
|
$cell-entry-hover-effect: none;
|
|
$cell-image-position: after-title;
|
|
$cell-image-padding: O.5rem;
|
|
$cell-title-cover-border: false;
|
|
$footer-menucell-separator: none;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#cellules
|
|
|
|
/*
|
|
Cellules avec « carrousel » comme slug
|
|
*/
|
|
$carrousel-height: 20rem;
|
|
$carrousel-text-position: top right;
|
|
$carrousel-navigation: visible;
|
|
$carrousel-navigation-bullet-border: 1px solid white;
|
|
$carrousel-navigation-bullet-color: $button-color;
|
|
$carrousel-navigation-bullet-size: 10px;
|
|
$carrousel-item-mask-color: rba(0, 0, 0, 0.3);
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#carrousels
|
|
|
|
/*
|
|
Tableaux sur lesquels la classe pk-data-table
|
|
est appliquée.
|
|
*/
|
|
$table-caption-color: $title-color;
|
|
$table-caption-side: top;
|
|
$table-headers-background: $title-background;
|
|
$table-headers-color: $title-color;
|
|
$table-headers-font-style: $title-font-style;
|
|
$table-headers-font-size: $title-font-size;
|
|
$table-headers-font-weight: $title-weight;
|
|
$table-headers-font-family: $title-font-family;
|
|
$table-headers-text-transform: $title-transform;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#tableaux
|
|
|
|
/*
|
|
Retour en haut · Bouton permettant de remonter
|
|
en haut de page.
|
|
|
|
Élément masqué par défaut. Si affiché, il
|
|
le sera par défaut sous la forme d'un lien
|
|
en fin de pied de page.
|
|
*/
|
|
$back-top-display: block;
|
|
$back-top-icon-character: "\f102";
|
|
$back-top-icon-size: 2.5em;
|
|
$back-top-icon-label-space: 0.33em;
|
|
$back-top-layout-direction: vertical;
|
|
// https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#retour-en-haut
|