spee.ch/client/scss/_variables.scss

63 lines
1.5 KiB
SCSS
Raw Normal View History

2019-01-26 01:37:07 +01:00
//backgrounds
$base-color: white; //default white
$card-color: white; //default white
$chrome-color: lightgray; //default white (navbar)
2019-02-04 06:50:31 +01:00
$blockquote-background: #EEEEFF;
2019-01-26 01:37:07 +01:00
$background-color: $base-color;
//text colors
$primary-color: #005da0; //link default light blue #005da0
2018-11-09 01:44:59 +01:00
$secondary-color: $primary-color;
2019-01-26 01:37:07 +01:00
$text-color: #333;
2018-06-09 02:23:11 +02:00
$success-color: green;
$failure-color: red;
2018-10-21 21:52:10 +02:00
$grey: #9095A5;
2019-02-04 06:50:31 +01:00
$blockquote-text: $text-color;
2019-01-26 01:37:07 +01:00
//borders and highlights
$grey: #9095A5;
2018-11-09 01:44:59 +01:00
$help-color: $grey;
2019-01-26 01:37:07 +01:00
$subtle-border-color: #DDD;
$highlight-border-color: #333;
2018-10-25 20:59:08 +02:00
$shadow-color: rgba(169, 173, 186, 0.2);
2019-01-26 01:37:07 +01:00
$subtle-border: 1px dashed $subtle-border-color;
$grey-border: $subtle-border-color; //factor this out for all customers
$drop-zone-border-color: #9b9b9b; //default #9b9b9b
$drop-zone-border-hover: #4156C5; //default #4156C5
2019-01-26 01:37:07 +01:00
//padding
$primary-padding: 3em;
$secondary-padding: 2em;
2018-07-12 01:42:40 +02:00
$tertiary-padding: 1em;
2018-06-08 17:50:25 +02:00
$thin-padding: 0.3em;
$full-width-thin-padding: calc(100% - 0.6em);
2019-01-26 01:37:07 +01:00
$input-padding: 0.3em;
2018-11-09 01:44:59 +01:00
$width-content-constrained: 1000px;
2018-06-09 02:23:11 +02:00
$button-border-width: 1px;
$button-border-strength: solid;
$button-full-width: calc(100% - 2px);
$input-full-width: calc(100% - 0.6em);
2018-06-11 01:07:15 +02:00
2019-01-26 01:37:07 +01:00
//text sizes
$base-font-size: 14px;
2018-06-11 01:07:15 +02:00
$text-xx-large: 2.5em;
2018-11-09 19:55:53 +01:00
$text-x-large: 2.0em;
$text-large: 1.5em;
2019-01-26 01:37:07 +01:00
$text-medium: 1.2em;
2018-11-09 19:55:53 +01:00
$text-small: 0.9em;
$text-x-small: 0.8em;
2018-06-11 01:07:15 +02:00
2019-01-26 01:37:07 +01:00
//@media sizes
2018-06-11 01:07:15 +02:00
$break-point-xx-large: 1400px;
$break-point-x-large: 1290px;
2019-01-26 01:37:07 +01:00
$break-point-large: 1024px;
2018-11-09 01:44:59 +01:00
$break-point-tablet: 800px;
2019-01-26 01:37:07 +01:00
$break-point-mobile: 500px;
$break-point-phone: 300px;
$break-point-phone: 300px;