928 lines
16 KiB
SCSS
928 lines
16 KiB
SCSS
//
|
|
// utils
|
|
//
|
|
@mixin bg-to-the-edge($position) {
|
|
--ref-width: #{$mobile-width};
|
|
@media($min-desktop-viewport) {
|
|
--ref-width: #{$width};
|
|
}
|
|
@if ($position == 'left' or $position == 'both') {
|
|
margin-left: Min(calc(-1 * var(--edge-gutter)), calc(-50vw + var(--ref-width) / 2));
|
|
padding-left: Max(var(--edge-gutter), calc(50vw - var(--ref-width) / 2));
|
|
}
|
|
@if ($position == 'right' or $position == 'both') {
|
|
margin-right: Min(calc(-1 * var(--edge-gutter)), calc(-50vw + var(--ref-width) / 2));
|
|
padding-right: Max(var(--edge-gutter), calc(50vw - var(--ref-width) / 2));
|
|
}
|
|
@if ($position == 'both') {
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
|
|
//
|
|
// dots
|
|
//
|
|
.regulars-dots {
|
|
--dot-color: #{$font-color};
|
|
background-color: transparent;
|
|
background-image: radial-gradient(var(--dot-color) 2px,transparent 2px);
|
|
background-size: 8px 8px;
|
|
background-position: top left;
|
|
}
|
|
|
|
.alternates-dots {
|
|
--dot-color: #{$font-color};
|
|
background-color: transparent;
|
|
background-image:
|
|
radial-gradient(var(--dot-color) 2px,transparent 2px),
|
|
radial-gradient(var(--dot-color) 2px,transparent 2px);
|
|
background-size: 10px 10px;
|
|
background-position: 2px 2px, 7px 7px;
|
|
}
|
|
|
|
//
|
|
// Typo
|
|
//
|
|
h1, h2, h3, h4,
|
|
.h1, .h2, .h3, .h4 {
|
|
font-family: $title-ff;
|
|
font-weight: 800;
|
|
}
|
|
h1, .h1 {
|
|
font-size: $fz-1;
|
|
}
|
|
h2, .h2 {
|
|
font-size: $fz-2;
|
|
}
|
|
h3, .h3 {
|
|
font-size: $fz-3;
|
|
}
|
|
h4, .h4 {
|
|
font-size: $fz-4;
|
|
}
|
|
.button-label {
|
|
font-size: $fz-xsmall;
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
line-height: 1.2rem !important;
|
|
letter-spacing: 1px;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
//
|
|
// Buttons
|
|
//
|
|
%button {
|
|
box-shadow: none;
|
|
@extend .button-label;
|
|
font-weight: bold;
|
|
// add long-arrow-right icon;
|
|
&:hover {
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.button-with-arrow {
|
|
@include button-with-icon(left, '\f178') {
|
|
--icon-color: #{$red};
|
|
--icon-hover-color: white;
|
|
}
|
|
}
|
|
.button-with-left-arrow {
|
|
@include button-with-icon(left, '\f177') {
|
|
--icon-color: #{$red};
|
|
--icon-hover-color: white;
|
|
}
|
|
}
|
|
|
|
%submit-button {
|
|
--color: white;
|
|
--background: #{$font-color};
|
|
@extend .button-with-arrow;
|
|
}
|
|
|
|
%cancel-button {
|
|
--background: #{$gray-light};
|
|
border-color: var(--background);
|
|
}
|
|
|
|
%delete-button {
|
|
--background: #{$red};
|
|
--color: white;
|
|
}
|
|
|
|
.pk-button {
|
|
@extend .button-with-arrow;
|
|
}
|
|
|
|
//
|
|
// Icons
|
|
//
|
|
.black-rounded-icon {
|
|
--size: 80px;
|
|
--disc-color: #{$font-color};
|
|
--circle-size: 10px;
|
|
--icon-color: white;
|
|
--circle-color: white;
|
|
background-color: var(--disc-color) !important;
|
|
box-shadow:
|
|
0 0 0 var(--circle-size) var(--circle-color),
|
|
0 0 0 calc(var(--circle-size) + 1px) var(--disc-color);
|
|
color: --icon-color;
|
|
height: var(--size);
|
|
width: var(--size);
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
border: var(--circle-size) solid var(--disc-color);
|
|
margin: calc(var(--circle-size) + 1px);
|
|
> img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Layout
|
|
//
|
|
// add edge-gutter
|
|
.page-width,
|
|
.header-width,
|
|
.nav-width,
|
|
.footer-width,
|
|
div#header {
|
|
@if $theme-edge-gutter {
|
|
--edge-gutter: #{$theme-edge-gutter};
|
|
box-sizing: content-box;
|
|
padding-left: var(--edge-gutter,);
|
|
padding-right: var(--edge-gutter);
|
|
width: auto !important;
|
|
@media ($max-mobile-viewport) {
|
|
--edge-gutter: 1em;
|
|
}
|
|
}
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
.central-content #sidebar {
|
|
margin: 0;
|
|
}
|
|
#columns-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Header
|
|
//
|
|
$menu-item-desktop-size: 130px;
|
|
|
|
@media($min-desktop-viewport) {
|
|
[id] {
|
|
// move scroll position because header is sticky
|
|
scroll-margin-top: $menu-item-desktop-size+10;
|
|
}
|
|
}
|
|
|
|
.header-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
line-height: inherit;
|
|
background-color: $nav-item-background;
|
|
color: $nav-color;
|
|
height: $menu-item-desktop-size;
|
|
min-width: $menu-item-desktop-size;
|
|
flex: 1 1 $menu-item-desktop-size;
|
|
padding: 1em;
|
|
border-left: 1px solid #3d3d3D;
|
|
&:hover {
|
|
background-color: $nav-item-selected-background;
|
|
}
|
|
}
|
|
.site-header {
|
|
box-shadow: 0 0 10px hsla(0, 0%, 13.7%,.2);
|
|
@media($min-desktop-viewport) {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
#top {
|
|
min-height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
@media ($min-desktop-viewport) {
|
|
@include bg-to-the-edge(right);
|
|
padding-right: 0;
|
|
justify-items: right;
|
|
}
|
|
}
|
|
// Logo
|
|
#logo {
|
|
flex-grow: 1;
|
|
padding-left: 0;
|
|
position: relative;
|
|
&.has-logo a {
|
|
display: flex;
|
|
background-position: left center;
|
|
&::before {
|
|
width: 100%;
|
|
@media ($max-mobile-viewport) {
|
|
height: 57px;
|
|
}
|
|
}
|
|
}
|
|
// dots
|
|
&::before {
|
|
content: "";
|
|
width: 56px;
|
|
height: 30px;
|
|
position: absolute;
|
|
right: calc(100% + 20px);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
margin: auto;
|
|
@extend .regulars-dots;
|
|
}
|
|
}
|
|
// nav
|
|
.site-nav {
|
|
flex: 0;
|
|
}
|
|
div.gru-nav {
|
|
> ul {
|
|
display: flex;
|
|
margin: 0;
|
|
> li {
|
|
flex-basis: $menu-item-desktop-size;
|
|
vertical-align: top;
|
|
a {
|
|
@extend .header-link;
|
|
}
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
padding: 1em;
|
|
li:not(:last-child) {
|
|
border-bottom: 1px solid $gray-light;
|
|
}
|
|
li > a {
|
|
display: block;
|
|
min-height: 0;
|
|
height: auto;
|
|
font-size: $fz-small;
|
|
background-color: white;
|
|
text-align: left;
|
|
padding: 1em 2em;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.gru-nav .gru-nav-button {
|
|
@extend .black-rounded-icon;
|
|
--size: 40px;
|
|
--circle-size: 5px;
|
|
&:hover {
|
|
--disc-color: #{$red};
|
|
}
|
|
&.toggled {
|
|
--disc-color: #{$gray-light};
|
|
--icon-color: #{$font-color};
|
|
--circle-color: var(--disc-color);
|
|
.icon-bar {
|
|
background-color: var(--icon-color);
|
|
}
|
|
}
|
|
top: auto;
|
|
left: 75%;
|
|
right: 0;
|
|
bottom: 35px;
|
|
margin: auto;
|
|
&:after {
|
|
content: "Menu";
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(100% + 5px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin: auto;
|
|
@extend .button-label;
|
|
font-weight: 800;
|
|
}
|
|
+ ul {
|
|
@media ($max-mobile-viewport) {
|
|
width: 100%;
|
|
max-width: 30em;
|
|
}
|
|
}
|
|
}
|
|
.menu--item.selected .menu--label {
|
|
position: relative;
|
|
display: block;
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
bottom: -10px;
|
|
left: 0;
|
|
background-color: white;
|
|
}
|
|
}
|
|
// toplinks
|
|
#toplinks {
|
|
position: static;
|
|
a {
|
|
@extend .header-link;
|
|
@extend .button-label;
|
|
font-weight: bold;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
// icon
|
|
&::before {
|
|
content: "";
|
|
width: 25px;
|
|
height: 25px;
|
|
display: block;
|
|
background-image: var(--icon, none);
|
|
background-size: contain;
|
|
margin-bottom: .33em;
|
|
}
|
|
&.account-link {
|
|
--icon: url(img/account.svg);
|
|
max-width: 14em;
|
|
}
|
|
&.login-link {
|
|
--icon: url(img/login.svg);
|
|
}
|
|
&.registration {
|
|
--icon: url(img/registration.svg);
|
|
}
|
|
&.logout {
|
|
--icon: url(img/logout.svg);
|
|
}
|
|
}
|
|
@media($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
.toplinks--list {
|
|
display: flex;
|
|
}
|
|
|
|
//
|
|
// Main
|
|
//
|
|
|
|
div#main-content-wrapper {
|
|
z-index: auto;
|
|
}
|
|
|
|
.theme-page-header {
|
|
background-color: $red;
|
|
border-top: 1px solid transparent;
|
|
min-height: 5rem;
|
|
display: flex;
|
|
@include bg-to-the-edge('both');
|
|
@media ($min-desktop-viewport) {
|
|
min-height: 15rem;
|
|
background-color: $gray-light;
|
|
border-left-width: Max(#{$theme-edge-gutter)}, calc(50vw - var(--ref-width) / 2));
|
|
border-left-color: $red;
|
|
border-left-style: solid;
|
|
padding-left: 0;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: Min(40%, calc(8 * #{$fz-1}));
|
|
background-image: var(--page-picture, var(--page-title-background, none));
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
.theme-page-title {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
background-color: $red;
|
|
color: white;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28em / $base-font;
|
|
position: relative;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-1;
|
|
width: 40%;
|
|
min-width: 8em;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
width: 125px;
|
|
height: 100%;
|
|
background-color: $red;
|
|
border-top-right-radius: 125px 100%;
|
|
position: absolute;
|
|
left: 100%;
|
|
}
|
|
}
|
|
// dots
|
|
&::before {
|
|
content: "";
|
|
width: 125px;
|
|
height: 75px;
|
|
position: absolute;
|
|
right: calc(100% + 20px);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
margin: auto;
|
|
@extend .alternates-dots;
|
|
--dot-color: white;
|
|
}
|
|
}
|
|
|
|
.central-content {
|
|
margin-top: $central-content-top;
|
|
@media ($min-desktop-viewport) {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// Cells
|
|
//
|
|
|
|
.gru-content div.cell {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.white-body-cell {
|
|
.gru-content &.cell {
|
|
overflow: hidden;
|
|
& h2 + div,
|
|
.cell--body,
|
|
.links-list {
|
|
background-color: white;
|
|
}
|
|
.links-list ul {
|
|
& > li > a:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-with-icons {
|
|
.gru-content &.cell {
|
|
overflow: hidden;
|
|
.links-list ul {
|
|
@extend .fx-grid;
|
|
@media ($min-grid-desktop-viewport) {
|
|
--nb-cols: 2;
|
|
--grid-gutter: 2px;
|
|
}
|
|
& > li:not(:last-child) {
|
|
border-bottom-color: $cell-background;
|
|
}
|
|
}
|
|
.menu-with-icons--link {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
background-color: white;
|
|
border-radius: 0;
|
|
align-items: center;
|
|
color: $cell-entry-color;
|
|
text-decoration: none;
|
|
@media ($min-desktop-viewport) {
|
|
justify-content: flex-end;
|
|
}
|
|
&:hover {
|
|
.menu-with-icons--icon {
|
|
color: $cell-entry-hover-color;
|
|
--disc-color: #{$red};
|
|
}
|
|
}
|
|
}
|
|
.menu-with-icons--icon {
|
|
@extend .black-rounded-icon;
|
|
padding: var(--circle-size);
|
|
}
|
|
.menu-with-icons--label {
|
|
font-weight: bold;
|
|
margin-left: 1em;
|
|
@media ($min-desktop-viewport) {
|
|
flex: 0 1 30%;
|
|
margin-right: 20%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tracking-code-input-cell {
|
|
form button {
|
|
@extend %submit-button;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
&.two-columns form {
|
|
column-count: 2;
|
|
|
|
p {
|
|
break-inside: avoid;
|
|
break-before: avoid;
|
|
}
|
|
button {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Black sidebar
|
|
.central-content #sidebar {
|
|
background-color: $font-color;
|
|
color: white;
|
|
@media ($min-desktop-viewport) {
|
|
@include bg-to-the-edge(left);
|
|
box-sizing: content-box;
|
|
border-radius: 0 $cell-border-radius $cell-border-radius 0;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
@include bg-to-the-edge(both);
|
|
}
|
|
a:not([class*="pk-button"]) {
|
|
color: currentColor;
|
|
text-decoration: underline;
|
|
}
|
|
.cell {
|
|
background-color: transparent;
|
|
border: none;
|
|
h2:first-child, .cell--title {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
// RSU frontoffice
|
|
.gru-content .rsu-frontoffice.cell {
|
|
overflow: hidden;
|
|
display: flow-root;
|
|
h2 {
|
|
@extend %title;
|
|
}
|
|
.cell--body > .rsu-part:last-child {
|
|
margin-bottom: -1rem;
|
|
}
|
|
.cell--body > .rsu-part:first-child {
|
|
margin-top: -1rem;
|
|
}
|
|
.rsu-part {
|
|
overflow: hidden;
|
|
background-color: white;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
margin-top: extract-width($cell-border);
|
|
padding: 1rem;
|
|
&--header {
|
|
margin-bottom: 1rem;
|
|
@media(min-width: $very-small-limit + 0.01) {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
}
|
|
h4 {
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
}
|
|
.profile {
|
|
@extend .fx-grid;
|
|
--grid-gutter: 1rem;
|
|
@media($min-grid-tablet-viewport) {
|
|
--nb-cols: 4;
|
|
}
|
|
.label {
|
|
@media(min-width: $very-small-limit + 0.01) {
|
|
margin-bottom: 0.7em;
|
|
}
|
|
}
|
|
.value {
|
|
margin-left: var(--grid-gutter);
|
|
--nb-cols: #{(4/3)};
|
|
}
|
|
}
|
|
}
|
|
table.invoices {
|
|
th, td {
|
|
@media (max-width: $very-small-limit) {
|
|
padding-right: 0.7em;
|
|
}
|
|
}
|
|
a.icon-view {
|
|
white-space: normal ;
|
|
}
|
|
.invoice-date {
|
|
color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Menu "Mes autres espaces"
|
|
.rsu-frontoffice-app {
|
|
@extend .menu-with-icons;
|
|
.gru-content &.cell {
|
|
&.grid-1-2 {
|
|
margin-right: 0 !important;
|
|
@media screen and (min-width: $very-small-limit + 0.01) {
|
|
width: 50%;
|
|
}
|
|
border-radius: 0;
|
|
border-top: 0;
|
|
}
|
|
.cell--body {
|
|
background-color: white;
|
|
}
|
|
p {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
+ .cell:not(.rsu-frontoffice-app) {
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
.gru-content .rsu-frontoffice-app-title.cell {
|
|
display: none; // show via javascript in rsu-frontoffice-app.html
|
|
|
|
& + .rsu-frontoffice-app.grid-1-2 {
|
|
&.nb-of-app-is-1 {
|
|
width: 100%;
|
|
border-bottom-left-radius: $cell-border-radius;
|
|
border-bottom-right-radius: $cell-border-radius;
|
|
}
|
|
&.nb-of-app-is-2 {
|
|
@media (min-width: $very-small-limit + 0.01) {
|
|
border-bottom-left-radius: $cell-border-radius;
|
|
border-right-width: #{extract-width($cell-border) / 2};
|
|
width: 50%;
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + .rsu-frontoffice-app.grid-1-2 {
|
|
@media (min-width: $very-small-limit + 0.01) {
|
|
border-radius: 0;
|
|
border-bottom-right-radius: $cell-border-radius;
|
|
border-left-width: #{extract-width($cell-border) / 2};
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
border-radius: 0 0 $cell-border-radius $cell-border-radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// WCS & FORMS
|
|
//
|
|
|
|
// black sidebar
|
|
.form-content--sidebox {
|
|
background-color: $font-color;
|
|
color: white;
|
|
padding-top: $central-content-top;
|
|
@media ($min-desktop-viewport) {
|
|
@include bg-to-the-edge(left);
|
|
box-sizing: content-box;
|
|
border-radius: 0 $cell-border-radius $cell-border-radius 0;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
@include bg-to-the-edge(both);
|
|
box-sizing: content-box;
|
|
margin-top: -$central-content-top;
|
|
}
|
|
}
|
|
// Steps
|
|
.wcs-steps {
|
|
font-size: 30em / $base-font;
|
|
font-weight: bold;
|
|
font-family: $title-ff;
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
font-size: $fz-4;
|
|
}
|
|
}
|
|
.wcs-step {
|
|
&--marker {
|
|
border: 5px solid $font-color;
|
|
outline: 1px solid white;
|
|
}
|
|
&.current &--marker {
|
|
outline-color: $gray;
|
|
}
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
// WCS tracking code
|
|
.tracking-code-part {
|
|
font-weight: bold;
|
|
font-family: $title-ff;
|
|
font-size: $fz-4;
|
|
color: white;
|
|
background-color: $red;
|
|
position: 1em;
|
|
border-radius: 10em;
|
|
display: inline-block;
|
|
padding: 1em;
|
|
}
|
|
div#tracking-code {
|
|
text-align: center;
|
|
margin-bottom: $central-content-top;
|
|
h3, a {
|
|
font-size: 1em;
|
|
color: inherit;
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
h3::after {
|
|
content: " :";
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
.form-discard-draft {
|
|
all: inherit;
|
|
font-size: $fz-small;
|
|
text-decoration: underline;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// typo
|
|
div#rub_service {
|
|
h3 {
|
|
border-bottom: 4px solid $red;
|
|
}
|
|
}
|
|
|
|
// widgets on error
|
|
.widget-with-error input {
|
|
border-color: $error-color;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.previous-button button {
|
|
@extend .button-with-left-arrow;
|
|
}
|
|
|
|
// timetable widget
|
|
div.timetable-widget div span.timetable-cell {
|
|
margin-bottom: 7px;
|
|
border: 1px solid transparent;
|
|
&:hover {
|
|
border-color: currentColor;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Notif
|
|
//
|
|
|
|
.errornotice, .warningnotice, .successnotice, .infonotice {
|
|
border-radius: $widget-border-radius;
|
|
a:not(.pk-button) {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.errornotice {
|
|
color: white;
|
|
}
|
|
|
|
|
|
//
|
|
// Footer
|
|
//
|
|
#footer > * {
|
|
font-size: $fz-small;
|
|
}
|
|
#footer-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 500px;
|
|
border-top: 1px solid $gray;
|
|
background-color: transparent;
|
|
@media ($max-mobile-viewport) {
|
|
min-height: 200px;
|
|
}
|
|
&::before{
|
|
content: '';
|
|
display: block;
|
|
width: 954px;
|
|
height: 888px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: calc(100% - 225px);
|
|
top: calc(100% - 500px);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-color: $red;
|
|
clip-path:ellipse(50% 50% at 50% 50%);
|
|
@media ($max-mobile-viewport) {
|
|
width: 430px;
|
|
height: 380px;
|
|
left: calc(100% - 130px);
|
|
top: calc(100% - 200px);
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.menucell {
|
|
li {
|
|
padding: 0 1em;
|
|
}
|
|
li a {
|
|
line-height: 1.2;
|
|
font-weight: bold;
|
|
padding: 0.1em;
|
|
box-shadow: inset 0 0 0 0 $red;
|
|
transition: all .3s ease-in-out;
|
|
&:hover, &:focus {
|
|
box-shadow: inset 0 -1.4em 0 0 $red;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
.menu--label::after {
|
|
content: none;
|
|
}
|
|
}
|
|
&.full-viewport {
|
|
@include bg-to-the-edge(both);
|
|
padding-top: 2em;
|
|
padding-bottom: 2em;
|
|
background-color: white;
|
|
border-top: 1px solid #b5b5b5;
|
|
margin-bottom: -1.5rem;
|
|
&[class*=grid-] {
|
|
float: none;
|
|
clear: both;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// PWA
|
|
//
|
|
|
|
.pwa-navigation {
|
|
padding-right: 25%;
|
|
div > ul li {
|
|
--disc-color: #{$font-color};
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 50% 35px,
|
|
var(--disc-color) 18px,
|
|
white 19px,
|
|
white 23px,
|
|
var(--disc-color) 24px,
|
|
white 25px);
|
|
// background-size: 50px;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
|
|
&:hover, &.selected{
|
|
--disc-color: #{$red};
|
|
}
|
|
}
|
|
|
|
div > ul li a {
|
|
background-size: 22px 22px;
|
|
background-position: 50% 25px;
|
|
padding-top: 60px;
|
|
font-family: $title-ff;
|
|
font-weight: 800;
|
|
span {
|
|
font-size: $fz-xsmall;
|
|
}
|
|
}
|
|
}
|