publik-base-theme/static/strasbourg-2018/_custom.scss

1595 lines
30 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

#content div.textcell {
@extend %organism-rte;
}
#content {
@extend %molecule-inlines-rte;
@extend %molecule-headings-rte;
// Design des champs
@extend %molecule-form-components;
}
#content .customSelectContain .customSelect, #rub_service .customSelectContain
.customSelect, .mseu-main-form .customSelectContain .customSelect,
.generic-form .customSelectContain .customSelect {
border: 2px solid #dddddd;
}
#rub_service .customSelectContain .customSelect {
transition: all, 0.5s;
}
#rub_service .customSelectContain.focused .customSelect {
background: white;
}
/* cancel the width: 1200px from site css */
#content div.cell h1 {
width: auto;
}
#content a {
text-decoration: none;
}
/* cancel hyphenation of some elements */
@media screen and (min-width: 500px) {
#side #steps ol li .label,
.form-content--title,
.section-demarches #rub_service h2,
#content div.textcell h2, #content h2 {
hyphens: none;
}
}
/* cancel focus state for input elements on validation page */
div#content div#rub_service div.form-validation {
input {
cursor: default;
}
input:focus {
border-color: transparent;
background-color: #f6f6f6;
}
}
/* restore [hidden] behaviour for form fields */
#rub_service .widget[hidden] {
display: none;
}
/* style authentic forms */
%button,
a.pk-button,
div.block form button, div.a2-block form button,
div#content div#columns div.a2-block form input[type=submit],
#content div#login-page div.block form input[type=submit] {
height: 50px;
border-radius: 0;
padding: 0 20px;
transition: all, 0.5s;
line-height: 50px;
display: inline-block;
width: auto;
background-color: $second-color;
border: none;
color: $core-color;
border-bottom: 1px solid transparent;
&:hover, &:focus{
background-color: $core-color;
color: $second-color;
text-decoration: none !important;
}
&.submit-button,
&.delete-button,
&[value="Valider"],
&[value="Modifier"] {
float: right;
margin-right: 1ex;
}
&.cancel-button,
&[name=cancel] {
float: left;
background: white;
color: $core-color;
border-bottom: 1px solid $core-color;
&:hover, &:focus{
background-color: $core-color;
color: $second-color;
}
}
}
#content div#login-page div.block form button,
#content div#login-page div.block form input[type=submit] {
/* center */
display: block;
margin: 0 auto 1.5rem auto;
}
#content div#login-page div.block form button.cancel-button,
#content div#login-page div.block form button[name=cancel],
#content div#login-page div.block form input[type=submit][name=cancel] {
display: none;
}
.login-actions {
clear: both;
}
/* cancel/adjust things */
.section-infos #rub_service .comment-field,
.section-demarches #rub_service .comment-field {
font-style: inherit;
}
div.hint {
b { font-weight: bold; }
i { font-style: italic; }
}
.ui-dialog-titlebar-close::after {
content: "×";
color: black;
}
div.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
font-size: 100%;
}
.section-demarches #rub_service .CheckboxesWidget input[type="checkbox"]:checked + span::after,
.section-demarches #rub_service .CheckboxesWidget input[type="checkbox"] + span::before,
.section-demarches #rub_service .RadiobuttonsWidget input[type="radio"]:checked + span::after,
.section-demarches #rub_service .RadiobuttonsWidget input[type="radio"] + span::before {
top: 1.5ex;
}
/* style formdata history */
ul#evolutions,
div#content #disclose-dataview,
div#receipt-intro {
margin: 1em;
padding: 0;
display: block;
}
div.qommon-map {
height: 280px;
}
p.use-file-from-fargo {
margin-top: 1ex;
span {
display: inline-block;
cursor: pointer;
font-style: normal;
text-transform: uppercase;
color: #7D7D7D;
border-bottom: 1px solid #7D7D7D;
transition: all, 0.5s;
font-size: 1.4rem;
padding: 1ex;
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237d7d7d' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
margin-left: 20px;
}
&:hover {
background: #7D7D7D;
color: white;
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
}
}
}
}
/* journal */
ul#evolutions {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
#evolutions:after {
/* the vertical timeline itself */
content: "";
background: #bbb;
position: absolute;
width: 1px;
top: 40px;
left: 30px;
height: calc(100% - 40px);
z-index: 0;
border-radius: 3px;
}
ul#evolutions li {
list-style-image: none;
margin: 1em 0 2em 0;
z-index: 10;
position: relative;
}
ul#evolutions li:after {
/* li:after, horizontal line, from the timeline to the item */
content: "";
background: #bbb;
position: absolute;
width: 100px;
left: 30px;
top: 39px;
height: 1px;
z-index: -10;
}
ul#evolutions .evolution-metadata {
width: auto;
display: inline-block;
background: white;
margin: 0 0 0 60px;
padding: 1ex;
padding-top: 22px;
padding-bottom: 0;
}
ul#evolutions span.time {
display: block;
color: #aaa;
}
ul#evolutions li div.msg span.time {
padding-left: 0;
}
ul#evolutions span.status {
font-weight: bold;
display: inline-block;
}
ul#evolutions span.user {
display: block;
opacity: 0.5;
}
ul#evolutions span.user span {
font-size: 80%;
}
ul#evolutions li div.msg {
padding: 1ex;
padding-top: 0;
position: relative;
background: white;
margin-left: 60px;
margin-right: 30px;
}
ul#evolutions li.msg-in div.msg {
}
ul#evolutions li.msg-out div.msg {
}
ul#evolutions li div.msg div.comment {
padding: 1ex 1em;
background: #EEEEEE;
}
#evolutions .msg-system {
margin-bottom: 30px;
}
ul#evolutions li span.item {
/* left circle icon */
position: absolute;
text-align: center;
line-height: 36px;
font-family: FontAwesome;
width: 40px;
height: 40px;
display: block;
left: 10px;
border-radius: 20px;
border: 1px solid #888;
top: 20px;
background: $button-color !important;
color: $button-background !important;
}
ul#evolutions li:first-child span.item:before {
content: "\f067"; /* plus */
}
ul#evolutions li.msg-system span.item:before {
content: "\f141"; /* ellipsis-h */
}
ul#evolutions li.endpoint span.item::before {
content: "\f00c"; /* check */
}
ul#evolutions li span.item:before {
content: "\f075"; /* comment */
}
div.dataview {
div.field {
margin-bottom: 1ex;
}
span.label {
color: inherit;
font-weight: bold;
white-space: normal;
}
.value {
display: block;
margin-left: 1ex;
}
}
div#columns div#rub_service div#summary h2,
div#columns div#rub_service div#evolution-log h2 {
@extend %atom-h3-rte;
margin-bottom: 1rem;
}
div#columns div#rub_service div#evolution-log h2 {
margin-top: 2em;
}
ul#evolutions li::after {
content: none;
}
ul#evolutions li span.item {
background: $primary-color !important;
color: white !important;
border: none;
line-height: 40px;
}
#evolutions::after {
height: calc(100% - 40px - 30px);
}
div.timetable-widget button,
div#content form#wf-actions button {
padding: 15px 20px;
text-decoration: none;
position: relative;
display: inline-block;
border-color: rgba(0, 0, 0, 0);
transition: all, 0.5s;
overflow: hidden;
background-color: $second-color;
color: $core-color;
font-family: $site-font;
text-transform: uppercase;
font-size: 1.4rem;
&:hover, &:focus{
background-color: $core-color;
color: #FFFFFF;
}
}
div.timetable-widget button {
padding: 0;
&.next,
&.prev {
position: relative;
text-indent: -10em;
&::after {
text-indent: 0;
position: absolute;
content: "<";
display: block;
top: 0;
line-height: 3em;
left: 0;
width: 100%;
cursor: pointer;
}
&.next::after {
content: ">";
}
}
}
main {
z-index: 10;
}
#rub_service > h2 {
text-align: center;
&::before {
content: '';
display: block;
height: 40px;
background-size: 50px;
background-position: top;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dddddd' width='371.9' height='82.2'%3E%3Cpath fill='none' d='M-1-1h582v402H-1z'/%3E%3Cg%3E%3Cpath d='M351.926 42.6c-13.2 0-20.6-5.8-31.8-16.2-11.3-10.3-26.4-26.4-50.9-26.4h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.7 8.8-16.6 14.8-27.4 16.2-1.4 0-3 .5-4.9.5-13.2 0-20.6-5.8-31.8-16.2-3-2.5-5.8-5.4-9.3-8.8-10.3-8.8-23-18.1-41.6-18.1h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.8 8.8-16.6 14.7-27.4 16.2-1.4 0-3 .5-4.9.5-2.5 0-5.4.5-7.4 1.4-1 .5-2.5 1-3.4 1.9-5.4 3.4-9.3 9.8-9.3 16.2 0 2.5.5 5.4 1.4 7.4 1 2.5 2.5 4.4 4.4 6.4 1 1 1.9 1.9 3 2.5 1 .5 1.9 1.4 3.4 1.9 1.4.5 2.5 1 3.9 1 1.5.4 2.5.4 4 .4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 3 1.4 6.9 3.9 11.3 8.3 2.5 1.9 5.4 4.4 8.3 7.4 12.3 11.3 31.4 26.4 58.7 26.4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 1.4.5 3.4 1.9 5.4 3 3.9 2.5 8.3 6.9 14.7 12.2 12.3 11.3 31.4 26.4 58.8 26.4h1.9c10.3-.5 19.6-10.3 18.6-20.5.7-10.3-9.6-19.1-19.9-18.6z'/%3E%3C/g%3E%3C/svg%3E");
}
}
#side {
border-top: none;
padding-top: 0;
}
div.buttons,
div.dataview > p,
div.dataview div.page {
clear: both;
}
form div.page::after,
div.dataview div.page::after {
content: "";
display: block;
clear: both;
}
div.widget div.content div.error {
@extend .errornotice;
margin-top: 0;
}
#steps.steps-1 {
display: none;
}
/* give a different style to page titles in validation page */
.section-demarches #rub_service div.form-validation div.page > h3 {
@extend %atom-h2-rte;
margin-top: 60px;
}
/* restyle elements in comment fields */
div.comment-field {
ul {
@extend %atom-ul-rte;
li:before {
top: 10px;
}
}
ol {
@extend %atom-ol-rte;
li:before {
}
}
}
.section-demarches div#content div#rub_service .comment-field {
p {
margin: 10px 0;
}
}
.wcs-step {
&--marker {
border-bottom: 0 none !important;
text-decoration: none;
cursor: pointer;
&-total {
display: none;
}
}
}
/* reduce size of steps when there are too many of them; this is a copy of the
* responsive part from src/02-particules/02-modules/forms/main-form/
* _molecule-form-progressbar.scss
*/
%small-steps {
ol {
&:before {
top: 14px;
}
li {
&.first {
&::before {
display: none;
}
}
&.last {
&::after {
display: none;
}
}
width: unset;
.marker {
&::before {
top: -1px;
}
height: 30px;
width: 30px;
font-size: 1.4rem;
}
.label {
display: none;
}
}
}
}
@mixin small-steps-list {
@for $i from 7 through 40 {
#side #steps.steps-#{$i} {
@extend %small-steps;
}
}
}
@include small-steps-list;
div#seu-grid-carrefour div.wcsformsofcategorycell ul > li {
border: none;
}
div#seu-grid-carrefour div.wcsformsofcategorycell ul > li:hover > a {
color: white;
text-decoration: none;
background-color: transparent;
}
$category-slugs: commerces, contact, enquete_pub, environment_nok, environmnt_ok, familles, orga-evenements, papiers, sante-social, security, sport-culture, stationnement, travaux, vie_pratique, voirie, signalements, culture;
@each $category in $category-slugs {
div.#{$category} .demarche-topic__background {
background-image: url(img/demarches_#{$category}.jpg);
}
}
.seu header .seu-nav-top .seu-scrolled-logo {
@include RWD(mobile) {
margin-left: 10px;
}
}
a#bottom-logo {
padding-top: 8px;
}
#content div.cell h2.layout-demarche__title:first-child {
@extend .layout-demarche__title;
white-space: pre;
}
#content div.home {
width: 100%;
div.cell {
margin: 0;
}
}
#content .demarche-list,
#content .demande-list {
a:hover {
text-decoration: none;
}
.demande-teaser .btn-text strong {
color: inherit;
}
}
body.anonymous #nav-side {
display: none;
}
#messages li,
div.infonotice,
div.successnotice,
div.warningnotice,
div.errornotice {
&::before {
top: auto;
}
}
.mes-informations {
div.actions {
display: flex;
@include RWD(mobile) {
display: block;
}
justify-content: space-around;
width: 100%;
}
h1 {
margin-top: 2em;
}
&.suppression {
margin-top: 4em;
border-top: 2px solid #F6F6F6;
padding-top: 4em;
.btn-square--filled--core {
border-color: #FF1F53;
background-color: #FF1F53;
}
}
}
div.webform-layout-box {
display: flex;
@include RWD(mobile) {
display: block;
}
justify-content: space-between;
width: 100%;
div.form-group {
.form-field {
padding-right: 1em;
}
&:last-child {
.form-field {
padding-right: 0;
}
}
&.address,
&.mobile,
&.phone {
width: 50%;
@include RWD(mobile) {
width: auto;
}
}
}
}
.interests-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.type {
text-transform: uppercase;
color: #2da192;
font-size: 1.4rem;
}
.name {
text-transform: uppercase;
color: $core-color;
font-size: 1.8rem;
font-weight: bold;
}
li {
margin-bottom: 2rem;
display: inline-block;
width: 20em;
@include RWD(mobile) {
width: auto;
}
}
}
#interests,
#interests-edit-form {
padding: 4rem 6rem;
@include RWD(mobile) {
padding: 1rem;
}
.interests-list {
display: block;
li {
display: block;
.name {
text-transform: none;
color: #5c5c5c;
font-weight: normal;
}
margin-bottom: 0.5ex;
}
}
.interests-types {
width: 40em;
display: flex;
@include RWD(mobile) {
width: auto;
display: block;
}
h3 {
font-family: $montserrat;
font-weight: 700;
font-size: 1.7rem;
color: #505050;
margin-bottom: 10px;
text-transform: uppercase;
}
}
}
#favorite-dlg,
#interests,
#interests-edit-form {
.actions {
margin-top: 3rem;
text-align: center;
#favorite-cancel-button,
#interests-cancel-button {
float: left;
@include RWD(mobile) {
display: none;
}
}
#favorite-login-button,
#interests-edit-button {
float: right;
}
}
}
#interests {
.interests-types {
width: 100%;
& > div {
width: 50%;
@include RWD(mobile) {
width: auto;
}
h3 {
color: $core-color;
text-transform: none;
}
}
li {
width: auto;
}
}
}
div.ui-dialog.dlg-favorites .ui-dialog-titlebar,
div.ui-dialog.dlg-interests .ui-dialog-titlebar {
display: none;
}
#publik-portal-agent {
display: none;
}
#content .registration_frontend h3 {
font-size: 2rem;
}
#content .registration_frontend {
margin-bottom: 4rem;
.buttons {
text-align: right;
}
&::after {
content: "";
clear: both;
display: block;
}
}
#content div.a2-block h3.email-sent {
text-align: center;
font-family: $montserrat;
font-weight: 700;
font-size: 1.7rem;
color: #505050;
margin-bottom: 10px;
text-transform: uppercase;
@include RWD(mobile){
font-size: 1.5rem;
}
}
#content div.a2-block h3.email-address {
@extend %text-form-label;
text-align: center;
color: $core-color;
text-transform: none;
margin-top: 0;
}
/* logout page elements */
#continue-link {
display: none;
}
ul.logout-list {
&::before {
content: "Déconnexion en cours...";
display: inline-block;
position: relative;
top: 16px;
padding-right: 1ex;
}
div {
display: inline-block;
width: 16px;
text-indent: -10000px;
img, iframe {
display: block;
}
}
}
.mseu #nav-side #nav-notifications .notif-list .notif-item,
.mseu #nav-side #nav-notifications .notif-list .notif-last {
background: white;
}
.CheckboxWidget {
input[type="checkbox"]{
@extend %atom-form-checkbox;
}
label span {
font-weight: 600;
}
}
.template-address input[type="checkbox"] {
@extend %atom-form-checkbox;
}
.mseu #nav-side #nav-notifications #trigger-notifications .notif-amount {
width: 18px;
}
#user-files {
table {
thead th {
text-transform: uppercase;
color: $core-color;
font-weight: bold;
padding-bottom: 1ex;
}
tbody tr.odd, tbody tr.even {
background: white;
}
tbody tr {
border-top: 2px solid #f6f6f6;
&:first-child,
&.description-row {
border-top: none;
}
&.description-row td {
padding-bottom: 2ex;
}
td {
padding-left: 0.5ex;
}
td.title {
color: $core-color;
text-decoration: underline;
}
td.action-column {
vertical-align: top;
a {
padding: 0.5ex 1ex
}
}
}
@include RWD(mobile) {
th.creation, td.creation,
th.expiration, td.expiration {
display: none;
}
}
tr::before {
content: none !important; // hide file type icon
}
a.icon-remove::before, a.icon-edit::before {
}
tr.empty td {
padding: 1em 0.5ex;
font-size: 120%;
}
}
button {
margin-right: 2em;
float: right;
@include RWD(mobile) {
margin-right: 0;
float: none;
}
display: inline-block;
cursor: pointer;
font-style: normal;
text-transform: uppercase;
color: $core-color;
border-bottom: 1px solid $core-color;;
transition: all, 0.5s;
font-size: 1.4rem;
padding: 1ex;
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237d7d7d' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
margin-left: 20px;
}
&:hover {
background: $core-color;
color: white;
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
}
}
}
}
td.thumbnail {
display: table-cell;
margin: auto;
background: transparent;
padding: 1rem 0;
}
div.ui-dialog {
p {
margin: 1rem 0;
}
label {
display: block;
padding-bottom: 3px;
}
}
div.ui-dialog-buttonset button {
padding: 1rem 1rem;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
&.submit-button {
background: $button-background;
color: $button-color;
}
&.delete-button {
background: #ff1f53;
color: $button-color;
}
}
td.action-column a {
display: block;
padding: 1ex;
margin: 0.5ex 0;
border-bottom: 1px solid transparent;
&:hover {
border-bottom: 1px solid $core-color;
}
}
.fargo-pick-popup td.description {
font-size: 90%;
color: #444;
}
#content .a2-block form p {
margin-top: 0;
margin-left: 0;
}
.a2-block ul.errorlist {
font-size: 90%;
color: red;
}
#rub_service .widget.has-file .FileWidget {
margin-bottom: 0;
}
.fileprogress {
border: 1px solid #888;
}
.fileprogress .bar {
background: $button-background;
color: $button-color;
line-height: 1.5em;
padding-left: 1ex;
white-space: nowrap;
}
.fileinfo {
line-height: 1.5em;
}
div.fileinfo a.remove {
text-indent: 0;
background: none;
color: transparent;
}
div.fileinfo a.remove:before {
font-family: FontAwesome;
content: "\f057";
color: $button-background;
}
#content section h2 {
margin-top: 50px;
text-align: center;
}
#main-content #content section div.form-field > input[readonly] {
border-color: transparent;
background: white;
}
.completion-info {
text-align: center;
color: $core-color;
font-size: 1.429rem;
font-weight: bold;
}
#completion-bar {
background: #c0bebf;
width: 80%;
margin: 1em auto;
height: 17px;
border-radius: 10px;
div {
position: relative;
background: #f2a501;
border-radius: 10px;
height: 17px;
&::after {
content: "";
position: absolute;
right: 0;
top: -12px;
height: 40px;
width: 40px;
background: white;
border-radius: 100%;
box-shadow: 0 3px 9px 1px #666;
}
}
}
#logo-link {
height: 48px;
padding-top: 0px;
@include RWD(mobile) {
height: 45px;
padding-top: 8px;
}
}
#id_title_0_p .content label {
display: inline-block;
margin-right: 2em;
color: inherit;
&:not(.option) {
font-weight: normal;
color: inherit;
}
}
a.add-favorites {
cursor: pointer;
transition: opacity linear 0.2s;
&.processing {
cursor: wait;
opacity: 0.4;
}
}
#a2-oidc-authorization-form {
ul {
line-height: 3rem;
li {
margin-left: 2rem;
list-style: circle;
}
}
.actions {
margin-top: 3rem;
button span.btn-text {
margin-right: 0;
}
button[name=refuse] {
float: left;
}
button[name=accept] {
float: right;
}
}
}
// cancel native publik styling that affects dimensions of the cells as there
// is some masonsry javascript that needs to be run with correct dimensions,
// and it may run before we have time to remove the .wcsformsofcategorycell
// class.
div.wcsformsofcategorycell ul {
padding: 30px 0;
& > li > a {
padding: 15px 20px;
border-bottom: none;
display: inline-flex;
}
}
div.qommon-map {
opacity: 0.99; // work around some chrome bug (#23165)
}
div.widget table {
th {
padding-right: 10px;
padding-bottom: 5px;
}
td {
padding-right: 10px;
.customSelectContain {
margin-right: 10px;
}
}
}
#rub_service table td {
padding-bottom: 10px;
.widget {
margin-bottom: 0;
}
}
.template-meetings .customSelectContain {
display: none;
}
div#login-page .login-actions{
text-align: center;
a {
font-weight: normal;
text-decoration: underline;
}
}
div#welcome-text {
clear: both;
float: none;
width: 100%;
background: #ffb200;
padding: 2rem;
@include RWD(mobile) {
padding: 2rem 1rem;
}
h1 {
font-size: 2.5rem;
}
h1::before {
/* adjust ~ color */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='371.9' height='82.2'%3E%3Cpath fill='none' d='M-1-1h582v402H-1z'/%3E%3Cg%3E%3Cpath d='M351.926 42.6c-13.2 0-20.6-5.8-31.8-16.2-11.3-10.3-26.4-26.4-50.9-26.4h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.7 8.8-16.6 14.8-27.4 16.2-1.4 0-3 .5-4.9.5-13.2 0-20.6-5.8-31.8-16.2-3-2.5-5.8-5.4-9.3-8.8-10.3-8.8-23-18.1-41.6-18.1h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.8 8.8-16.6 14.7-27.4 16.2-1.4 0-3 .5-4.9.5-2.5 0-5.4.5-7.4 1.4-1 .5-2.5 1-3.4 1.9-5.4 3.4-9.3 9.8-9.3 16.2 0 2.5.5 5.4 1.4 7.4 1 2.5 2.5 4.4 4.4 6.4 1 1 1.9 1.9 3 2.5 1 .5 1.9 1.4 3.4 1.9 1.4.5 2.5 1 3.9 1 1.5.4 2.5.4 4 .4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 3 1.4 6.9 3.9 11.3 8.3 2.5 1.9 5.4 4.4 8.3 7.4 12.3 11.3 31.4 26.4 58.7 26.4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 1.4.5 3.4 1.9 5.4 3 3.9 2.5 8.3 6.9 14.7 12.2 12.3 11.3 31.4 26.4 58.8 26.4h1.9c10.3-.5 19.6-10.3 18.6-20.5.7-10.3-9.6-19.1-19.9-18.6z'/%3E%3C/g%3E%3C/svg%3E");
}
div.actions {
button {
display: block;
margin: 1rem auto;
min-width: 25ex;
max-width: 100%;
@include RWD(mobile) {
min-width: auto;
}
}
}
}
.required-authentication .demarche-teaser .btn-text::before {
content: "\f023"; // lock
font-family: FontAwesome;
padding-right: 1ex;
}
body.profile-photo-edit .a2-block div.profile-photo,
div.configjsoncell.mes-informations div.profile-photo {
text-align: center;
margin: 3rem 0 1rem 0;
> div {
display: inline-block;
width: 200px;
height: 200px;
background: $primary-color;
border-radius: 100%;
overflow: hidden;
}
}
body.profile-photo-edit .a2-block {
p.info {
text-align: center;
}
div.profile-photo > div {
cursor: pointer;
}
button.delete-button {
float: left;
color: white;
border-color: #FF1F53;
background-color: #FF1F53;
}
#photo-form {
display: none;
}
}
section#banner {
img {
margin: 7rem 0;
@media screen and (max-width: 500px) {
margin: 3rem 0;
}
}
}
footer {
margin-top: 4rem;
background: $footer-background;
color: $footer-color;
#footer {
font-size: 1rem;
max-width: 1140px;
div.menucell {
text-align: left;
a {
color: $footer-color;
text-transform: uppercase;
padding-top: 0;
padding-bottom: 0;
}
ul li:first-child a {
padding-left: 0.5rem;
}
padding-top: 2rem;
padding-bottom: 2rem;
}
div.cell.configjsoncell {
display: none;
}
}
}
.template-evaluation .customSelectContain {
display: none;
}
div.section.foldable {
// duplicated from _wcs.scss that cannot be imported due to local
// custom widgets
margin-bottom: 1rem;
> h2:first-child {
&::after {
font-family: FontAwesome;
content: "\f106"; // angle-up
position: absolute;
right: 1em;
}
cursor: pointer;
&:focus span.disclose-message,
&:hover span.disclose-message {
text-decoration: underline;
}
}
span.disclose-message {
padding-left: 1ex;
font-size: 1rem;
display: none;
}
&.folded {
span.disclose-message {
display: inline-block;
@media screen and ($max-mobile-viewport) {
// never displayed on mobile as the small width
// makes clear the relation between title and
// open/close bracket.
display: none;
}
}
div {
display: none;
}
> h2:first-child::after {
content: "\f107"; // angle-down
}
}
}
.fileprogress {
border: 1px solid #888;
}
.fileprogress {
.bar {
background: $button-background;
line-height: 1.5em;
padding-left: 0.7em;
white-space: nowrap;
transition: background linear 0.1s;
}
&.upload-error .bar {
background: #FF7575;
color: black;
width: 100% !important;
white-space: normal;
}
}
.fileinfo {
line-height: 1.5em;
height: 100%;
}
div.fileinfo a.remove {
text-indent: 0;
background: none;
color: transparent;
display: inline-block;
width: 16px;
text-indent: -10000px;
&::before {
font-family: FontAwesome;
content: "\f057"; // times-circle
color: $button-background;
text-indent: 0;
position: absolute;
display: block;
top: 0;
right: 0;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
}
}
div#rub_service div.file-upload-widget {
&:not([class*="grid-"]) {
div.file-button {
max-width: 500px;
}
}
div.file-button {
overflow: hidden;
background: $widget-background;
margin: 0;
border: $widget-border;
border-radius: $widget-border-radius;
&:focus-within {
border: $widget-focus-border;
@if $widget-focus-outline == none {
outline: $widget-border;
outline-style: dotted;
} @else {
outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
}
}
height: 150px;
position: relative;
text-align: center;
div.widget.FileWidget {
margin-bottom: 0;
div.content {
display: block;
position: static;
}
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.001;
margin: 0;
font-size: 0;
cursor: pointer;
}
div.upload-done {
display: none;
}
div.click-to-upload {
display: block;
}
div.widget-message {
padding-top: 30px;
&::before {
pointer-events: none;
content: "\f016"; // file-o
font-family: FontAwesome;
font-size: 2.857rem;
display: block;
padding-top: 20px;
padding-bottom: 10px;
}
&::after {
pointer-events: none;
content: "\f055"; // plus-circle
font-family: FontAwesome;
font-size: 1.429rem;
display: block;
position: absolute;
left: calc(50% + 10px);
top: 30px;
color: $button-background;
}
&.upload-done::after {
content: "\f05d"; // check-circle-o
}
}
&.file-image div.widget-message::before {
content: "\f1c5"; // file-image-o
}
}
&.short div.file-button {
height: 110px;
div.widget-message {
padding-top: 0px;
&::before {
padding-top: 10px;
}
&::after {
top: 5px;
}
}
}
&.has-file {
div.file-button {
div.upload-done {
display: block;
}
div.click-to-upload {
display: none;
}
}
}
&.widget-readonly {
div.file-button {
div.widget-message {
display: none;
}
.fileinfo.thumbnail .filename {
display: none;
}
.filename {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
padding-top: 30px;
&::before {
pointer-events: none;
content: "\f016"; // file-o
font-family: FontAwesome;
font-size: 2.857rem;
display: block;
padding-top: 40px;
padding-bottom: 10px;
}
}
img {
max-height: 100%;
position: relative;
z-index: 10;
}
}
}
div.fileprogress {
position: absolute;
border: none;
overflow: hidden;
width: 100%;
left: 0;
bottom: 0;
}
}
form div.widget {
margin-bottom: 35px;
}
section.layout-demarche div.cell-items-pagination {
padding: 1rem;
.cell-items-pagination-next {
float: right;
margin-right: 0;
}
button {
padding: 15px 20px;
text-decoration: none;
position: relative;
display: inline-block;
border-color: rgba(0, 0, 0, 0);
transition: all, 0.5s;
overflow: hidden;
background-color: $second-color;
color: $core-color;
font-family: $site-font;
text-transform: uppercase;
font-size: 1.4rem;
&:hover, &:focus{
background-color: $core-color;
color: #FFFFFF;
}
}
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
display: none;
}
.a2-password-policy-container {
font-size: 90%;
}
a.btn-square--bordered--core {
text-decoration: none !important;
}
div.RadiobuttonsWidget.template-evaluation {
&::after {
content: "Rendu pas pris en charge. (#51835)";
background: red;
padding: 2px 5px;
color: white;
}
.content {
display: none !important;
}
}
.form-content--titlebar {
display: none;
}
#rub_service .BlockWidget .list-add {
clear: both;
.content {
display: block;
button {
@extend %button;
}
}
}
.wcs-block-with-remove-button {
.BlockSubWidget {
position: relative;
@include clearfix();
}
.remove-button {
@extend %button;
position: absolute;
right: 3px;
top: -1.5em;
margin-right: 0;
&[disabled] {
display: none;
}
span {
display: none;
}
&::after {
font-family: FontAwesome;
content: "\f1f8"; // trash
}
}
}