init
This commit is contained in:
commit
7e7f3f8f06
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
|
|
@ -0,0 +1,920 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>35c3 css demo</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="Description" content="Demo site for a 35c3 css template">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="css/35c3.min.css" type="text/css" rel="stylesheet" />
|
||||
<link href="css/style.min.css" type="text/css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="bg-black text-reboot text-breakall">
|
||||
<label id="sidebar-toggle" class="sidebar-toggle" for="sidebar-toggle-input">≡</label>
|
||||
<input id="sidebar-toggle-input" type="checkbox" role="button" />
|
||||
<div id="sidebar" class="bg-black">
|
||||
<label class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input">×</label>
|
||||
|
||||
<ul class="unstyled">
|
||||
<li><a href="#35css">35css</a></li>
|
||||
<li><a href="#typography">typography</a></li>
|
||||
<li><a href="#tables">tables</a></li>
|
||||
<li><a href="#colors">colors</a></li>
|
||||
<li><a href="#buttons">buttons</a></li>
|
||||
<li><a href="#input">input</a></li>
|
||||
<li><a href="#images">images</a></li>
|
||||
<li><a href="#grid">grid</a></li>
|
||||
<li><a href="#other">other</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div class="container">
|
||||
<h1 id="35css">35c3 css demo</h1>
|
||||
<p>Simple stylesheet inspired <a href="https://content.events.ccc.de/35C3/Styleguide.pdf">https://content.events.ccc.de/35C3/Styleguide.pdf</a>
|
||||
and <a href="https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large">https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large</a>
|
||||
thx to <a href="https://twitter.com/c3groc">@c3groc</a></p>
|
||||
<p><a href="css/35c3.min.css">minified css</a> | <a href="css/35c3.css">css</a> | <a href="css/35c3.scss">sass
|
||||
source</a></p>
|
||||
<p><a href="css/fonts/">fonts</a></p>
|
||||
<p><span class="text-beat">Accessibility <span alt="warning sign">⚠</span></span>: For higher contrast, add
|
||||
text-white class to parent
|
||||
element!</p>
|
||||
<hr />
|
||||
<h2 id="typography">typography</h2>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Paragraph </p>
|
||||
<p class="text-left">text-left</p>
|
||||
<p class="text-center">text-center</p>
|
||||
<p class="text-right">text-right</p>
|
||||
<p class="text-justify">text-justify</p>
|
||||
<p class="text-nowrap">text-nowrap no wrap demo</p>
|
||||
<p class="text-breakline">text-breakline break line demo</p>
|
||||
<p class="text-lowercase">text-lowercase LOWERCASE demo</p>
|
||||
<p class="text-uppercase">text-uppercase uppercase demo</p>
|
||||
<p class="text-capitalize">text-capitalize capitalize demo</p>
|
||||
<p><label>label</label></p>
|
||||
<blockquote>blockquote</blockquote>
|
||||
<p><code>code</code></p>
|
||||
<hr />
|
||||
<h2 id="tables">Tables</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>table heading 2</th>
|
||||
<th>table heading 3</th>
|
||||
<th>table heading 4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td>table body row 1 2</td>
|
||||
<td>table body row 1 3</td>
|
||||
<td>table body row 1 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td>table body row 2 2</td>
|
||||
<td>table body row 2 3</td>
|
||||
<td>table body row 2 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td>table body row 3 2</td>
|
||||
<td>table body row 3 3</td>
|
||||
<td>table body row 3 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<h2 id="colors">colors</h2>
|
||||
<p class="text-white">text-white</p>
|
||||
<p class="text-fresh">text-fresh</p>
|
||||
<p class="text-hope">text-hope</p>
|
||||
<p class="text-glint">text-glint</p>
|
||||
<p class="text-beat">text-beat</p>
|
||||
<p class="text-tenacity">text-tenacity</p>
|
||||
<p class="text-base">text-base</p>
|
||||
<p class="text-reboot">text-reboot</p>
|
||||
<p class="bg-white">bg-white</p>
|
||||
<p class="bg-fresh">bg-fresh</p>
|
||||
<p class="bg-hope">bg-hope</p>
|
||||
<p class="bg-glint">bg-glint</p>
|
||||
<p class="bg-beat">bg-beat</p>
|
||||
<p class="bg-tenacity">bg-tenacity</p>
|
||||
<p class="bg-base">bg-base</p>
|
||||
<p class="bg-reboot">bg-reboot</p>
|
||||
<p class="bg-black">bg-black</p>
|
||||
<hr />
|
||||
<h2 id="buttons">buttons</h2>
|
||||
<p>
|
||||
<button class="btn">btn</button>
|
||||
<a class="btn btn-fresh">btn btn-fresh</a>
|
||||
<a class="btn btn-hope">btn btn-hope</a>
|
||||
<a class="btn btn-glint">btn btn-glint</a>
|
||||
<a class="btn btn-beat">btn btn-beat</a>
|
||||
<a class="btn btn-tenacity">btn btn-tenacity</a>
|
||||
<a class="btn btn-base">btn btn-base</a>
|
||||
<a class="btn btn-reboot">btn btn-reboot</a>
|
||||
<a class="btn btn-white">btn btn-white</a>
|
||||
<a class="btn btn-black">btn btn-black</a></p>
|
||||
<p>
|
||||
<a class="btn btn-fresh btn-block">btn btn-fresh btn-block</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-hope btn-xs">btn btn-hope btn-xs</a>
|
||||
<a class="btn btn-glint btn-sm">btn btn-glint btn-sm</a>
|
||||
<a class="btn btn-beat">btn btn-beat</a>
|
||||
<a class="btn btn-tenacity btn-xl">btn btn-tenacity btn-xl</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-hope btn-round btn-xs" title="btn btn-hope btn-round btn-xs">x</a>
|
||||
<a class="btn btn-glint btn-round btn-sm" title="btn btn-glint btn-round btn-sm">x</a>
|
||||
<a class="btn btn-beat btn-round" title="btn btn-round btn-beat" x>x</a>
|
||||
<a class="btn btn-tenacity btn-round btn-xl" title="btn btn-tenacity btn-round btn-xl">x</a>
|
||||
</p>
|
||||
<hr />
|
||||
<h2 id="input">input</h2>
|
||||
<form name="demo-form">
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_text">text</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_text" type="text" placeholder="placeholder" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_required">required</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_required" type="text" required placeholder="required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_invalid">invalid</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_invalid" type="email" placeholder="email" value="invalid" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_disabled">disabled</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_disabled" type="text" placeholder="disabled" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_date">date</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_date" type="date" placeholder="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_time">time</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_time" type="time" placeholder="time" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_number">number</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_number" type="number" placeholder="number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_textarea">textarea</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<textarea id="input_textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_range">range</label>
|
||||
<div class="popover">
|
||||
<span class="text-beat" alt="warning sign">⚠</span>
|
||||
<div class="popover-content">
|
||||
no IE support 🤷 hover not working for webkit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<input id="input_range" type="range" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_select">select</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<select id="input_select">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_checkbox">checkbox</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||
<div class="row" id="input_checkbox">
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_default" class="checkbox">
|
||||
<input id="input_checkbox_default" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox default
|
||||
</label>
|
||||
<label for="input_checkbox_default_checked" class="checkbox">
|
||||
<input id="input_checkbox_default_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox default checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_hope" class="checkbox checkbox-hope">
|
||||
<input id="input_checkbox_hope" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox hope
|
||||
</label>
|
||||
<label for="input_checkbox_hope_checked" class="checkbox checkbox-hope">
|
||||
<input id="input_checkbox_hope_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox hope checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_glint" class="checkbox checkbox-glint">
|
||||
<input id="input_checkbox_glint" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox glint
|
||||
</label>
|
||||
<label for="input_checkbox_glint_checked" class="checkbox checkbox-glint">
|
||||
<input id="input_checkbox_glint_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox glint checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_beat" class="checkbox checkbox-beat">
|
||||
<input id="input_checkbox_beat" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox beat
|
||||
</label>
|
||||
<label for="input_checkbox_beat_checked" class="checkbox checkbox-beat">
|
||||
<input id="input_checkbox_beat_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox beat checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_tenacity" class="checkbox checkbox-tenacity">
|
||||
<input id="input_checkbox_tenacity" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox tenacity
|
||||
</label>
|
||||
<label for="input_checkbox_tenacity_checked" class="checkbox checkbox-tenacity">
|
||||
<input id="input_checkbox_tenacity_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox tenacity checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_checkbox_base" class="checkbox checkbox-base">
|
||||
<input id="input_checkbox_base" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
checkbox base
|
||||
</label>
|
||||
<label for="input_checkbox_base_checked" class="checkbox checkbox-base">
|
||||
<input id="input_checkbox_base_checked" type="checkbox" checked />
|
||||
<span class="toggle"></span>
|
||||
checkbox base checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_radio">radio</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||
<div class="row" id="input_radio">
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_radio_default" class="radio">
|
||||
<input id="input_radio_default" type="radio" name="radio-default" />
|
||||
<span class="toggle"></span>
|
||||
radio default
|
||||
</label>
|
||||
<label for="input_radio_default_checked" class="radio">
|
||||
<input id="input_radio_default_checked" type="radio" name="radio-default" checked />
|
||||
<span class="toggle"></span>
|
||||
radio default checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label id="input_radio_hope" class="radio radio-hope">
|
||||
<input for="input_radio_hope" type="radio" name="radio-hope" />
|
||||
<span class="toggle"></span>
|
||||
radio hope
|
||||
</label>
|
||||
<label for="input_radio_hope_checked" class="radio radio-hope">
|
||||
<input id="input_radio_hope_checked" type="radio" name="radio-hope" checked />
|
||||
<span class="toggle"></span>
|
||||
radio hope checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_radio_glint" class="radio radio-glint">
|
||||
<input id="input_radio_glint" type="radio" name="radio-glint" />
|
||||
<span class="toggle"></span>
|
||||
radio glint
|
||||
</label>
|
||||
<label for="input_radio_glint_checked" class="radio radio-glint">
|
||||
<input id="input_radio_glint_checked" type="radio" name="radio-glint" checked />
|
||||
<span class="toggle"></span>
|
||||
radio glint checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_radio_beat" class="radio radio-beat">
|
||||
<input id="input_radio_beat" type="radio" name="radio-beat" />
|
||||
<span class="toggle"></span>
|
||||
radio beat
|
||||
</label>
|
||||
<label for="input_radio_beat_checked" class="radio radio-beat">
|
||||
<input id="input_radio_beat_checked" type="radio" name="radio-beat" checked />
|
||||
<span class="toggle"></span>
|
||||
radio beat checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_radio_tenacity" class="radio radio-tenacity">
|
||||
<input id="input_radio_tenacity" type="radio" name="radio-tenacity" />
|
||||
<span class="toggle"></span>
|
||||
radio tenacity
|
||||
</label>
|
||||
<label for="input_radio_tenacity_checked" class="radio radio-tenacity">
|
||||
<input id="input_radio_tenacity_checked" type="radio" name="radio-tenacity" checked />
|
||||
<span class="toggle"></span>
|
||||
radio tenacity checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_radio_base" class="radio radio-base">
|
||||
<input id="input_radio_base" type="radio" name="radio-base" />
|
||||
<span class="toggle"></span>
|
||||
radio base
|
||||
</label>
|
||||
<label for="input_radio_base_checked" class="radio radio-base">
|
||||
<input id="input_radio_base_checked" type="radio" name="radio-base" checked />
|
||||
<span class="toggle"></span>
|
||||
radio base checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||||
<label for="input_switch">switch</label>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||||
<div class="row" id="input_switch">
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_default" class="switch">
|
||||
<input id="input_switch_default" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch default
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_hope" class="switch switch-hope">
|
||||
<input id="input_switch_hope" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch hope
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_glint" class="switch switch-glint">
|
||||
<input id="input_switch_glint" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch glint
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_beat" class="switch switch-beat">
|
||||
<input id="input_switch_beat" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch beat
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_tenacity" class="switch switch-tenacity">
|
||||
<input id="input_switch_tenacity" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch tenacity
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||||
<label for="input_switch_base" class="switch switch-base">
|
||||
<input id="input_switch_base" type="checkbox" />
|
||||
<span class="toggle"></span>
|
||||
switch base
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
<h2 id="images">images</h2>
|
||||
<p>img-auto for responsive images (max-width 100%)</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<img class="img-auto" alt="35c3 logo" src="img/35C3Logo.svg" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<img class="img-auto" alt="35c3 logo with transparent background" src="img/35C3LogoTR.svg" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||||
<img class="img-auto" alt="35c3 logo black & white" src="img/35C3LogoBW.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h2 id="grid">grid</h2>
|
||||
<p>simple grid layout (default 12, can be configured in sass), border class added separately for visualization,
|
||||
offsets are absolute! <br />
|
||||
responsive classes col-xs-* (< 768px), col-sm-* (>= 768px), col-md-* (>= 922px), col-lg-* (>=
|
||||
1200px),
|
||||
col-xl-* (>= 1800px) </p>
|
||||
<div class="row section">
|
||||
<div class="col-1 border text-breakline">col-1</div>
|
||||
<div class="col-11 border text-breakline">col-11</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-1 col-offset-11 border text-breakline">col-1 col-offset-11</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-2 border text-breakline">col-2</div>
|
||||
<div class="col-10 border text-breakline">col-10</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-2 col-offset-10 border text-breakline">col-2 col-offset-10</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-3 border text-breakline">col-3</div>
|
||||
<div class="col-9 border text-breakline">col-9</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-3 col-offset-9 border text-breakline">col-3 col-offset-9</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-4 border text-breakline">col-4</div>
|
||||
<div class="col-8 border text-breakline">col-8</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-4 col-offset-8 border text-breakline">col-4 col-offset-8</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-5 border text-breakline">col-5</div>
|
||||
<div class="col-7 border text-breakline">col-7</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-5 col-offset-7 border text-breakline">col-5 col-offset-7</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-6 border text-breakline">col-6</div>
|
||||
<div class="col-6 border text-breakline">col-6</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-6 col-offset-6 border text-breakline">col-6 col-offset-6</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-7 border text-breakline">col-7</div>
|
||||
<div class="col-5 border text-breakline">col-5</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-7 col-offset-5 border text-breakline">col-7 col-offset-5</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-8 border text-breakline">col-8</div>
|
||||
<div class="col-4 border text-breakline">col-4</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-8 col-offset-4 border text-breakline">col-8 col-offset-4</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-9 border text-breakline">col-9</div>
|
||||
<div class="col-3 border text-breakline">col-3</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-9 col-offset-3 border text-breakline">col-9 col-offset-3</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-10 border text-breakline">col-10</div>
|
||||
<div class="col-2 border text-breakline">col-2</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-10 col-offset-2 border text-breakline">col-10 col-offset-2</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-11 border text-breakline">col-11</div>
|
||||
<div class="col-1 border text-breakline">col-1</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-11 col-offset-1 border text-breakline">col-11 col-offset-1</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col-12 border text-breakline">col-12</div>
|
||||
</div>
|
||||
|
||||
<p>Nested example</p>
|
||||
<div class="row section">
|
||||
<div class="col-7">
|
||||
<div class="row">
|
||||
<div class="col-2 border text-breakline">col-2 inside col-7</div>
|
||||
<div class="col-4 col-offset-6 border text-breakline">col-4 col-offset-6 inside col-8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr />
|
||||
<h2 id="other">other</h2>
|
||||
<h3>container</h3>
|
||||
<p>container class centered page with 97% of screen limits at 768px, 992px, 1200px and 1800</p>
|
||||
<h3>section</h3>
|
||||
<p>adds a margin of 1em to start and end</p>
|
||||
<h3>border</h3>
|
||||
<p class="border">border</p>
|
||||
<p class="border-fresh">border-fresh</p>
|
||||
<p class="border-hope">border-hope</p>
|
||||
<p class="border-glint">border-glint</p>
|
||||
<p class="border-beat">border-beat</p>
|
||||
<p class="border-tenacity">border-tenacity</p>
|
||||
<p class="border-base">border-base</p>
|
||||
<h3>horizontal line</h3>
|
||||
<hr />
|
||||
<hr class="hr-fresh" />
|
||||
<hr class="hr-hope" />
|
||||
<hr class="hr-glint" />
|
||||
<hr class="hr-beat" />
|
||||
<hr class="hr-tenacity" />
|
||||
<hr class="hr-base" />
|
||||
<h3>visibility</h3>
|
||||
<table class="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>< 768px</th>
|
||||
<th>>= 768px</th>
|
||||
<th>>= 922px</th>
|
||||
<th>>= 1200px</th>
|
||||
<th>>= 1800px</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>visible</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-xs</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-sm</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-md</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-lg</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-xl</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>hidden</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hidden-xs</th>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hidden-sm</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hidden-md</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hidden-lg</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hidden-xl</th>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>css</th>
|
||||
<th>screen</th>
|
||||
<th>print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>visible, visible-*, visible-block, visible-*-block</th>
|
||||
<td>display: block;</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-inline, visible-*-inline</th>
|
||||
<td>display: inline;</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-inline-block, visible-*-inline-block</th>
|
||||
<td>display: inline-block;</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>hidden-print</th>
|
||||
<td></td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-print, visible-print-block</th>
|
||||
<td>display: block;</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-print-inline</th>
|
||||
<td>display: inline;</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>visible-print-inline-block</th>
|
||||
<td>display: inline-block;</td>
|
||||
<td>
|
||||
<span class="text-beat" alt="not visible">☐</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-hope" alt="visible">☑</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>float</h3>
|
||||
<p class="float-left">float-left</p>
|
||||
<p class="float-right">float-right</p>
|
||||
<p class="clear">clear</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue