init
This commit is contained in:
+1588
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+920
@@ -0,0 +1,920 @@
|
||||
$color-fresh: #0084b0;
|
||||
$color-hope: #00a356;
|
||||
$color-glint: #f9b000;
|
||||
$color-beat: #e40429;
|
||||
$color-tenacity: #44357e;
|
||||
$color-base: #18386b;
|
||||
$color-reboot: #4d4d4c;
|
||||
$color-black: #000;
|
||||
$color-white: #fff;
|
||||
$color-fresh-hope: #009483;
|
||||
$colors: ("fresh": $color-fresh, "hope": $color-hope, "glint": $color-glint, "beat": $color-beat, "tenacity": $color-tenacity, "base": $color-base, "reboot": $color-reboot);
|
||||
$screen-xs: 767;
|
||||
$screen-sm: 768;
|
||||
$screen-md: 992;
|
||||
$screen-lg: 1200;
|
||||
$screen-xl: 1800;
|
||||
$grid-size: 12;
|
||||
$font-light: '35c3-font-light';
|
||||
$font-black: '35c3-font-black';
|
||||
|
||||
@font-face {
|
||||
font-family: $font-light;
|
||||
src: url('fonts/35c3-light.woff2') format('woff2'), url('fonts/35c3-light.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font-black;
|
||||
src: url('fonts/35c3-black.woff2') format('woff2'), url('fonts/35c3-black.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* basic colors */
|
||||
|
||||
.text-white {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
color: $color-black;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
color: $color-white;
|
||||
background-color: $color-black;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.text-#{$color} {
|
||||
color: #{$value};
|
||||
}
|
||||
.bg-#{$color} {
|
||||
color: $color-white;
|
||||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
/* typography */
|
||||
|
||||
* {
|
||||
font-family: $font-light;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-black;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-fresh;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-breakword {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-breakall {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.text-breakline {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
border-left: 4px solid transparent;
|
||||
border-image: linear-gradient(to bottom, $color-hope, $color-fresh) 1 round;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
color: $color-glint;
|
||||
background-color: $color-reboot;
|
||||
}
|
||||
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table>thead {
|
||||
border-bottom: 2px solid $color-reboot;
|
||||
}
|
||||
|
||||
.table>tbody {
|
||||
border-top: 1px solid $color-reboot;
|
||||
}
|
||||
|
||||
.table>thead>tr>th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.table tr th,
|
||||
.table tr td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* line */
|
||||
|
||||
hr {
|
||||
height: 8px;
|
||||
border: none;
|
||||
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.hr-#{$color} {
|
||||
background-color: #{$value};
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 2px solid transparent;
|
||||
border-image: linear-gradient(to right, $color-hope, $color-fresh) 1 round;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.border-#{$color} {
|
||||
border: 2px solid #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
/* input */
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: 2px solid transparent;
|
||||
border-image: linear-gradient(to right, $color-hope, $color-fresh) 1 round;
|
||||
background: none;
|
||||
padding: 6px 6px;
|
||||
font-size: 1em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input:invalid,
|
||||
textarea:invalid {
|
||||
border-image: linear-gradient(to right, $color-beat, $color-tenacity) 1 round;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
border-image: linear-gradient(to right, $color-reboot, $color-base) 1 round;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
input:invalid:focus,
|
||||
textarea:invalid:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* range input */
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// webkit
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -10px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $color-fresh-hope;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:active {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border: 4px solid $color-fresh-hope;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||
}
|
||||
|
||||
// moz
|
||||
input[type=range]::-moz-range-thumb {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $color-fresh-hope;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:active {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border: 4px solid $color-fresh-hope;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(to right, $color-fresh, $color-hope);
|
||||
}
|
||||
|
||||
/* select */
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* checkbox input */
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-indent: -9999px;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.toggle {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.toggle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2px solid $color-reboot;
|
||||
transition: .4s;
|
||||
}
|
||||
.toggle:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 6px;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
border: 3px solid transparent;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg);
|
||||
transition: .4s;
|
||||
}
|
||||
input:checked+.toggle:after {
|
||||
border-color: $color-reboot;
|
||||
}
|
||||
input:checked+.toggle:before {
|
||||
border-color: $color-fresh;
|
||||
background-color: $color-fresh;
|
||||
}
|
||||
&:hover input:not(:checked)+.toggle:before {
|
||||
border-color: $color-fresh;
|
||||
}
|
||||
&:hover input:checked+.toggle:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
&.checkbox-#{$color} input:checked+.toggle:before {
|
||||
border-color: #{$value};
|
||||
background-color: #{$value};
|
||||
}
|
||||
&.checkbox-#{$color}:hover input:not(:checked)+.toggle:before {
|
||||
border-color: #{$value};
|
||||
}
|
||||
&.checkbox-#{$color}:hover input:checked+.toggle:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* radio input */
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-indent: -9999px;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.toggle {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.toggle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 2px solid $color-reboot;
|
||||
border-radius: 100%;
|
||||
transition: .4s;
|
||||
}
|
||||
.toggle:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
border: 1px solid transparent;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-radius: 100%;
|
||||
transition: .4s;
|
||||
}
|
||||
input:checked+.toggle:after {
|
||||
background-color: $color-reboot;
|
||||
}
|
||||
input:checked+.toggle:before {
|
||||
border-color: $color-fresh;
|
||||
}
|
||||
&:hover .toggle:after,
|
||||
input:checked+.toggle:after {
|
||||
background-color: $color-fresh;
|
||||
}
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
&.radio-#{$color} input:checked+.toggle:before {
|
||||
border-color: #{$value};
|
||||
}
|
||||
&.radio-#{$color}:hover .toggle:after,
|
||||
&.radio-#{$color} input:checked+.toggle:after {
|
||||
background-color:#{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* switch */
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
text-indent: -9999px;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.toggle {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.toggle:before {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
content: "";
|
||||
background-color: $color-reboot;
|
||||
border-radius: 26px;
|
||||
transition: .4s;
|
||||
}
|
||||
.toggle:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
background-color: $color-fresh;
|
||||
border-radius: 50%;
|
||||
transition: .4s;
|
||||
}
|
||||
input:checked+.toggle:after {
|
||||
transform: translateX(23px);
|
||||
background-color: $color-reboot;
|
||||
}
|
||||
input:checked+.toggle:before {
|
||||
background-color: $color-fresh;
|
||||
}
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
&.switch-#{$color} .toggle:after {
|
||||
background-color: #{$value};
|
||||
}
|
||||
&.switch-#{$color} input:checked+.toggle:before {
|
||||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
button {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
color: $color-reboot;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.btn-black {
|
||||
background-color: $color-black;
|
||||
}
|
||||
|
||||
.btn-fresh {
|
||||
color: $color-white;
|
||||
background-color: $color-fresh;
|
||||
}
|
||||
|
||||
.btn-hope {
|
||||
color: $color-white;
|
||||
background-color: $color-hope;
|
||||
}
|
||||
|
||||
.btn-glint {
|
||||
color: $color-white;
|
||||
background-color: $color-glint;
|
||||
}
|
||||
|
||||
.btn-beat {
|
||||
color: $color-white;
|
||||
background-color: $color-beat;
|
||||
}
|
||||
|
||||
.btn-tenacity {
|
||||
color: $color-white;
|
||||
background-color: $color-tenacity;
|
||||
}
|
||||
|
||||
.btn-base {
|
||||
color: $color-white;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.btn-reboot {
|
||||
color: $color-white;
|
||||
background-color: $color-reboot;
|
||||
}
|
||||
|
||||
.btn.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: 0.7em;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 0.9em;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
font-size: 1.2em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn-round {
|
||||
width: 2.33em;
|
||||
height: 2.33em;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* images */
|
||||
|
||||
.img-auto {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* container */
|
||||
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-sm+'px') {
|
||||
.container {
|
||||
width: #{$screen-sm * 0.97}+'px';
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-md+'px') {
|
||||
.container {
|
||||
width: #{$screen-md * 0.97}+'px';
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-lg+'px') {
|
||||
.container {
|
||||
width: #{$screen-lg * 0.97}+'px';
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-xl+'px') {
|
||||
.container {
|
||||
width: #{$screen-xl * 0.97}+'px';
|
||||
}
|
||||
}
|
||||
|
||||
/* grid */
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($grid-size, 1fr);
|
||||
grid-row-gap: 8px;
|
||||
grid-column-gap: 8px;
|
||||
&.section {
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-xs+'px') {
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-xs-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-xs-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-sm+'px') {
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-sm-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-sm-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-md+'px') {
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-md-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-md-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-lg+'px') {
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-lg-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-lg-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-xl+'px') {
|
||||
@for $i from 1 through $grid-size {
|
||||
.col-xl-#{$i} {
|
||||
grid-column-end: span $i;
|
||||
}
|
||||
.col-xl-offset-#{$i} {
|
||||
grid-column-start: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* visible/hidden responsive */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visible,
|
||||
.visible-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.visible-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.visible-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.visible-print,
|
||||
.visible-print-block,
|
||||
.visible-print-inline,
|
||||
.visible-print-inline-block {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hidden-print {
|
||||
display: none;
|
||||
}
|
||||
.visible-print,
|
||||
.visible-print-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-print-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-print-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-xs+'px') {
|
||||
.hidden-xs {
|
||||
display: none;
|
||||
}
|
||||
.visible-xs,
|
||||
.visible-xs-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-xs-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-xs-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-sm+'px') and (max-width: #{$screen-md - 1}+'px') {
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
.visible-sm,
|
||||
.visible-sm-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-sm-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-sm-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-md+'px') and (max-width: #{$screen-lg - 1}+'px') {
|
||||
.hidden-md {
|
||||
display: none;
|
||||
}
|
||||
.visible-md,
|
||||
.visible-md-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-md-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-md-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-lg+'px') and (max-width: #{$screen-xl - 1}+'px') {
|
||||
.hidden-lg {
|
||||
display: none;
|
||||
}
|
||||
.visible-lg,
|
||||
.visible-lg-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-lg-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-lg-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-xl+'px') {
|
||||
.hidden-xl {
|
||||
display: none;
|
||||
}
|
||||
.visible-xl,
|
||||
.visible-xl-block {
|
||||
display: block;
|
||||
}
|
||||
.visible-xl-inline {
|
||||
display: inline;
|
||||
}
|
||||
.visible-xl-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* other helper */
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* popover */
|
||||
|
||||
.popover {
|
||||
display: inline;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -25px);
|
||||
color: $color-glint;
|
||||
background-color: $color-reboot;
|
||||
font-size: 0.8em;
|
||||
padding: 7px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.popover-content:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 7px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid $color-reboot;
|
||||
}
|
||||
|
||||
.popover:hover .popover-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
Options +Indexes
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,84 @@
|
||||
/* ADVANCED styling */
|
||||
/* sidebar */
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition: 0.4s;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:not(:checked) ~ #sidebar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:checked ~ #sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:checked ~ #main {
|
||||
left: 250px;
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#sidebar-toggle {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
#sidebar-toggle-input:checked ~ #sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar-toggle-input:checked ~ #main .container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#sidebar-toggle-input:checked ~ #main .container {
|
||||
width: calc(744.96px - 250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
#sidebar-toggle-input:checked ~ #main .container {
|
||||
width: calc(962.24px - 250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#sidebar-toggle-input:checked ~ #main .container {
|
||||
width: calc(1164px -250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1800px) {
|
||||
#sidebar-toggle-input:checked ~ #main .container {
|
||||
width: calc(1746px - 250px);
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
#sidebar{position:fixed;top:0;left:0;height:100%;transition:0.4s;overflow:hidden;z-index:2}.sidebar-toggle{cursor:pointer;font-size:2em;padding:5px}#sidebar-toggle{position:fixed;top:0;background-color:inherit;z-index:1}#sidebar-toggle-input{display:none}#main{position:relative;left:0;width:100%}#sidebar-toggle-input:not(:checked) ~ #sidebar{width:0px}#sidebar-toggle-input:checked ~ #sidebar{width:250px}#sidebar-toggle-input:checked ~ #main{left:250px;width:calc(100% - 250px)}@media screen and (max-width: 767px){#sidebar-toggle{left:auto;right:0}#sidebar-toggle-input:checked ~ #sidebar{width:100%}#sidebar-toggle-input:checked ~ #main .container{width:100%}}@media screen and (min-width: 768px){#sidebar-toggle-input:checked ~ #main .container{width:calc(744.96px - 250px)}}@media screen and (min-width: 992px){#sidebar-toggle-input:checked ~ #main .container{width:calc(962.24px - 250px)}}@media screen and (min-width: 1200px){#sidebar-toggle-input:checked ~ #main .container{width:calc(1164px -250px)}}@media screen and (min-width: 1800px){#sidebar-toggle-input:checked ~ #main .container{width:calc(1746px - 250px)}}
|
||||
@@ -0,0 +1,86 @@
|
||||
/* ADVANCED styling */
|
||||
|
||||
/* sidebar */
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition: 0.4s;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
cursor: pointer;
|
||||
font-size: 2em;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#sidebar-toggle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:not(:checked)~#sidebar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:checked~#sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#sidebar-toggle-input:checked~#main {
|
||||
left: 250px;
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#sidebar-toggle {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
#sidebar-toggle-input:checked~#sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar-toggle-input:checked~#main .container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#sidebar-toggle-input:checked~#main .container {
|
||||
width: calc(744.96px - 250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
#sidebar-toggle-input:checked~#main .container {
|
||||
width: calc(962.24px - 250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#sidebar-toggle-input:checked~#main .container {
|
||||
width: calc(1164px -250px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1800px) {
|
||||
#sidebar-toggle-input:checked~#main .container {
|
||||
width: calc(1746px - 250px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user