348 lines
9.4 KiB
SCSS
348 lines
9.4 KiB
SCSS
// ------------------------------
|
|
// edX Pattern Library: Variables
|
|
|
|
// About: Sass partial for defining variables used throughout the applications.
|
|
|
|
// #UNITS: Basic units of measurement
|
|
// #GRID: Grid and layout variables
|
|
// #COLORS: Base, palette and theme color definitions + application
|
|
// #TYPOGRAPHY: Font definitions and scales
|
|
// #DEPTH: Event timing variables
|
|
// #TIMING: Event timing variables
|
|
// #APPLICATIONS: Applying configuration
|
|
|
|
|
|
// ----------------------------
|
|
// #UNITS
|
|
// ----------------------------
|
|
$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)
|
|
|
|
$static-path: '..' !default;
|
|
|
|
|
|
// ----------------------------
|
|
// #GRID
|
|
// ----------------------------
|
|
// grid - baseline
|
|
$baseline: 20;
|
|
$baseline-vertical: ($baseline*2);
|
|
$baseline-horizontal: $baseline;
|
|
|
|
$susy: (
|
|
use-custom clearfix: true,
|
|
global-box-sizing: border-box,
|
|
math: fluid,
|
|
output: float,
|
|
columns: 12,
|
|
gutters: .5,
|
|
container: rem(1170),
|
|
);
|
|
|
|
// grid - breakpoints
|
|
$bp-small: 320px;
|
|
$bp-medium: 768px;
|
|
$bp-large: 1024px;
|
|
$bp-huge: 1280px;
|
|
|
|
// ----------------------------
|
|
// #COLORS
|
|
// ----------------------------
|
|
// color: config
|
|
$transparent: rgba(0, 0, 0, 0);
|
|
|
|
$gray: rgb(167, 164, 164);
|
|
$gray-cool: rgb(158, 177, 185);
|
|
$red: rgb(178, 6, 16);
|
|
$yellow: rgb(253, 188, 86);
|
|
$green: rgb(37, 184, 90);
|
|
$blue: rgb(0, 121, 188);
|
|
$pink: rgb(203, 89, 141);
|
|
|
|
// colors: brand
|
|
$brand-primary: $blue;
|
|
$brand-primary-accent: rgb(14, 166, 236);
|
|
$brand-secondary: $pink;
|
|
$brand-secondary-accent: rgb(242, 108, 170);
|
|
|
|
// colors: utilities
|
|
$success: $green;
|
|
$warning: $yellow;
|
|
$error: $red;
|
|
|
|
// colors: palettes
|
|
$palettes: (
|
|
primary: (
|
|
base: $brand-primary,
|
|
light: tint($brand-primary, 30%),
|
|
x-light: tint($brand-primary, 70%),
|
|
dark: shade($brand-primary, 30%),
|
|
x-dark: shade($brand-primary, 55%),
|
|
accent: $brand-primary-accent,
|
|
x-accent: saturate($brand-primary-accent, 25%)
|
|
),
|
|
secondary: (
|
|
base: $brand-secondary,
|
|
light: tint($brand-secondary, 30%),
|
|
x-light: tint($brand-secondary, 70%),
|
|
dark: shade($brand-secondary, 30%),
|
|
x-dark: shade($brand-secondary, 55%),
|
|
accent: $brand-secondary-accent
|
|
),
|
|
grayscale: (
|
|
base: $gray,
|
|
light: tint($gray, 50%),
|
|
x-light: tint($gray, 75%),
|
|
white: tint($gray, 97%),
|
|
white-t: tint($gray, 100%),
|
|
dark: shade($gray, 40%),
|
|
x-dark: shade($gray, 60%),
|
|
black: shade($gray, 90%),
|
|
black-t: shade($gray, 100%),
|
|
trans: transparentize($gray, 0.50),
|
|
x-trans: transparentize($gray, 0.75),
|
|
xx-trans: transparentize($gray, 0.95)
|
|
),
|
|
grayscale-cool: (
|
|
base: $gray-cool,
|
|
light: tint($gray-cool, 50%),
|
|
x-light: tint($gray-cool, 75%),
|
|
dark: shade($gray-cool, 50%),
|
|
x-dark: shade($gray-cool, 75%),
|
|
trans: transparentize($gray-cool, 0.50),
|
|
x-trans: transparentize($gray-cool, 0.75),
|
|
xx-trans: transparentize($gray-cool, 0.95)
|
|
),
|
|
success: (
|
|
base: $success,
|
|
light: tint($success, 33%),
|
|
dark: shade($success, 33%)
|
|
),
|
|
error: (
|
|
base: $error,
|
|
light: tint($error, 33%),
|
|
dark: shade($error, 33%)
|
|
),
|
|
warning: (
|
|
base: $warning,
|
|
light: tint($warning, 33%),
|
|
dark: shade($warning, 33%)
|
|
),
|
|
);
|
|
|
|
// ----------------------------
|
|
// #TYPOGRAPHY
|
|
// ----------------------------
|
|
// typography: config
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-Light-webfont',
|
|
300,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-LightItalic-webfont',
|
|
300,
|
|
italic,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-Regular-webfont',
|
|
400,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-Italic-webfont',
|
|
400,
|
|
italic,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-Semibold-webfont',
|
|
600,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-SemiboldItalic-webfont',
|
|
600,
|
|
italic,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-Bold-webfont',
|
|
700,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
@include font-face(
|
|
'Open Sans',
|
|
'#{$static-path}/../fonts/OpenSans/OpenSans-BoldItalic-webfont',
|
|
700,
|
|
italic,
|
|
$file-formats: woff woff2 ttf
|
|
);
|
|
|
|
// typography: config - stacks
|
|
$font-family-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$font-family-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
|
|
|
|
// typography: config - scale
|
|
$modular-scale-ratio: $perfect-fourth;
|
|
|
|
// typography: sizes
|
|
$font-sizes: (
|
|
xxx-large: 38,
|
|
xx-large: 28,
|
|
x-large: 24,
|
|
large: 21,
|
|
mid-large: 18,
|
|
base: 16,
|
|
small: 14,
|
|
x-small: 12,
|
|
);
|
|
|
|
// typography: line-height
|
|
$line-heights: (
|
|
xx-large: 1.40,
|
|
x-large: 1.40,
|
|
large: 1.50,
|
|
mid-large: 1.60,
|
|
mid-small: 1.60,
|
|
small: 1.5,
|
|
base: 1.5,
|
|
none: 0
|
|
);
|
|
|
|
// typography: weights
|
|
$font-weights: (
|
|
normal: 400,
|
|
light: 300,
|
|
x-light: 200,
|
|
semi-bold: 600,
|
|
bold: 700,
|
|
x-bold: 800
|
|
);
|
|
|
|
// typography: letter-spacing
|
|
$letter-spacing: (
|
|
normal: 0,
|
|
xx-tight: -3,
|
|
x-tight: -2,
|
|
tight: -.095,
|
|
loose: -.075,
|
|
x-loose: -.025,
|
|
xx-loose: 3
|
|
);
|
|
|
|
// ----------------------------
|
|
// #DEPTH
|
|
// ----------------------------
|
|
$z-depths: (
|
|
base: 1,
|
|
mid-back: -10,
|
|
back: -100,
|
|
very-back: -1000,
|
|
mid-front: 10,
|
|
front: 100,
|
|
very-front: 1000
|
|
);
|
|
|
|
$spacing-vertical: (
|
|
base: $baseline-vertical,
|
|
mid-small: ($baseline-vertical*0.75),
|
|
small: ($baseline-vertical/2),
|
|
x-small: ($baseline-vertical/4),
|
|
xx-small: ($baseline-vertical/8),
|
|
mid-large: ($baseline-vertical*1.5),
|
|
large: ($baseline-vertical*2),
|
|
x-large: ($baseline-vertical*4)
|
|
);
|
|
|
|
$spacing-horizontal: (
|
|
base: $baseline-horizontal,
|
|
mid-small: ($baseline-horizontal*0.75),
|
|
small: ($baseline-horizontal/2),
|
|
x-small: ($baseline-horizontal/4),
|
|
xx-small: ($baseline-horizontal/8),
|
|
mid-large: ($baseline-horizontal*1.5),
|
|
large: ($baseline-horizontal*2),
|
|
x-large: ($baseline-horizontal*4)
|
|
);
|
|
|
|
|
|
// ----------------------------
|
|
// #TIMING
|
|
// ----------------------------
|
|
$timing: (
|
|
base: 0.75s,
|
|
slow: 1s,
|
|
x-slow: 1.5s,
|
|
fast: 0.5s,
|
|
x-fast: 0.25s,
|
|
xx-fast: 0.125s
|
|
);
|
|
|
|
// ----------------------------
|
|
// #APPLICATIONS
|
|
// ----------------------------
|
|
// scaffolding
|
|
$view-bg: palette(grayscale, xx-light);
|
|
|
|
// base component settings
|
|
$component-focus-color: inherit;
|
|
$component-focus-bg: palette(primary, x-light);
|
|
$component-active-color: palette(grayscale, white);
|
|
$component-active-bg: palette(primary, base);
|
|
|
|
// base text settings
|
|
$text-base-font-family: $font-family-sans-serif;
|
|
$text-base-color: palette(grayscale, dark);
|
|
$text-base-font-weight: font-weight(normal);
|
|
$text-base-focus-color: palette(grayscale, x-dark);
|
|
|
|
$text-emphasized-color: palette(grayscale, x-dark);
|
|
$text-emphasized-font-weight: font-weight(normal);
|
|
|
|
$text-de-emphasized-color: palette(grayscale, base);
|
|
$text-de-emphasized-font-weight: font-weight(normal);
|
|
|
|
// links
|
|
$link-color: palette(primary, base);
|
|
$link-focus-color: palette(primary, sat);
|
|
$link-visited-color: palette(primary, dark);
|
|
|
|
// headings
|
|
$headings-font-weight-normal: font-weight(normal);
|
|
$headings-font-weight-bold: font-weight(semi-bold);
|
|
$headings-font-weight-x-bold: font-weight(bold);
|
|
|
|
$headings-base-font-family: $font-family-sans-serif;
|
|
$headings-base-font-weight: $headings-font-weight-normal;
|
|
$headings-base-color: palette(grayscale, x-dark);
|
|
|
|
$headings-primary-font-family: $font-family-sans-serif;
|
|
$headings-primary-color: palette(grayscale, black);
|
|
|
|
$headings-secondary-font-family: $font-family-sans-serif;
|
|
$headings-secondary-color: palette(grayscale, base);
|
|
|
|
// buttons
|
|
$buttons-border-style: solid;
|
|
$buttons-border-size: 1px;
|
|
$buttons-elevated-shadow: 3px;
|
|
$buttons-border-radius: 3px;
|
|
$buttons-font-weight: font-weight(semi-bold);
|
|
|
|
// tables
|
|
$table-cell-padding: spacing-vertical(small) spacing-horizontal(small);
|
|
$table-condensed-cell-padding: spacing-vertical(x-small) spacing-horizontal(x-small);
|
|
$table-bg: palette(grayscale, white);
|
|
$table-accent-bg: palette(primary, accent);
|
|
$table-focus-bg: $component-focus-bg;
|
|
$table-active-bg: $component-active-bg;
|
|
$table-border-color: palette(grayscale, x-light);
|