demo.6 - Demo content and style changes
- sorted many styles for better groups - started renaming of variables $basic_front_color becomes $color_front_basic for example - new demo page examples - moved config file examples to deprecated file
This commit is contained in:
Stephan
parent
c391799d02
commit
48437cc4f4
18 changed files with 907 additions and 739 deletions
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
|
||||
// Paragraph
|
||||
// -----------------------------------------------------------------------------
|
||||
p {
|
||||
@extend %basic;
|
||||
margin-top: $basic_space;
|
||||
|
|
@ -30,7 +31,23 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.column_line {
|
||||
column-rule: $basic_border;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Address
|
||||
// -----------------------------------------------------------------------------
|
||||
address {
|
||||
// @extend %basic;
|
||||
margin-top: $double_space;
|
||||
|
|
@ -38,6 +55,7 @@ address {
|
|||
}
|
||||
|
||||
// Line
|
||||
// -----------------------------------------------------------------------------
|
||||
hr {
|
||||
margin: $space_small auto;
|
||||
border-width: $basic_border_width 0 0;
|
||||
|
|
@ -56,24 +74,26 @@ hr {
|
|||
}
|
||||
|
||||
// Preformat
|
||||
// -----------------------------------------------------------------------------
|
||||
pre {
|
||||
@extend %basic_mono;
|
||||
}
|
||||
|
||||
.pre_code {
|
||||
overflow-x: auto;
|
||||
border-color: darken($basic_back_color, $tiny_color_diff);
|
||||
border-color: darken($color_back_basic, $tiny_color_diff);
|
||||
border-style: dotted;
|
||||
border-width: 0 0 0 $border_width_4;
|
||||
border-radius: $basic_corner;
|
||||
padding: $basic_space;
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Quote
|
||||
// -----------------------------------------------------------------------------
|
||||
blockquote {
|
||||
margin: $basic_space 0;
|
||||
padding-right: $basic_indent;
|
||||
|
|
@ -95,6 +115,7 @@ blockquote {
|
|||
}
|
||||
|
||||
// List
|
||||
// -----------------------------------------------------------------------------
|
||||
dl, ul, ol {
|
||||
margin: $double_space 0 $basic_space;
|
||||
}
|
||||
|
|
@ -121,29 +142,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
// Embedded
|
||||
figure {
|
||||
margin: $double_space $basic_indent;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
// Main content
|
||||
main {
|
||||
|
||||
}
|
||||
|
||||
// Div
|
||||
div {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.list_dash {
|
||||
li {
|
||||
list-style: none;
|
||||
|
|
@ -187,39 +185,34 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
.box_info {
|
||||
// Embedded
|
||||
// -----------------------------------------------------------------------------
|
||||
figure {
|
||||
margin: $double_space $basic_indent;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %basic;
|
||||
}
|
||||
|
||||
// Main content
|
||||
// -----------------------------------------------------------------------------
|
||||
main {
|
||||
|
||||
}
|
||||
|
||||
// Div
|
||||
// -----------------------------------------------------------------------------
|
||||
div {
|
||||
|
||||
}
|
||||
|
||||
.div_info {
|
||||
padding: $double_space $basic_indent;
|
||||
border-right: $basic_space solid rgba($echo_color, 0.6);
|
||||
background-color: rgba($echo_color, 0.1) !important;
|
||||
}
|
||||
|
||||
.box_main_indent {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.box_full_width {
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
// Columns
|
||||
.column_line {
|
||||
column-rule: $basic_border;
|
||||
}
|
||||
.column_2, .column_3 {
|
||||
@extend p;
|
||||
}
|
||||
.column_2 {
|
||||
column-count: 2;
|
||||
column-gap: $space_small;
|
||||
}
|
||||
.column_3 {
|
||||
column-count: 3;
|
||||
column-gap: $space_medium;
|
||||
}
|
||||
|
||||
// Space and placeholders
|
||||
.box_space {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -231,6 +224,7 @@ div {
|
|||
width: $space_medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
}
|
||||
|
|
@ -255,15 +249,41 @@ div {
|
|||
background-color: transparentize($basic_front_color, 0.1);
|
||||
}
|
||||
|
||||
// Data
|
||||
.box_file_tile {
|
||||
@extend .float_space_left;
|
||||
}
|
||||
|
||||
// Flex
|
||||
.flex_column_wrap {
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_wrap {
|
||||
@extend .flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
@extend .flex;
|
||||
flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex_child {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.flex_child_one {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex_child_end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.flex_column_wrap {
|
||||
@extend .flex_wrap;
|
||||
|
||||
.flex_column {
|
||||
@extend .flex_child;
|
||||
|
|
@ -271,6 +291,32 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
||||
// Sprites
|
||||
.sprite_img {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -17,10 +17,14 @@
|
|||
|
||||
|
||||
|
||||
// Form
|
||||
// -----------------------------------------------------------------------------
|
||||
form {
|
||||
|
||||
}
|
||||
|
||||
// Label
|
||||
// -----------------------------------------------------------------------------
|
||||
label {
|
||||
@extend %basic;
|
||||
|
||||
|
|
@ -29,6 +33,30 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
.label {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
// Input
|
||||
// -----------------------------------------------------------------------------
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
margin: $io_margin;
|
||||
|
||||
|
|
@ -38,8 +66,11 @@ input, button, textarea, select {
|
|||
}
|
||||
}
|
||||
|
||||
input {
|
||||
color: $basic_io_font_color;
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@each $input in $io_input_list, textarea, select {
|
||||
|
|
@ -97,17 +128,23 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
// -----------------------------------------------------------------------------
|
||||
fieldset {
|
||||
margin: $high_margin;
|
||||
padding: $basic_space;
|
||||
border: $basic_border;
|
||||
}
|
||||
|
||||
// Legend
|
||||
// -----------------------------------------------------------------------------
|
||||
legend {
|
||||
@extend %basic;
|
||||
padding: 0 $half_space;
|
||||
}
|
||||
|
||||
// Button
|
||||
// -----------------------------------------------------------------------------
|
||||
button {
|
||||
|
||||
}
|
||||
|
|
@ -137,14 +174,20 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
// Selection
|
||||
// -----------------------------------------------------------------------------
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Datalist
|
||||
// -----------------------------------------------------------------------------
|
||||
datalist {
|
||||
|
||||
}
|
||||
|
||||
// Options
|
||||
// -----------------------------------------------------------------------------
|
||||
optgroup {
|
||||
|
||||
}
|
||||
|
|
@ -153,6 +196,8 @@ option {
|
|||
|
||||
}
|
||||
|
||||
// Textarea
|
||||
// -----------------------------------------------------------------------------
|
||||
textarea {
|
||||
}
|
||||
|
||||
|
|
@ -160,10 +205,14 @@ textarea {
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// Output
|
||||
// -----------------------------------------------------------------------------
|
||||
output {
|
||||
|
||||
}
|
||||
|
||||
// Progress
|
||||
// -----------------------------------------------------------------------------
|
||||
progress {
|
||||
|
||||
}
|
||||
|
|
@ -208,68 +257,3 @@ dialog {
|
|||
canvas {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.label {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.label > input,
|
||||
.label > textarea,
|
||||
.label > select {
|
||||
margin: 0 $basic_space;
|
||||
}
|
||||
|
||||
.label_table {
|
||||
display: table;
|
||||
|
||||
input {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
label + input {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
input + label {
|
||||
margin-left: $basic_space;
|
||||
}
|
||||
|
||||
td > input,
|
||||
td > button,
|
||||
td > select,
|
||||
td > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: $basic_space;
|
||||
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: inline-block;
|
||||
margin: $basic_io_border_width;
|
||||
padding: $half_space;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_column_2 {
|
||||
grid-template-columns: max-content max-content;
|
||||
|
||||
}
|
||||
|
||||
.grid_column_4 {
|
||||
grid-template-columns: max-content max-content max-content max-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Root
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -21,6 +20,7 @@ html {
|
|||
|
||||
|
||||
// Body
|
||||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
|
|
@ -30,7 +30,7 @@ body {
|
|||
line-height: $basic_line;
|
||||
line-height: $text_line_basic;
|
||||
color: $basic_font_color;
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
|
|
@ -48,11 +48,13 @@ body {
|
|||
}
|
||||
|
||||
// Article
|
||||
// -----------------------------------------------------------------------------
|
||||
article {
|
||||
|
||||
}
|
||||
|
||||
// Section
|
||||
// -----------------------------------------------------------------------------
|
||||
section {
|
||||
|
||||
}
|
||||
|
|
@ -81,11 +83,13 @@ section {
|
|||
}
|
||||
|
||||
// Navigation
|
||||
// -----------------------------------------------------------------------------
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $basic_aside_width;
|
||||
|
||||
|
|
@ -97,20 +101,21 @@ aside {
|
|||
margin-left: calc(#{$basic_aside_width} + #{$basic_space});
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -----------------------------------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@extend %head_all;
|
||||
}
|
||||
|
|
@ -159,6 +164,7 @@ h6 {
|
|||
}
|
||||
|
||||
// Header
|
||||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
|
||||
}
|
||||
|
|
@ -177,6 +183,7 @@ header {
|
|||
}
|
||||
|
||||
// Footer
|
||||
// -----------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,47 @@
|
|||
|
||||
|
||||
|
||||
// Table
|
||||
// -----------------------------------------------------------------------------
|
||||
table {
|
||||
margin: $high_margin;
|
||||
border: $basic_border;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $basic_border_width solid transparent;
|
||||
|
||||
th, td {
|
||||
border: $basic_border_width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.table_free {
|
||||
border: $basic_border_width solid transparent;
|
||||
}
|
||||
|
||||
.table_stripe {
|
||||
td {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
}
|
||||
|
||||
.table_fix {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table_file_simple {
|
||||
@extend .width_full;
|
||||
}
|
||||
|
||||
// Caption
|
||||
// -----------------------------------------------------------------------------
|
||||
caption {
|
||||
@extend p;
|
||||
padding: $half_space 0;
|
||||
|
|
@ -26,6 +61,8 @@ caption {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
// Columns
|
||||
// -----------------------------------------------------------------------------
|
||||
colgroup {
|
||||
|
||||
}
|
||||
|
|
@ -34,14 +71,20 @@ col {
|
|||
|
||||
}
|
||||
|
||||
// Table body
|
||||
// -----------------------------------------------------------------------------
|
||||
tbody {
|
||||
|
||||
}
|
||||
|
||||
// Table head
|
||||
// -----------------------------------------------------------------------------
|
||||
thead {
|
||||
|
||||
}
|
||||
|
||||
// Table foot
|
||||
// -----------------------------------------------------------------------------
|
||||
tfoot {
|
||||
|
||||
tr:first-child td {
|
||||
|
|
@ -49,10 +92,14 @@ tfoot {
|
|||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
// Row
|
||||
// -----------------------------------------------------------------------------
|
||||
tr {
|
||||
|
||||
}
|
||||
|
||||
// Cells
|
||||
// -----------------------------------------------------------------------------
|
||||
th, td {
|
||||
@extend %basic;
|
||||
padding: $half_space;
|
||||
|
|
@ -64,52 +111,20 @@ th {
|
|||
}
|
||||
|
||||
td {
|
||||
border-right: $cell_border;
|
||||
border-bottom: $cell_border;
|
||||
border-right: $basic_border;
|
||||
border-bottom: $basic_border;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 0;
|
||||
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.cell_pre {
|
||||
// border-right-width: $border_width_4;
|
||||
// border-right-color: lighten($basic_back_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.table_blank {
|
||||
border: $basic_border_width solid transparent;
|
||||
|
||||
th, td {
|
||||
border: $basic_border_width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.table_free {
|
||||
border: $basic_border_width solid transparent;
|
||||
}
|
||||
|
||||
.table_stripe {
|
||||
td {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
}
|
||||
}
|
||||
|
||||
.table_fix {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
// Data
|
||||
.table_file_simple {
|
||||
@extend .width_full;
|
||||
// border-right-color: lighten($color_back_basic, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,15 +31,11 @@
|
|||
// span
|
||||
// br
|
||||
// wbr
|
||||
// -----------------------------------------------------------------------------
|
||||
// Edits
|
||||
// -----------------------------------------------------------------------------
|
||||
// ins
|
||||
// del
|
||||
|
||||
|
||||
|
||||
// Links
|
||||
// -----------------------------------------------------------------------------
|
||||
a {
|
||||
color: $basic_link_color;
|
||||
// color: lighten($basic_action_color, 20%);
|
||||
|
|
@ -81,11 +77,12 @@ a {
|
|||
|
||||
.a_button_border {
|
||||
@extend .a_button_text;
|
||||
border: $cell_border;
|
||||
border: $basic_border;
|
||||
}
|
||||
|
||||
|
||||
// Italic, Emphasis
|
||||
// -----------------------------------------------------------------------------
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -96,38 +93,49 @@ i, em {
|
|||
}
|
||||
|
||||
// Bold, Strong
|
||||
// -----------------------------------------------------------------------------
|
||||
b, strong {
|
||||
font-weight: 500; // TODO maybe bolder
|
||||
}
|
||||
|
||||
// Small
|
||||
// -----------------------------------------------------------------------------
|
||||
small {
|
||||
|
||||
}
|
||||
|
||||
// No longer accurate or no longer relevant
|
||||
// -----------------------------------------------------------------------------
|
||||
s {
|
||||
|
||||
}
|
||||
|
||||
// Citation
|
||||
// -----------------------------------------------------------------------------
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Phrasing content, quoted
|
||||
// -----------------------------------------------------------------------------
|
||||
q {
|
||||
|
||||
}
|
||||
|
||||
// Definition
|
||||
// -----------------------------------------------------------------------------
|
||||
dfn {
|
||||
|
||||
}
|
||||
|
||||
// Abbreviation
|
||||
// -----------------------------------------------------------------------------
|
||||
abbr {
|
||||
|
||||
}
|
||||
|
||||
// Ruby annotations
|
||||
// -----------------------------------------------------------------------------
|
||||
ruby {
|
||||
|
||||
}
|
||||
|
|
@ -148,34 +156,46 @@ rp {
|
|||
|
||||
}
|
||||
|
||||
// Machine readable data
|
||||
// -----------------------------------------------------------------------------
|
||||
data {
|
||||
|
||||
}
|
||||
|
||||
// Machine readable time
|
||||
// -----------------------------------------------------------------------------
|
||||
time {
|
||||
|
||||
}
|
||||
|
||||
// Code
|
||||
// -----------------------------------------------------------------------------
|
||||
code {
|
||||
@extend %basic_mono;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
background-color: lighten($basic_back_color, $tiny_color_diff);
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
background-color: lighten($color_back_basic, $tiny_color_diff);
|
||||
}
|
||||
|
||||
.code_solo {
|
||||
@extend %basic_mono;
|
||||
padding: $tiny_space $half_space;
|
||||
color: $basic_font_color;
|
||||
}
|
||||
|
||||
// Variable
|
||||
// -----------------------------------------------------------------------------
|
||||
var {
|
||||
|
||||
}
|
||||
|
||||
// Sample
|
||||
// -----------------------------------------------------------------------------
|
||||
samp {
|
||||
|
||||
}
|
||||
|
||||
// Keyboard input
|
||||
// -----------------------------------------------------------------------------
|
||||
kbd {
|
||||
@extend %basic_mono;
|
||||
// font-size: .9em;
|
||||
|
|
@ -183,41 +203,62 @@ kbd {
|
|||
padding: 0 $half_space;
|
||||
border-width: $basic_border_width;
|
||||
border-style: solid;
|
||||
border-color: darken($basic_back_color, $basic_color_diff);
|
||||
border-color: darken($color_back_basic, $color_diff_basic);
|
||||
border-radius: $basic_corner;
|
||||
color: lighten($basic_font_color, $basic_color_diff);
|
||||
color: lighten($basic_font_color, $color_diff_basic);
|
||||
}
|
||||
|
||||
// Sub- and superscript
|
||||
// -----------------------------------------------------------------------------
|
||||
sub, sup {
|
||||
|
||||
}
|
||||
|
||||
// Unarticulated, non-textual annotation
|
||||
// -----------------------------------------------------------------------------
|
||||
u {
|
||||
|
||||
}
|
||||
|
||||
// Marks
|
||||
// -----------------------------------------------------------------------------
|
||||
mark {
|
||||
background-color: $alpha_color;
|
||||
}
|
||||
.mark_cursor, ::-moz-selection, ::selection {
|
||||
|
||||
.mark_cursor {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: invert($basic_font_color);
|
||||
background-color: $basic_font_color;
|
||||
}
|
||||
|
||||
// Text direction
|
||||
// -----------------------------------------------------------------------------
|
||||
bdi, bdo {
|
||||
|
||||
}
|
||||
|
||||
// Span
|
||||
// -----------------------------------------------------------------------------
|
||||
span {
|
||||
|
||||
}
|
||||
|
||||
.span_solo {
|
||||
@extend %solo;
|
||||
}
|
||||
|
||||
// Linebreak
|
||||
// Linebreaks
|
||||
// -----------------------------------------------------------------------------
|
||||
br {
|
||||
|
||||
}
|
||||
|
|
@ -230,6 +271,10 @@ wbr {
|
|||
|
||||
// Edits
|
||||
// -----------------------------------------------------------------------------
|
||||
// ins
|
||||
// del
|
||||
|
||||
|
||||
|
||||
ins {
|
||||
|
||||
|
|
@ -238,60 +283,3 @@ ins {
|
|||
del {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt_tiny {
|
||||
font-size: .5em !important;
|
||||
}
|
||||
|
||||
.txt_smaller {
|
||||
font-size: .75em !important;
|
||||
}
|
||||
|
||||
.txt_larger {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
.txt_huge {
|
||||
font-size: 3em !important;
|
||||
}
|
||||
|
||||
.txt_hero {
|
||||
font-size: $hero_size_1;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue