723 lines
11 KiB
SCSS
723 lines
11 KiB
SCSS
//
|
||
// Typo
|
||
//
|
||
|
||
h1, .h1 {
|
||
font-size: $fz-1;
|
||
font-family: $ff-ss-serif-cond;
|
||
text-align: center;
|
||
@media ($max-mobile-viewport) {
|
||
font-size: $fz-1m;
|
||
}
|
||
}
|
||
h2, .h2 {
|
||
@extend %title;
|
||
color: $font-color;
|
||
}
|
||
h3, .h3 {
|
||
font-size: $fz-2;
|
||
color: $font-color;
|
||
font-weight: 300;
|
||
text-transform: uppercase;
|
||
@media ($max-mobile-viewport) {
|
||
font-size: $fz-2m;
|
||
}
|
||
}
|
||
h4, .h4 {
|
||
font-size: $fz-3;
|
||
color: $font-color;
|
||
font-family: $ff-ss-serif-cond;
|
||
font-weight: bold;
|
||
@media ($max-mobile-viewport) {
|
||
font-size: $fz-3m;
|
||
}
|
||
}
|
||
a {
|
||
&:hover {
|
||
color: $blue-dark;
|
||
}
|
||
}
|
||
.arrow-link {
|
||
font-family: $ff-ss-serif-cond;
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
display: block;
|
||
&::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 0.9em;
|
||
background: url(icons/arrow-right.svg) no-repeat;
|
||
background-size: 100%;
|
||
margin-right: .5em;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
.cnil-blue-title {
|
||
color: $blue;
|
||
}
|
||
label {
|
||
color: $gray;
|
||
font-size: $fz-small;
|
||
font-weight: normal;
|
||
.required {
|
||
color: $error-color;
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// Layout
|
||
//
|
||
|
||
div#header,
|
||
div#footer,
|
||
div#main-content-wrapper,
|
||
.page-width,
|
||
.header-width {
|
||
padding-left: $columns-gutter;
|
||
padding-right: $columns-gutter;
|
||
}
|
||
@media ($max-mobile-viewport) {
|
||
.central-content #sidebar {
|
||
margin: 0;
|
||
}
|
||
#columns-wrapper {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// Header
|
||
//
|
||
|
||
$header-padding-desktop: 28px;
|
||
$header-padding-mobile: 12px;
|
||
|
||
.portal-profil {
|
||
background-color: var(--portal-profil-color);
|
||
color: white;
|
||
font-family: $ff-ss-serif;
|
||
text-transform: uppercase;
|
||
p {
|
||
margin: 0;
|
||
padding: 0.2em 0;
|
||
}
|
||
}
|
||
#top {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
@media ($max-mobile-viewport) {
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
#logo.has-logo {
|
||
position: relative;
|
||
flex-grow: 1;
|
||
line-height: 0;
|
||
padding-top: $header-padding-desktop;
|
||
padding-bottom: $header-padding-desktop;
|
||
text-align: left;
|
||
@media ($max-mobile-viewport) {
|
||
padding-top: $header-padding-mobile;
|
||
padding-bottom: $header-padding-mobile;
|
||
padding-left: $nav-menu-side + 10px;
|
||
}
|
||
a::before {
|
||
@media ($max-mobile-viewport) {
|
||
height: 24px;
|
||
width: 79px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#toplinks {
|
||
position: relative;
|
||
font-family: $ff-ss-serif;
|
||
font-size: $fz-xsmall;
|
||
margin-bottom: $header-padding-desktop;
|
||
@media ($max-mobile-viewport) {
|
||
margin-bottom: $header-padding-mobile;
|
||
}
|
||
@media ($min-desktop-viewport) {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.logout {
|
||
vertical-align: text-top;
|
||
&:hover {
|
||
filter: brightness(0.5);
|
||
}
|
||
}
|
||
}
|
||
.toplinks--list-item:first-child {
|
||
&::after {
|
||
content: "⋅"
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// NAV
|
||
//
|
||
|
||
.site-nav {
|
||
flex-grow: 1;
|
||
@media (max-width: $nav-mobile-limit) {
|
||
order: 1;
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
.gru-nav-wrapper {
|
||
@media (max-width: $nav-mobile-limit) {
|
||
margin-top: calc(-1 * #{$nav-menu-side} - 7px);
|
||
}
|
||
}
|
||
div.gru-nav {
|
||
.gru-nav-button {
|
||
margin-left: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
> ul {
|
||
margin: 0;
|
||
}
|
||
}
|
||
// hide nav to anonymous user
|
||
.anonymous-user {
|
||
.site-nav {
|
||
display: none;
|
||
}
|
||
#logo.has-logo {
|
||
@media ($max-mobile-viewport) {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// Main
|
||
//
|
||
|
||
main {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.cnil-page-header {
|
||
p {
|
||
@extend .h3;
|
||
margin-bottom: 2rem;
|
||
text-transform: none;
|
||
text-align: center;
|
||
font-family: $ff-ss-serif-cond;
|
||
strong {
|
||
font-weight: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// Cells
|
||
//
|
||
|
||
%title {
|
||
line-height: 1.1;
|
||
}
|
||
|
||
// foldable icon to left
|
||
div.cell.foldable > div > h2:first-child {
|
||
display: flex;
|
||
padding-right: extract-right($title-padding);
|
||
&::after {
|
||
font-size: $fz-3;
|
||
color: $font-color;
|
||
position: static;
|
||
display: inline-block;
|
||
flex: 0 0 1.5rem;
|
||
margin-right: 1rem;
|
||
text-align: center;
|
||
line-height: 1;
|
||
order: -1;
|
||
align-self: center;
|
||
}
|
||
}
|
||
// More left padding on cells
|
||
@media($min-desktop-viewport) {
|
||
.page-template-standard-sidebar #columns .cell {
|
||
&:not(.foldable) .cell--title,
|
||
&:not(.foldable) h2:first-child,
|
||
h2:first-child ~ * {
|
||
padding-left: 3.5rem;
|
||
}
|
||
div.links-list ul {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
}
|
||
// Default links-list
|
||
%cell-links-list {
|
||
padding-left: 1em;
|
||
padding-right: 1em;
|
||
& > li > a {
|
||
font-family: $ff-ss-serif;
|
||
font-weight: 600;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
li div.description {
|
||
padding: 0;
|
||
p {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Custom cells
|
||
.bordered-links-list {
|
||
.gru-content &.cell {
|
||
.links-list ul {
|
||
& > li {
|
||
position: relative;
|
||
border: 1px solid $gray-dark;
|
||
background-color: $gray-xxlight;
|
||
margin-bottom: 1em;
|
||
padding: 0 1em;
|
||
}
|
||
& > li > a {
|
||
position: static;
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.two-cols-links-list {
|
||
.gru-content &.cell {
|
||
.links-list ul {
|
||
@extend .fx-grid;
|
||
--grid-gutter: 1em;
|
||
padding: 1em;
|
||
@media ($min-desktop-viewport) {
|
||
--nb-cols: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cell-light-title {
|
||
.gru-content &.cell {
|
||
.cell--title, h2:first-child {
|
||
@extend .h3;
|
||
}
|
||
}
|
||
}
|
||
.arrow-links-list {
|
||
.gru-content &.cell {
|
||
.links-list ul {
|
||
& > li {
|
||
border: none;
|
||
}
|
||
& > li:not(:last-child) a {
|
||
padding-bottom: 0;
|
||
}
|
||
& > li > a {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
@extend .arrow-link;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.wcs-current-drafts-cell,
|
||
.wcs-current-forms-cell {
|
||
.gru-content &.cell {
|
||
// Forms counter
|
||
.cell--title, h2:first-child {
|
||
display: flex;
|
||
.cnil-forms-counter {
|
||
flex-grow: 1;
|
||
text-align: right;
|
||
color: $font-color;
|
||
margin-left: .66em;
|
||
}
|
||
}
|
||
@extend .bordered-links-list;
|
||
.list-of-forms {
|
||
ul > li {
|
||
padding-left: 48px;
|
||
background: url(icons/file.svg) no-repeat;
|
||
background-position: 16px center;
|
||
background-size: 16px auto;
|
||
}
|
||
.form-title {
|
||
flex-grow: 1;
|
||
font-family: $ff-serif;
|
||
}
|
||
.form-number {
|
||
flex-grow: 0;
|
||
font-family: $ff-serif;
|
||
font-weight: normal;
|
||
opacity: 1;
|
||
color: $gray;
|
||
font-size: $font-size-small;
|
||
}
|
||
.form-digest {
|
||
color: $font-color;
|
||
}
|
||
.form-status {
|
||
font-family: $ff-serif;
|
||
font-size: $fz-small;
|
||
color: $blue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#sidebar {
|
||
.cell {
|
||
@extend .cell-light-title;
|
||
}
|
||
.tracking-code-input-cell form {
|
||
input {
|
||
margin-bottom: 1rem;
|
||
margin-top: 0;
|
||
}
|
||
button {
|
||
@extend %button;
|
||
vertical-align: baseline;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
//
|
||
// WCS & Forms
|
||
//
|
||
|
||
%button {
|
||
text-transform: uppercase;
|
||
font-family: $ff-ss-serif-cond;
|
||
font-weight: bold;
|
||
box-shadow: none !important;
|
||
&:disabled {
|
||
--background: #{$gray};
|
||
}
|
||
}
|
||
|
||
%submit-button {
|
||
--background: #{$blue};
|
||
border-color: var(--background);
|
||
}
|
||
%cancel-button {
|
||
--color: #{$blue};
|
||
--background: white;
|
||
--hover-color: #{$blue-dark};
|
||
--hover-background: white;
|
||
border-color: currentColor;
|
||
}
|
||
|
||
div.buttons {
|
||
.previous-button button {
|
||
@extend %cancel-button;
|
||
}
|
||
.cancel-button button {
|
||
&:not(:hover) {
|
||
border-color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
$form-padding: 1rem;
|
||
|
||
%form-separator {
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
background-color: $body-background;
|
||
height: $fz-small;
|
||
margin-bottom: $form-padding;
|
||
margin-left: -1*$form-padding;
|
||
margin-right: -1*$form-padding;
|
||
}
|
||
}
|
||
|
||
div#rub_service {
|
||
display: flow-root;
|
||
.drafts-recall,
|
||
form {
|
||
padding: $form-padding;
|
||
}
|
||
.drafts-recall {
|
||
border-bottom: $form-padding solid $body-background;
|
||
}
|
||
h3 {
|
||
@extend .h4;
|
||
}
|
||
h3.separator {
|
||
@extend %form-separator;
|
||
}
|
||
h4 {
|
||
font-size: 1rem;
|
||
color: $blue;
|
||
font-family: $ff-serif;
|
||
font-weight: normal;
|
||
&::before {
|
||
content: "– "
|
||
}
|
||
}
|
||
div.buttons {
|
||
@extend %form-separator;
|
||
&::before {
|
||
flex-basis: calc(100% + #{$form-padding*2)};
|
||
}
|
||
}
|
||
div.dataview {
|
||
padding: $form-padding;
|
||
.label {
|
||
@extend label;
|
||
}
|
||
}
|
||
.back-home-button {
|
||
padding: $form-padding;
|
||
a {
|
||
@extend .arrow-link;
|
||
}
|
||
}
|
||
}
|
||
|
||
.widget-with-error {
|
||
input, textarea, select {
|
||
border-color: $error-color;
|
||
border-width: 1px;
|
||
outline: 1px solid $error-color;
|
||
}
|
||
}
|
||
|
||
div#tracking-code {
|
||
background-color: white;
|
||
padding-bottom: 1rem;
|
||
h3 {
|
||
@extend .h3;
|
||
padding-bottom: 0;
|
||
}
|
||
a {
|
||
font-family: $ff-ss-serif;
|
||
color: $blue;
|
||
}
|
||
form {
|
||
padding-left: 1rem;
|
||
}
|
||
.form-discard-draft {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
// Steps
|
||
.wcs-steps {
|
||
background-color: white;
|
||
font-family: $ff-ss-serif-cond;
|
||
h2 {
|
||
@extend .h3;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media ($mq-max--wcs-steps-small-layout) {
|
||
.wcs-steps {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
.wcs-step {
|
||
&.current {
|
||
font-weight: normal;
|
||
}
|
||
&--marker::before {
|
||
all: unset;
|
||
content: "/";
|
||
order: 2;
|
||
|
||
}
|
||
&--marker-nb, &--marker-total {
|
||
transform: none;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include desktop-vertical-steps() {
|
||
.wcs-steps {
|
||
font-size: 1rem;
|
||
padding-bottom: 1rem;
|
||
font-weight: bold;
|
||
&--list {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.wcs-step {
|
||
padding-left: 2em;
|
||
&.step-before {
|
||
color: $blue;
|
||
background-size: 1em auto;
|
||
background-image: url(icons/check.svg);
|
||
background-repeat: no-repeat;
|
||
background-position: top 50% left 0.8em;
|
||
}
|
||
&.step-before &--marker {
|
||
color: inherit;
|
||
}
|
||
&.current {
|
||
background-size: 1ex 1ex;
|
||
background-repeat: no-repeat;
|
||
background-position: top 50% left 1em;
|
||
background-image: radial-gradient(closest-side, #{$font-color} 100%, transparent);
|
||
}
|
||
&--label {
|
||
font-size: 1em;
|
||
}
|
||
&--marker-nb::after {
|
||
content: ".";
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
// A2
|
||
//
|
||
|
||
.cnil-login-page,
|
||
.cnil-registration-page {
|
||
--padding: 0.5rem;
|
||
background: white;
|
||
padding: var(--padding);
|
||
padding-top: 1px;
|
||
@media ($min-desktop-viewport) {
|
||
--padding: 1rem
|
||
}
|
||
}
|
||
|
||
.a2-block-title,
|
||
div.block h2.a2-block-title,
|
||
div.a2-block h2.a2-block-title,
|
||
#frontend-registration-email h2 {
|
||
@extend .h4;
|
||
text-align: center;
|
||
}
|
||
|
||
//
|
||
// Notifications
|
||
//
|
||
|
||
.errornotice,
|
||
.warningnotice,
|
||
.successnotice,
|
||
.infonotice {
|
||
border: 1px solid var(--dark-color);
|
||
font-size: $fz-small;
|
||
padding: 1em;
|
||
padding-left: 3em;
|
||
a:not(.pk-button) {
|
||
color: var(--dark-color);
|
||
}
|
||
&::before {
|
||
top: 1em;
|
||
color: var(--dark-color);
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
.errornotice {
|
||
--dark-color: #D02829;
|
||
&::before {
|
||
content: "";
|
||
background-image: url(icons/alert-rouge.svg);
|
||
}
|
||
}
|
||
.warningnotice {
|
||
--dark-color: #776100;
|
||
&::before {
|
||
content: "";
|
||
background-image: url(icons/alert-jaune.svg);
|
||
}
|
||
}
|
||
.successnotice {
|
||
--dark-color: #008619;
|
||
}
|
||
.infonotice {
|
||
--dark-color: #004084;
|
||
&::before {
|
||
content: "";
|
||
background-image: url(icons/info.svg);
|
||
}
|
||
}
|
||
|
||
|
||
//
|
||
// Footer
|
||
//
|
||
|
||
#footer {
|
||
font-size: $fz-small;
|
||
|
||
a:hover {
|
||
color: $blue-light;
|
||
}
|
||
|
||
.cell h2:first-child,
|
||
.cell--title {
|
||
background-color: transparent;
|
||
color: white;
|
||
font-size: 1em;
|
||
font-weight: 800;
|
||
font-family: $ff-ss-serif;
|
||
text-transform: uppercase;
|
||
}
|
||
div.links-list ul {
|
||
> li {
|
||
border-bottom: none
|
||
}
|
||
> li > a {
|
||
font-size: $fz-xsmall;
|
||
font-family: $ff-serif;
|
||
font-style: italic;
|
||
padding-bottom: 0.15em;
|
||
padding-top: 0.15em;
|
||
}
|
||
}
|
||
.menucell {
|
||
.menu {
|
||
margin: 1em 0;
|
||
}
|
||
.menu--item {
|
||
padding-right: .33em;
|
||
margin-right: .33em;
|
||
}
|
||
.menu--link {
|
||
text-transform: uppercase;
|
||
font-weight: 800;
|
||
padding: 0;
|
||
&:not(:hover) {
|
||
text-decoration: none;
|
||
}
|
||
&:hover {
|
||
color: $blue-light;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|