492 lines
7.7 KiB
SCSS
492 lines
7.7 KiB
SCSS
/* hide a bunch of elements */
|
|
div#droite,
|
|
div#services > h3,
|
|
div#steps h2,
|
|
div#sidebox div#links {
|
|
display: none;
|
|
}
|
|
|
|
/* general layout */
|
|
|
|
div#gauche {
|
|
clear: both;
|
|
width: 18.5%;
|
|
float: left;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
div#rub_service {
|
|
background: white;
|
|
margin-top: 15px;
|
|
& h2 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div#gauche + div#rub_service {
|
|
width: 79.5%;
|
|
float: right;
|
|
clear: none;
|
|
}
|
|
|
|
|
|
/* style homepage blocks */
|
|
div#services > ul {
|
|
@include vendor-prefix('column-count', '2');
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
@include vendor-prefix('column-count', '1');
|
|
}
|
|
}
|
|
|
|
div#services > ul > li {
|
|
display: inline-block;
|
|
}
|
|
|
|
div#services ul li li {
|
|
list-style: none;
|
|
}
|
|
|
|
div#services > ul > li {
|
|
margin: 0;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
div#tracking-code h3,
|
|
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#rub_service div.dataview,
|
|
div#rub_service dl#evolutions,
|
|
div#rub_service form {
|
|
padding: 1ex;
|
|
}
|
|
|
|
/* tracking code */
|
|
div#tracking-code button {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
div#tracking-code a {
|
|
font-size: 150%;
|
|
display: inline-block;
|
|
padding: 0.5ex 0 0 0.5ex;
|
|
color: #444;
|
|
}
|
|
|
|
div#tracking-code {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div#services div.block-custom-text {
|
|
margin: 1em;
|
|
}
|
|
|
|
/* steps */
|
|
|
|
div#steps ol {
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
color: #868686;
|
|
|
|
& li {
|
|
border: 0;
|
|
border-bottom: 1px solid #ccc;
|
|
margin-bottom: 2ex;
|
|
border-radius: $border-radius;
|
|
padding: 1ex;
|
|
letter-spacing: 1px;
|
|
}
|
|
& li.current {
|
|
border: 0;
|
|
background: $title-background;
|
|
color: $title-color;
|
|
& span.label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
& li span.marker {
|
|
font-size: 250%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $mobile-limit) {
|
|
div#tracking-code {
|
|
display: none;
|
|
}
|
|
div#gauche {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
div#steps {
|
|
position: static;
|
|
margin: 0;
|
|
color: #aaa;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
& ol {
|
|
list-style: none;
|
|
padding: 0 0;
|
|
margin: 0;
|
|
text-align: left;
|
|
& li {
|
|
border: none;
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0 1em 1ex 0;
|
|
list-style: none;
|
|
border-radius: 0;
|
|
& span.marker {
|
|
float: none;
|
|
display: inline;
|
|
font-size: 26px;
|
|
position: static;
|
|
padding: 2px 9px;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-align: center;
|
|
background: #ddd;
|
|
border-radius: $border-radius;
|
|
border: 1px solid #ddd;
|
|
}
|
|
}
|
|
& li.current {
|
|
background: inherit;
|
|
color: inherit;
|
|
& span.label {
|
|
font-weight: normal;
|
|
}
|
|
& span.marker {
|
|
background: $title-background;
|
|
color: $title-color;
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
& li.step-before .label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
div#gauche + div#rub_service,
|
|
div#rub_service {
|
|
width: 100%;
|
|
margin: 0;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
li.required-authentication span {
|
|
display: none;
|
|
}
|
|
|
|
li.required-authentication a:after {
|
|
content: "\f084";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 1ex;
|
|
color: #444;
|
|
}
|
|
|
|
div.text-check-before-submit,
|
|
ul#evolutions,
|
|
div#content #disclose-dataview,
|
|
div#receipt-intro {
|
|
margin: 1em;
|
|
padding: 0;
|
|
display: block;
|
|
}
|
|
|
|
div.dataview {
|
|
display: none;
|
|
}
|
|
|
|
div.qommon-map {
|
|
height: 280px;
|
|
}
|
|
|
|
p.use-file-from-fargo span {
|
|
cursor: pointer;
|
|
border-bottom: 1px dotted #999;
|
|
}
|
|
|
|
/* journal */
|
|
|
|
ul#evolutions {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#evolutions:after {
|
|
/* the vertical timeline itself */
|
|
content: "";
|
|
background: #bbb;
|
|
position: absolute;
|
|
width: 1px;
|
|
top: 40px;
|
|
left: 30px;
|
|
height: calc(100% - 40px);
|
|
z-index: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
ul#evolutions li {
|
|
list-style-image: none;
|
|
margin: 1em 0 2em 0;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
ul#evolutions li:after {
|
|
/* li:after, horizontal line, from the timeline to the item */
|
|
content: "";
|
|
background: #bbb;
|
|
position: absolute;
|
|
width: 100px;
|
|
left: 30px;
|
|
top: 39px;
|
|
height: 1px;
|
|
z-index: -10;
|
|
}
|
|
|
|
ul#evolutions div.evolution-metadata {
|
|
width: auto;
|
|
display: inline-block;
|
|
background: white;
|
|
margin-left: 60px;
|
|
padding: 1ex;
|
|
padding-top: 30px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul#evolutions span.time {
|
|
display: block;
|
|
color: #aaa;
|
|
}
|
|
|
|
ul#evolutions li div.msg span.time {
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul#evolutions span.status {
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
|
|
ul#evolutions span.user {
|
|
display: block;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
ul#evolutions span.user span {
|
|
font-size: 80%;
|
|
}
|
|
|
|
ul#evolutions li div.msg {
|
|
padding: 1ex;
|
|
padding-top: 0;
|
|
position: relative;
|
|
background: white;
|
|
margin-left: 60px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
ul#evolutions li.msg-in div.msg {
|
|
}
|
|
|
|
ul#evolutions li.msg-out div.msg {
|
|
}
|
|
|
|
ul#evolutions li div.msg div.comment {
|
|
padding: 1ex 1em;
|
|
background: #EEEEEE;
|
|
}
|
|
|
|
#evolutions .msg-system {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
ul#evolutions li span.item {
|
|
/* left circle icon */
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
font-family: FontAwesome;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: block;
|
|
left: 10px;
|
|
border-radius: 20px;
|
|
border: 1px solid #888;
|
|
top: 20px;
|
|
background: $button-color !important;
|
|
color: $button-background !important;
|
|
}
|
|
|
|
ul#evolutions li:first-child span.item:before {
|
|
content: "\f067"; /* plus */
|
|
}
|
|
|
|
ul#evolutions li.msg-system span.item:before {
|
|
content: "\f141"; /* ellipsis-h */
|
|
}
|
|
|
|
ul#evolutions li span.item:before {
|
|
content: "\f075"; /* comment */
|
|
}
|
|
|
|
|
|
div.dataview {
|
|
div.field {
|
|
margin-bottom: 1ex;
|
|
}
|
|
span.label {
|
|
font-weight: bold;
|
|
}
|
|
.value {
|
|
display: block;
|
|
margin-left: 1ex;
|
|
}
|
|
}
|
|
|
|
form div.errornotice {
|
|
margin-top: 0ex;
|
|
}
|
|
|
|
/* classes to be used in forms */
|
|
|
|
div.halfwidth {
|
|
width: 45%;
|
|
float: left;
|
|
}
|
|
|
|
div.widget.halfwidth.right {
|
|
clear: none;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
div.fullwidth {
|
|
width: 95%;
|
|
}
|
|
|
|
div.halfwidth,
|
|
div.fullwidth {
|
|
textarea, select, input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
form.quixote div.grid {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding-right: 1em;
|
|
clear: none;
|
|
}
|
|
|
|
@each $i in 1, 2, 3, 4, 6, 12 {
|
|
@for $j from 1 through $i {
|
|
div.dataview div.grid-#{$j}-#{$i},
|
|
form.quixote div.grid-#{$j}-#{$i} {
|
|
clear: none;
|
|
&.newline {
|
|
clear: both;
|
|
}
|
|
}
|
|
div.grid-#{$j}-#{$i} {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding-right: 1em;
|
|
width: (100*$j/$i+0%);
|
|
@media screen and (max-width: $mobile-limit) {
|
|
@if $i == 4 and $j <= 2 { width: 50%; }
|
|
@else if $i == 4 and $j > 2 { width: 100%; }
|
|
@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
|
|
@else if $i == 6 and $j == 3 { width: 50%; }
|
|
@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
|
|
@else if $i == 6 and $j == 6 { width: 100%; }
|
|
@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
|
|
@else if $i == 12 and $j <= 7 { width: 50%; }
|
|
@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
|
|
@else if $i == 12 and $j == 12 { width: 100%; }
|
|
}
|
|
@media screen and (max-width: $very-small-limit) {
|
|
width: 100%;
|
|
}
|
|
& + div {
|
|
clear: both;
|
|
}
|
|
textarea, select, input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.buttons,
|
|
div.dataview > p,
|
|
div.dataview div.page {
|
|
clear: both;
|
|
}
|
|
|
|
label.activity {
|
|
display: block;
|
|
background: url(../img/spinner.gif) no-repeat top right;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
span.geoloc-error {
|
|
padding-left: 1ex;
|
|
font-weight: normal;
|
|
font-size: smaller;
|
|
float: right;
|
|
}
|
|
|
|
.fileprogress {
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
.fileprogress .bar {
|
|
background: $button-background;
|
|
line-height: 1.5em;
|
|
padding-left: 1ex;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fileinfo {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
div.fileinfo a.remove {
|
|
text-indent: 0;
|
|
background: none;
|
|
color: transparent;
|
|
}
|
|
|
|
div.fileinfo a.remove:before {
|
|
font-family: FontAwesome;
|
|
content: "\f057";
|
|
color: $button-background;
|
|
}
|
|
|
|
div.RankedItemsWidget label input {
|
|
margin-right: 1em;
|
|
}
|