new theme: calvados-intranet-cd14 (#41570)
This commit is contained in:
parent
e0c26f52e0
commit
56fbbc9b65
|
|
@ -0,0 +1,287 @@
|
|||
@mixin fixed-header {
|
||||
transition: all ease 0.2s;
|
||||
margin-top: $toplinks-height;
|
||||
@media ($min-desktop-viewport) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
body.scrolled & {
|
||||
transform: translateY(-#{$toplinks-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin fixed-header-height {
|
||||
@media ($min-desktop-viewport) {
|
||||
display: flex;
|
||||
height: $header-desktop-height;
|
||||
body.scrolled & {
|
||||
height: $header-desktop-fixed-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h1 {
|
||||
font-size: $fz-h1;
|
||||
font-weight: bold;
|
||||
color: $font-color;
|
||||
font-family: $ff-serif;
|
||||
line-height: 1.1;
|
||||
|
||||
}
|
||||
@mixin h2 {
|
||||
font-size: $fz-h2;
|
||||
font-weight: bold;
|
||||
color: $primary-color;
|
||||
font-family: $ff-serif;
|
||||
}
|
||||
@mixin h3 {
|
||||
font-size: $fz-h3;
|
||||
font-weight: bold;
|
||||
color: $blue-dark;
|
||||
font-family: $ff-serif;
|
||||
}
|
||||
@mixin h4 {
|
||||
font-size: $fz-h4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
%cancel-button {
|
||||
@extend %button;
|
||||
background-color: white;
|
||||
color: $primary-color;
|
||||
border-color: currentColor;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: $blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
@media (max-width: $very-small-limit) {
|
||||
font-size: $fz-mobile;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a#publik-portal-agent {
|
||||
right: auto;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
height: $toplinks-height;
|
||||
top: -($toplinks-height);
|
||||
left: 0;
|
||||
max-width: none;
|
||||
width: 100vw;
|
||||
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
line-height: $toplinks-height / 1.5;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
border: 0;
|
||||
background: #eae9e2;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: #555;
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
|
||||
#header {
|
||||
background-color: $grayish-yellow;
|
||||
max-width: none;
|
||||
|
||||
@include fixed-header;
|
||||
@include fixed-header-height;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
z-index: 20;
|
||||
background-color: transparent;
|
||||
right: auto;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
background: url(img/Connect_intranet-logo.png) bottom left no-repeat;
|
||||
background-size: auto 100%;
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
text-indent: -10000px;
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-nav-wrapper {
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-top: -($nav-menu-side);
|
||||
}
|
||||
}
|
||||
|
||||
div#nav {
|
||||
font-size: 16px;
|
||||
max-width: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include fixed-header;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
z-index: 10;
|
||||
padding-right: 1rem;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
& > ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include fixed-header-height;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
justify-content: flex-end;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
|
||||
> a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > a {
|
||||
font-weight: normal;
|
||||
}
|
||||
// Sub nav
|
||||
ul {
|
||||
@media ($min-desktop-viewport) {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Picture
|
||||
body.has-picture nav::after {
|
||||
top: 0;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
body.has-picture nav::after {
|
||||
transition: top ease 0.2s;
|
||||
top: calc(#{$toplinks-height} + #{$header-desktop-height});
|
||||
}
|
||||
body.has-picture.scrolled nav::after {
|
||||
top: $header-desktop-fixed-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div#main-content-wrapper {
|
||||
z-index: 0;
|
||||
line-height: 1.5;
|
||||
padding-top: 2rem;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-top: calc(#{$toplinks-height} + #{$header-desktop-height} + 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
// cells
|
||||
|
||||
.text-cell {
|
||||
h1 { @include h1; }
|
||||
h2 { @include h2; }
|
||||
h3 { @include h3; }
|
||||
h4 { @include h4; }
|
||||
}
|
||||
|
||||
div#tracking-code h3 {
|
||||
border-bottom: none;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
div#rub_service {
|
||||
> h2 {
|
||||
text-align: left;
|
||||
padding-left: 0.5rem;
|
||||
border-bottom: none;
|
||||
@include h1;
|
||||
}
|
||||
h3 { @include h2; }
|
||||
h4 { @include h3; }
|
||||
}
|
||||
|
||||
body.has-picture {
|
||||
div#main-content-wrapper {
|
||||
padding-top: 0;
|
||||
#columns {
|
||||
> div:first-child {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
> div#rub_service,
|
||||
> div#gauche {
|
||||
padding-top: 0rem;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.widget div.title {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
span.helptext, div.hint {
|
||||
font-size: $fz-small;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-size: 14px;
|
||||
.menu-cell {
|
||||
li a {
|
||||
color: $footer-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
// custom vars
|
||||
// Colors
|
||||
$rose: #e40d7e;
|
||||
$blue-dark: #003d7e;
|
||||
$blue: #2ba3d7;
|
||||
$grayish-yellow: #f4f2e6;
|
||||
$gray-dark: #333;
|
||||
$gray: #737373;
|
||||
// typo
|
||||
$fz-desktop: 125%; // 20px
|
||||
$fz-mobile: 100%; // 16px
|
||||
$fz-h1: 2.2em;
|
||||
$fz-h2: 1.25em;
|
||||
$fz-h3: 1.1em;
|
||||
$fz-h4: 1em;
|
||||
$fz-small: 0.8em;
|
||||
$ff-ss-serif: Raleway, sans-serif;
|
||||
$ff-serif: "Roboto Slab", serif;
|
||||
// Layout
|
||||
$toplinks-height: 40px;
|
||||
$header-desktop-height: 6rem;
|
||||
$header-desktop-fixed-height: 4rem;
|
||||
|
||||
|
||||
// Core vars
|
||||
$width: 1140px;
|
||||
$mobile-limit: 1024px !default;
|
||||
$very-small-limit: 560px;
|
||||
$font-family: $ff-ss-serif;
|
||||
$primary-color: $rose;
|
||||
$font-color: black;
|
||||
$font-size: $fz-desktop;
|
||||
$border-radius: 0px;
|
||||
|
||||
$link-color: $blue-dark;
|
||||
|
||||
$nav-background: $grayish-yellow;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-submenu-color: $font-color;
|
||||
$nav-after-image-height: 300px;
|
||||
$nav-item-selected-border: 4px solid $primary-color;
|
||||
|
||||
$button-background: $primary-color;
|
||||
$cell-border: none;
|
||||
|
||||
$title-font-size: $fz-h2;
|
||||
$title-color: $gray-dark;
|
||||
$title-weight: bold;
|
||||
$title-border-bottom: 2px solid $primary-color;
|
||||
$title-border-radius: 0;
|
||||
|
||||
$button-hover-background: $blue-dark;
|
||||
$widget-focus-border: 1px solid $blue-dark;
|
||||
|
||||
$wcs-step-current-color: $gray-dark;
|
||||
|
||||
$notification-style: border-icon;
|
||||
|
||||
$footer-background: white;
|
||||
$footer-color: $gray;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Calvados (CD14) Intranet",
|
||||
"redmine_url": "https://dev.entrouvert.org/projects/calvados-portail-agents",
|
||||
"variables": {
|
||||
"theme_color": "#e40d7e",
|
||||
"email_header_img": "img/Connect_intranet-logo.png"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/font-roboto-slab';
|
||||
@import '../includes/font-raleway';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
Loading…
Reference in New Issue