add theme for signal publik (#35428)
This commit is contained in:
parent
830f9397a3
commit
a6d5bc6e58
|
|
@ -0,0 +1,978 @@
|
|||
%title {
|
||||
@extend %title;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
%bigtitle {
|
||||
font-size: 25px;
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
background: white;
|
||||
#header {
|
||||
padding: 0;
|
||||
background: white;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
height: auto;
|
||||
}
|
||||
#signal-publik {
|
||||
padding-left: 0;
|
||||
a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-indent: -10000px;
|
||||
background: white url(img/logo_signalpublik.svg) 20px 20px no-repeat;
|
||||
background-size: auto 100px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
#logo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: $width / 2;
|
||||
background: $orange;
|
||||
top: 0;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
padding-left: 30px;
|
||||
box-sizing: border-box;
|
||||
a {
|
||||
background: none;
|
||||
text-indent: 0;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.has-logo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
top: 15px;
|
||||
height: 120px;
|
||||
background: transparent url(/assets/header:logo) center center no-repeat;
|
||||
background-size: contain;
|
||||
left: -400px;
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
position: static;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
&.has-logo::before {
|
||||
width: calc(100% - 180px);
|
||||
right: 0;
|
||||
top: 15px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pwa-navigation {
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
background-position: 50% 10px;
|
||||
background-size: 100% 20px;
|
||||
padding-top: 32px;
|
||||
span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $nav-mobile-limit - 1px) {
|
||||
display: block;
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
height: auto;
|
||||
> div {
|
||||
width: $width / 2;
|
||||
background: $darkgray;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -50px;
|
||||
a {
|
||||
height: 50px;
|
||||
background-position: 50% 5px;
|
||||
background-size: 100% 20px;
|
||||
padding-top: 30px;
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav-wrapper {
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
margin-top: 0;
|
||||
background: transparent;
|
||||
div.gru-nav .gru-nav-button.toggled + ul {
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
div.gru-nav .gru-nav-button + ul {
|
||||
pointer-events: all;
|
||||
border-top: 0;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
li:first-child {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid $green;
|
||||
}
|
||||
li {
|
||||
border-bottom: 1px solid $green;
|
||||
a {
|
||||
padding: 0;
|
||||
line-height: 4em;
|
||||
}
|
||||
&.footer-link {
|
||||
font-size: 80%;
|
||||
border-bottom: 0;
|
||||
a {
|
||||
padding-top: 1rem;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.gru-nav .gru-nav-button {
|
||||
width: 80px;
|
||||
margin-left: 0;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
> ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
div#main-content-wrapper {
|
||||
margin-top: 1rem;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#columns div.textcell {
|
||||
p {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#columns div.textcell:first-child {
|
||||
background: transparent;
|
||||
h1:first-child {
|
||||
margin-top: 0;
|
||||
@extend %bigtitle;
|
||||
margin-bottom: 0;
|
||||
+ p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
#columns {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#sidebar + #columns {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-content div.wcsformcell {
|
||||
background: white;
|
||||
a.form-link {
|
||||
display: block;
|
||||
div {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
span {
|
||||
display: block;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
background: $green center center no-repeat;
|
||||
background-size: 40px;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
margin: 0 0.5rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $darkgray;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: 2px solid $green;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n+3),
|
||||
&:nth-child(4n+2) {
|
||||
a.form-link {
|
||||
div span {
|
||||
background-color: $orange;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline-color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
&:nth-child(4n) {
|
||||
a.form-link {
|
||||
div span {
|
||||
background-color: $orange;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline-color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(4n+3) {
|
||||
a.form-link {
|
||||
div span {
|
||||
background-color: $green;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
.liens,
|
||||
.signal-publik {
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
a {
|
||||
color: $darkgray;
|
||||
margin: 0 5px;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.signal-publik {
|
||||
float: left;
|
||||
p {
|
||||
background: #f4f4f4;
|
||||
font-weight: 500;
|
||||
color: lighten($darkgray, 50%);
|
||||
a {
|
||||
color: $darkgray;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.liens {
|
||||
float: right;
|
||||
}
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
#footer-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.liens,
|
||||
.signal-publik {
|
||||
float: none;
|
||||
width: 100%;
|
||||
p {
|
||||
a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
span.sep {
|
||||
display: block;
|
||||
color: transparent;
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
.gru-content {
|
||||
#sidebar {
|
||||
order: 0;
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-content div.cell {
|
||||
&.transparent {
|
||||
background: transparent;
|
||||
h2:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-content div.cell.trackingcodeinputcell {
|
||||
background: $green;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
h2 ~ * {
|
||||
background: transparent;
|
||||
}
|
||||
p {
|
||||
padding-top: 0;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
form {
|
||||
margin: 0 1rem;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
input {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
border: 1px solid white;
|
||||
background: $green;
|
||||
color: white;
|
||||
max-width: 12rem;
|
||||
}
|
||||
button {
|
||||
margin: 0;
|
||||
flex: 0;
|
||||
box-shadow: none;
|
||||
text-indent: -10000px;
|
||||
background: white;
|
||||
position: relative;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&::after {
|
||||
content: ">";
|
||||
font-weight: bold;
|
||||
color: $darkgray;
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.hint {
|
||||
margin-left: 0.7rem;
|
||||
}
|
||||
|
||||
#columns div#login-page > div.block {
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
background: transparent;
|
||||
> div {
|
||||
padding: 0;
|
||||
}
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
br.clear {
|
||||
height: 1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#login-title {
|
||||
font-family: $title-font-family;
|
||||
font-size: 18px;
|
||||
color: $title-color;
|
||||
text-transform: uppercase;
|
||||
span {
|
||||
text-transform: none;
|
||||
font-size: 14px;
|
||||
font-family: $font-family;
|
||||
}
|
||||
}
|
||||
|
||||
div.widget div.title label,
|
||||
form p label {
|
||||
font-weight: bold;
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
#login-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
div.form-validation form, // target form validation
|
||||
div#rub_service form[action="."] { // target form pages
|
||||
div.buttons {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
div.widget {
|
||||
margin-bottom: 0;
|
||||
div.content {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: $font-size * 1.1;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.previous-button {
|
||||
order: 1;
|
||||
button {
|
||||
background: $orange;
|
||||
&:focus {
|
||||
outline-color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.submit-button {
|
||||
order: 2;
|
||||
flex: 1;
|
||||
}
|
||||
&.cancel-button {
|
||||
order: 0;
|
||||
button {
|
||||
background: #dddddd url(img/close.svg) center center no-repeat;
|
||||
background-size: 25px;
|
||||
text-indent: -10000px;
|
||||
overflow: hidden;
|
||||
color: transparent;
|
||||
width: 60px;
|
||||
&:focus {
|
||||
outline-color: #a5a5a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.savedraft-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
br.clear {
|
||||
display: none;
|
||||
}
|
||||
#columns {
|
||||
padding: 0;
|
||||
}
|
||||
#login-title {
|
||||
padding: 0 0.7rem;
|
||||
height: 45px;
|
||||
}
|
||||
#login-page > .block {
|
||||
padding: 0 0.7rem;
|
||||
&.block-fc {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
#login-page {
|
||||
div div#fc-button {
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
width: 100%;
|
||||
img {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
div div#fc-button-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
div div#fc-explanation-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#frontend-registration-email {
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#registration-button {
|
||||
background: $green;
|
||||
margin: 0 -1rem;
|
||||
a {
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
strong {
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
#columns div#login-page > div.block.block-password {
|
||||
background: white;
|
||||
padding-top: 0.5rem;
|
||||
min-height: calc(100vh - 50px - 55px - 95px - 130px - 65px);
|
||||
margin: 0;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
button[name=login-password-submit] {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
div.a2-block {
|
||||
margin: 0 auto;
|
||||
}
|
||||
div#illu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#gauche, div#rub_service {
|
||||
margin-top: 0;
|
||||
background: white;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
margin-top: -1rem;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
width: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service.has-sidebox > h2 {
|
||||
padding-left: 0.5rem;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service {
|
||||
div.drafts-recall,
|
||||
div.text-check-before-submit,
|
||||
form {
|
||||
padding: 0.5rem 1rem;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
div.tracking-code-part {
|
||||
h3, a {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $darkgray;
|
||||
font-size: $font-size * 1.2;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
border: 2px solid $darkgray;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -8px;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
div#receipt-intro {
|
||||
padding-top: 1px;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
padding-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
div#summary,
|
||||
div#evolution-log {
|
||||
padding: 0 1rem;
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
padding: 0;
|
||||
}
|
||||
h2:first-child {
|
||||
display: inline-block;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#evolution-log {
|
||||
padding-bottom: 1rem;
|
||||
h2:first-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul#evolutions li span.item {
|
||||
background: white !important;
|
||||
&::before {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service h3[data-field-id] {
|
||||
font-family: $title-font-family;
|
||||
color: $title-color;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 0.5rem 0;
|
||||
background: $green;
|
||||
padding: 0.2rem 0.5rem;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#rub_service h4[data-field-id] {
|
||||
color: $title-color;
|
||||
}
|
||||
|
||||
div#rub_service h2 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#summary {
|
||||
background: white url(img/arrow-down.png) no-repeat top 1.5rem right 1rem;
|
||||
#disclose-dataview {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul#evolutions {
|
||||
li {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
span.item {
|
||||
top: 0;
|
||||
background: $darkgray !important;
|
||||
border-color: $darkgray;
|
||||
&::before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
div.evolution-metadata {
|
||||
padding-top: 0;
|
||||
span.status {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
span.time {
|
||||
font-size: 90%;
|
||||
color: $green;
|
||||
}
|
||||
span.user {
|
||||
color: $green;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
background: $darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
div.qommon-map {
|
||||
height: 500px;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
height: 280px;
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
div#illu {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.back-home-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
div.cell.map {
|
||||
div.combo-cell-map.leaflet-container {
|
||||
height: calc(100vh - #{$mobile-header-height} - #{$nav-mobile-bottom-bar-height} - 2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul#evolutions li div.msg div.comment {
|
||||
background: white;
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
li.combo-notification {
|
||||
cursor: pointer;
|
||||
&.combo-notification-acked {
|
||||
opacity: 0.6;
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
div.notificationscell h2 + p {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.gru-nav-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#columns div.textcell:first-child > div > h2:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
body.focus-in {
|
||||
#pwa-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#title-section {
|
||||
margin: -1rem 0 -1rem -1rem;
|
||||
padding: 0 0.5rem;
|
||||
h1 {
|
||||
@extend %bigtitle;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#steps {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
ol {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 36px;
|
||||
background: $steps-background;
|
||||
&.step-before {
|
||||
flex: 0;
|
||||
background: darken($steps-background, 20%);
|
||||
}
|
||||
&.step-after {
|
||||
background: #e4e4e4;
|
||||
span.label {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
span.marker {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: $darkgray;
|
||||
border: none;
|
||||
background: transparent;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: $font-size * 1.2;
|
||||
border-radius: none;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 9px;
|
||||
border: 10px solid white;
|
||||
border-color: transparent transparent transparent white;
|
||||
}
|
||||
}
|
||||
span.total {
|
||||
display: none;
|
||||
}
|
||||
&.current {
|
||||
padding-left: 0px;
|
||||
background: $steps-background;
|
||||
span.marker {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
span.label {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
span.label {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
padding-top: 10px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
padding-left: 20px;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #4d4d55;
|
||||
}
|
||||
}
|
||||
&.steps-10, &.steps-11, &.steps-12, &.steps-13, &.steps-14, &.steps-15,
|
||||
&.steps-16, &.steps-17, &.steps-18, &.steps-19, &.steps-20, &.steps-21 {
|
||||
ol {
|
||||
li {
|
||||
span.label {
|
||||
display: none;
|
||||
}
|
||||
&.current {
|
||||
span.label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
ol {
|
||||
li.step-before, li.step-after {
|
||||
display: none;
|
||||
}
|
||||
li.current {
|
||||
background: #e4e4e4;
|
||||
span.marker {
|
||||
border-radius: 0;
|
||||
background: $orange;
|
||||
color: $darkgray;
|
||||
width: auto;
|
||||
min-width: 2rem;
|
||||
}
|
||||
span.total {
|
||||
background: $orange;
|
||||
padding-left: 16px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
padding-right: 5px;
|
||||
font-size: $font-size * 1.2;
|
||||
}
|
||||
span.label {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.a2-block,
|
||||
.gru-content div.cell,
|
||||
div#left div.block,
|
||||
div#right div.block {
|
||||
background: transparent;
|
||||
h2 ~ * {
|
||||
background: white;
|
||||
}
|
||||
h2 + form,
|
||||
h2 + ul,
|
||||
h2 + p {
|
||||
margin-top: 0;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
h2 + ul.account-management {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.a2-block > div, div.a2-block > form, div.a2-block > p {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div#fc-linking {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
div#login-page.methods2 > div.block.block-fc {
|
||||
margin-right: 0;
|
||||
width: 50%;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
@import '../includes/font-roboto';
|
||||
|
||||
$green: #37bd9c;
|
||||
$orange: #fcc14b;
|
||||
$red: #ec5657;
|
||||
$darkgray: #232323;
|
||||
|
||||
$font-family: Roboto, sans-serif;
|
||||
$primary-color: $green;
|
||||
$very-small-limit: 360px;
|
||||
$width: 1180px;
|
||||
$sidebar-width: 493px;
|
||||
$sidebar-position: left;
|
||||
$border-radius: 0;
|
||||
|
||||
$link-color: $green;
|
||||
|
||||
$header-background: $green;
|
||||
$steps-background: $orange;
|
||||
|
||||
$mobile-header-height: 32px;
|
||||
|
||||
$nav-after-image: false;
|
||||
$nav-full-width-background: true;
|
||||
$nav-background: white;
|
||||
$nav-active-color: $green;
|
||||
$nav-color: white;
|
||||
$nav-menu-side: $mobile-header-height;
|
||||
$nav-mobile-menu-background: $green;
|
||||
$nav-mobile-menu-item-color: white;
|
||||
|
||||
$nav-mobile-bottom-bar-height: 48px;
|
||||
$nav-mobile-bottom-bar-background: $darkgray;
|
||||
$nav-mobile-bottom-bar-color: white;
|
||||
$nav-mobile-bottom-bar-item-hover-background: $green;
|
||||
$nav-mobile-bottom-bar-item-hover-color: white;
|
||||
$nav-mobile-bottom-bar-badge-background: $orange;
|
||||
|
||||
$footer-background: white;
|
||||
$footer-color: #333;
|
||||
|
||||
$cell-border: 0;
|
||||
$cell-title-cover-border: false;
|
||||
$title-color: white;
|
||||
$title-background: $green;
|
||||
$title-transform: uppercase;
|
||||
|
||||
$carrousel-height: 330px;
|
||||
|
||||
$button-background: $green;
|
||||
$widget-background: white;
|
||||
$widget-border: 1px solid $darkgray;
|
||||
$widget-focus-outline: 2px solid $green;
|
||||
$widget-focus-outline-offset: 2px;
|
||||
$widget-custom-radio-checkbox: true;
|
||||
|
||||
$carrousel-arrows: none;
|
||||
$carrousel-text-position: bottom-left;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:none;stroke:#a5a5a5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
</style>
|
||||
<circle class="st0" cx="11" cy="11" r="10"/>
|
||||
<line class="st0" x1="14" y1="8" x2="8" y2="14"/>
|
||||
<line class="st0" x1="8" y1="8" x2="14" y2="14"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 633 B |
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Mode_Isolation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 152.38 103" style="enable-background:new 0 0 152.38 103;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#37BD9C;}
|
||||
.st1{fill:#232323;}
|
||||
.st2{fill:#FCC14B;}
|
||||
.st3{fill:#232323;stroke:#232323;stroke-width:0.5;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M1.33,53.91H15.6c8.27,0,12.41,4.6,12.41,13.79c0,8.79-4.34,13.19-13.01,13.19h-4.85v21.58H1.33V53.91z
|
||||
M13.56,74.65c2.4,0,4.02-0.51,4.86-1.53c0.84-1.02,1.26-2.85,1.26-5.48c0-1.92-0.14-3.39-0.42-4.41
|
||||
c-0.28-1.02-0.85-1.79-1.71-2.31c-0.86-0.52-2.19-0.78-3.99-0.78h-3.42v14.51H13.56z"/>
|
||||
<path class="st0" d="M34.4,100.84c-0.96-1.44-1.44-3.26-1.44-5.45V67.81h8.09v26.07c0,1.08,0.18,1.9,0.54,2.46
|
||||
c0.36,0.56,0.98,0.84,1.86,0.84c0.92,0,2.14-0.54,3.66-1.62V67.81h8.15v34.65h-8.15v-3.3c-2.68,2.56-5.46,3.84-8.33,3.84
|
||||
C36.82,103,35.36,102.28,34.4,100.84z"/>
|
||||
<path class="st0" d="M70.59,99.88v2.58H62.5V53.91h8.09v16.54c2.2-2.12,4.56-3.18,7.07-3.18c2.8,0,4.77,1.16,5.93,3.48
|
||||
c1.16,2.32,1.74,5.02,1.74,8.09v11.75c0,3.72-0.65,6.71-1.95,8.99c-1.3,2.28-3.33,3.42-6.08,3.42
|
||||
C75.02,103,72.79,101.96,70.59,99.88z M76.58,95.62c0.4-1.12,0.6-2.7,0.6-4.74V78.42c0-1.76-0.22-3.15-0.66-4.17
|
||||
s-1.22-1.53-2.34-1.53c-1.16,0-2.36,0.48-3.6,1.44V96.1c1.12,0.8,2.32,1.2,3.6,1.2C75.38,97.3,76.18,96.74,76.58,95.62z"/>
|
||||
<path class="st0" d="M92.33,53.91h8.09v48.55h-8.09V53.91z"/>
|
||||
<path class="st0" d="M107.95,55.52h8.15v6.77h-8.15V55.52z M107.95,67.81h8.15v34.65h-8.15V67.81z"/>
|
||||
<path class="st0" d="M123.94,53.91h8.81v21.34l9.65-21.34h8.45l-9.29,21.64l10.25,26.91H143l-8.09-22.06l-2.16,3.66v18.4h-8.81
|
||||
V53.91z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M3.37,45.53C1.4,43.22,0.28,40.03,0,35.97l3.96-1.18c0.36,3.39,1.11,6,2.28,7.81
|
||||
c1.16,1.81,3.09,2.72,5.77,2.72c4.5,0,6.74-2.31,6.74-6.92c0-1.97-0.46-3.71-1.39-5.21c-0.93-1.5-2.42-3.21-4.47-5.15l-8.46-8.11
|
||||
c-1.54-1.42-2.65-2.91-3.34-4.47c-0.69-1.56-1.04-3.28-1.04-5.18c0-3.27,0.98-5.81,2.93-7.6C4.94,0.9,7.57,0,10.89,0
|
||||
c3.55,0,6.27,0.95,8.16,2.84c1.89,1.89,3,4.99,3.31,9.29l-3.85,1.01c-0.24-3.23-0.92-5.64-2.04-7.22
|
||||
c-1.12-1.58-2.99-2.37-5.59-2.37c-2.05,0-3.69,0.53-4.91,1.6C4.75,6.21,4.14,7.79,4.14,9.88c0,1.34,0.26,2.54,0.77,3.61
|
||||
c0.51,1.07,1.38,2.19,2.6,3.37l8.46,7.99c2.17,2.05,3.87,4.15,5.12,6.3c1.24,2.15,1.86,4.47,1.86,6.95c0,3.47-1.01,6.15-3.02,8.05
|
||||
c-2.01,1.89-4.67,2.84-7.99,2.84C8.2,48.99,5.34,47.83,3.37,45.53z"/>
|
||||
<path class="st1" d="M29.11,0.47h4.5v47.92h-4.5V0.47z"/>
|
||||
<path class="st1" d="M75.3,0.47h3.25l15.26,37.21V0.47h3.9v47.92h-3.2L79.2,10.77v37.63h-3.9V0.47z"/>
|
||||
<path class="st1" d="M113.57,0.47h4.73l10.18,47.92h-4.44l-2.37-12.84h-11.42l-2.43,12.84h-4.38L113.57,0.47z M121.09,32.3
|
||||
L116,6.45l-5.09,25.85H121.09z"/>
|
||||
<path class="st1" d="M134.28,0.47h4.5v44.55h13.61v3.37h-18.1V0.47z"/>
|
||||
</g>
|
||||
<path class="st2" d="M58.71,29.69h6.93c0,0-9.88,18.83-10.73,18.83c-0.85,0-9.6-18.83-9.6-18.83H58.71z"/>
|
||||
<g>
|
||||
<rect x="54.96" y="25.76" class="st3" width="9.09" height="3.74"/>
|
||||
<path class="st3" d="M63.12,25.76c-2.35,6.11-5.94,12.69-8.58,17.15c-4.3-7.21-10.97-19.8-10.97-27.28
|
||||
c0-6.06,4.93-10.99,10.99-10.99c2.94,0,5.69,1.14,7.77,3.22c2.08,2.08,3.22,4.83,3.22,7.77c0,0.17-0.02,0.35-0.03,0.53h3.98
|
||||
c0.01-0.18,0.02-0.36,0.02-0.53c0-8.26-6.7-14.96-14.96-14.96c-8.26,0-14.96,6.7-14.96,14.96c0,12.49,14.9,34.71,14.96,34.71
|
||||
c0.05,0,8.67-12.96,12.8-24.58H63.12z"/>
|
||||
</g>
|
||||
<circle class="st1" cx="54.56" cy="15.04" r="2.33"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load assets %}
|
||||
|
||||
{% block header-title %}
|
||||
<h1 id="signal-publik"><a href="{% firstof logo_link_url portal_url '/' %}">Signal Publik</a></h1>
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{% load assets %}
|
||||
{% get_asset "wcs:form:logo:"|add:cell.formdef_reference as asset %}
|
||||
<a class="form-link" href="{{url}}tryauth">
|
||||
<div>
|
||||
<span style="background-image: url({{asset.asset.url}})"></span>
|
||||
<strong>{{ title }}</strong>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{% extends "combo/wcs/tracking_code_input.html" %}
|
||||
|
||||
{% block title %}
|
||||
{{ block.super }}
|
||||
<p>Saisissez le code d'une demande pour la retrouver.</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block intro-text %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{% extends "wcs/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block placeholder-content %}
|
||||
{% block content %}
|
||||
{% if title %}
|
||||
<div id="title-section">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block side %}
|
||||
{% if gauche %}
|
||||
<div id="gauche">
|
||||
{{ gauche|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<div id="{{bigdiv|default:'rub_service'}}">
|
||||
{% block body %}
|
||||
{{ body|safe }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{% extends "wcs/formdata_filling.html" %}
|
||||
|
||||
{% block side %}
|
||||
{% endblock %}
|
||||
|
||||
{% block form-side %}
|
||||
{{ tracking_code_box|safe }}
|
||||
{{ steps|safe }}
|
||||
{{ publisher.get_request.session.display_message|safe }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{% if page_labels|length > 1 %}
|
||||
<div id="steps" class="steps-{{page_labels|length}}">
|
||||
<ol>
|
||||
{% for page_label in page_labels %}
|
||||
{% spaceless %}
|
||||
<li class="{% if forloop.first %}first{% endif %}
|
||||
{% if forloop.last %}last{% endif %}
|
||||
{% if forloop.counter == current_page_no %}current{% endif %}
|
||||
{% if forloop.counter < current_page_no %}step-before{% endif %}
|
||||
{% if forloop.counter > current_page_no %}step-after{% endif %}" >
|
||||
<span class="marker">{{ forloop.counter }}</span>
|
||||
<span class="total">{{ page_labels|length }}</span>
|
||||
<span class="label">{{ page_label }}</span>
|
||||
</li>
|
||||
{% endspaceless %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{% extends "wcs/base.html" %}
|
||||
{% load qommon %}
|
||||
|
||||
{% block side %}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{{ tracking_code_box|safe }}
|
||||
{{ steps|safe }}
|
||||
|
||||
<div class="form-validation">
|
||||
{{ publisher.get_request.session.display_message|safe }}
|
||||
{% standard_text "check-before-submit" %}
|
||||
{{ form.render|safe }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue