818 lines
13 KiB
SCSS
818 lines
13 KiB
SCSS
@import '../includes/fonts/roboto';
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
|
|
h1, h3 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#content div.cell {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#sidebar,
|
|
#columns {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
// header
|
|
div#header-wrapper {
|
|
background: $blue;
|
|
background: linear-gradient(135deg, lighten($base-color, 30%), $base-color);
|
|
height: 210px;
|
|
#header {
|
|
height: 100%;
|
|
background: transparent url(img/logo.png) 120px 100% no-repeat;
|
|
}
|
|
}
|
|
|
|
div#header h1 a {
|
|
font-size: 110%;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin-top: 100px;
|
|
margin-left: 305px;
|
|
}
|
|
|
|
// alter header and navigation for authenticated vs anonymous users
|
|
body.authenticated-user {
|
|
div#nav {
|
|
li.menu-je-cree-mon-compte { display: none; }
|
|
li.menu-je-me-connecte { display: none; }
|
|
}
|
|
}
|
|
|
|
body.anonymous-user {
|
|
#toplinks {
|
|
display: none;
|
|
}
|
|
div#nav {
|
|
li.menu-mon-profil { display: none; }
|
|
li.menu-mes-demandes { display: none; }
|
|
li.menu-mes-demarches { display: none; }
|
|
}
|
|
}
|
|
|
|
// custom header image and background for home page
|
|
.page-accueil-groupe-up,
|
|
.page-index {
|
|
#columns {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#nav-wrapper div#nav {
|
|
@media screen and (max-width: $very-small-limit) {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
div#page {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
// navigation
|
|
|
|
.site-nav {
|
|
z-index: 5;
|
|
}
|
|
|
|
#nav-wrapper div#nav {
|
|
margin-bottom: 0;
|
|
& > ul {
|
|
margin-top: -3rem;
|
|
margin-bottom: 0;
|
|
text-align: right;
|
|
> li {
|
|
margin-top: 1rem;
|
|
ul { // no submenu
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
& > ul > li > a {
|
|
background: $base-color;
|
|
color: white;
|
|
border-radius: 3rem;
|
|
transition: none;
|
|
&:hover {
|
|
background: darken($base-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// top user info login/logout link
|
|
#toplinks {
|
|
top: 40px;
|
|
border-radius: 2ex;
|
|
border: 1px solid white;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 1ex;
|
|
a {
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-right: 2ex;
|
|
}
|
|
span.connected-user {
|
|
padding-right: 2rem;
|
|
margin-right: 2ex;
|
|
font-size: 80%;
|
|
}
|
|
a.logout {
|
|
display: inline-block;
|
|
text-indent: -2000px;
|
|
margin-right: 0;
|
|
&::after {
|
|
content: "\f05c"; // fa-times-circle-o
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
right: 0;
|
|
width: 3ex;
|
|
height: 2ex;
|
|
padding-right: 1ex;
|
|
text-indent: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// footer
|
|
#footer {
|
|
padding: 3rem 1rem;
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul li {
|
|
display: inline-block;
|
|
a {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 80%;
|
|
}
|
|
padding: 0 2rem;
|
|
border-right: 1px solid white;
|
|
&:first-child {
|
|
padding-left: 0;
|
|
}
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// utility mixins to get the colour blocks extend to the edge of the screen
|
|
|
|
@mixin leftsidebg($color) {
|
|
position: relative;
|
|
background: $color;
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: calc((100vw - #{$width}) / 2);
|
|
left: calc(0px - (100vw - #{$width}) / 2);
|
|
height: 100%;
|
|
background: $color;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
@mixin rightsidebg($color) {
|
|
position: relative;
|
|
background: $color;
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: calc((100vw - #{$width}) / 2);
|
|
top: 0;
|
|
left: 100%;
|
|
height: 100%;
|
|
background: $color;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
#content { // home page
|
|
div#simulateur {
|
|
height: 400px;
|
|
font-size: 110%;
|
|
h1 {
|
|
padding-top: 70px;
|
|
text-transform: uppercase;
|
|
}
|
|
h1, p {
|
|
margin-left: 50px;
|
|
}
|
|
a {
|
|
margin-top: 30px;
|
|
margin-left: 50px;
|
|
background: $base-color;
|
|
color: white;
|
|
display: inline-block;
|
|
padding: 1rem 2rem;
|
|
border-radius: 2rem;
|
|
font-weight: bold;
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
background: darken($base-color, 10%);
|
|
}
|
|
}
|
|
@media screen and (max-width: $very-small-limit) {
|
|
height: auto;
|
|
background-position: 0 0;
|
|
padding-left: 0;
|
|
h1 {
|
|
padding-top: 10px;
|
|
}
|
|
h1, p {
|
|
margin-left: 0;
|
|
}
|
|
a {
|
|
margin: 1rem 0;
|
|
}
|
|
& > div {
|
|
background: white;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#apa-domicile {
|
|
@include leftsidebg(lighten($base-color, 30%));
|
|
h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
div#apa-etablissement {
|
|
h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
div#suivi-dossier {
|
|
@include rightsidebg(lighten($base-color, 10%));
|
|
h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
div#etapes {
|
|
color: white;
|
|
@include leftsidebg($base-color);
|
|
@include rightsidebg($base-color);
|
|
background: $base-color;
|
|
padding-bottom: 1rem;
|
|
@media screen and (max-width: $very-small-limit) {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ol li {
|
|
display: block;
|
|
float: left;
|
|
width: 20%;
|
|
@media screen and (max-width: $very-small-limit) {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
padding: 130px 30px 0 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
&:nth-child(1) { background: url(img/icone1.png) top center no-repeat; }
|
|
&:nth-child(2) { background: url(img/icone2.png) top center no-repeat; }
|
|
&:nth-child(3) { background: url(img/icone3.png) top center no-repeat; }
|
|
&:nth-child(4) { background: url(img/icone4.png) top center no-repeat; }
|
|
&:nth-child(5) { background: url(img/icone5.png) top center no-repeat; }
|
|
&::after {
|
|
content: "";
|
|
@media screen and (max-width: $very-small-limit) {
|
|
content: none;
|
|
}
|
|
width: 65px;
|
|
height: 54px;
|
|
background: url(img/fleche.png) center right no-repeat;
|
|
position: absolute;
|
|
top: 50px;
|
|
right: -32px;
|
|
}
|
|
&:nth-child(5)::after { content: none; }
|
|
}
|
|
}
|
|
|
|
div#guide {
|
|
background: darken($base-color, 10%);
|
|
color: white;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
div#aide {
|
|
padding-top: 1rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
}
|
|
|
|
#content div#apa-domicile,
|
|
#content div#apa-etablissement,
|
|
#content div#suivi-dossier {
|
|
text-align: center;
|
|
min-height: 220px;
|
|
h3 {
|
|
font-size: 100%;
|
|
max-width: 250px;
|
|
margin: 2rem auto 1rem auto;
|
|
}
|
|
a {
|
|
margin: 0 auto;
|
|
display: block;
|
|
background: $base-color;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 40px;
|
|
width: 30ex;
|
|
text-align: center;
|
|
padding: 1ex 2rem;
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
background: darken($base-color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#content button {
|
|
font-weight: bold;
|
|
background: $base-color;
|
|
transition: none;
|
|
&:hover {
|
|
background: darken($base-color, 10%);
|
|
}
|
|
}
|
|
|
|
div#gauche,
|
|
div#rub_service {
|
|
margin-top: 6rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
div#gauche {
|
|
width: $sidebar-width;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
div#gauche + div#rub_service {
|
|
width: calc(100% - #{$sidebar-width} - 2rem);
|
|
}
|
|
|
|
div.form-validation div.page {
|
|
background: transparent;
|
|
}
|
|
|
|
div#receipt-intro {
|
|
margin: 1rem 0.5rem;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
|
|
div#summary, div#evolution-log {
|
|
padding-bottom: 3rem;
|
|
h2 {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
div#content #disclose-dataview {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
span.required {
|
|
color: red;
|
|
}
|
|
|
|
#content div#rub_service h3 {
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
color: #7fbece;
|
|
border-bottom: 1px solid #7fbece;
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
|
|
padding: 1ex 0.5rem;
|
|
}
|
|
|
|
#content div.menucell,
|
|
#content div.links-list {
|
|
ul {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
ul > li > a {
|
|
color: #929292;
|
|
border-bottom: 0;
|
|
border-top: 1px solid #9e9e9e;
|
|
}
|
|
ul > li > a::before {
|
|
content: "→";
|
|
padding-right: 1ex;
|
|
color: $lightblue;
|
|
}
|
|
}
|
|
|
|
#content div.menucell { // "dashboard"
|
|
ul > li > a {
|
|
color: $lightblue;
|
|
}
|
|
}
|
|
|
|
div.cell.links-list#demande-d-information {
|
|
// left column on apa-historique, apa-instruction, apa-droits
|
|
h2, a {
|
|
color: $darkblue;
|
|
border-color: $darkblue;
|
|
}
|
|
}
|
|
|
|
#login-page.methods2 {
|
|
max-width: 60rem;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
#login-page div.block {
|
|
background: white;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
margin: 0 auto 2rem auto;
|
|
padding: 1rem 2rem;
|
|
max-width: 30rem;
|
|
}
|
|
|
|
div#sidebar + div#columns-wrapper > div.a2-block {
|
|
margin-top: 0rem;
|
|
background: white;
|
|
padding: 2rem;
|
|
}
|
|
|
|
div.column.profile {
|
|
margin-top: 0;
|
|
margin-left: 2rem;
|
|
width: 60%;
|
|
div#a2-profile {
|
|
padding: 1rem 1.5rem;
|
|
background: white;
|
|
h2 {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.column.account-management {
|
|
width: 30%;
|
|
}
|
|
|
|
#content div#account-management {
|
|
background: rgba($base-color, 0.7);
|
|
padding: 1rem 1.5rem;
|
|
h2 {
|
|
color: white;
|
|
}
|
|
> ul > li > a {
|
|
color: white;
|
|
border-color: white;
|
|
&:hover {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content #account-management-fc h2 {
|
|
display: none;
|
|
}
|
|
|
|
.menucell li.selected span {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div#profile {
|
|
column-count: 2;
|
|
div.field {
|
|
border-top: 1px solid #d2d2d2;
|
|
padding-top: 0.5ex;
|
|
page-break-inside: avoid;
|
|
}
|
|
span.label {
|
|
color: #5caac2;
|
|
}
|
|
div.value {
|
|
color: #929292;
|
|
}
|
|
}
|
|
|
|
#content div.cell.apa-users {
|
|
margin-top: -2rem;
|
|
h2 {
|
|
padding-top: 30px;
|
|
height: 80px;
|
|
font-size: 1.875rem;
|
|
color: $darkblue;
|
|
text-transform: uppercase;
|
|
}
|
|
h2 + div {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
div.apa-user {
|
|
margin-bottom: 2rem;
|
|
a.apa-user-link {
|
|
box-shadow: 0 0 25px rgba(10, 126, 194, 0.2);
|
|
transition: all ease 0.2s;
|
|
&:hover {
|
|
background-position: top 15px right -20px;
|
|
background-color: white;
|
|
}
|
|
}
|
|
h3 {
|
|
color: $blue;
|
|
span {
|
|
display: block;
|
|
&.firstname, &.title {
|
|
text-transform: none;
|
|
}
|
|
&.lastname {
|
|
text-transform: uppercase;
|
|
color: $darkblue;
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
border-top: 1px solid #929292;
|
|
padding-top: 1rem;
|
|
color: #929292;
|
|
}
|
|
a.remove {
|
|
right: 2rem;
|
|
top: 1rem;
|
|
width: 2ex;
|
|
height: 2ex;
|
|
line-height: 2ex;
|
|
border: 1px solid $link-color;
|
|
border-radius: 2ex;
|
|
&:hover {
|
|
border-color: red;
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
table.pk-data-table {
|
|
th, td {
|
|
border-color: white;
|
|
}
|
|
tbody tr td {
|
|
background: #d8ebf0;
|
|
color: #929292;
|
|
border-bottom-width: 2px;
|
|
}
|
|
}
|
|
|
|
#content div#suivre {
|
|
padding: 2rem 5rem;
|
|
background: #e2f2f6;
|
|
div {
|
|
a {
|
|
color: $darkblue;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div#contacts {
|
|
padding: 2rem 5rem;
|
|
background: white;
|
|
div {
|
|
h2, a {
|
|
color: $base-color;
|
|
border-color: $base-color;
|
|
}
|
|
a::before {
|
|
color: $base-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service > h2:first-child,
|
|
#page-title h1 {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 0;
|
|
padding: 0 $title-padding;
|
|
color: $base-color;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: 1.875rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.page-apa-details,
|
|
.page-apa-instruction,
|
|
.page-apa-droits,
|
|
.page-apa-details {
|
|
#sidebar,
|
|
#columns {
|
|
margin-top: 6rem; // space for #page-title
|
|
}
|
|
#columns {
|
|
margin-left: 2%;
|
|
}
|
|
}
|
|
|
|
.page-apa-details {
|
|
#sidebar {
|
|
padding-top: 1.5rem;
|
|
}
|
|
.column:first-child {
|
|
width: 46%;
|
|
padding: 0;
|
|
}
|
|
.column:last-child {
|
|
div.cell h2 {
|
|
background: rgba(127, 190, 206, 0.7);
|
|
color: white;
|
|
padding: 2rem;
|
|
& + div {
|
|
background: white;
|
|
color: #929292;
|
|
padding: 0;
|
|
}
|
|
}
|
|
div.cell {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.cell h2 + div.apa-user-info {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
div.apa-user-info h3,
|
|
div.apa-user-info p {
|
|
border-top: 1px solid #bee2e8;
|
|
padding: 0.5rem 0;
|
|
margin: 0;
|
|
}
|
|
|
|
div.apa-user-info em {
|
|
font-size: 80%;
|
|
color: $lightblue;
|
|
}
|
|
|
|
div#content div.cell.apa-user-info {
|
|
padding: 1.5rem 2rem 3rem 2rem;
|
|
background: white;
|
|
}
|
|
|
|
div.apa-user-info {
|
|
margin-right: 2rem;
|
|
color: #929292;
|
|
span.label {
|
|
display: block;
|
|
color: #00a0bc;
|
|
&.phone {
|
|
// phone is part of the contact info block yet we want
|
|
// it to appear as its own block.
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid #bee2e8;
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content .apa-dossier {
|
|
h3 { // dossier title
|
|
background: #e0f1f6;
|
|
color: $darkblue;
|
|
text-transform: none;
|
|
margin: 0;
|
|
padding: 1rem 2rem;
|
|
border-top: 2px solid #94d1df;
|
|
}
|
|
ul { // dossier metadata
|
|
padding: 1rem 2rem 0 2rem;
|
|
}
|
|
p { // "consulter le dossier"
|
|
padding: 0 2rem 1rem 2rem;
|
|
}
|
|
}
|
|
|
|
div.apa-historique,
|
|
div.apa-instruction,
|
|
div.apa-droits {
|
|
& > p { // "Pas de demande"
|
|
padding: 2rem;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// apa-historique, apa-instruction & apa-droits pages
|
|
.page-apa-historique,
|
|
.page-apa-instruction,
|
|
.page-apa-droits {
|
|
#sidebar {
|
|
padding-top: 1.5rem;
|
|
}
|
|
#columns > div {
|
|
padding-top: 1.5rem;
|
|
// fake right column with a linear gradient
|
|
background: linear-gradient(to left, #6ac0d0 0px, #6ac0d0 33.33%, white 33.33%, white 100%);
|
|
}
|
|
#columns div.cell > div {
|
|
& > h2 {
|
|
padding-left: 2rem;
|
|
}
|
|
h2 + div {
|
|
padding: 0 0 1rem 0;
|
|
&::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
#content div.grid-2-3 {
|
|
padding-left: 2rem;
|
|
}
|
|
#content div.grid-1-3.contact {
|
|
background: transparent;
|
|
color: white;
|
|
padding: 0 2rem;
|
|
h2 {
|
|
color: white;
|
|
padding: 0;
|
|
}
|
|
}
|
|
#content div.individu {
|
|
max-width: 25rem;
|
|
color: #929292;
|
|
h3, p {
|
|
border-top: 1px solid #bee2e8;
|
|
padding: 0.5rem 0;
|
|
margin: 0;
|
|
strong {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
span.label {
|
|
font-weight: normal;
|
|
color: $lightblue;
|
|
}
|
|
}
|
|
.contact {
|
|
margin-top: 1rem;
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.dossier {
|
|
color: #929292;
|
|
h3 {
|
|
margin-top: 1rem;
|
|
color: $darkblue2;
|
|
font-weight: bold;
|
|
}
|
|
p {
|
|
border-top: 1px solid #9e9e9e;
|
|
padding-top: 1rem;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// misc
|
|
.last-bold ul li:last-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
ul.checkmarks li {
|
|
list-style-image: url(img/tick.png);
|
|
line-height: 1.6rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|