general: add basic scss blocks and change publik theme to use them (#8504)
This commit is contained in:
parent
a77cd209a3
commit
0a3fe31edd
2
Makefile
2
Makefile
|
|
@ -4,7 +4,7 @@ NAME="publik-base-theme"
|
|||
prefix = /usr
|
||||
|
||||
all:
|
||||
@(echo "Nothing to build. Please use make install.")
|
||||
cd static/custom-publik/ && sass style.scss:style.css
|
||||
|
||||
clean:
|
||||
rm -rf sdist
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ Source: publik-base-theme
|
|||
Section: web
|
||||
Priority: optional
|
||||
Maintainer: Frédéric Péters <fpeters@entrouvert.com>
|
||||
Build-Depends: debhelper (>= 8.0.0)
|
||||
Build-Depends: debhelper (>= 8.0.0), ruby-sass
|
||||
Standards-Version: 3.9.4
|
||||
Homepage: http://git.entrouvert.org/publik-base-theme.git
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
body {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
body {
|
||||
border-top: 3px solid $nav-selected-color;
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
background: url(logo.png) no-repeat left bottom;
|
||||
padding-top: 35px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#nav a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div#nav ul {
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
div#services > ul > li > strong > a,
|
||||
#content div.textcell h2:first-child,
|
||||
#content div.cell h2:first-child {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#services > ul > li > strong > a:after,
|
||||
#content div.textcell h2:first-child:after,
|
||||
#content div.cell h2:first-child:after {
|
||||
width: 20%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%;
|
||||
z-index: 1;
|
||||
right: -10%;
|
||||
top: 0px;
|
||||
margin: -5px 0px 0px -5px;
|
||||
transform-origin: 0px 0px 0px;
|
||||
transform: rotate(-20deg);
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: all 0.3s ease 0s
|
||||
}
|
||||
|
||||
div#services > ul > li:hover > strong > a:after,
|
||||
#content div.textcell:hover h2:first-child:after,
|
||||
#content div.cell:hover h2:first-child:after {
|
||||
width: 30%;
|
||||
}
|
||||
|
|
@ -1,436 +0,0 @@
|
|||
@import url(../style.css);
|
||||
|
||||
div#header,
|
||||
body {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
body {
|
||||
border-top: 3px solid #910956;
|
||||
}
|
||||
|
||||
div#top {
|
||||
padding-top: 1.5ex;
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
background: url(logo.png) no-repeat 0% 0%;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
#nav ul {
|
||||
border: none;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 3px;
|
||||
background: #E80E89;
|
||||
}
|
||||
|
||||
#nav li a {
|
||||
padding: 1em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#nav li:first-child a {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
#nav li a:hover,
|
||||
#nav li.selected a {
|
||||
background: #910956;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div#services > ul {
|
||||
-webkit-column-gap: 30px;
|
||||
-moz-column-gap: 30px;
|
||||
column-gap: 30px;
|
||||
margin: 0;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
div#services > ul > li,
|
||||
div.block,
|
||||
div.a2-block,
|
||||
#content div.cell {
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
div.a2-block {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div#left div.block,
|
||||
#content div#left div.cell {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div#right div.block,
|
||||
#content div#right div.cell {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#content div.block h2 + div {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
div#services > ul > li > strong {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: none;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
div#rub_service div.category h3,
|
||||
#content div.block h2,
|
||||
div#services > ul > li > strong > a,
|
||||
#content div.textcell h2:first-child,
|
||||
#content div.cell h2:first-child {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #910956;
|
||||
color: white;
|
||||
padding: 1ex;
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#services > ul > li > strong > a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div#rub_service div.category ul,
|
||||
div#services > ul > li > ul,
|
||||
div.categoriescell ul,
|
||||
div.wcsformsofcategorycell ul,
|
||||
div.wcscurrentdraftscell ul,
|
||||
div.wcscurrentformscell ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div#rub_service div.category ul a,
|
||||
div#services > ul > li > ul a,
|
||||
div.categoriescell ul a,
|
||||
div.wcsformsofcategorycell ul a,
|
||||
div.wcscurrentdraftscell ul a,
|
||||
div.wcscurrentformscell ul a {
|
||||
padding: 1em;
|
||||
display: block;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div#rub_service div.category ul a:hover,
|
||||
div#services > ul > li > ul a:hover,
|
||||
div.categoriescell ul a:hover,
|
||||
div#content div.wcsformsofcategorycell ul a:hover,
|
||||
div#content div.wcscurrentdraftscell ul a:hover,
|
||||
div#content div.wcscurrentformscell ul a:hover {
|
||||
text-decoration: none;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
div.textcell div * {
|
||||
padding: 1ex;
|
||||
}
|
||||
|
||||
div#services > ul > li > p,
|
||||
div#services > ul > li > div {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div#centre li li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div#services > ul > li {
|
||||
width: 100%;
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
top: 0;
|
||||
right: 1em;
|
||||
border-radius: 0 0 1em 1em;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
width: auto;
|
||||
padding: 1ex 2em 0.3ex 2em;
|
||||
border: 3px solid #910956;
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
/* wcs */
|
||||
|
||||
div#rub_consultation h2,
|
||||
div#rub_service h2,
|
||||
div#rub_annonce h2,
|
||||
div#rub_agenda h2,
|
||||
div#services-2nd h3,
|
||||
div#member h2,
|
||||
div#help h2, div#info h2, div#accessibility h2, div#contact h2,
|
||||
div#gauche h3,
|
||||
div.large div#rub_service h3,
|
||||
div#centre h3 {
|
||||
text-align: left;
|
||||
padding-left: 1ex;
|
||||
font-size: 170%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
div#tracking-code,
|
||||
div#steps ol {
|
||||
margin-top: 0;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
padding: 1ex 0;
|
||||
}
|
||||
|
||||
div#steps ol > li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
div#member,
|
||||
div#new_member,
|
||||
div#accessibility,
|
||||
div#contact,
|
||||
div#info,
|
||||
div#help,
|
||||
div#rub_agenda,
|
||||
div#rub_annonce,
|
||||
div#rub_consultation,
|
||||
div#rub_service,
|
||||
div#gauche + div#rub_service {
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
div#rub_service > form {
|
||||
padding: 0 2ex;
|
||||
}
|
||||
|
||||
li.required-authentication span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.required-authentication a:after {
|
||||
content: "\f084";
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
right: 1ex;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div#services > ul > li > strong > a,
|
||||
#content div.textcell h2:first-child,
|
||||
#content div.cell h2:first-child {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#services > ul > li > strong > a:after,
|
||||
#content div.textcell h2:first-child:after,
|
||||
#content div.cell h2:first-child:after {
|
||||
width: 20%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%;
|
||||
z-index: 1;
|
||||
right: -10%;
|
||||
top: 0px;
|
||||
margin: -5px 0px 0px -5px;
|
||||
transform-origin: 0px 0px 0px;
|
||||
transform: rotate(-20deg);
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: all 0.3s ease 0s
|
||||
}
|
||||
|
||||
div#services > ul > li:hover > strong > a:after,
|
||||
#content div.textcell:hover h2:first-child:after,
|
||||
#content div.cell:hover h2:first-child:after {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
div.wcs-tracking-code-input form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div#rub_service div#side div#tracking-code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.catforms li {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
div#receipt-intro,
|
||||
div#summary,
|
||||
div#evolution-log {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 990px) {
|
||||
div#header {
|
||||
z-index: 10;
|
||||
}
|
||||
div#nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #eee;
|
||||
z-index: 10000;
|
||||
height: 100vh;
|
||||
width: 12em;
|
||||
border: none;
|
||||
margin: 0;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
width: 5px;
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
div#nav.toggled {
|
||||
width: 15em;
|
||||
}
|
||||
div#nav:before {
|
||||
content: "≡";
|
||||
padding-right: 0.3ex;
|
||||
font-size: 300%;
|
||||
background: #eee;
|
||||
color: #910956;
|
||||
border-radius: 0 5px 5px 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
div#nav.toggled:before {
|
||||
box-shadow: none;
|
||||
}
|
||||
div#nav ul {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
div#nav li {
|
||||
float: none;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div#nav li a {
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
h1#logo {
|
||||
margin-top: 2em;
|
||||
margin-left: 2ex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
#toplinks {
|
||||
border-radius: 0;
|
||||
right: 0;
|
||||
border-width: 0 0 1px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#gauche {
|
||||
padding: 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
div#steps {
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
div#steps ol {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div#steps ol li,
|
||||
div#steps ol li ul li {
|
||||
display: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
div#steps span.marker {
|
||||
float: none;
|
||||
background: #910956;
|
||||
color: white;
|
||||
top: 0;
|
||||
padding: 4px 0.5ex 4px 0.5ex;
|
||||
}
|
||||
div#steps span.label {
|
||||
margin-right: 3ex;
|
||||
margin-left: 1ex;
|
||||
}
|
||||
div#steps li.current,
|
||||
div#steps li li.current {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div#steps li.current ul {
|
||||
display: inline-block;
|
||||
}
|
||||
div#steps li.current ul li.current {
|
||||
background: transparent;
|
||||
color: black;
|
||||
}
|
||||
div#tracking-code {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
div#tracking-code h3 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 3px 1ex;
|
||||
background: #910956;
|
||||
color: white;
|
||||
font-size: 130%;
|
||||
}
|
||||
div#tracking-code button,
|
||||
div#tracking-code a {
|
||||
font-size: 100%;
|
||||
margin-left: 2ex;
|
||||
}
|
||||
div#gauche + div#rub_service,
|
||||
div#rub_service {
|
||||
float: none;
|
||||
width: 99%;
|
||||
margin: 0 5px;
|
||||
}
|
||||
div.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
select,
|
||||
textarea,
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
input[type=text] {
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#left, #right {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
#content div.cell,
|
||||
div.block {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
$font-size: 13px !default;
|
||||
$font-family: sans-serif !default;
|
||||
$nav-background: #E80E89;
|
||||
$nav-color: white;
|
||||
$nav-selected-color: #910956;
|
||||
$border-radius: 3px;
|
||||
$top-logo-width: 100px;
|
||||
$button-background: $nav-background;
|
||||
$title-background: #910956;
|
||||
$title-color: white;
|
||||
|
||||
@import '../includes/general';
|
||||
@import '../includes/layout';
|
||||
@import '../includes/nav';
|
||||
@import '../includes/cells';
|
||||
@import '../includes/user-info';
|
||||
@import '../includes/wcs';
|
||||
@import '../includes/forms';
|
||||
@import '../includes/misc';
|
||||
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
$cell-border: 1px solid #ccc !default;
|
||||
$cell-border-radius: $border-radius !default;
|
||||
|
||||
div#left div.block,
|
||||
#content #left .cell { margin-left: 0; }
|
||||
div#right div.block,
|
||||
#content #right .cell { margin-right: 0; }
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
div#left div.block,
|
||||
#content #left .cell,
|
||||
div#right div.block,
|
||||
#content #right .cell {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div#services > ul > li,
|
||||
div.a2-block,
|
||||
#content div.cell,
|
||||
div.block {
|
||||
text-align: left;
|
||||
background: white;
|
||||
margin: 10px 10px;
|
||||
padding: 0;
|
||||
border-radius: $border-radius;
|
||||
border: $cell-border;
|
||||
|
||||
& h2 + div {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
div#services > ul > li > strong {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#rub_service div.category h3,
|
||||
#content div.block h2,
|
||||
div#services > ul > li > strong > a,
|
||||
#content div.textcell h2:first-child,
|
||||
#content div.cell h2:first-child {
|
||||
@extend %title;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
div#rub_service div.category ul,
|
||||
div#services > ul > li > ul,
|
||||
div.categoriescell ul,
|
||||
div.wcsformsofcategorycell ul,
|
||||
div.wcscurrentformscell ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
& a {
|
||||
padding: 1em;
|
||||
display: block;
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
$button-background: #37a7da !default;
|
||||
$button-color: white !default;
|
||||
|
||||
input[type=submit],
|
||||
div.buttons input {
|
||||
background: $button-background;
|
||||
color: $button-color;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 5px #777;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
$title-background: white !default;
|
||||
$title-color: black !default;
|
||||
$border-radius: 3px !default;
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('../xstatic/fonts/fontawesome-webfont.eot');
|
||||
src: url('../xstatic/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../xstatic/fonts/fontawesome-webfont.woff') format('woff'), url('../xstatic/fonts/fontawesome-webfont.ttf') format('truetype'), url('../xstatic/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: $font-family;
|
||||
font-size: $font-size;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #028;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
%title {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-transform: none;
|
||||
background: $title-background;
|
||||
color: $title-color;
|
||||
padding: 1ex;
|
||||
border-radius: $border-radius;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
font-size: $font-size * 1.1;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
$width: 1000px !default;
|
||||
$mobile-limit: 800px !default;
|
||||
$footer-background: #666666 !default;
|
||||
$footer-color: white !default;
|
||||
$top-logo-width: 0 !default;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div#footer, div#page {
|
||||
clear: both;
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div#header {
|
||||
width: 100%;
|
||||
margin: 0 0 0 0;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
z-index: 0;
|
||||
padding: 0 1ex;
|
||||
& h1 {
|
||||
margin: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
position: absolute;
|
||||
& h1 {
|
||||
padding-left: $top-logo-width+70px;
|
||||
background-position: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#main-content-wrapper {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
max-width: $width;
|
||||
margin: 0px auto 0px auto;
|
||||
padding: 0 1ex;
|
||||
}
|
||||
|
||||
div#main-content {
|
||||
margin: 0;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
#right {
|
||||
float: right;
|
||||
width: 49.5%;
|
||||
}
|
||||
#left {
|
||||
float: left;
|
||||
width: 49.5%;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-wrapper {
|
||||
clear: both;
|
||||
padding: 1ex 0 2ex 0;
|
||||
background: $footer-background;
|
||||
color: $footer-color;
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
padding-left: $top-logo-width;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
div.textcell p {
|
||||
margin: 1ex;
|
||||
}
|
||||
|
||||
div#footer div.cell.test-banner {
|
||||
position: fixed;
|
||||
top: 2em;
|
||||
right: -5em;
|
||||
background: red;
|
||||
width: 15em;
|
||||
z-index: 1000;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center center;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div#footer div.cell.test-banner p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
$nav-background: white !default;
|
||||
$nav-color: black !default;
|
||||
$nav-selected-color: #005EA9 !default;
|
||||
$nav-height: 3em !default;
|
||||
$mobile-limit: 800px !default;
|
||||
$nav-menu-side: 50px !default;
|
||||
$border-radius: 0 !default;
|
||||
$responsive-menu: top-to-bottom !default; /* or right-to-left */
|
||||
|
||||
div#nav {
|
||||
background: $nav-background;
|
||||
color: $nav-color;
|
||||
padding: 0;
|
||||
margin: 10px 0px;
|
||||
height: $nav-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
||||
div#nav ul {
|
||||
border-color: $nav-selected-color;
|
||||
height: $nav-height;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#nav ul li:first-child a {
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
}
|
||||
|
||||
div#nav a {
|
||||
color: $nav-color;
|
||||
font-weight: bold;
|
||||
padding: 0px 20px;
|
||||
display: inline-block;
|
||||
line-height: 3em;
|
||||
transition: background 0.5s, color 0.5s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div#nav li {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#nav li:hover a,
|
||||
div#nav li.selected a {
|
||||
background-color: $nav-selected-color;
|
||||
color: $nav-color;
|
||||
}
|
||||
|
||||
#nav-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
display: none;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@if $responsive-menu == left-to-right {
|
||||
body {
|
||||
border-left: 4px solid $nav-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
div#nav {
|
||||
height: auto;
|
||||
background: transparent;
|
||||
@if $responsive-menu == left-to-right {
|
||||
height: 3em;
|
||||
}
|
||||
}
|
||||
div#nav #nav-button {
|
||||
display: block;
|
||||
z-index: 200;
|
||||
position: relative;
|
||||
width: $nav-menu-side+2px;
|
||||
height: $nav-menu-side;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $nav-selected-color;
|
||||
transition: all 0.25s ease;
|
||||
border: 0;
|
||||
& .sr-only {
|
||||
display: none;
|
||||
}
|
||||
& .icon-bar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: $nav-menu-side/6;
|
||||
width: $nav-menu-side/6*4;
|
||||
margin: 0;
|
||||
border: 1px solid white;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
& .icon-bar + .icon-bar {
|
||||
xxmargin-top: $nav-menu-side/10;
|
||||
}
|
||||
& .icon-bar-1 {
|
||||
top: $nav-menu-side/4;
|
||||
}
|
||||
& .icon-bar-2 {
|
||||
top: $nav-menu-side/2;
|
||||
}
|
||||
& .icon-bar-3 {
|
||||
top: $nav-menu-side/4*3;
|
||||
}
|
||||
|
||||
@if $responsive-menu == left-to-right {
|
||||
position: fixed;
|
||||
left: 4px;
|
||||
border-radius: 0 $border-radius $border-radius 0;
|
||||
}
|
||||
|
||||
& + ul {
|
||||
overflow: hidden;
|
||||
@if $responsive-menu == top-to-bottom {
|
||||
height: 0px;
|
||||
border-top: 2px solid $nav-selected-color;
|
||||
margin-top: 0;
|
||||
} @else if $responsive-menu == left-to-right {
|
||||
transition: width 0.25s ease;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
position: fixed;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
padding-top: 20px+$nav-menu-side;
|
||||
}
|
||||
|
||||
background: #eee;
|
||||
& a {
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
}
|
||||
& li.selected a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
& + ul li:last-child {
|
||||
@if $responsive-menu == top-to-bottom {
|
||||
border-bottom: 2px solid $nav-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#nav #nav-button.toggled {
|
||||
@if $responsive-menu == left-to-right {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& .icon-bar-1 {
|
||||
@if $responsive-menu == left-to-right {
|
||||
border-color: $nav-selected-color;
|
||||
}
|
||||
top: $nav-menu-side/2;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
& .icon-bar-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
& .icon-bar-3 {
|
||||
@if $responsive-menu == left-to-right {
|
||||
border-color: $nav-selected-color;
|
||||
}
|
||||
top: $nav-menu-side/2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
& + ul {
|
||||
display: block;
|
||||
@if $responsive-menu == top-to-bottom {
|
||||
height: auto;
|
||||
} @else if $responsive-menu == left-to-right {
|
||||
width: 15em;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
& + ul li {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
& + ul li a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
#toplinks {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 1em;
|
||||
border-radius: 0 0 1em 1em;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
width: auto;
|
||||
padding: 1ex 2em 0.3ex 2em;
|
||||
border: 3px solid #910956;
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
#toplinks span.connected-user {
|
||||
padding-right: 1ex;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
div#services ul li li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div#services > ul > li {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div#rub_service h2 {
|
||||
@extend %title;
|
||||
}
|
||||
|
||||
div.large div#rub_service h3,
|
||||
div#rub_service h3 {
|
||||
border: none;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid $title-background;
|
||||
}
|
||||
|
||||
div#steps ol {
|
||||
& li {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 2ex;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
& li.current {
|
||||
border: 0;
|
||||
background: $title-background;
|
||||
color: $title-color;
|
||||
}
|
||||
}
|
||||
|
||||
li.required-authentication span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.required-authentication a:after {
|
||||
content: "\f084";
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
right: 1ex;
|
||||
color: #444;
|
||||
}
|
||||
|
|
@ -46,11 +46,10 @@ class RemoteTemplate(object):
|
|||
extra_head = """
|
||||
[script]
|
||||
<script type="text/javascript" src="/themes/publik-base/static/dataview.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="[css]">
|
||||
"""
|
||||
|
||||
extra_top_head = """
|
||||
<link rel="stylesheet" type="text/css" href="/qo/css/qommon.css">
|
||||
<link rel="stylesheet" type="text/css" href="[css]">
|
||||
"""
|
||||
|
||||
user_info = """
|
||||
|
|
|
|||
Loading…
Reference in New Issue