681 lines
12 KiB
SCSS
681 lines
12 KiB
SCSS
%button {
|
||
box-shadow: none;
|
||
text-decoration: none;
|
||
|
||
&:hover {
|
||
box-shadow: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
&:disabled {
|
||
border-color: $grey-400;
|
||
color: $grey-500;
|
||
}
|
||
}
|
||
|
||
%title {
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.75rem;
|
||
}
|
||
}
|
||
|
||
%cell {
|
||
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;
|
||
}
|
||
|
||
form div[class*=" grid-"] span.select2-selection,
|
||
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;
|
||
&[disabled] {
|
||
cursor: not-allowed;
|
||
}
|
||
&[readonly], &[disabled] {
|
||
box-shadow: inset 0 -2px 0 0 $grey-400;
|
||
}
|
||
&[readonly]:focus {
|
||
outline: none;
|
||
}
|
||
&:focus:not([readonly]) {
|
||
box-shadow: inset 0 -2px 0 0 $grey-600;
|
||
}
|
||
}
|
||
|
||
div.select2-container .select2-dropdown.select2-dropdown--below,
|
||
span.select2-container .select2-dropdown.select2-dropdown--below {
|
||
border: 1px solid $grey-600;
|
||
}
|
||
|
||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||
box-shadow: 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:first-child {
|
||
padding: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
dl#evolutions, .drafts-recall, form {
|
||
padding: 0 0 1em 0;
|
||
}
|
||
}
|
||
|
||
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;
|
||
word-spacing: calc(15px - 0.33em);
|
||
a {
|
||
text-decoration: none;
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
&:last-child {
|
||
border-left: 1px solid $grey-400;
|
||
margin-left: 15px;
|
||
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;
|
||
&::before {
|
||
outline: 2px solid $color-focus;
|
||
outline-offset: 2px;
|
||
}
|
||
}
|
||
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);
|
||
}
|
||
}
|
||
input[disabled][type=checkbox]:checked + span {
|
||
&::after {
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
.CheckboxWidget div.content label {
|
||
display: inline-block;
|
||
}
|
||
|
||
div.textcell,
|
||
div.gru-content div#rub_service {
|
||
h1, h3, h4, h5, h6 {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
color: $grey-800;
|
||
}
|
||
h1, h1.fr-h1, h2.fr-h1, h3.fr-h1, h4.fr-h1, h5.fr-h1, h6.fr-h1 {
|
||
font-size: 2.5rem;
|
||
line-height: 3rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 2rem;
|
||
line-height: 2.5rem;
|
||
}
|
||
}
|
||
|
||
h1.fr-h2, h2.fr-h2, h3.fr-h2, h4.fr-h2, h5.fr-h2, h6.fr-h2 {
|
||
font-size: 2rem;
|
||
line-height: 2.5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.75rem;
|
||
line-height: 2.25rem;
|
||
}
|
||
}
|
||
|
||
h3, h1.fr-h3, h2.fr-h3, h3.fr-h3, h4.fr-h3, h5.fr-h3, h6.fr-h3 { // title field
|
||
font-size: 1.75rem;
|
||
line-height: 2.25rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.5rem;
|
||
line-height: 2rem;
|
||
}
|
||
}
|
||
[type=hidden] + h3 { // 1st field
|
||
margin-top: 0;
|
||
}
|
||
h4, h1.fr-h4, h2.fr-h4, h3.fr-h4, h4.fr-h4, h5.fr-h4, h6.fr-h4 { // subtitle field
|
||
font-size: 1.5rem;
|
||
line-height: 2rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.375rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
h5, h1.fr-h5, h2.fr-h5, h3.fr-h5, h4.fr-h5, h5.fr-h5, h6.fr-h5 {
|
||
font-size: 1.375rem;
|
||
line-height: 1.75rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.25rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
h6, h1.fr-h6, h2.fr-h6, h3.fr-h6, h4.fr-h6, h5.fr-h6, h6.fr-h6 {
|
||
font-size: 1.25rem;
|
||
line-height: 1.75rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.125rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
h1, h3, h4, h5, h6 {
|
||
&.fr-display-xl {
|
||
font-size: 5rem;
|
||
line-height: 5.5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 4.5rem;
|
||
line-height: 5rem;
|
||
}
|
||
}
|
||
&.fr-display-lg {
|
||
font-size: 4.5rem;
|
||
line-height: 5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 4rem;
|
||
line-height: 4.5rem;
|
||
}
|
||
}
|
||
&.fr-display-md {
|
||
font-size: 4rem;
|
||
line-height: 4.5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 3.5rem;
|
||
line-height: 4rem;
|
||
}
|
||
}
|
||
&.fr-display-sm {
|
||
font-size: 3.5rem;
|
||
line-height: 4rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 3rem;
|
||
line-height: 3.5rem;
|
||
}
|
||
}
|
||
&.fr-display-xs {
|
||
font-size: 3rem;
|
||
line-height: 3.5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 2.5rem;
|
||
line-height: 3rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fr-callout {
|
||
color: $font-color;
|
||
background-color: $background-contrast-grey;
|
||
box-shadow: inset .25rem 0 0 $border-default-blue-france;
|
||
@each $name, $colours in $dsfr-colours {
|
||
&.fr-callout--#{$name} {
|
||
background: map_get($colours, "background-contrast");
|
||
box-shadow: inset 0.25rem 0 0 0 map_get($colours, "border-default");
|
||
}
|
||
}
|
||
padding: 2rem 3rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
padding: 1.5rem;
|
||
}
|
||
&__title {
|
||
color: $font-color;
|
||
font-weight: 700;
|
||
font-size: 1.5rem;
|
||
line-height: 2rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.375rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
&__text {
|
||
font-size: 1.25rem;
|
||
line-height: 2rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.125rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
margin: 0;
|
||
}
|
||
p + p {
|
||
/* may be a small deviation from dsfr but useful
|
||
for multiparagraphs callouts */
|
||
margin-top: 0.5rem;
|
||
}
|
||
&.fr-fi-information-line::before {
|
||
display: block;
|
||
content: "";
|
||
height: 1.5rem;
|
||
margin: -1rem 0 -1rem -2rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin: -1rem 0;
|
||
margin: -.5rem 0 .5rem;
|
||
}
|
||
background: url(information-line.svg) left center no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
div.comment-field,
|
||
div.textcell {
|
||
p, table, ul, ol {
|
||
line-height: 1.5rem;
|
||
}
|
||
p {
|
||
&.fr-text--lead {
|
||
font-size: 1.375rem;
|
||
line-height: 2.25rem;
|
||
color: $grey-700;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.25rem;
|
||
line-height: 2rem;
|
||
}
|
||
}
|
||
&.fr-text--lg {
|
||
font-size: 1.25rem;
|
||
line-height: 2rem;
|
||
color: $grey-700;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.125rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
&.fr-text--sm {
|
||
font-size: 0.875rem;
|
||
line-height: 1.5rem;
|
||
color: $grey-700;
|
||
}
|
||
&.fr-text--xs {
|
||
font-size: 0.75em;
|
||
line-height: 1.25rem;
|
||
color: $grey-600;
|
||
}
|
||
}
|
||
.fr-text--alt {
|
||
font-family: Spectral, Georgia, serif;
|
||
}
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
@if ($field-on-error-style == custom) {
|
||
.widget div.error {
|
||
color: $error-525;
|
||
margin-left: 0;
|
||
font-weight: normal;
|
||
padding-left: 1.5rem;
|
||
background: url(error-fill-red.svg) left 0.25rem no-repeat;
|
||
background-size: 1rem;
|
||
&::before {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
#footer {
|
||
.fr-footer__content {
|
||
p {
|
||
margin: 0 0 0.5rem;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin-left: 1rem;
|
||
margin-right: 1rem;
|
||
}
|
||
}
|
||
ul {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-self: center;
|
||
justify-content: space-between;
|
||
@media screen and ($max-mobile-viewport) {
|
||
flex-direction: column;
|
||
margin-left: 1rem;
|
||
}
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
padding-bottom: 0.5rem;
|
||
list-style: none;
|
||
li {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
a {
|
||
font-weight: bold;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5rem;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
.links-list {
|
||
border-top: 1px solid $grey-400;
|
||
ul {
|
||
display: flex;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin-left: 1rem;
|
||
flex-direction: column;
|
||
}
|
||
li {
|
||
border: none;
|
||
a {
|
||
display: inline-block;
|
||
font-size: .75rem;
|
||
color: $grey-600;
|
||
text-decoration: none;
|
||
&:hover {
|
||
background: none;
|
||
}
|
||
}
|
||
&:first-child {
|
||
a {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
@media screen and ($max-mobile-viewport) {
|
||
a {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
&:not(:first-child)::before {
|
||
background: $grey-400;
|
||
display: inline-block;
|
||
content: "";
|
||
vertical-align: middle;
|
||
position: relative;
|
||
width: 1px;
|
||
height: 1rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
a[target="_blank" i]::after {
|
||
font-family: FontAwesome;
|
||
content: " \f08e"; // external-link
|
||
vertical-align: baseline;
|
||
font-size: 80%;
|
||
}
|
||
|
||
div.textcell.pk-transparent {
|
||
h4, h4, h5, p, table {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
div.fileinfo a.remove::before {
|
||
color: $blue-france-500;
|
||
}
|
||
|
||
.successnotice,
|
||
.errornotice,
|
||
.warningnotice,
|
||
.infonotice,
|
||
#messages li.error,
|
||
#messages li.warning,
|
||
#messages li.info,
|
||
#messages li.success {
|
||
&::before {
|
||
content: "";
|
||
background: none 0px 50% no-repeat;
|
||
}
|
||
}
|
||
|
||
.errornotice, #messages li.error {
|
||
&::before { background-image: url(error-fill.svg); }
|
||
}
|
||
|
||
.infonotice, #messages li.info {
|
||
&::before { background-image: url(info-fill.svg); }
|
||
}
|
||
|
||
.warningnotice, #messages li.warning {
|
||
&::before { background-image: url(warning-fill.svg); }
|
||
}
|
||
|
||
.successnotice, #messages li.success {
|
||
&::before { background-image: url(success-fill.svg); }
|
||
}
|
||
|
||
@each $name, $colours in $dsfr-colours {
|
||
.background-alt-#{$name} {
|
||
background: map_get($colours, "background-alt");
|
||
}
|
||
}
|
||
|
||
.background-padding {
|
||
padding: 1rem;
|
||
}
|
||
|
||
form div.widget {
|
||
&.no-top-margin {
|
||
margin-top: 0;
|
||
}
|
||
&.no-bottom-margin {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.comment-field {
|
||
&.no-top-margin {
|
||
p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
&.no-bottom-margin {
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
div#tracking-code h3 {
|
||
font-size: 1.375rem;
|
||
line-height: 1.75rem;
|
||
@media screen and ($max-mobile-viewport) {
|
||
font-size: 1.375rem;
|
||
line-height: 1.75rem;
|
||
}
|
||
}
|
||
|
||
#toplinks a {
|
||
display: inline;
|
||
}
|