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
|
|
@ -2,5 +2,5 @@
|
|||
// All variables setup with !default in gloabl/_config.scss can be used
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// $basic_back_color: yellow;
|
||||
// $color_back_basic: yellow;
|
||||
// $basic_link_color: magenta;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
// General layout attributes
|
||||
// ------------------------------------------------------------------------------
|
||||
// General classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -22,21 +25,29 @@
|
|||
@extend %hidden;
|
||||
}
|
||||
|
||||
.center_auto {
|
||||
.space_even_auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center_50 {
|
||||
.space_even_half {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.center_25 {
|
||||
.space_even_fourth {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
.space_right_small {
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.space_left_fourth {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.width_full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
|
@ -63,10 +74,6 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.space_right {
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $basic_width) / 2;
|
||||
|
|
@ -90,7 +97,7 @@
|
|||
|
||||
|
||||
// Clearing and floating
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
.clear {
|
||||
clear: both;
|
||||
|
||||
|
|
@ -127,9 +134,9 @@
|
|||
}
|
||||
|
||||
|
||||
// Inlining
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// Inlining
|
||||
// -----------------------------------------------------------------------------
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -137,7 +144,7 @@
|
|||
|
||||
|
||||
// Positioned elements
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
%full_viewport {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -195,11 +202,11 @@
|
|||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: darken($basic_back_color, $basic_color_diff);
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -211,45 +218,81 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
// Colors
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt_light_color {
|
||||
color: darken($basic_back_color, $basic_color_diff);
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_font_light;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_font_dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text
|
||||
// -----------------------------------------------------------------------------
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input
|
||||
// ------------------------------------------------------------------------------
|
||||
// -----------------------------------------------------------------------------
|
||||
%default_button {
|
||||
display: inline-block;
|
||||
padding: $basic_padding;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
// TEXT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_size: 17px !default;
|
||||
$basic_print_size: 10pt !default;
|
||||
|
||||
|
|
@ -69,12 +69,10 @@ $secondary_font_family: $primary_font_family !default;
|
|||
$third_font_family: $monospace_font_family !default;
|
||||
$fourth_font_family: $print_font_family !default;
|
||||
|
||||
$basic_indent: 2em !default;
|
||||
|
||||
|
||||
// COLORS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$color_palette: (
|
||||
alpha: #fad803,
|
||||
bravo: #d30a51,
|
||||
|
|
@ -86,16 +84,16 @@ $color_palette: (
|
|||
|
||||
@include addDefaultColors;
|
||||
|
||||
$basic_color_diff: 12% !default;
|
||||
$color_diff_basic: 12% !default;
|
||||
$tiny_color_diff: 4% !default;
|
||||
$double_color_diff: $basic_color_diff * 2;
|
||||
$double_color_diff: $color_diff_basic * 2;
|
||||
|
||||
$darkest_color: black !default;
|
||||
$brightest_color: white !default;
|
||||
|
||||
$basic_font_color: black !default;
|
||||
$basic_back_color: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $basic_color_diff) !default;
|
||||
$color_back_basic: #808080 !default;
|
||||
$basic_border_color: lighten($basic_font_color, $color_diff_basic) !default;
|
||||
$basic_front_color: white !default;
|
||||
|
||||
$medium_color: lighten($darkest_color, 50%);
|
||||
|
|
@ -107,6 +105,9 @@ $basic_link_color: $echo_color !default;
|
|||
$basic_highlight_color: $basic_front_color !default;
|
||||
$basic_action_color: $foxtrot_color !default;
|
||||
|
||||
$color_font_light: lighten($color_back_basic, $color_diff_basic);
|
||||
$color_font_dark: darken($color_back_basic, $color_diff_basic);
|
||||
|
||||
// default shadow colors
|
||||
// $shadow_color: fade-out($medium_color, 0.5);
|
||||
|
||||
|
|
@ -119,9 +120,9 @@ $basic_color_list: ();
|
|||
}
|
||||
|
||||
|
||||
|
||||
// LAYOUT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$box_sizing: border-box !default;
|
||||
|
||||
$z_heaven: 100 !default;
|
||||
|
|
@ -149,6 +150,8 @@ $io_margin: 0 $space_small 0 0 !default;
|
|||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
|
||||
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
|
||||
|
||||
$basic_indent: 2em !default;
|
||||
|
||||
$basic_corner: $tiny_space * 2;
|
||||
|
||||
// Borders
|
||||
|
|
@ -157,16 +160,15 @@ $border_width_4: $basic_border_width * 4;
|
|||
$border_width_8: $basic_border_width * 8;
|
||||
$basic_border: $tiny_space solid $basic_border_color;
|
||||
$dotted_border: $tiny_space dotted $basic_border_color;
|
||||
$cell_border: $tiny_space solid $darkest_color;
|
||||
|
||||
$basic_corner_radius: $tiny_space * 2;
|
||||
|
||||
$basic_aside_width: 20%;
|
||||
|
||||
|
||||
|
||||
// IO
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$io_input_list:
|
||||
'input[type="text"]',
|
||||
'input[type="number"]',
|
||||
|
|
@ -208,13 +210,13 @@ $io_focus_list:
|
|||
'textarea:not([disabled])',
|
||||
'*[tabindex]';
|
||||
|
||||
$basic_io_font_color: lighten($basic_font_color, $basic_color_diff);
|
||||
$basic_io_back_color: darken($basic_front_color, $basic_color_diff);
|
||||
$basic_io_font_color: lighten($basic_font_color, $color_diff_basic);
|
||||
$basic_io_back_color: darken($basic_front_color, $color_diff_basic);
|
||||
$basic_io_border_color: $basic_front_color;
|
||||
|
||||
$oi_font_color: $basic_font_color;
|
||||
$oi_back_color: darken($basic_back_color, $basic_color_diff);
|
||||
$oi_border_color: darken($oi_back_color, $basic_color_diff);
|
||||
$oi_back_color: darken($color_back_basic, $color_diff_basic);
|
||||
$oi_border_color: darken($oi_back_color, $color_diff_basic);
|
||||
|
||||
$basic_io_border_width: $tiny_space * 2 !default;
|
||||
$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
|
||||
|
|
@ -224,18 +226,18 @@ $basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
|
|||
$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
|
||||
|
||||
// ANIMATIONS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$basic_duration: 250ms;
|
||||
$double_duration: 500ms;
|
||||
$extended_duration: 2s;
|
||||
$basic_timing: ease-out;
|
||||
|
||||
|
||||
|
||||
// HARDWARE BREAKPOINTS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$screen_tiny: 768px;
|
||||
$screen_small: 1024px;
|
||||
$screen_medium: 1280px;
|
||||
|
|
@ -244,9 +246,9 @@ $screen_huge: 1680px;
|
|||
$screen_gigantic: 1920px;
|
||||
|
||||
|
||||
|
||||
// VENDOR PREFIX
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$prefix_defaults: -moz- -webkit- -o- -ms- '';
|
||||
$webkit_support: -webkit- '';
|
||||
$moz_support: -moz- '';
|
||||
|
|
@ -256,9 +258,9 @@ $moz_ms_support: -moz- -ms- '';
|
|||
$webkit_ms_support: -webkit- -ms- '';
|
||||
|
||||
|
||||
|
||||
// SYMBOLS
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$icons: (
|
||||
glass: "\f000",
|
||||
music: "\f001",
|
||||
|
|
@ -273,189 +275,10 @@ $icons: (
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// USER AGENT
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
$no_agent_focus: true;
|
||||
|
||||
@include overrideUserAgent;
|
||||
|
||||
|
||||
// The config file is intended to allow users to quickly redefine core elements of the design
|
||||
// that will cascade throughout the css to get your design up and running FAST!
|
||||
|
||||
// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
|
||||
|
||||
/////// Typography configuration///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $font_size: 12;
|
||||
//
|
||||
// $heading_1: 46;
|
||||
// $heading_2: 32;
|
||||
// $heading_3: 28;
|
||||
// $heading_4: 18;
|
||||
// $heading_5: 18;
|
||||
// $heading_6: 18;
|
||||
//
|
||||
// $line: $font_size * 1.5;
|
||||
//
|
||||
// $small_point_size: 10;
|
||||
// $large_point_size: 14;
|
||||
//
|
||||
// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
|
||||
|
||||
// $icon_font_alpha: #{'ico-fonts'};
|
||||
|
||||
/////// Default webfont directory///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $webfont_directory: "/fonts/";
|
||||
|
||||
/////// default image directory ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// In Sinatra, the images folder resides in the public directory. This directory is not made publically accessible,
|
||||
// so simply referencing the images directory will be fine.
|
||||
// $imgDir: "/images/";
|
||||
|
||||
/////// OOCSS generic base colors///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
|
||||
// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
|
||||
// by magic, unicorns and fairy dust!
|
||||
|
||||
// $alpha_primary: #5a2e2e; // red
|
||||
// $bravo_primary: #3e4147; // green
|
||||
// $charlie_primary: #fffedf; // yellow
|
||||
// $delta_primary: #2a2c31; // blue
|
||||
// $echo_primary: #dfba69; // accent
|
||||
|
||||
// $alpha_gray: #333; //black
|
||||
|
||||
/////// Toadstool color math ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// Local color functions to create default color palette
|
||||
//@import "color/color_math";
|
||||
//@import "color/grayscale_math";
|
||||
//@import "color/color_defaults";
|
||||
|
||||
/////// Grid configuration ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// setting default units of measurement for Toadstool grid solution
|
||||
// $grid_type: 12; // sets default column grid
|
||||
// $grid_uom: percent; // use either ``em`` or ``percent``
|
||||
// $grid_padding_l: 0; // sets default left/right padding inside grid block
|
||||
// $grid_padding_r: 0; // sets default left/right padding inside grid block
|
||||
// $grid_padding_tb: 0; // sets default top/bottom padding inside grid block
|
||||
// $grid_border: 0; // sets default border width on all grid blocks
|
||||
// $grid_child: none; // sets parent child relationship between grid blocks
|
||||
// $grid_align: default; // by default grids float left. Optional argument is ``center``
|
||||
// $col_base: 10; // equal to 10px in the standard 960.gs
|
||||
// $col_gutter: $col_base * 2; // sets default grid gutter width
|
||||
// $grid_960: 960 / 100%; // grid math for percentages
|
||||
|
||||
|
||||
|
||||
/////// HTML 5 feature colors ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// used with the `ins` tag
|
||||
// http://www.w3schools.com/tags/tag_ins.asp
|
||||
// $ins_color: $charlie_color;
|
||||
|
||||
// used with the `mark` tag
|
||||
// http://www.w3schools.com/html5/tag_mark.asp
|
||||
// $mark_color: $charlie_color;
|
||||
|
||||
// webkit tap highlight color
|
||||
// $webkit_tap_hightlight: $delta_color_bravo;
|
||||
|
||||
// overrides the default content selection color in the browser
|
||||
// $selection_color: $charlie_color;
|
||||
// $selection_text_color: $primary_text;
|
||||
|
||||
|
||||
|
||||
/////// Config defaults for forms ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $alert_back_color: $alpha_color;
|
||||
|
||||
// $input_disabled: $bravo_gray;
|
||||
// $input_disabled_bkg: lighten($input_disabled, 75%);
|
||||
// $input_disabled_border: lighten($input_disabled, 50%);
|
||||
// $input_disabled_text: lighten($input_disabled, 50%);
|
||||
//
|
||||
// $form_field_back_color: $brightest_color;
|
||||
// $form_field_focus_color: $brightest_color;
|
||||
// $form_field_fail_bkg: $alpha_color_juliet;
|
||||
|
||||
// $form_field_border: $charlie_gray;
|
||||
// $form_field_border_fail: $alpha_color_echo;
|
||||
// $form_field_focus_border_color: $charlie_gray;
|
||||
|
||||
// $form_field_text_fail: $alpha_color_echo;
|
||||
// $form_label_color: $alpha_gray;
|
||||
// $optional_field_text_color: $delta_gray;
|
||||
// $instructional_text: $charlie_gray;
|
||||
// $placeholder_text: $hotel_gray;
|
||||
// $inline_alert_bkg_color: $alpha_color_delta;
|
||||
// $inline_alert_text_color: $brightest_color;
|
||||
|
||||
// Non-color defaults (currently not represented in the SG view)
|
||||
// ---------------------------------------------------------
|
||||
// $form_field_border_radius: $standard_round_corner;
|
||||
// $form_field_text: $primary_text;
|
||||
// $form_field_height: 35;
|
||||
// $form_field_padding: 6;
|
||||
// $form_label_weight: bold;
|
||||
// $form_label_lineheight: 20;
|
||||
// $inline_alert_lineheight: 30;
|
||||
// $inline_alert_left_padding: 12;
|
||||
// $inline_alert_weight: bold;
|
||||
// $inline_alert_top_margin: 12;
|
||||
// $inline_alert_border_width: 1;
|
||||
|
||||
|
||||
|
||||
/////// Config defaults for buttons ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $button-color: $delta-color;
|
||||
// $button-text-color: $brightest_color;
|
||||
// $button-line-height: 32;
|
||||
// $button-border-radius: 3;
|
||||
// $button-padding: 20;
|
||||
// $button-font-size: 18;
|
||||
// $button-weight: bold;
|
||||
// $button-text-shadow: true;
|
||||
// $button-box-shadow: true;
|
||||
|
||||
/////// Config defaults for ``standard_rounded_border`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_round_corner: 3; // sets default border radius
|
||||
// $standard_corner_width: 1px; // sets default border width
|
||||
// $standard_border_color: $border_color; // sets default border color
|
||||
|
||||
/////// Config defaults for ``standard_block_spacing`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $default_block_spacing: 20; // sets margin-bottom
|
||||
|
||||
/////// Config defaults for site border style ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_border_style: solid;
|
||||
|
||||
/////// Config defaults for ``standard_hr`` mixin ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $standard_hr_spacing: 40; // sets padding and margin bottom
|
||||
// $standard_hr_color: $delta_gray;
|
||||
// $standard_hr_width: 1px;
|
||||
|
||||
/////// Config values for all default shadows ///////
|
||||
// -----------------------------------------------------------------------------
|
||||
// $h-shadow: 0; // horizontal shadow settings
|
||||
// $v-shadow: 2; // vertical shaddow settings
|
||||
// $blur: 3; // blur settings
|
||||
//
|
||||
// $inset_color: $shadow_color; // for use with ``dual_box_shadow`` mixin
|
||||
// $ih-shadow: 0; // inset horizontal shadow settings
|
||||
// $iv-shadow: 2; // inset vertical shaddow settings
|
||||
// $is-shadow: 2; // inset spread shaddow settings
|
||||
// $iblur: 3; // inset blur settings
|
||||
|
|
|
|||
|
|
@ -47,9 +47,9 @@
|
|||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $half_space;
|
||||
border: 4px solid $basic_back_color;
|
||||
border: 4px solid $color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $basic_back_color;
|
||||
background-color: $color_back_basic;
|
||||
pointer-events: none;
|
||||
}
|
||||
.exp_marker_pop {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
table-layout: auto;
|
||||
|
||||
tbody {
|
||||
border-bottom: $cell_border;
|
||||
border-bottom: $basic_border;
|
||||
|
||||
&:hover {
|
||||
background-color: $bright_color;
|
||||
|
|
|
|||
|
|
@ -233,15 +233,17 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: rgba(black, 0.25);
|
||||
background-color: darken($color_back_basic, $color_diff_basic);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue