luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-consul/ui-v2/app/styles/base/decoration/base-variables.scss

16 lines
677 B
SCSS
Raw Normal View History

UI: CSS refactor (#4430) + Fullscreen Layout (#4435) * Begin refactoring CSS into component folders. Moved most components into layout/skin folders, left out a couple of ones I want to think about more. * Adjust grays based on recent Structure changes * Switch to fullscreen layout for lists and detail, left aligned forms (#4435) * Specifically use the 'actions_close' label, not just the :last-child (actions-group) * Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
2018-08-29 11:11:58 +00:00
$decor-radius-000: 0;
$decor-radius-100: 2px;
$decor-radius-200: 4px;
$decor-radius-300: 7px;
$decor-radius-full: 100%;
$decor-border-000: none;
$decor-border-100: 1px solid;
$decor-border-200: 2px solid;
$decor-border-300: 3px solid;
ui: Update the shadows for radio buttons and the cards (#7391) * Update box-shadowing for cards and radio buttons to low * Update box-shadowing for hover cards to middle * Create a new box-shadow CSS variable for form elements
2020-03-05 14:16:48 +00:00
$decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06);
$decor-elevation-200: 0 2px 4px rgba(0, 0, 0, 0.1);
$decor-elevation-300: 0 5px 1px -2px rgba($black, 0.12);
ui: Create CSS variables for box-shadowing consistency (#7337) * Table - Lowest (on-hover of table items) * Buttons - Middle * Form-elements - Removed, no box-shadowing in input forms mocks. * Menu-panel -High * Modal-dialog - Highest * Stats-card -Middle/High(Active) * Tooltip - Middle * Card - Middle * Expanded-single-select - Middle * Tabular-details - High * Discovery chain - High
2020-02-21 15:17:18 +00:00
$decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
$decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
$decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);