246 lines
7.2 KiB
SCSS
246 lines
7.2 KiB
SCSS
// COLORS
|
|
$light-gray1: rgb(221, 221, 221) !default;
|
|
|
|
|
|
// Font Sizes in em
|
|
$small-font-size: 0.85em !default;
|
|
$medium-font-size: 0.9em !default;
|
|
$base-font-size: 1em !default;
|
|
|
|
// Line height
|
|
$base-line-height: 1.5em !default;
|
|
|
|
|
|
$component-border-radius: 3px !default;
|
|
|
|
// grid - breakpoints
|
|
$bp-screen-sm: 480px !default;
|
|
$bp-screen-md: 768px !default;
|
|
$bp-screen-lg: 1024px !default;
|
|
$bp-screen-xl: 1280px !default;
|
|
|
|
|
|
// #SPACING
|
|
// ----------------------------
|
|
// spacing - baseline
|
|
$baseline: 20px !default;
|
|
|
|
// vertical spacing
|
|
$baseline-vertical: ($baseline*2) !default;
|
|
|
|
$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),
|
|
xxx-small: ($baseline-vertical/10),
|
|
mid-large: ($baseline-vertical*1.5),
|
|
large: ($baseline-vertical*2),
|
|
x-large: ($baseline-vertical*4)
|
|
);
|
|
|
|
// horizontal spacing
|
|
$baseline-horizontal: $baseline !default;
|
|
|
|
$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)
|
|
);
|
|
|
|
// get vertical spacings from defined map values
|
|
@function spacing-vertical($key) {
|
|
@if map-has-key($spacing-vertical, $key) {
|
|
@return rem(map-get($spacing-vertical, $key));
|
|
}
|
|
|
|
@warn "Unknown `#{$key}` in $spacing-vertical.";
|
|
|
|
@return null;
|
|
}
|
|
|
|
// get horizontal spacings from defined map values
|
|
@function spacing-horizontal($key) {
|
|
@if map-has-key($spacing-horizontal, $key) {
|
|
@return rem(map-get($spacing-horizontal, $key));
|
|
}
|
|
|
|
@warn "Unknown `#{$key}` in $spacing-horizontal.";
|
|
|
|
@return null;
|
|
}
|
|
|
|
// typography: weights
|
|
$font-weights: (
|
|
normal: 400,
|
|
light: 300,
|
|
x-light: 200,
|
|
semi-bold: 600,
|
|
bold: 700
|
|
);
|
|
|
|
// typography: sizes
|
|
$font-sizes: (
|
|
xxxx-large: 38,
|
|
xxx-large: 28,
|
|
xx-large: 24,
|
|
x-large: 21,
|
|
large: 18,
|
|
base: 16,
|
|
small: 14,
|
|
x-small: 12,
|
|
xx-small: 11,
|
|
xxx-small: 10,
|
|
);
|
|
|
|
// get font sizes from defined map values
|
|
@function font-size($key) {
|
|
@if map-has-key($font-sizes, $key) {
|
|
@return rem(map-get($font-sizes, $key));
|
|
}
|
|
|
|
@warn "Unknown `#{$key}` in $font-sizes.";
|
|
|
|
@return null;
|
|
}
|
|
|
|
// get font weight from defined map values
|
|
@function font-weight($key) {
|
|
@if map-has-key($font-weights, $key) {
|
|
@return map-get($font-weights, $key);
|
|
}
|
|
|
|
@warn "Unknown `#{$key}` in $font-weights.";
|
|
|
|
@return null;
|
|
}
|
|
|
|
|
|
// visual disabled
|
|
%state-disabled {
|
|
pointer-events: none;
|
|
outline: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// +Colors - UXPL new pattern library colors
|
|
// ====================
|
|
$uxpl-blue-hover-active: darken($primary, 7%) !default; // wcag2a compliant
|
|
|
|
$uxpl-green-base: rgba(0, 129, 0, 1) !default; // wcag2a compliant
|
|
$uxpl-green-hover-active: lighten($uxpl-green-base, 7%) !default; // wcag2a compliant
|
|
|
|
$uxpl-gray-dark: rgb(17, 17, 17) !default;
|
|
$uxpl-gray-base: rgb(65, 65, 65) !default;
|
|
$uxpl-gray-background: rgb(217, 217, 217) !default;
|
|
|
|
|
|
// Alert styles
|
|
$error-color: rgb(203, 7, 18) !default;
|
|
$warning-color: rgb(255, 192, 31) !default;
|
|
$warning-color-accent: rgb(255, 252, 221) !default;
|
|
$general-color: theme-color("primary") !default;
|
|
$general-color-accent: theme-color("primary") !default;
|
|
|
|
// CAPA correctness color to be consistent with Alert styles above
|
|
$correct: theme-color("success") !default;
|
|
$partially-correct: theme-color("success") !default;
|
|
$incorrect: theme-color("danger") !default;
|
|
$submitted: $general-color !default;
|
|
|
|
|
|
// BUTTONS
|
|
|
|
// disabled button
|
|
$btn-disabled-border-color: #d2d0d0 !default;
|
|
$btn-disabled-color: #6b6969 !default;
|
|
|
|
// base button
|
|
$btn-default-border-color: transparent !default;
|
|
$btn-default-background: transparent !default;
|
|
$btn-default-color: theme-color("primary") !default;
|
|
$btn-default-focus-border-color: theme-color("primary") !default;
|
|
$btn-default-focus-color: theme-color("primary") !default;
|
|
$btn-default-active-border-color: theme-color("primary") !default;
|
|
$btn-default-active-color: theme-color("primary") !default;
|
|
|
|
// brand button
|
|
$btn-brand-border-color: theme-color("primary") !default;
|
|
$btn-brand-background: theme-color("primary") !default;
|
|
$btn-brand-color: #fcfcfc !default;
|
|
$btn-brand-focus-color: $btn-brand-color !default;
|
|
$btn-brand-focus-border-color: $uxpl-blue-hover-active !default;
|
|
$btn-brand-focus-background: $uxpl-blue-hover-active !default;
|
|
$btn-brand-active-border-color: theme-color("primary") !default;
|
|
$btn-brand-active-background: theme-color("primary") !default;
|
|
$btn-brand-disabled-background: #f2f3f3 !default;
|
|
$btn-brand-disabled-color: #676666 !default;
|
|
|
|
// Upgrade button
|
|
$btn-upgrade-border-color: $uxpl-green-base !default;
|
|
$btn-upgrade-background: $uxpl-green-base !default;
|
|
$btn-upgrade-color: #fcfcfc !default;
|
|
$btn-upgrade-focus-color: $btn-upgrade-color !default;
|
|
$btn-upgrade-focus-border-color: rgb(0, 155, 0) !default;
|
|
$btn-upgrade-focus-background: rgb(0, 155, 0) !default;
|
|
$btn-upgrade-active-border-color: $uxpl-green-base !default;
|
|
$btn-upgrade-active-background: $uxpl-green-base !default;
|
|
|
|
// ----------------------------
|
|
// #SETTINGS
|
|
// ----------------------------
|
|
$btn-border-style: solid !default;
|
|
$btn-border-size: 1px !default;
|
|
$btn-shadow: 3px !default;
|
|
$btn-font-weight: font-weight(semi-bold) !default;
|
|
$btn-border-radius: $component-border-radius !default;
|
|
|
|
// sizes
|
|
$btn-large-padding-vertical: spacing-vertical(small);
|
|
$btn-large-padding-horizontal: spacing-horizontal(mid-large);
|
|
|
|
|
|
$btn-base-padding-vertical: spacing-vertical(x-small);
|
|
$btn-base-padding-horizontal: spacing-horizontal(base);
|
|
$btn-base-font-size: font-size(base);
|
|
|
|
$btn-small-padding-vertical: spacing-vertical(x-small);
|
|
$btn-small-padding-horizontal: spacing-horizontal(small);
|
|
|
|
|
|
// ----------------------------
|
|
// #SIZES
|
|
// ----------------------------
|
|
// large
|
|
%btn-large {
|
|
padding: 1.25rem 1.875rem;
|
|
font-size: font-size(large);
|
|
}
|
|
|
|
// small
|
|
%btn-small {
|
|
padding: 0.625rem;
|
|
font-size: 14px;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Problem Notifications
|
|
// ----------------------------
|
|
|
|
@mixin notification-by-type($color) {
|
|
border-top: 3px solid $color;
|
|
|
|
.icon {
|
|
@include margin-right(3 * $baseline/ 4);
|
|
|
|
color: $color;
|
|
}
|
|
}
|
|
|