From f1ae4407aa5648e78a96583b60c38a2661ef74aa Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 16 Apr 2021 12:17:24 -0700 Subject: [PATCH 01/68] feat(@clayui/css): Created scoped version of Clay CSS for admin style isolation and prefix variables with `$cadmin-` --- .../clay-css/src/scss/_cadmin-variables.scss | 7 + packages/clay-css/src/scss/cadmin.scss | 98 ++ .../clay-css/src/scss/cadmin/_variables.scss | 68 + .../src/scss/cadmin/atlas/_variables.scss | 52 + .../scss/cadmin/atlas/variables/_alerts.scss | 245 ++++ .../atlas/variables/_application-bar.scss | 33 + .../scss/cadmin/atlas/variables/_badges.scss | 55 + .../cadmin/atlas/variables/_breadcrumbs.scss | 25 + .../scss/cadmin/atlas/variables/_buttons.scss | 401 ++++++ .../scss/cadmin/atlas/variables/_cards.scss | 159 +++ .../cadmin/atlas/variables/_clay-color.scss | 38 + .../cadmin/atlas/variables/_custom-forms.scss | 138 ++ .../cadmin/atlas/variables/_date-picker.scss | 82 ++ .../cadmin/atlas/variables/_drilldown.scss | 15 + .../cadmin/atlas/variables/_dropdowns.scss | 100 ++ .../scss/cadmin/atlas/variables/_forms.scss | 264 ++++ .../scss/cadmin/atlas/variables/_globals.scss | 259 ++++ .../scss/cadmin/atlas/variables/_icons.scss | 2 + .../scss/cadmin/atlas/variables/_labels.scss | 432 +++++++ .../scss/cadmin/atlas/variables/_links.scss | 150 +++ .../cadmin/atlas/variables/_list-group.scss | 136 ++ .../scss/cadmin/atlas/variables/_loaders.scss | 7 + .../atlas/variables/_management-bar.scss | 41 + .../scss/cadmin/atlas/variables/_menubar.scss | 95 ++ .../scss/cadmin/atlas/variables/_modals.scss | 90 ++ .../atlas/variables/_multi-step-nav.scss | 18 + .../scss/cadmin/atlas/variables/_navbar.scss | 20 + .../atlas/variables/_navigation-bar.scss | 53 + .../scss/cadmin/atlas/variables/_navs.scss | 100 ++ .../cadmin/atlas/variables/_pagination.scss | 93 ++ .../scss/cadmin/atlas/variables/_panels.scss | 76 ++ .../cadmin/atlas/variables/_popovers.scss | 23 + .../atlas/variables/_progress-bars.scss | 22 + .../cadmin/atlas/variables/_quick-action.scss | 3 + .../scss/cadmin/atlas/variables/_range.scss | 23 + .../scss/cadmin/atlas/variables/_reorder.scss | 7 + .../scss/cadmin/atlas/variables/_sheets.scss | 53 + .../scss/cadmin/atlas/variables/_sidebar.scss | 81 ++ .../cadmin/atlas/variables/_stickers.scss | 68 + .../scss/cadmin/atlas/variables/_tables.scss | 200 +++ .../scss/cadmin/atlas/variables/_tbar.scss | 55 + .../scss/cadmin/atlas/variables/_time.scss | 16 + .../cadmin/atlas/variables/_timelines.scss | 3 + .../atlas/variables/_toggle-switch.scss | 43 + .../scss/cadmin/atlas/variables/_tooltip.scss | 9 + .../scss/cadmin/atlas/variables/_type.scss | 5 + .../cadmin/atlas/variables/_utilities.scss | 34 + .../src/scss/cadmin/components/_alerts.scss | 276 ++++ .../cadmin/components/_application-bar.scss | 19 + .../scss/cadmin/components/_aspect-ratio.scss | 234 ++++ .../src/scss/cadmin/components/_badges.scss | 203 +++ .../src/scss/cadmin/components/_base.scss | 29 + .../scss/cadmin/components/_breadcrumbs.scss | 116 ++ .../cadmin/components/_button-groups.scss | 201 +++ .../src/scss/cadmin/components/_buttons.scss | 387 ++++++ .../src/scss/cadmin/components/_cards.scss | 832 ++++++++++++ .../src/scss/cadmin/components/_carousel.scss | 210 +++ .../scss/cadmin/components/_clay-color.scss | 177 +++ .../src/scss/cadmin/components/_code.scss | 47 + .../scss/cadmin/components/_custom-forms.scss | 724 +++++++++++ .../scss/cadmin/components/_date-picker.scss | 154 +++ .../scss/cadmin/components/_drilldown.scss | 159 +++ .../scss/cadmin/components/_dropdowns.scss | 612 +++++++++ .../scss/cadmin/components/_dual-listbox.scss | 31 + .../scss/cadmin/components/_empty-state.scss | 35 + .../cadmin/components/_form-validation.scss | 329 +++++ .../src/scss/cadmin/components/_forms.scss | 919 +++++++++++++ .../src/scss/cadmin/components/_grid.scss | 272 ++++ .../src/scss/cadmin/components/_icons.scss | 100 ++ .../src/scss/cadmin/components/_images.scss | 43 + .../scss/cadmin/components/_input-groups.scss | 660 ++++++++++ .../scss/cadmin/components/_jumbotron.scss | 20 + .../src/scss/cadmin/components/_labels.scss | 187 +++ .../src/scss/cadmin/components/_links.scss | 67 + .../scss/cadmin/components/_list-group.scss | 545 ++++++++ .../src/scss/cadmin/components/_loaders.scss | 35 + .../cadmin/components/_management-bar.scss | 19 + .../src/scss/cadmin/components/_media.scss | 8 + .../src/scss/cadmin/components/_menubar.scss | 85 ++ .../src/scss/cadmin/components/_modals.scss | 532 ++++++++ .../cadmin/components/_multi-step-nav.scss | 354 +++++ .../src/scss/cadmin/components/_navbar.scss | 628 +++++++++ .../cadmin/components/_navigation-bar.scss | 12 + .../src/scss/cadmin/components/_navs.scss | 303 +++++ .../scss/cadmin/components/_pagination.scss | 285 +++++ .../src/scss/cadmin/components/_panels.scss | 326 +++++ .../src/scss/cadmin/components/_popovers.scss | 442 +++++++ .../src/scss/cadmin/components/_print.scss | 123 ++ .../cadmin/components/_progress-bars.scss | 137 ++ .../scss/cadmin/components/_quick-action.scss | 41 + .../src/scss/cadmin/components/_range.scss | 49 + .../src/scss/cadmin/components/_reboot.scss | 402 ++++++ .../src/scss/cadmin/components/_reorder.scss | 45 + .../src/scss/cadmin/components/_root.scss | 20 + .../src/scss/cadmin/components/_sheets.scss | 346 +++++ .../cadmin/components/_side-navigation.scss | 143 +++ .../src/scss/cadmin/components/_sidebar.scss | 126 ++ .../src/scss/cadmin/components/_slideout.scss | 39 + .../src/scss/cadmin/components/_spinners.scss | 51 + .../src/scss/cadmin/components/_stickers.scss | 152 +++ .../src/scss/cadmin/components/_tables.scss | 1138 +++++++++++++++++ .../src/scss/cadmin/components/_tbar.scss | 160 +++ .../src/scss/cadmin/components/_time.scss | 67 + .../scss/cadmin/components/_timelines.scss | 164 +++ .../src/scss/cadmin/components/_toasts.scss | 50 + .../cadmin/components/_toggle-switch.scss | 391 ++++++ .../src/scss/cadmin/components/_tooltip.scss | 300 +++++ .../scss/cadmin/components/_transitions.scss | 21 + .../src/scss/cadmin/components/_type.scss | 330 +++++ .../_utilities-functional-important.scss | 819 ++++++++++++ .../scss/cadmin/components/_utilities.scss | 433 +++++++ .../src/scss/cadmin/variables/_alerts.scss | 601 +++++++++ .../cadmin/variables/_application-bar.scss | 33 + .../src/scss/cadmin/variables/_badges.scss | 212 +++ .../scss/cadmin/variables/_breadcrumbs.scss | 65 + .../src/scss/cadmin/variables/_buttons.scss | 1041 +++++++++++++++ .../src/scss/cadmin/variables/_cards.scss | 545 ++++++++ .../src/scss/cadmin/variables/_carousel.scss | 37 + .../scss/cadmin/variables/_clay-color.scss | 339 +++++ .../scss/cadmin/variables/_custom-forms.scss | 345 +++++ .../scss/cadmin/variables/_date-picker.scss | 252 ++++ .../src/scss/cadmin/variables/_drilldown.scss | 209 +++ .../src/scss/cadmin/variables/_dropdowns.scss | 413 ++++++ .../scss/cadmin/variables/_dual-listbox.scss | 71 + .../scss/cadmin/variables/_empty-state.scss | 75 ++ .../src/scss/cadmin/variables/_forms.scss | 833 ++++++++++++ .../cadmin/variables/_globals-z-index.scss | 24 + .../src/scss/cadmin/variables/_globals.scss | 588 +++++++++ .../src/scss/cadmin/variables/_icons.scss | 20 + .../src/scss/cadmin/variables/_images.scss | 10 + .../src/scss/cadmin/variables/_jumbotron.scss | 3 + .../src/scss/cadmin/variables/_labels.scss | 755 +++++++++++ .../src/scss/cadmin/variables/_links.scss | 252 ++++ .../scss/cadmin/variables/_list-group.scss | 216 ++++ .../src/scss/cadmin/variables/_loaders.scss | 23 + .../cadmin/variables/_management-bar.scss | 55 + .../src/scss/cadmin/variables/_menubar.scss | 155 +++ .../src/scss/cadmin/variables/_modals.scss | 293 +++++ .../cadmin/variables/_multi-step-nav.scss | 87 ++ .../src/scss/cadmin/variables/_navbar.scss | 76 ++ .../cadmin/variables/_navigation-bar.scss | 48 + .../src/scss/cadmin/variables/_navs.scss | 276 ++++ .../scss/cadmin/variables/_pagination.scss | 323 +++++ .../src/scss/cadmin/variables/_panels.scss | 162 +++ .../src/scss/cadmin/variables/_popovers.scss | 52 + .../scss/cadmin/variables/_progress-bars.scss | 68 + .../scss/cadmin/variables/_quick-action.scss | 16 + .../src/scss/cadmin/variables/_range.scss | 107 ++ .../src/scss/cadmin/variables/_reorder.scss | 81 ++ .../src/scss/cadmin/variables/_sheets.scss | 233 ++++ .../cadmin/variables/_side-navigation.scss | 2 + .../src/scss/cadmin/variables/_sidebar.scss | 154 +++ .../src/scss/cadmin/variables/_slideout.scss | 186 +++ .../src/scss/cadmin/variables/_spinners.scss | 11 + .../src/scss/cadmin/variables/_stickers.scss | 143 +++ .../src/scss/cadmin/variables/_tables.scss | 499 ++++++++ .../src/scss/cadmin/variables/_tbar.scss | 399 ++++++ .../src/scss/cadmin/variables/_time.scss | 110 ++ .../src/scss/cadmin/variables/_timelines.scss | 31 + .../src/scss/cadmin/variables/_toasts.scss | 16 + .../scss/cadmin/variables/_toggle-switch.scss | 66 + .../src/scss/cadmin/variables/_tooltip.scss | 22 + .../src/scss/cadmin/variables/_type.scss | 176 +++ .../src/scss/cadmin/variables/_utilities.scss | 140 ++ 164 files changed, 31110 insertions(+) create mode 100644 packages/clay-css/src/scss/_cadmin-variables.scss create mode 100644 packages/clay-css/src/scss/cadmin.scss create mode 100644 packages/clay-css/src/scss/cadmin/_variables.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/_variables.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_alerts.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_application-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_badges.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_breadcrumbs.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_buttons.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_cards.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_clay-color.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_custom-forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_date-picker.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_drilldown.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_dropdowns.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_globals.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_icons.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_labels.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_links.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_list-group.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_loaders.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_management-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_menubar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_modals.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_multi-step-nav.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_navbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_navigation-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_navs.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_pagination.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_panels.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_popovers.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_progress-bars.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_quick-action.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_range.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_reorder.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_sheets.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_sidebar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_stickers.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_tables.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_tbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_time.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_timelines.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_toggle-switch.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_tooltip.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_type.scss create mode 100644 packages/clay-css/src/scss/cadmin/atlas/variables/_utilities.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_alerts.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_application-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_badges.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_base.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_breadcrumbs.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_button-groups.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_buttons.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_cards.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_carousel.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_clay-color.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_code.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_custom-forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_date-picker.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_drilldown.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_dropdowns.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_dual-listbox.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_empty-state.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_form-validation.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_grid.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_icons.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_images.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_input-groups.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_jumbotron.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_labels.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_links.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_list-group.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_loaders.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_management-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_media.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_menubar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_modals.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_navbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_navigation-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_navs.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_pagination.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_panels.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_popovers.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_print.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_progress-bars.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_quick-action.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_range.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_reboot.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_reorder.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_root.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_sheets.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_side-navigation.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_sidebar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_slideout.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_spinners.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_stickers.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_tables.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_tbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_time.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_timelines.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_toasts.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_toggle-switch.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_tooltip.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_transitions.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_type.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_utilities-functional-important.scss create mode 100644 packages/clay-css/src/scss/cadmin/components/_utilities.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_alerts.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_application-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_badges.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_breadcrumbs.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_buttons.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_cards.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_carousel.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_clay-color.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_date-picker.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_drilldown.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_dropdowns.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_dual-listbox.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_empty-state.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_forms.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_globals-z-index.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_globals.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_icons.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_images.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_jumbotron.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_labels.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_links.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_list-group.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_loaders.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_management-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_menubar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_modals.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_navbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_navigation-bar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_navs.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_pagination.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_panels.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_popovers.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_progress-bars.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_quick-action.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_range.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_reorder.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_sheets.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_side-navigation.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_sidebar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_slideout.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_spinners.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_stickers.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_tables.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_tbar.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_time.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_timelines.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_toasts.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_toggle-switch.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_tooltip.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_type.scss create mode 100644 packages/clay-css/src/scss/cadmin/variables/_utilities.scss diff --git a/packages/clay-css/src/scss/_cadmin-variables.scss b/packages/clay-css/src/scss/_cadmin-variables.scss new file mode 100644 index 0000000000..9534802701 --- /dev/null +++ b/packages/clay-css/src/scss/_cadmin-variables.scss @@ -0,0 +1,7 @@ +@import '_license-text'; + +@import 'functions/_global-functions'; + +@import 'cadmin/_variables'; + +@import '_mixins'; diff --git a/packages/clay-css/src/scss/cadmin.scss b/packages/clay-css/src/scss/cadmin.scss new file mode 100644 index 0000000000..796c35e0db --- /dev/null +++ b/packages/clay-css/src/scss/cadmin.scss @@ -0,0 +1,98 @@ +@import '_license-text'; + +// Don't forget easy to include variable overwrites + +@import 'functions/_global-functions'; + +@import '_cadmin-variables'; + +@import '_mixins'; + +@import 'cadmin/components/_base'; + +html#{$cadmin-selector} { + .cadmin { + // @import 'cadmin/components/_root'; + + @import 'cadmin/components/_reboot'; + @import 'cadmin/components/_type'; + + @import 'cadmin/components/_code'; + @import 'cadmin/components/_images'; + + // @import 'cadmin/components/_carousel'; + // @import 'cadmin/components/_jumbotron'; + // @import 'cadmin/components/_spinners'; + // @import 'cadmin/components/_toasts'; + + @import 'cadmin/components/_icons'; + + @import 'cadmin/components/_aspect-ratio'; + @import 'cadmin/components/_buttons'; + @import 'cadmin/components/_transitions'; + + @import 'cadmin/components/_grid'; + + @import 'cadmin/components/_alerts'; + @import 'cadmin/components/_badges'; + @import 'cadmin/components/_breadcrumbs'; + @import 'cadmin/components/_button-groups'; + @import 'cadmin/components/_empty-state'; + @import 'cadmin/components/_labels'; + // @import 'cadmin/components/_media'; + @import 'cadmin/components/_stickers'; + + @import 'cadmin/components/_cards'; + @import 'cadmin/components/_dropdowns'; + + @import 'cadmin/components/_drilldown'; + @import 'cadmin/components/_forms'; + @import 'cadmin/components/_links'; + + @import 'cadmin/components/_range'; + @import 'cadmin/components/_reorder'; + + @import 'cadmin/components/_clay-color'; + @import 'cadmin/components/_custom-forms'; + @import 'cadmin/components/_time'; + + @import 'cadmin/components/_date-picker'; + @import 'cadmin/components/_dual-listbox'; + @import 'cadmin/components/_form-validation'; + @import 'cadmin/components/_input-groups'; + @import 'cadmin/components/_list-group'; + @import 'cadmin/components/_modals'; + @import 'cadmin/components/_multi-step-nav'; + + @import 'cadmin/components/_navs'; + + @import 'cadmin/components/_menubar'; + @import 'cadmin/components/_navbar'; + + // @import 'cadmin/components/_application-bar'; + @import 'cadmin/components/_management-bar'; + @import 'cadmin/components/_navigation-bar'; + + @import 'cadmin/components/_pagination'; + @import 'cadmin/components/_panels'; + @import 'cadmin/components/_popovers'; + @import 'cadmin/components/_progress-bars'; + @import 'cadmin/components/_quick-action'; + @import 'cadmin/components/_sheets'; + @import 'cadmin/components/_side-navigation'; + @import 'cadmin/components/_sidebar'; + @import 'cadmin/components/_slideout'; + @import 'cadmin/components/_tables'; + @import 'cadmin/components/_tbar'; + // @import 'cadmin/components/_timelines'; + @import 'cadmin/components/_toggle-switch'; + @import 'cadmin/components/_tooltip'; + + @import 'cadmin/components/_utilities'; + @import 'cadmin/components/_utilities-functional-important'; + + @import 'cadmin/components/_loaders'; + + @import 'cadmin/components/_print'; + } +} diff --git a/packages/clay-css/src/scss/cadmin/_variables.scss b/packages/clay-css/src/scss/cadmin/_variables.scss new file mode 100644 index 0000000000..8dc76a420b --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/_variables.scss @@ -0,0 +1,68 @@ +@import 'atlas/variables'; + +@import 'variables/_globals'; +@import 'variables/_globals-z-index'; + +@import 'variables/_images'; + +@import 'variables/_carousel'; +@import 'variables/_jumbotron'; +@import 'variables/_toasts'; +@import 'variables/_spinners'; + +@import 'variables/_buttons'; + +@import 'variables/_alerts'; +@import 'variables/_badges'; +@import 'variables/_breadcrumbs'; +@import 'variables/_empty-state'; +@import 'variables/_labels'; +@import 'variables/_stickers'; + +@import 'variables/_cards'; +@import 'variables/_dropdowns'; + +@import 'variables/_drilldown'; +@import 'variables/_forms'; +@import 'variables/_links'; + +@import 'variables/_range'; +@import 'variables/_reorder'; + +@import 'variables/_clay-color'; +@import 'variables/_custom-forms'; +@import 'variables/_time'; + +@import 'variables/_date-picker'; +@import 'variables/_dual-listbox'; +@import 'variables/_list-group'; +@import 'variables/_loaders'; +@import 'variables/_modals'; +@import 'variables/_multi-step-nav'; +@import 'variables/_navs'; + +@import 'variables/_icons'; + +@import 'variables/_menubar'; +@import 'variables/_navbar'; + +@import 'variables/_application-bar'; +@import 'variables/_management-bar'; +@import 'variables/_navigation-bar'; +@import 'variables/_pagination'; +@import 'variables/_panels'; +@import 'variables/_popovers'; +@import 'variables/_progress-bars'; +@import 'variables/_quick-action'; +@import 'variables/_sheets'; +@import 'variables/_side-navigation'; +@import 'variables/_sidebar'; +@import 'variables/_slideout'; +@import 'variables/_tables'; +@import 'variables/_tbar'; +@import 'variables/_timelines'; +@import 'variables/_toggle-switch'; +@import 'variables/_tooltip'; +@import 'variables/_type'; + +@import 'variables/_utilities'; diff --git a/packages/clay-css/src/scss/cadmin/atlas/_variables.scss b/packages/clay-css/src/scss/cadmin/atlas/_variables.scss new file mode 100644 index 0000000000..850c9a5e2b --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/_variables.scss @@ -0,0 +1,52 @@ +@import 'variables/_globals'; + +@import 'variables/_alerts'; +@import 'variables/_badges'; +@import 'variables/_breadcrumbs'; +@import 'variables/_buttons'; +@import 'variables/_labels'; +@import 'variables/_stickers'; + +@import 'variables/_cards'; +@import 'variables/_dropdowns'; + +@import 'variables/_drilldown'; +@import 'variables/_forms'; +@import 'variables/_links'; + +@import 'variables/_range'; +@import 'variables/_reorder'; + +@import 'variables/_clay-color'; +@import 'variables/_custom-forms'; +@import 'variables/_time'; + +@import 'variables/_date-picker'; +@import 'variables/_icons'; +@import 'variables/_list-group'; +@import 'variables/_loaders'; +@import 'variables/_modals'; +@import 'variables/_multi-step-nav'; +@import 'variables/_navs'; + +@import 'variables/_menubar'; +@import 'variables/_navbar'; + +@import 'variables/_application-bar'; +@import 'variables/_management-bar'; +@import 'variables/_navigation-bar'; +@import 'variables/_pagination'; +@import 'variables/_panels'; +@import 'variables/_popovers'; +@import 'variables/_progress-bars'; +@import 'variables/_quick-action'; +@import 'variables/_sheets'; +@import 'variables/_sidebar'; +@import 'variables/_tables'; +@import 'variables/_tbar'; +@import 'variables/_timelines'; +@import 'variables/_toggle-switch'; +@import 'variables/_tooltip'; +@import 'variables/_type'; + +@import 'variables/_utilities'; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_alerts.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_alerts.scss new file mode 100644 index 0000000000..1f6e5d4f42 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_alerts.scss @@ -0,0 +1,245 @@ +//// +/// @group alerts +//// + +$cadmin-alert-padding-x: 1rem !default; +$cadmin-alert-padding-y: 1.03125rem !default; + +// For top only border use: 2px 0 0 0 +$cadmin-alert-border-width: 0.0625rem !default; + +// @deprecated as of v2.12.0 use the Sass map `$cadmin-alert-close` instead + +$cadmin-alert-close-font-size: 1rem !default; + +// @deprecated as of v2.12.0 use the Sass map `$cadmin-alert-close` instead + +$cadmin-alert-close-opacity: 1 !default; + +/// @deprecated as of v2.12.0 use the Sass map `$cadmin-alert-close` instead + +$cadmin-alert-close-position-top: 0.6875rem !default; + +$cadmin-alert-close: () !default; +$cadmin-alert-close: map-deep-merge( + ( + opacity: $cadmin-alert-close-opacity, + disabled: ( + color: inherit, + ), + ), + $cadmin-alert-close +); + +$cadmin-alert-font-size: 0.875rem !default; // 14px + +$cadmin-alert-lead-font-size: $cadmin-alert-font-size !default; +$cadmin-alert-lead-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-alert-link-decoration: underline !default; +$cadmin-alert-link-hover-decoration: none !default; +$cadmin-alert-link-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-alert-indicator-font-size: inherit !default; + +$cadmin-alert-title: () !default; +$cadmin-alert-title: map-deep-merge( + ( + font-size: 0.875rem, + margin-bottom: 0.25rem, + margin-top: 0, + ), + $cadmin-alert-title +); + +$cadmin-alert-subtitle: () !default; +$cadmin-alert-subtitle: map-deep-merge( + ( + font-size: 0.75rem, + font-weight: $cadmin-font-weight-normal, + ), + $cadmin-alert-subtitle +); + +$cadmin-alert-footer: () !default; +$cadmin-alert-footer: map-deep-merge( + ( + margin-top: 1rem, + ), + $cadmin-alert-footer +); + +// Alert Fluid + +$cadmin-alert-fluid-container: () !default; +$cadmin-alert-fluid-container: map-merge( + ( + padding-bottom: 1.0625rem, + padding-top: 1.0625rem, + ), + $cadmin-alert-fluid-container +); + +// Alert Notification + +$cadmin-alert-notifications-box-shadow: 0 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.3) !default; + +$cadmin-alert-notification: () !default; +$cadmin-alert-notification: map-merge( + ( + box-shadow: $cadmin-alert-notifications-box-shadow, + padding-bottom: 1rem, + padding-top: 1rem, + ), + $cadmin-alert-notification +); + +// Alert Autofit Row + +$cadmin-alert-autofit-row: () !default; +$cadmin-alert-autofit-row: map-deep-merge( + ( + margin-left: -0.25rem, + margin-right: -0.25rem, + autofit-col: ( + padding-left: 0.25rem, + padding-right: 0.25rem, + ), + ), + $cadmin-alert-autofit-row +); + +// Alert Variants + +$cadmin-alert-primary-color: $cadmin-primary !default; +$cadmin-alert-primary-bg: $cadmin-primary-l3 !default; +$cadmin-alert-primary-border-color: $cadmin-primary-l1 !default; +$cadmin-alert-primary-close-color: $cadmin-alert-primary-color !default; +$cadmin-alert-primary-close-hover-color: $cadmin-alert-primary-color !default; +$cadmin-alert-primary-lead-color: $cadmin-alert-primary-color !default; +$cadmin-alert-primary-link-color: $cadmin-link-color !default; +$cadmin-alert-primary-btn: () !default; +$cadmin-alert-primary-btn: map-deep-merge( + ( + border-color: $cadmin-primary-l1, + hover-border-color: $cadmin-primary, + ), + $cadmin-alert-primary-btn +); + +$cadmin-alert-secondary-color: $cadmin-secondary !default; +$cadmin-alert-secondary-bg: $cadmin-secondary-l3 !default; +$cadmin-alert-secondary-border-color: $cadmin-secondary-l1 !default; +$cadmin-alert-secondary-close-color: $cadmin-alert-secondary-color !default; +$cadmin-alert-secondary-close-hover-color: $cadmin-alert-secondary-color !default; +$cadmin-alert-secondary-lead-color: $cadmin-alert-secondary-color !default; +$cadmin-alert-secondary-link-color: $cadmin-link-color !default; +$cadmin-alert-secondary-btn: () !default; +$cadmin-alert-secondary-btn: map-deep-merge( + ( + border-color: $cadmin-secondary-l1, + hover-border-color: $cadmin-secondary, + ), + $cadmin-alert-secondary-btn +); + +$cadmin-alert-success-color: $cadmin-success !default; +$cadmin-alert-success-bg: $cadmin-success-l2 !default; +$cadmin-alert-success-border-color: $cadmin-success-l1 !default; +$cadmin-alert-success-close-color: $cadmin-alert-success-color !default; +$cadmin-alert-success-close-hover-color: $cadmin-alert-success-color !default; +$cadmin-alert-success-lead-color: $cadmin-alert-success-color !default; +$cadmin-alert-success-link-color: $cadmin-link-color !default; +$cadmin-alert-success-btn: () !default; +$cadmin-alert-success-btn: map-deep-merge( + ( + border-color: $cadmin-success-l1, + hover-border-color: $cadmin-success, + ), + $cadmin-alert-success-btn +); + +$cadmin-alert-info-color: $cadmin-info !default; +$cadmin-alert-info-bg: $cadmin-info-l2 !default; +$cadmin-alert-info-border-color: $cadmin-info-l1 !default; +$cadmin-alert-info-close-color: $cadmin-alert-info-color !default; +$cadmin-alert-info-close-hover-color: $cadmin-alert-info-color !default; +$cadmin-alert-info-lead-color: $cadmin-alert-info-color !default; +$cadmin-alert-info-link-color: $cadmin-link-color !default; +$cadmin-alert-info-btn: () !default; +$cadmin-alert-info-btn: map-deep-merge( + ( + border-color: $cadmin-info-l1, + hover-border-color: $cadmin-info, + ), + $cadmin-alert-info-btn +); + +$cadmin-alert-warning-color: $cadmin-warning !default; +$cadmin-alert-warning-bg: $cadmin-warning-l2 !default; +$cadmin-alert-warning-border-color: $cadmin-warning-l1 !default; +$cadmin-alert-warning-close-color: $cadmin-alert-warning-color !default; +$cadmin-alert-warning-close-hover-color: $cadmin-alert-warning-color !default; +$cadmin-alert-warning-lead-color: $cadmin-alert-warning-color !default; +$cadmin-alert-warning-link-color: $cadmin-link-color !default; +$cadmin-alert-warning-btn: () !default; +$cadmin-alert-warning-btn: map-deep-merge( + ( + border-color: $cadmin-warning-l1, + hover-border-color: $cadmin-warning, + ), + $cadmin-alert-warning-btn +); + +$cadmin-alert-danger-color: $cadmin-danger !default; +$cadmin-alert-danger-bg: $cadmin-danger-l2 !default; +$cadmin-alert-danger-border-color: $cadmin-danger-l1 !default; +$cadmin-alert-danger-close-color: $cadmin-alert-danger-color !default; +$cadmin-alert-danger-close-hover-color: $cadmin-alert-danger-color !default; +$cadmin-alert-danger-lead-color: $cadmin-alert-danger-color !default; +$cadmin-alert-danger-link-color: $cadmin-link-color !default; +$cadmin-alert-danger-btn: () !default; +$cadmin-alert-danger-btn: map-deep-merge( + ( + border-color: $cadmin-danger-l1, + hover-border-color: $cadmin-danger, + ), + $cadmin-alert-danger-btn +); + +$cadmin-alert-light-color: $cadmin-dark !default; +$cadmin-alert-light-bg: $cadmin-light-l2 !default; +$cadmin-alert-light-border-color: $cadmin-light-l1 !default; +$cadmin-alert-light-close-color: $cadmin-alert-light-color !default; +$cadmin-alert-light-close-hover-color: $cadmin-alert-light-color !default; +$cadmin-alert-light-lead-color: $cadmin-alert-light-color !default; +$cadmin-alert-light-link-color: $cadmin-link-color !default; +$cadmin-alert-light-btn: () !default; +$cadmin-alert-light-btn: map-deep-merge( + ( + border-color: $cadmin-dark-l1, + color: $cadmin-dark, + hover-bg: $cadmin-dark, + hover-border-color: $cadmin-dark, + hover-color: $cadmin-white, + active-bg: darken($cadmin-dark, 5%), + active-border-color: darken($cadmin-dark, 5%), + ), + $cadmin-alert-light-btn +); + +$cadmin-alert-dark-color: $cadmin-light !default; +$cadmin-alert-dark-bg: $cadmin-dark-l2 !default; +$cadmin-alert-dark-border-color: $cadmin-dark-l1 !default; +$cadmin-alert-dark-close-color: $cadmin-alert-dark-color !default; +$cadmin-alert-dark-close-hover-color: $cadmin-alert-dark-color !default; +$cadmin-alert-dark-lead-color: $cadmin-alert-dark-color !default; +$cadmin-alert-dark-link-color: $cadmin-alert-dark-color !default; +$cadmin-alert-dark-btn: () !default; +$cadmin-alert-dark-btn: map-deep-merge( + ( + border-color: $cadmin-dark-l1, + hover-border-color: $cadmin-dark, + ), + $cadmin-alert-dark-btn +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_application-bar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_application-bar.scss new file mode 100644 index 0000000000..cd51a5969a --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_application-bar.scss @@ -0,0 +1,33 @@ +$cadmin-application-bar-size: () !default; +$cadmin-application-bar-size: map-deep-merge( + ( + title-font-size: 1.125rem, + ), + $cadmin-application-bar-size +); + +$cadmin-application-bar-base: () !default; +$cadmin-application-bar-base: map-deep-merge( + ( + link-border-radius: $cadmin-border-radius, + link-outline: 0, + link-transition: box-shadow 0.15s ease-in-out, + link-focus-box-shadow: $cadmin-btn-focus-box-shadow, + link-disabled-box-shadow: none, + ), + $cadmin-application-bar-base +); + +$cadmin-application-bar-dark: () !default; +$cadmin-application-bar-dark: map-deep-merge( + ( + bg: $cadmin-dark-l1, + link-font-weight: $cadmin-font-weight-semi-bold, + link-hover-bg: rgba(255, 255, 255, 0.03), + link-focus-bg: rgba(255, 255, 255, 0.03), + link-active-bg: rgba(255, 255, 255, 0.06), + link-disabled-bg: transparent, + link-disabled-opacity: 0.5, + ), + $cadmin-application-bar-dark +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_badges.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_badges.scss new file mode 100644 index 0000000000..288c8dce24 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_badges.scss @@ -0,0 +1,55 @@ +$cadmin-badge-border-radius: 10rem !default; +$cadmin-badge-font-size: 0.625rem !default; // 10px +$cadmin-badge-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-badge-line-height: 1.1 !default; +$cadmin-badge-padding-x: 0.25rem !default; // 4px +$cadmin-badge-padding-y: 0.09375rem !default; // 1.5px + +$cadmin-badge-item-spacer-x: 0.85714em !default; + +$cadmin-badge-pill-border-radius: $cadmin-border-radius !default; +$cadmin-badge-pill-padding-x: 0.25rem !default; // 4px + +// Badge Variants + +$cadmin-badge-primary-color: $cadmin-white !default; +$cadmin-badge-primary-bg: $cadmin-primary !default; +$cadmin-badge-primary-hover-bg: $cadmin-badge-primary-bg !default; +$cadmin-badge-primary-hover-color: $cadmin-badge-primary-color !default; + +$cadmin-badge-secondary-color: $cadmin-gray-900 !default; +$cadmin-badge-secondary-bg: $cadmin-secondary-l3 !default; +$cadmin-badge-secondary-hover-bg: $cadmin-badge-secondary-bg !default; +$cadmin-badge-secondary-hover-color: $cadmin-badge-secondary-color !default; +$cadmin-badge-secondary-link-color: $cadmin-badge-secondary-color !default; + +$cadmin-badge-success-color: $cadmin-white !default; +$cadmin-badge-success-bg: $cadmin-success !default; +$cadmin-badge-success-hover-bg: $cadmin-badge-success-bg !default; +$cadmin-badge-success-hover-color: $cadmin-badge-success-color !default; + +$cadmin-badge-info-color: $cadmin-white !default; +$cadmin-badge-info-bg: $cadmin-info !default; +$cadmin-badge-info-hover-bg: $cadmin-badge-info-bg !default; +$cadmin-badge-info-hover-color: $cadmin-badge-info-color !default; + +$cadmin-badge-warning-color: $cadmin-white !default; +$cadmin-badge-warning-bg: $cadmin-warning !default; +$cadmin-badge-warning-hover-bg: $cadmin-badge-warning-bg !default; +$cadmin-badge-warning-hover-color: $cadmin-badge-warning-color !default; + +$cadmin-badge-danger-color: $cadmin-white !default; +$cadmin-badge-danger-bg: $cadmin-danger !default; +$cadmin-badge-danger-hover-bg: $cadmin-badge-danger-bg !default; +$cadmin-badge-danger-hover-color: $cadmin-badge-danger-color !default; + +$cadmin-badge-light-color: $cadmin-gray-900 !default; +$cadmin-badge-light-bg: $cadmin-light !default; +$cadmin-badge-light-hover-bg: $cadmin-badge-light-bg !default; +$cadmin-badge-light-hover-color: $cadmin-badge-light-color !default; +$cadmin-badge-light-link-color: $cadmin-badge-light-color !default; + +$cadmin-badge-dark-color: $cadmin-white !default; +$cadmin-badge-dark-bg: $cadmin-dark !default; +$cadmin-badge-dark-hover-bg: $cadmin-badge-dark-bg !default; +$cadmin-badge-dark-hover-color: $cadmin-badge-dark-color !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_breadcrumbs.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_breadcrumbs.scss new file mode 100644 index 0000000000..e99f8759ba --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_breadcrumbs.scss @@ -0,0 +1,25 @@ +$cadmin-breadcrumb-bg: transparent !default; +$cadmin-breadcrumb-font-size: 0.875rem !default; // 14px +$cadmin-breadcrumb-margin-bottom: 0 !default; +$cadmin-breadcrumb-padding-x: 0.125rem !default; // 2px +$cadmin-breadcrumb-padding-y: 0.59375rem !default; + +$cadmin-breadcrumb-link-color: $cadmin-gray-600 !default; +$cadmin-breadcrumb-link-hover-color: $cadmin-breadcrumb-link-color !default; + +$cadmin-breadcrumb-link: () !default; +$cadmin-breadcrumb-link: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-breadcrumb-link +); + +$cadmin-breadcrumb-active-color: $cadmin-gray-900 !default; +$cadmin-breadcrumb-active-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-breadcrumb-divider-color: $cadmin-breadcrumb-link-color !default; +$cadmin-breadcrumb-divider-svg-icon-height: 0.6em !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_buttons.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_buttons.scss new file mode 100644 index 0000000000..26e9c948c8 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_buttons.scss @@ -0,0 +1,401 @@ +$cadmin-btn-box-shadow: none !default; + +$cadmin-btn-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-btn-padding-x: 0.9375rem !default; // 15px +$cadmin-btn-padding-y: 0.4375rem !default; // 7px +$cadmin-btn-transition: color 0.15s ease-in-out, + background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out !default; + +$cadmin-btn-focus-box-shadow: $cadmin-component-focus-box-shadow !default; + +$cadmin-btn-disabled-opacity: 0.4 !default; + +$cadmin-btn-link-disabled-color: $cadmin-link-color !default; + +$cadmin-btn-active-box-shadow: none !default; + +$cadmin-btn-inline-item-font-size: 1rem !default; // 16px + +// Button Sizes + +$cadmin-btn-border-radius-lg: $cadmin-border-radius !default; +$cadmin-btn-font-size-lg: $cadmin-font-size-lg !default; // 18px +$cadmin-btn-padding-x-lg: 1.5rem !default; // 24px +$cadmin-btn-padding-y-lg: 0.59375rem !default; // 9.5px +$cadmin-btn-inline-item-font-size-lg: $cadmin-font-size-lg !default; // 18px + +$cadmin-btn-font-size-sm: $cadmin-font-size-sm !default; // 14px +$cadmin-btn-line-height-sm: 1.15 !default; +$cadmin-btn-padding-x-sm: 0.75rem !default; // 12px +$cadmin-btn-padding-y-sm: 0.4375rem !default; // 7px + +// Button Monospaced + +$cadmin-btn-monospaced-padding-y: 0.25rem !default; // 4px +$cadmin-btn-monospaced-size: 2.5rem !default; // 40px + +$cadmin-btn-monospaced-padding-x-sm: null !default; +$cadmin-btn-monospaced-padding-y-sm: 0.1875rem !default; // 3px +$cadmin-btn-monospaced-size-sm: 2rem !default; // 32px + +$cadmin-btn-monospaced-padding-y-lg: 0.375rem !default; // 6px + +// Button Group + +$cadmin-btn-group-item-margin-right: 1rem !default; + +// Button Variants + +$cadmin-btn-primary: () !default; +$cadmin-btn-primary: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-primary-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-primary-d1), + ), + focus-bg: $cadmin-primary-d1, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-primary-d1), + ), + disabled-bg: $cadmin-primary, + active-bg: $cadmin-primary-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-primary +); + +$cadmin-btn-secondary: () !default; +$cadmin-btn-secondary: map-deep-merge( + ( + bg: $cadmin-white, + background-image: clay-enable-gradients($cadmin-white), + border-color: $cadmin-secondary-l2, + box-shadow: $cadmin-c-unset, + color: $cadmin-secondary, + hover-bg: $cadmin-gray-100, + hover-border-color: $cadmin-secondary-l2, + hover-color: $cadmin-gray-900, + hover: ( + background-image: clay-enable-gradients($cadmin-gray-100), + ), + focus-bg: $cadmin-gray-100, + focus-border-color: $cadmin-secondary-l2, + focus-box-shadow: $cadmin-c-unset, + focus-color: $cadmin-gray-900, + focus: ( + background-image: clay-enable-gradients($cadmin-gray-100), + ), + disabled-bg: $cadmin-white, + disabled-border-color: $cadmin-secondary-l2, + disabled-color: $cadmin-secondary, + disabled: ( + background-image: clay-enable-gradients($cadmin-white), + ), + active-border-color: $cadmin-secondary-l2, + active-color: $cadmin-gray-900, + active-bg: $cadmin-gray-200, + active-focus-box-shadow: $cadmin-c-unset, + loading-animation: null, + ), + $cadmin-btn-secondary +); + +$cadmin-btn-success: () !default; +$cadmin-btn-success: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-success-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-success-d1), + ), + focus-bg: $cadmin-success-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-success-d1), + ), + disabled-bg: $cadmin-success, + active-bg: $cadmin-success-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-success +); + +$cadmin-btn-info: () !default; +$cadmin-btn-info: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-info-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-info-d1), + ), + focus-bg: $cadmin-info-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-info-d1), + ), + disabled-bg: $cadmin-info, + active-bg: $cadmin-info-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-info +); + +$cadmin-btn-warning: () !default; +$cadmin-btn-warning: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-warning-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-warning-d1), + ), + focus-bg: $cadmin-warning-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-warning-d1), + ), + disabled-bg: $cadmin-warning, + active-bg: $cadmin-warning-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + loading-animation: 'loading-animation-light', + ), + $cadmin-btn-warning +); + +$cadmin-btn-danger: () !default; +$cadmin-btn-danger: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-danger-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-danger-d1), + ), + focus-bg: $cadmin-danger-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-danger-d1), + ), + disabled-bg: $cadmin-danger, + active-bg: $cadmin-danger-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-danger +); + +$cadmin-btn-light: () !default; +$cadmin-btn-light: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + color: $cadmin-gray-900, + hover-bg: $cadmin-light-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-light-d1), + ), + focus-bg: $cadmin-light-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-light-d1), + ), + disabled-bg: $cadmin-light, + active-bg: $cadmin-light-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-light +); + +$cadmin-btn-dark: () !default; +$cadmin-btn-dark: map-deep-merge( + ( + box-shadow: $cadmin-c-unset, + hover-bg: $cadmin-dark-d1, + hover-border-color: transparent, + hover: ( + background-image: clay-enable-gradients($cadmin-dark-d1), + ), + focus-bg: $cadmin-dark-d1, + focus-border-color: transparent, + focus-box-shadow: $cadmin-c-unset, + focus: ( + background-image: clay-enable-gradients($cadmin-dark-d1), + ), + disabled-bg: $cadmin-dark, + active-bg: $cadmin-dark-d2, + active-border-color: transparent, + active-focus-box-shadow: $cadmin-c-unset, + ), + $cadmin-btn-dark +); + +// Button Outline Variant + +$cadmin-btn-outline-primary: () !default; +$cadmin-btn-outline-primary: map-deep-merge( + ( + hover-bg: $cadmin-primary-l3, + hover-color: $cadmin-primary, + focus-bg: $cadmin-primary-l3, + focus-box-shadow: map-get($cadmin-btn-primary, focus-box-shadow), + focus-color: $cadmin-primary, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-primary, bg), + disabled-color: map-get($cadmin-btn-primary, bg), + active-bg: lighten(desaturate($cadmin-primary, 42.05), 41.76), + active-color: $cadmin-primary, + active-box-shadow: map-get($cadmin-btn-primary, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-primary, active-focus-box-shadow), + ), + $cadmin-btn-outline-primary +); + +$cadmin-btn-outline-secondary: () !default; +$cadmin-btn-outline-secondary: map-deep-merge( + ( + bg: null, + border-color: $cadmin-secondary-l2, + hover-bg: rgba($cadmin-gray-900, 0.03), + hover-border-color: transparent, + hover-color: map-get($cadmin-btn-secondary, hover-color), + focus-bg: rgba($cadmin-gray-900, 0.03), + focus-border-color: transparent, + focus-box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow), + focus-color: map-get($cadmin-btn-secondary, focus-color), + disabled-bg: transparent, + disabled-border-color: $cadmin-secondary, + disabled-color: $cadmin-secondary, + active-bg: rgba($cadmin-gray-900, 0.06), + active-border-color: transparent, + active-box-shadow: map-get($cadmin-btn-secondary, active-box-shadow), + active-color: map-get($cadmin-btn-secondary, active-color), + active-focus-box-shadow: + map-get($cadmin-btn-secondary, active-focus-box-shadow), + ), + $cadmin-btn-outline-secondary +); + +$cadmin-btn-outline-info: () !default; +$cadmin-btn-outline-info: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-info, hover-bg), + focus-bg: map-get($cadmin-btn-info, hover-bg), + focus-box-shadow: map-get($cadmin-btn-info, focus-box-shadow), + focus-color: $cadmin-white, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-info, bg), + disabled-color: map-get($cadmin-btn-info, bg), + active-bg: map-get($cadmin-btn-info, active-bg), + active-box-shadow: map-get($cadmin-btn-info, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-info, active-focus-box-shadow), + ), + $cadmin-btn-outline-info +); + +$cadmin-btn-outline-success: () !default; +$cadmin-btn-outline-success: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-success, hover-bg), + focus-bg: map-get($cadmin-btn-success, hover-bg), + focus-box-shadow: map-get($cadmin-btn-success, focus-box-shadow), + focus-color: $cadmin-white, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-success, bg), + disabled-color: map-get($cadmin-btn-success, bg), + active-bg: map-get($cadmin-btn-success, active-bg), + active-box-shadow: map-get($cadmin-btn-success, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-success, active-focus-box-shadow), + ), + $cadmin-btn-outline-success +); + +$cadmin-btn-outline-warning: () !default; +$cadmin-btn-outline-warning: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-warning, hover-bg), + focus-bg: map-get($cadmin-btn-warning, hover-bg), + focus-box-shadow: map-get($cadmin-btn-warning, focus-box-shadow), + focus-color: $cadmin-white, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-warning, bg), + disabled-color: map-get($cadmin-btn-warning, bg), + active-bg: map-get($cadmin-btn-warning, active-bg), + active-box-shadow: map-get($cadmin-btn-warning, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-warning, active-focus-box-shadow), + ), + $cadmin-btn-outline-warning +); + +$cadmin-btn-outline-danger: () !default; +$cadmin-btn-outline-danger: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-danger, hover-bg), + focus-bg: map-get($cadmin-btn-danger, hover-bg), + focus-box-shadow: map-get($cadmin-btn-danger, focus-box-shadow), + focus-color: $cadmin-white, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-danger, bg), + disabled-color: map-get($cadmin-btn-danger, bg), + active-bg: map-get($cadmin-btn-danger, active-bg), + active-box-shadow: map-get($cadmin-btn-danger, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-danger, active-focus-box-shadow), + ), + $cadmin-btn-outline-danger +); + +$cadmin-btn-outline-light: () !default; +$cadmin-btn-outline-light: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-light, hover-bg), + focus-bg: map-get($cadmin-btn-light, hover-bg), + focus-box-shadow: map-get($cadmin-btn-light, focus-box-shadow), + focus-color: $cadmin-gray-900, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-light, bg), + disabled-color: map-get($cadmin-btn-light, bg), + active-bg: map-get($cadmin-btn-light, active-bg), + active-box-shadow: map-get($cadmin-btn-light, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-light, active-focus-box-shadow), + ), + $cadmin-btn-outline-light +); + +$cadmin-btn-outline-dark: () !default; +$cadmin-btn-outline-dark: map-deep-merge( + ( + hover-bg: map-get($cadmin-btn-dark, hover-bg), + focus-bg: map-get($cadmin-btn-dark, hover-bg), + focus-box-shadow: map-get($cadmin-btn-dark, focus-box-shadow), + focus-color: $cadmin-white, + disabled-bg: transparent, + disabled-border-color: map-get($cadmin-btn-dark, bg), + disabled-color: map-get($cadmin-btn-dark, bg), + active-bg: map-get($cadmin-btn-dark, active-bg), + active-box-shadow: map-get($cadmin-btn-dark, active-box-shadow), + active-focus-box-shadow: + map-get($cadmin-btn-dark, active-focus-box-shadow), + ), + $cadmin-btn-outline-dark +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_cards.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_cards.scss new file mode 100644 index 0000000000..51bf265452 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_cards.scss @@ -0,0 +1,159 @@ +$cadmin-card-border-radius: $cadmin-border-radius !default; +$cadmin-card-border-width: 0 !default; +$cadmin-card-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !default; + +$cadmin-card-body-padding-bottom: 1rem !default; +$cadmin-card-body-padding-left: 1rem !default; +$cadmin-card-body-padding-right: 1rem !default; +$cadmin-card-body-padding-top: 1rem !default; + +$cadmin-card-inner-border-radius: if( + $cadmin-card-border-width > 0, + calc(#{$cadmin-card-border-radius} - #{$cadmin-card-border-width}), + $cadmin-card-border-radius +) !default; + +// Card Title + +$cadmin-card-title: () !default; +$cadmin-card-title: map-deep-merge( + ( + color: $cadmin-gray-900, + font-size: 0.875rem, + ), + $cadmin-card-title +); + +$cadmin-card-title-link: () !default; +$cadmin-card-title-link: map-deep-merge( + ( + hover-color: map-get($cadmin-card-title, color), + ), + $cadmin-card-title-link +); + +// Card Subtitle + +$cadmin-card-subtitle: () !default; +$cadmin-card-subtitle: map-deep-merge( + ( + font-weight: $cadmin-font-weight-normal, + ), + $cadmin-card-subtitle +); + +$cadmin-card-subtitle-link: () !default; +$cadmin-card-subtitle-link: map-deep-merge( + ( + hover-color: $cadmin-gray-600, + ), + $cadmin-card-subtitle-link +); + +// Card Link + +$cadmin-card-link: () !default; +$cadmin-card-link: map-deep-merge( + ( + color: $cadmin-gray-600, + font-size: 0.875rem, + hover-color: $cadmin-gray-600, + hover-text-decoration: underline, + ), + $cadmin-card-link +); + +$cadmin-checkbox-left-card-padding: 50px !default; + +$cadmin-form-check-card-checked-box-shadow: 0 0 0 2px + lighten($cadmin-component-active-bg, 22.94) !default; + +// Card Interactive + +$cadmin-card-interactive: () !default; +$cadmin-card-interactive: map-deep-merge( + ( + hover-bg: #f7f8f9, + focus-border-color: null, + focus-box-shadow: 0 0 0 2px #FFF#{','} 0 0 0 4px #719aff, + active-bg: #f1f2f5, + ), + $cadmin-card-interactive +); + +// Card Interactive Secondary + +$cadmin-card-interactive-secondary: () !default; +$cadmin-card-interactive-secondary: map-deep-merge( + ( + hover-border-color: transparent, + hover-box-shadow: 0 0 0 2px #719aff, + focus-border-color: transparent, + focus-box-shadow: 0 0 0 2px #719aff, + ), + $cadmin-card-interactive-secondary +); + +// Card Type Asset + +$cadmin-card-type-asset: () !default; +$cadmin-card-type-asset: map-deep-merge( + ( + aspect-ratio-border-color: $cadmin-gray-300, + card-body-padding-top: 0.75rem, + ), + $cadmin-card-type-asset +); + +$cadmin-image-card: () !default; +$cadmin-image-card: map-deep-merge( + ( + aspect-ratio-checkered-fg: $cadmin-gray-300, + ), + $cadmin-image-card +); + +$cadmin-file-card: () !default; +$cadmin-file-card: map-deep-merge( + ( + asset-icon-color: $cadmin-gray-400, + ), + $cadmin-file-card +); + +// Card Type Template + +$cadmin-card-type-template-after-highlight: () !default; +$cadmin-card-type-template-after-highlight: map-deep-merge( + ( + bottom: -1px, + left: -1px, + right: -1px, + ), + $cadmin-card-type-template-after-highlight +); + +$cadmin-card-type-template-aspect-ratio: () !default; +$cadmin-card-type-template-aspect-ratio: map-deep-merge( + ( + bg-image: none, + ), + $cadmin-card-type-template-aspect-ratio +); + +$cadmin-card-type-template-aspect-ratio-item: () !default; +$cadmin-card-type-template-aspect-ratio-item: map-deep-merge( + ( + color: $cadmin-gray-600, + ), + $cadmin-card-type-template-aspect-ratio-item +); + +$cadmin-card-type-template: () !default; +$cadmin-card-type-template: map-deep-merge( + ( + border-width: 1px, + box-shadow: none, + ), + $cadmin-card-type-template +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_clay-color.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_clay-color.scss new file mode 100644 index 0000000000..5501089f9d --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_clay-color.scss @@ -0,0 +1,38 @@ +// Clay Color Dropdown Menu Close + +$cadmin-clay-color-dropdown-menu-close: () !default; +$cadmin-clay-color-dropdown-menu-close: map-deep-merge( + ( + color: $cadmin-gray-600, + font-size: 1rem, + opacity: 1, + hover-bg: rgba($cadmin-gray-900, 0.03), + focus-bg: rgba($cadmin-gray-900, 0.03), + active-bg: rgba($cadmin-gray-900, 0.06), + disabled-bg: transparent, + ), + $cadmin-clay-color-dropdown-menu-close +); + +// Clay Color Dropdown Menu Component Action + +$cadmin-clay-color-dropdown-menu-component-action: () !default; +$cadmin-clay-color-dropdown-menu-component-action: map-deep-merge( + ( + hover-bg: null, + hover-color: null, + focus-box-shadow: null, + focus-color: null, + ), + $cadmin-clay-color-dropdown-menu-component-action +); + +// Clay Color Pointer + +$cadmin-clay-color-pointer: () !default; +$cadmin-clay-color-pointer: map-deep-merge( + ( + focus-box-shadow: 0 0 0 0.125rem $cadmin-primary-l1, + ), + $cadmin-clay-color-pointer +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_custom-forms.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_custom-forms.scss new file mode 100644 index 0000000000..31c01ced08 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_custom-forms.scss @@ -0,0 +1,138 @@ +//// +/// @group customForms +//// + +$cadmin-custom-control-indicator-bg: $cadmin-white !default; +$cadmin-custom-control-indicator-border-color: $cadmin-gray-400 !default; +$cadmin-custom-control-indicator-border-style: solid !default; +$cadmin-custom-control-indicator-border-width: 0.0625rem !default; // 1px +$cadmin-custom-control-indicator-box-shadow: none !default; +$cadmin-custom-control-indicator-position-top: 0.125rem !default; + +$cadmin-custom-control-indicator-focus-border-color: $cadmin-custom-control-indicator-border-color !default; +$cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-shadow !default; + +$cadmin-custom-control-indicator-active-bg: $cadmin-white !default; +$cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-indicator-border-color !default; +$cadmin-custom-control-indicator-active-box-shadow: inset 0 0 0 1px + rgba(0, 0, 0, 0.1) !default; + +$cadmin-custom-control-indicator-disabled-bg: $cadmin-input-disabled-bg !default; +$cadmin-custom-control-indicator-disabled-border-color: $cadmin-input-disabled-border-color !default; + +// Custom Control Indicator Checked + +// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-bg` instead + +$cadmin-custom-control-indicator-active-checked-bg: $cadmin-component-active-bg !default; +$cadmin-custom-control-indicator-checked-active-bg: $cadmin-custom-control-indicator-active-checked-bg !default; + +// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-active-border-color` instead + +$cadmin-custom-control-indicator-active-checked-border-color: $cadmin-custom-control-indicator-checked-active-bg !default; +$cadmin-custom-control-indicator-checked-active-border-color: $cadmin-custom-control-indicator-active-checked-border-color !default; + +$cadmin-custom-control-indicator-checked-border-color: $cadmin-custom-control-indicator-checked-active-bg !default; + +$cadmin-custom-control-indicator-checked-color: $cadmin-component-active-color !default; + +// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-bg` instead + +$cadmin-custom-control-indicator-disabled-checked-bg: lighten( + $cadmin-component-active-bg, + 32.94 +) !default; +$cadmin-custom-control-indicator-checked-disabled-bg: $cadmin-custom-control-indicator-disabled-checked-bg !default; + +// @deprecated as of v2.2.1 use `$cadmin-custom-control-indicator-checked-disabled-border-color` instead + +$cadmin-custom-control-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-bg !default; +$cadmin-custom-control-indicator-checked-disabled-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default; + +// Custom Control Indicator Indeterminate + +$cadmin-custom-control-indicator-indeterminate-border-color: $cadmin-custom-control-indicator-checked-active-bg !default; + +// Custom Control + +// @deprecated after of v3.5.0 use the Sass map `$cadmin-custom-control` instead + +$cadmin-custom-control-margin-bottom: 1rem !default; + +$cadmin-custom-control: () !default; +$cadmin-custom-control: map-deep-merge( + ( + line-height: 1, + ), + $cadmin-custom-control +); + +// Custom Control Description + +// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead + +$cadmin-custom-control-description-font-size: $cadmin-input-label-font-size !default; // 13px + +// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label` instead + +$cadmin-custom-control-description-font-weight: $cadmin-font-weight-normal !default; + +/// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label-disabled-color` instead. This variable is not used in Clay CSS. + +$cadmin-custom-control-description-disabled-color: $cadmin-input-label-disabled-color !default; +$cadmin-custom-control-label-disabled-color: $cadmin-custom-control-description-disabled-color !default; + +// @deprecated as of v2.19.0 use the Sass map `$cadmin-custom-control-label-text-small` instead + +$cadmin-custom-control-description-small-font-size: 100% !default; + +$cadmin-custom-control-label: () !default; +$cadmin-custom-control-label: map-deep-merge( + ( + font-size: $cadmin-custom-control-description-font-size, + font-weight: $cadmin-custom-control-description-font-weight, + ), + $cadmin-custom-control-label +); + +$cadmin-custom-control-label-text-small: () !default; +$cadmin-custom-control-label-text-small: map-deep-merge( + ( + font-size: $cadmin-custom-control-description-small-font-size, + ), + $cadmin-custom-control-label-text-small +); + +// Custom Checkbox + +$cadmin-custom-checkbox-indicator-icon-checked: clay-icon( + check-small, + $cadmin-white +) !default; +$cadmin-custom-checkbox-indicator-icon-checked-bg-size: 100% !default; +$cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 100% !default; + +$cadmin-custom-checkbox-indicator-indeterminate-bg: $cadmin-component-active-bg !default; +$cadmin-custom-checkbox-indicator-indeterminate-color: $cadmin-custom-control-indicator-checked-color !default; + +$cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon( + hr, + $cadmin-custom-checkbox-indicator-indeterminate-color +) !default; + +$cadmin-custom-checkbox-indicator-border-radius: 0.125rem !default; // 2px + +// Custom Radio + +$cadmin-custom-radio-indicator-icon-checked: clay-icon( + circle, + $cadmin-white +) !default; +$cadmin-custom-radio-indicator-icon-checked-bg-size: 50% !default; + +$cadmin-custom-radio-indicator-disabled-border-color: $cadmin-custom-control-indicator-disabled-bg !default; + +// @deprecated as of v2.2.1 use `$cadmin-custom-radio-indicator-checked-disabled-border-color` instead + +$cadmin-custom-radio-indicator-disabled-checked-border-color: $cadmin-custom-control-indicator-disabled-checked-border-color !default; +$cadmin-custom-radio-indicator-checked-disabled-border-color: $cadmin-custom-radio-indicator-disabled-checked-border-color !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_date-picker.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_date-picker.scss new file mode 100644 index 0000000000..d4db337bc2 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_date-picker.scss @@ -0,0 +1,82 @@ +// Date Picker Dropdown Menu + +$cadmin-date-picker-dropdown-menu: () !default; +$cadmin-date-picker-dropdown-menu: map-deep-merge( + ( + max-width: 368px, + ), + $cadmin-date-picker-dropdown-menu +); + +// Date Picker Nav + +$cadmin-date-picker-nav-btn: () !default; +$cadmin-date-picker-nav-btn: map-deep-merge( + ( + hover-color: $cadmin-gray-900, + focus-bg: $cadmin-gray-200, + focus-color: $cadmin-gray-900, + active-bg: $cadmin-gray-200, + disabled-color: $cadmin-gray-500, + disabled-opacity: null, + ), + $cadmin-date-picker-nav-btn +); + +$cadmin-date-picker-nav-select: () !default; +$cadmin-date-picker-nav-select: map-deep-merge( + ( + bg: transparent, + border-color: transparent, + color: $cadmin-secondary, + font-size: $cadmin-font-size-sm, + font-weight: $cadmin-font-weight-semi-bold, + height: $cadmin-input-height-sm, + padding-bottom: 0, + padding-left: 0.5rem, + padding-top: 0, + hover-bg: $cadmin-gray-200, + hover-color: $cadmin-gray-900, + focus-bg: $cadmin-gray-200, + focus-color: $cadmin-gray-900, + disabled-bg: transparent, + disabled-color: $cadmin-input-disabled-color, + ), + $cadmin-date-picker-nav-select +); + +// Date Picker Calendar Item + +$cadmin-date-picker-date: () !default; +$cadmin-date-picker-date: map-deep-merge( + ( + hover-color: $cadmin-gray-900, + focus-bg: $cadmin-gray-200, + focus-color: $cadmin-gray-900, + disabled-color: $cadmin-gray-500, + disabled-opacity: null, + ), + $cadmin-date-picker-date +); + +$cadmin-date-picker-previous-month-date: () !default; +$cadmin-date-picker-previous-month-date: map-deep-merge( + ( + color: $cadmin-gray-500, + opacity: null, + focus-opacity: null, + active-opacity: null, + ), + $cadmin-date-picker-previous-month-date +); + +$cadmin-date-picker-next-month-date: () !default; +$cadmin-date-picker-next-month-date: map-deep-merge( + ( + color: $cadmin-gray-500, + opacity: null, + focus-opacity: null, + active-opacity: null, + ), + $cadmin-date-picker-next-month-date +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_drilldown.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_drilldown.scss new file mode 100644 index 0000000000..42907e5e09 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_drilldown.scss @@ -0,0 +1,15 @@ +$cadmin-drilldown-dropdown-item-indicator-start: () !default; +$cadmin-drilldown-dropdown-item-indicator-start: map-merge( + ( + top: 0.5rem, + ), + $cadmin-drilldown-dropdown-item-indicator-start +); + +$cadmin-drilldown-dropdown-item-indicator-end: () !default; +$cadmin-drilldown-dropdown-item-indicator-end: map-merge( + ( + top: 0.5rem, + ), + $cadmin-drilldown-dropdown-item-indicator-end +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_dropdowns.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_dropdowns.scss new file mode 100644 index 0000000000..54e66b578e --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_dropdowns.scss @@ -0,0 +1,100 @@ +$cadmin-dropdown-bg: $cadmin-white !default; +$cadmin-dropdown-border-color: $cadmin-gray-300 !default; +$cadmin-dropdown-border-width: 0 !default; +$cadmin-dropdown-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3) !default; +$cadmin-dropdown-font-size: 0.875rem !default; // 14px + +$cadmin-dropdown-padding-y: 0.375rem !default; // 6px +$cadmin-dropdown-min-height: 40px !default; +$cadmin-dropdown-min-width: 240px !default; +$cadmin-dropdown-max-width: 240px !default; +$cadmin-dropdown-spacer: 0.3125rem !default; // 5px + +$cadmin-dropdown-header-color: $cadmin-gray-900 !default; +$cadmin-dropdown-header-font-size: 0.875rem !default; // 14px +$cadmin-dropdown-header-margin-top: 0.625rem !default; // 10px + +$cadmin-dropdown-subheader-font-size: 0.75rem !default; // 12px +$cadmin-dropdown-subheader-margin-top: 0.625rem !default; // 10px + +$cadmin-dropdown-caption-color: $cadmin-gray-600 !default; + +$cadmin-dropdown-link-color: $cadmin-gray-600 !default; +$cadmin-dropdown-link-font-weight: $cadmin-font-weight-normal !default; +$cadmin-dropdown-link-hover-color: $cadmin-gray-900 !default; +$cadmin-dropdown-link-hover-bg: lighten( + $cadmin-component-active-bg, + 44.9 +) !default; +$cadmin-dropdown-link-active-color: $cadmin-dropdown-link-hover-color !default; +$cadmin-dropdown-link-active-bg: $cadmin-dropdown-link-hover-bg !default; +$cadmin-dropdown-link-active-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-dropdown-link-disabled-color: $cadmin-gray-500 !default; + +$cadmin-dropdown-item-padding-x: 1.25rem !default; // 20px +$cadmin-dropdown-item-padding-y: 0.5rem !default; // 8px + +// Weird box-shadow inset with border-radius render in IE https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12515080/ + +$cadmin-dropdown-item-base: () !default; +$cadmin-dropdown-item-base: map-deep-merge( + ( + font-size: inherit, + focus-box-shadow: $cadmin-component-focus-inset-box-shadow, + focus-outline: 0, + focus-text-decoration: none, + active-class-c-kbd-inline: ( + color: $cadmin-dropdown-link-active-color, + ), + disabled: ( + box-shadow: none, + ), + c-kbd-inline: ( + color: $cadmin-gray-500, + ), + ), + $cadmin-dropdown-item-base +); + +$cadmin-dropdown-section-custom-control-label: () !default; +$cadmin-dropdown-section-custom-control-label: map-deep-merge( + ( + color: $cadmin-secondary, + ), + $cadmin-dropdown-section-custom-control-label +); + +$cadmin-dropdown-section-active-custom-control-label: () !default; +$cadmin-dropdown-section-active-custom-control-label: map-deep-merge( + ( + color: $cadmin-gray-900, + ), + $cadmin-dropdown-section-active-custom-control-label +); + +$cadmin-dropdown-section-custom-control-label-text: () !default; +$cadmin-dropdown-section-custom-control-label-text: map-deep-merge( + ( + padding-left: 1rem, + ), + $cadmin-dropdown-section-custom-control-label-text +); + +$cadmin-dropdown-divider-bg: $cadmin-dropdown-border-color !default; + +// Autocomplete Dropdown Menu + +$cadmin-autocomplete-dropdown-menu: () !default; +$cadmin-autocomplete-dropdown-menu: map-deep-merge( + ( + max-height: 10rem, + ), + $cadmin-autocomplete-dropdown-menu +); + +// Dropdown Action + +$cadmin-dropdown-action-toggle-font-size: 1rem !default; // 16px +$cadmin-dropdown-action-toggle-size: $cadmin-btn-monospaced-size-sm !default; + +$cadmin-dropdown-action-toggle-disabled-opacity: $cadmin-btn-disabled-opacity !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_forms.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_forms.scss new file mode 100644 index 0000000000..008282ba70 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_forms.scss @@ -0,0 +1,264 @@ +$cadmin-input-font-size-mobile: 1rem !default; // 16px + +$cadmin-input-label-font-size: 0.875rem !default; // 14px +$cadmin-input-label-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-input-label-margin-bottom: 0.25rem !default; // 4px + +$cadmin-input-label-reference-mark-font-size: 6px !default; + +$cadmin-input-border-width: 0.0625rem !default; // 1px + +$cadmin-input-border-bottom-width: $cadmin-input-border-width !default; // 1px +$cadmin-input-border-left-width: $cadmin-input-border-width !default; // 1px +$cadmin-input-border-right-width: $cadmin-input-border-width !default; // 1px +$cadmin-input-border-top-width: $cadmin-input-border-width !default; // 1px + +$cadmin-input-border-radius-sm: $cadmin-border-radius !default; + +$cadmin-input-padding-x: 1rem !default; // 16px +$cadmin-input-padding-y: 0.4375rem !default; // 7px + +$cadmin-input-padding-x-lg: $cadmin-input-padding-x !default; +$cadmin-input-padding-y-lg: $cadmin-input-padding-y !default; + +$cadmin-input-padding-x-sm: 0.75rem !default; // 12px +$cadmin-input-padding-y-sm: 0.25rem !default; + +$cadmin-input-height-border: $cadmin-input-border-bottom-width + + $cadmin-input-border-top-width !default; +$cadmin-input-height: 2.5rem !default; // 40px +$cadmin-input-height-inner: $cadmin-input-height - $cadmin-input-height-border !default; +$cadmin-input-height-lg: 3rem !default; // 48px +$cadmin-input-height-inner-lg: $cadmin-input-height-lg - + $cadmin-input-height-border !default; +$cadmin-input-height-sm: 2rem !default; // 32px +$cadmin-input-height-inner-sm: $cadmin-input-height-sm - + $cadmin-input-height-border !default; + +$cadmin-form-feedback-font-size: 0.875rem !default; // 14px + +$cadmin-form-text-color: $cadmin-gray-600 !default; + +// Form Group + +$cadmin-form-group-margin-bottom: 1.5rem !default; // 24px +$cadmin-form-group-margin-bottom-mobile: 1rem !default; // 16px + +$cadmin-form-group-sm-input-label-margin-bottom: 0.1875rem !default; // 3px +$cadmin-form-group-sm-item-label-spacer: 1.5625rem !default; // 25px + +// Skin + +$cadmin-input-color: $cadmin-gray-900 !default; +$cadmin-input-bg: $cadmin-gray-200 !default; +$cadmin-input-border-color: $cadmin-gray-300 !default; +// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed +$cadmin-input-box-shadow: 0 0 rgba(0, 0, 0, 0) !default; +$cadmin-input-placeholder-color: $cadmin-gray-600 !default; +$cadmin-input-label-color: $cadmin-gray-900 !default; + +$cadmin-input-focus-bg: lighten($cadmin-component-active-bg, 44.9) !default; +$cadmin-input-focus-border-color: lighten( + $cadmin-component-active-bg, + 22.94 +) !default; +$cadmin-input-focus-box-shadow: $cadmin-component-focus-box-shadow !default; + +$cadmin-input-disabled-color: $cadmin-gray-500 !default; +$cadmin-input-disabled-bg: $cadmin-input-bg !default; +$cadmin-input-disabled-border-color: $cadmin-input-bg !default; +$cadmin-input-placeholder-disabled-color: $cadmin-input-disabled-color !default; + +$cadmin-input-label-disabled-color: $cadmin-gray-500 !default; + +// @deprecated after v2.18.0 use the Sass map `$cadmin-input-readonly` instead + +$cadmin-input-readonly-bg: $cadmin-white !default; + +$cadmin-input-readonly: () !default; +$cadmin-input-readonly: map-deep-merge( + ( + bg: $cadmin-input-readonly-bg, + border-color: $cadmin-input-border-color, + focus-border-color: $cadmin-input-focus-border-color, + focus-box-shadow: none, + ), + $cadmin-input-readonly +); + +$cadmin-input-plaintext-readonly: () !default; +$cadmin-input-plaintext-readonly: map-deep-merge( + ( + focus-border-color: $cadmin-input-focus-border-color, + focus-box-shadow: none, + ), + $cadmin-input-plaintext-readonly +); + +$cadmin-input-danger-bg: $cadmin-danger-l2 !default; +$cadmin-input-danger-border-color: $cadmin-danger-l1 !default; +// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed +$cadmin-input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default; +$cadmin-input-danger-focus-box-shadow: $cadmin-input-focus-box-shadow !default; +$cadmin-input-danger-color: $cadmin-input-color !default; + +$cadmin-input-danger-readonly: () !default; +$cadmin-input-danger-readonly: map-deep-merge( + ( + bg: map-get($cadmin-input-readonly, bg), + border-color: map-get($cadmin-input-readonly, border-color), + focus-border-color: $cadmin-input-focus-border-color, + ), + $cadmin-input-danger-readonly +); + +$cadmin-input-danger-checkbox-label-color: $cadmin-danger !default; +$cadmin-input-danger-select-icon-color: $cadmin-input-danger-border-color !default; +$cadmin-input-danger-select-icon: clay-icon( + caret-double-l, + $cadmin-input-danger-select-icon-color +) !default; + +$cadmin-input-success-bg: $cadmin-success-l2 !default; +$cadmin-input-success-border-color: $cadmin-success-l1 !default; +// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed +$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default; +$cadmin-input-success-focus-box-shadow: $cadmin-input-focus-box-shadow !default; +$cadmin-input-success-color: $cadmin-input-color !default; + +$cadmin-input-success-readonly: () !default; +$cadmin-input-success-readonly: map-deep-merge( + ( + bg: map-get($cadmin-input-readonly, bg), + border-color: map-get($cadmin-input-readonly, border-color), + focus-border-color: $cadmin-input-focus-border-color, + ), + $cadmin-input-success-readonly +); + +$cadmin-input-success-checkbox-label-color: $cadmin-success !default; +$cadmin-input-success-select-icon-color: $cadmin-input-success-border-color !default; +$cadmin-input-success-select-icon: clay-icon( + caret-double-l, + $cadmin-input-success-select-icon-color +) !default; + +$cadmin-input-warning-bg: $cadmin-warning-l2 !default; +$cadmin-input-warning-border-color: $cadmin-warning-l1 !default; +// Will need to be revisited if https://github.com/twbs/bootstrap/pull/24821 merge error is fixed +$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default; +$cadmin-input-warning-focus-box-shadow: $cadmin-input-focus-box-shadow !default; + +$cadmin-input-warning-readonly: () !default; +$cadmin-input-warning-readonly: map-deep-merge( + ( + bg: map-get($cadmin-input-readonly, bg), + border-color: map-get($cadmin-input-readonly, border-color), + focus-border-color: $cadmin-input-focus-border-color, + ), + $cadmin-input-warning-readonly +); + +$cadmin-input-warning-color: $cadmin-input-color !default; +$cadmin-input-warning-checkbox-label-color: $cadmin-warning !default; +$cadmin-input-warning-select-icon-color: $cadmin-input-warning-border-color !default; +$cadmin-input-warning-select-icon: clay-icon( + caret-double-l, + $cadmin-input-warning-select-icon-color +) !default; + +// Select Element + +$cadmin-input-select-bg-position: right 0.5em center !default; +$cadmin-input-select-bg-size: 1.5em 1.5em !default; +$cadmin-input-select-padding-right: 2em !default; + +$cadmin-input-select-icon-color: $cadmin-gray-600 !default; +$cadmin-input-select-icon: clay-icon( + caret-double-l, + $cadmin-input-select-icon-color +) !default; + +$cadmin-input-select-icon-focus-color: $cadmin-input-select-icon-color !default; +$cadmin-input-select-icon-focus: clay-icon( + caret-double-l, + $cadmin-input-select-icon-focus-color +) !default; + +$cadmin-input-select-icon-disabled-color: $cadmin-gray-500 !default; +$cadmin-input-select-icon-disabled: clay-icon( + caret-double-l, + $cadmin-input-select-icon-disabled-color +) !default; + +$cadmin-input-select-size: () !default; +$cadmin-input-select-size: map-deep-merge( + ( + option: ( + padding: 0.25rem 0.5rem, + ), + ), + $cadmin-input-select-size +); + +// Form Feedback + +$cadmin-form-feedback-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-form-feedback-indicator-margin-x: 0 !default; + +$cadmin-form-text-font-weight: $cadmin-font-weight-semi-bold !default; + +// Textarea + +$cadmin-input-textarea-height: 100px !default; +$cadmin-input-textarea-height-lg: 120px !default; +$cadmin-input-textarea-height-sm: 80px !default; + +// Form Control Label (Labels inside Form Control Tag Group) + +$cadmin-form-control-label-size: () !default; +$cadmin-form-control-label-size: map-deep-merge( + ( + border-width: 0.0625rem, + font-size: map-get($cadmin-label-lg, font-size), + height: 1.5rem, + margin-bottom: 0.3125rem, + margin-right: 0.625rem, + margin-top: 0.3125rem, + padding-x: map-get($cadmin-label-lg, padding-x), + padding-y: map-get($cadmin-label-lg, padding-y), + text-transform: none, + item-spacer-y: map-get($cadmin-label-lg, item-spacer-y), + lexicon-icon-height: map-get($cadmin-label-lg, lexicon-icon-height), + lexicon-icon-width: map-get($cadmin-label-lg, lexicon-icon-width), + sticker-size: map-get($cadmin-label-lg, sticker-size), + close: map-get($cadmin-label-lg, close), + ), + $cadmin-form-control-label-size +); + +// Form Group + +$cadmin-form-group-item-label-spacer: ( + $cadmin-input-label-font-size * $cadmin-line-height-base + ) + $cadmin-input-label-margin-bottom !default; + +// Input Groups + +$cadmin-input-group-addon-bg: $cadmin-gray-300 !default; +$cadmin-input-group-addon-border-color: $cadmin-input-group-addon-bg !default; +$cadmin-input-group-addon-color: $cadmin-gray-600 !default; +$cadmin-input-group-addon-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-input-group-addon-min-width: 2.5rem !default; // 40px +$cadmin-input-group-addon-padding-x: 0.75rem !default; // 12px + +// Input Group Sizes + +$cadmin-input-group-addon-min-width-sm: 2rem !default; // 32px + +// Input Group Secondary + +$cadmin-input-group-secondary-addon-bg: $cadmin-white !default; +$cadmin-input-group-secondary-addon-border-color: $cadmin-secondary-l2 !default; +$cadmin-input-group-secondary-addon-color: $cadmin-secondary !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_globals.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_globals.scss new file mode 100644 index 0000000000..492c31d201 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_globals.scss @@ -0,0 +1,259 @@ +//// +/// @group globals +//// + +// The keyword `clay-unset` allows unsetting a css value so it doesn't get output in the final css file. + +$cadmin-clay-unset: clay-unset !default; + +// An alias for `$cadmin-clay-unset` + +$cadmin-c-unset: $cadmin-clay-unset !default; + +$cadmin-clay-unset-placeholder: clay-unset-placeholder !default; + +$cadmin-atlas-theme: true !default; + +$cadmin-enable-lexicon-flat-colors: true !default; +$cadmin-enable-scaling-components: true !default; + +$cadmin-enable-rounded: true !default; +$cadmin-enable-gradients: false !default; +$cadmin-enable-shadows: true !default; +$cadmin-enable-transitions: true !default; + +$cadmin-grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1280px, +) !default; + +$cadmin-container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1248px, +) !default; + +$cadmin-grid-gutter-width: 24px !default; + +$cadmin-moz-osx-font-smoothing: grayscale !default; +$cadmin-webkit-font-smoothing: antialiased !default; + +$cadmin-font-size-base: 1rem !default; // 16px +$cadmin-font-size-lg: 1.125rem !default; // 18px +$cadmin-font-size-sm: 0.875rem !default; // 14px + +$cadmin-font-weight-light: 300 !default; +$cadmin-font-weight-normal: 400 !default; +$cadmin-font-weight-semi-bold: 600 !default; +$cadmin-font-weight-bold: 700 !default; +$cadmin-font-weight-bolder: 900 !default; + +$cadmin-line-height-base: 1.5 !default; + +$cadmin-font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; + +$cadmin-headings-font-weight: $cadmin-font-weight-bold !default; + +$cadmin-h1-font-size: 1.625rem !default; // 26px +$cadmin-h2-font-size: 1.375rem !default; // 22px +$cadmin-h3-font-size: 1.1875rem !default; // 19px +$cadmin-h4-font-size: 1rem !default; // 16px +$cadmin-h5-font-size: 0.875rem !default; // 14px +$cadmin-h6-font-size: 0.8125rem !default; // 13px + +// Theme Base Colors + +$cadmin-white: #fff !default; +$cadmin-gray-100: #f7f8f9 !default; +$cadmin-gray-200: #f1f2f5 !default; +$cadmin-gray-300: #e7e7ed !default; +$cadmin-gray-400: #cdced9 !default; +$cadmin-gray-500: #a7a9bc !default; +$cadmin-gray-600: #6b6c7e !default; +$cadmin-gray-700: #495057 !default; +$cadmin-gray-800: #393a4a !default; +$cadmin-gray-900: #272833 !default; +$cadmin-black: #000 !default; + +$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default; +$cadmin-indigo: if( + $cadmin-enable-lexicon-flat-colors, + #7785ff, + #6610f2 +) !default; +$cadmin-purple: if( + $cadmin-enable-lexicon-flat-colors, + #af78ff, + #6f42c1 +) !default; +$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default; +$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #ff5f5f, #da1414) !default; +$cadmin-orange: if( + $cadmin-enable-lexicon-flat-colors, + #ffb46e, + #b95000 +) !default; +$cadmin-yellow: if( + $cadmin-enable-lexicon-flat-colors, + #ffd76e, + #ffc107 +) !default; +$cadmin-green: if( + $cadmin-enable-lexicon-flat-colors, + #9be169, + #287d3d +) !default; +$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #50d2a0, #20c997) !default; +$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default; + +$cadmin-primary: #0b5fff !default; +$cadmin-primary-d1: darken($cadmin-primary, 5.1) !default; +$cadmin-primary-d2: darken($cadmin-primary, 10) !default; +$cadmin-primary-l1: lighten($cadmin-primary, 22.94) !default; +$cadmin-primary-l2: lighten($cadmin-primary, 32.94) !default; +$cadmin-primary-l3: lighten($cadmin-primary, 44.9) !default; + +$cadmin-secondary: #6b6c7e !default; +$cadmin-secondary-d1: darken(saturate($cadmin-secondary, 4.82), 20) !default; +$cadmin-secondary-d2: darken(saturate($cadmin-secondary, 5.36), 23.92) !default; +$cadmin-secondary-l1: lighten( + saturate(adjust-hue($cadmin-secondary, -3), 5.39), + 23.92 +) !default; +$cadmin-secondary-l2: lighten( + saturate(adjust-hue($cadmin-secondary, -2), 5.48), + 37.06 +) !default; +$cadmin-secondary-l3: lighten( + saturate(adjust-hue($cadmin-secondary, 3), 6.13), + 46.08 +) !default; + +$cadmin-info: #2e5aac !default; +$cadmin-info-d1: darken($cadmin-info, 5) !default; +$cadmin-info-d2: darken($cadmin-info, 10) !default; +$cadmin-info-l1: lighten(saturate($cadmin-info, 0.59), 28.04) !default; +$cadmin-info-l2: lighten(desaturate($cadmin-info, 3.25), 52.94) !default; + +$cadmin-success: #287d3c !default; +$cadmin-success-d1: darken($cadmin-success, 5) !default; +$cadmin-success-d2: darken($cadmin-success, 10) !default; +$cadmin-success-l1: lighten(desaturate($cadmin-success, 0.14), 24.95) !default; +$cadmin-success-l2: lighten(desaturate($cadmin-success, 1.52), 62.94) !default; + +$cadmin-warning: #b95000 !default; +$cadmin-warning-d1: darken($cadmin-warning, 5.1) !default; +$cadmin-warning-d2: darken($cadmin-warning, 10) !default; +$cadmin-warning-l1: lighten($cadmin-warning, 24.9) !default; +$cadmin-warning-l2: lighten($cadmin-warning, 60) !default; + +$cadmin-danger: #da1414 !default; +$cadmin-danger-d1: darken($cadmin-danger, 5) !default; +$cadmin-danger-d2: darken($cadmin-danger, 10) !default; +$cadmin-danger-l1: lighten(desaturate($cadmin-danger, 0.25), 28.04) !default; +$cadmin-danger-l2: lighten(saturate($cadmin-danger, 5.04), 50) !default; + +$cadmin-light: #f1f2f5 !default; +$cadmin-light-d1: darken($cadmin-light, 5.1) !default; +$cadmin-light-d2: darken($cadmin-light, 10) !default; +$cadmin-light-l1: lighten( + desaturate(adjust-hue($cadmin-light, -15), 2.38), + 1.96 +) !default; +$cadmin-light-l2: lighten( + desaturate(adjust-hue($cadmin-light, -225), 16.67), + 4.71 +) !default; + +$cadmin-dark: #272833 !default; +$cadmin-dark-d1: darken($cadmin-dark, 5.1) !default; +$cadmin-dark-d2: darken($cadmin-dark, 10) !default; +$cadmin-dark-l1: lighten(saturate($cadmin-dark, 0.18), 4.12) !default; +$cadmin-dark-l2: lighten(desaturate($cadmin-dark, 0.36), 8.04) !default; + +$cadmin-theme-colors: () !default; +$cadmin-theme-colors: map-deep-merge( + ( + primary: $cadmin-primary, + secondary: $cadmin-secondary, + success: $cadmin-success, + info: $cadmin-info, + warning: $cadmin-warning, + danger: $cadmin-danger, + light: $cadmin-light, + dark: $cadmin-dark, + ), + $cadmin-theme-colors +); + +$cadmin-yiq-contrasted-threshold: 150 !default; +$cadmin-yiq-text-dark: $cadmin-gray-900 !default; +$cadmin-yiq-text-light: $cadmin-white !default; + +$cadmin-body-bg: $cadmin-white !default; +$cadmin-body-color: $cadmin-gray-900 !default; +$cadmin-text-muted: $cadmin-gray-500 !default; + +$cadmin-link-color: $cadmin-primary !default; +$cadmin-link-hover-color: $cadmin-primary-d2 !default; + +$cadmin-component-active-bg: #0b5fff !default; +$cadmin-component-active-color: #fff !default; + +$cadmin-component-focus-box-shadow: 0 0 0 0.125rem $cadmin-white#{','} 0 0 0 0.25rem + $cadmin-primary-l1 !default; +$cadmin-component-focus-inset-box-shadow: inset 0 0 0 0.125rem + $cadmin-primary-l1#{','} inset 0 0 0 0.25rem $cadmin-white !default; + +// Spacing + +$cadmin-spacer: 1rem !default; +$cadmin-spacers: () !default; +$cadmin-spacers: map-deep-merge( + ( + 0: 0, + 1: ( + $cadmin-spacer * 0.25, + ), + 2: ( + $cadmin-spacer * 0.5, + ), + 3: ( + $cadmin-spacer * 1, + ), + 4: ( + $cadmin-spacer * 1.5, + ), + 5: ( + $cadmin-spacer * 3, + ), + 6: ( + $cadmin-spacer * 4.5, + ), + 7: ( + $cadmin-spacer * 6, + ), + 8: ( + $cadmin-spacer * 7.5, + ), + 9: ( + $cadmin-spacer * 9, + ), + 10: ( + $cadmin-spacer * 10, + ), + ), + $cadmin-spacers +); + +$cadmin-border-radius: 0.25rem !default; // 4px +$cadmin-border-radius-lg: 0.375rem !default; // 6px +$cadmin-border-radius-sm: 0.1875rem !default; // 3px + +$cadmin-close-text-shadow: none !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_icons.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_icons.scss new file mode 100644 index 0000000000..7911efce18 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_icons.scss @@ -0,0 +1,2 @@ +$cadmin-order-arrow-down-active-color: $cadmin-gray-500 !default; +$cadmin-order-arrow-up-active-color: $cadmin-order-arrow-down-active-color !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_labels.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_labels.scss new file mode 100644 index 0000000000..e32a927188 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_labels.scss @@ -0,0 +1,432 @@ +//// +/// @group labels +//// + +$cadmin-label-border-radius: 0.125rem !default; // 2px +$cadmin-label-font-size: 0.625rem !default; // 10px +$cadmin-label-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-label-padding-x: 0.25rem !default; // 4px +$cadmin-label-padding-y: 0.125rem !default; // 2px +$cadmin-label-text-transform: uppercase !default; + +$cadmin-label-item-spacer-x: 0.85714em !default; + +$cadmin-label-anchor-hover-text-decoration: underline !default; + +$cadmin-label-link-text-decoration: none !default; +$cadmin-label-link-hover-text-decoration: underline !default; + +// Label Close + +$cadmin-label-close: () !default; +$cadmin-label-close: map-deep-merge( + ( + disabled-color: inherit, + ), + $cadmin-label-close +); + +// Label Sizes + +$cadmin-label-lg: () !default; +$cadmin-label-lg: map-deep-merge( + ( + font-size: 0.75rem, + height: 1.5rem, + padding-x: 0.5rem, + padding-y: 0.3125rem, + item-spacer-y: -0.0625rem, + lexicon-icon-height: 1em, + lexicon-icon-width: 1em, + sticker-size: 0.875rem, + ), + $cadmin-label-lg +); + +// Label Variants + +$cadmin-label-base: () !default; +$cadmin-label-base: map-deep-merge( + ( + outline: 0, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-btn-focus-box-shadow, + disabled-box-shadow: none, + ), + $cadmin-label-base +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-primary` instead + +$cadmin-label-primary-color: $cadmin-primary !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-primary` instead + +$cadmin-label-primary-hover-color: $cadmin-primary-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-primary` instead + +$cadmin-label-primary-border-color: $cadmin-primary-l1 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-primary` instead + +$cadmin-label-primary-hover-border-color: $cadmin-label-primary-border-color !default; + +$cadmin-label-primary: () !default; +$cadmin-label-primary: map-deep-merge( + ( + border-color: $cadmin-label-primary-border-color, + color: $cadmin-label-primary-color, + hover-border-color: $cadmin-label-primary-hover-border-color, + hover-color: $cadmin-label-primary-hover-color, + ), + $cadmin-label-primary +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead + +$cadmin-label-secondary-color: $cadmin-secondary !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead + +$cadmin-label-secondary-hover-color: $cadmin-gray-900 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead + +$cadmin-label-secondary-border-color: $cadmin-secondary-l2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead + +$cadmin-label-secondary-hover-border-color: $cadmin-label-secondary-border-color !default; + +$cadmin-label-secondary: () !default; +$cadmin-label-secondary: map-deep-merge( + ( + border-color: $cadmin-label-secondary-border-color, + color: $cadmin-label-secondary-color, + hover-border-color: $cadmin-label-secondary-hover-border-color, + hover-color: $cadmin-label-secondary-hover-color, + ), + $cadmin-label-secondary +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead + +$cadmin-label-success-color: $cadmin-success !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead + +$cadmin-label-success-hover-color: $cadmin-success-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead + +$cadmin-label-success-border-color: $cadmin-success-l1 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead + +$cadmin-label-success-hover-border-color: $cadmin-label-success-border-color !default; + +$cadmin-label-success: () !default; +$cadmin-label-success: map-deep-merge( + ( + border-color: $cadmin-label-success-border-color, + color: $cadmin-label-success-color, + hover-border-color: $cadmin-label-success-hover-border-color, + hover-color: $cadmin-label-success-hover-color, + ), + $cadmin-label-success +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead + +$cadmin-label-info-color: $cadmin-info !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead + +$cadmin-label-info-hover-color: $cadmin-info-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead + +$cadmin-label-info-border-color: $cadmin-info-l1 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead + +$cadmin-label-info-hover-border-color: $cadmin-label-info-border-color !default; + +$cadmin-label-info: () !default; +$cadmin-label-info: map-deep-merge( + ( + border-color: $cadmin-label-info-border-color, + color: $cadmin-label-info-color, + hover-border-color: $cadmin-label-info-hover-border-color, + hover-color: $cadmin-label-info-hover-color, + ), + $cadmin-label-info +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead + +$cadmin-label-warning-color: $cadmin-warning !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead + +$cadmin-label-warning-hover-color: $cadmin-warning-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead + +$cadmin-label-warning-border-color: $cadmin-warning-l1 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead + +$cadmin-label-warning-hover-border-color: $cadmin-label-warning-border-color !default; + +$cadmin-label-warning: () !default; +$cadmin-label-warning: map-deep-merge( + ( + border-color: $cadmin-label-warning-border-color, + color: $cadmin-label-warning-color, + hover-border-color: $cadmin-label-warning-hover-border-color, + hover-color: $cadmin-label-warning-hover-color, + ), + $cadmin-label-warning +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead + +$cadmin-label-danger-color: $cadmin-danger !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead + +$cadmin-label-danger-hover-color: $cadmin-danger-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead + +$cadmin-label-danger-border-color: $cadmin-danger-l1 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead + +$cadmin-label-danger-hover-border-color: $cadmin-label-danger-border-color !default; + +$cadmin-label-danger: () !default; +$cadmin-label-danger: map-deep-merge( + ( + border-color: $cadmin-label-danger-border-color, + color: $cadmin-label-danger-color, + hover-border-color: $cadmin-label-danger-hover-border-color, + hover-color: $cadmin-label-danger-hover-color, + ), + $cadmin-label-danger +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-light` instead + +$cadmin-label-light-color: $cadmin-light !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-light` instead + +$cadmin-label-light-hover-color: $cadmin-light-d2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-light` instead + +$cadmin-label-light-bg: $cadmin-dark !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-light` instead + +$cadmin-label-light-border-color: $cadmin-light !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-light` instead + +$cadmin-label-light-hover-border-color: $cadmin-label-light-border-color !default; + +$cadmin-label-light: () !default; +$cadmin-label-light: map-deep-merge( + ( + bg: $cadmin-label-light-bg, + border-color: $cadmin-label-light-border-color, + color: $cadmin-label-light-color, + hover-border-color: $cadmin-label-light-hover-border-color, + hover-color: $cadmin-label-light-hover-color, + ), + $cadmin-label-light +); + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-dark` instead + +$cadmin-label-dark-color: $cadmin-dark !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-dark` instead + +$cadmin-label-dark-hover-color: $cadmin-dark-l2 !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-dark` instead + +$cadmin-label-dark-border-color: $cadmin-dark !default; + +// @deprecated as of v2.4.1 use the Sass map `$cadmin-label-dark` instead + +$cadmin-label-dark-hover-border-color: $cadmin-label-dark-border-color !default; + +$cadmin-label-dark: () !default; +$cadmin-label-dark: map-deep-merge( + ( + border-color: $cadmin-label-dark-border-color, + color: $cadmin-label-dark-color, + hover-border-color: $cadmin-label-dark-hover-border-color, + hover-color: $cadmin-label-dark-hover-color, + ), + $cadmin-label-dark +); + +// Label Inverse Variants + +$cadmin-label-inverse-primary: () !default; +$cadmin-label-inverse-primary: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-primary +); + +$cadmin-label-inverse-secondary: () !default; +$cadmin-label-inverse-secondary: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-secondary +); + +$cadmin-label-inverse-success: () !default; +$cadmin-label-inverse-success: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-success +); + +$cadmin-label-inverse-info: () !default; +$cadmin-label-inverse-info: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-info +); + +$cadmin-label-inverse-warning: () !default; +$cadmin-label-inverse-warning: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-warning +); + +$cadmin-label-inverse-danger: () !default; +$cadmin-label-inverse-danger: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-danger +); + +$cadmin-label-inverse-light: () !default; +$cadmin-label-inverse-light: map-deep-merge( + ( + color: $cadmin-dark, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-dark, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-light +); + +$cadmin-label-inverse-dark: () !default; +$cadmin-label-inverse-dark: map-deep-merge( + ( + color: $cadmin-white, + hover: ( + background-color: null, + border-color: null, + color: $cadmin-white, + ), + link-hover: ( + color: null, + ), + close: ( + hover-color: null, + ), + ), + $cadmin-label-inverse-dark +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_links.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_links.scss new file mode 100644 index 0000000000..5129d5c391 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_links.scss @@ -0,0 +1,150 @@ +$cadmin-component-link: () !default; +$cadmin-component-link: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + focus-color: darken($cadmin-gray-600, 15%), + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-component-link +); + +$cadmin-link-primary: () !default; +$cadmin-link-primary: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + focus-color: darken($cadmin-primary, 15%), + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-link-primary +); + +$cadmin-link-secondary: () !default; +$cadmin-link-secondary: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-link-secondary +); + +// Component Title + +$cadmin-component-title: () !default; +$cadmin-component-title: map-deep-merge( + ( + font-size: 1rem, + line-height: 1.25, + margin-bottom: + calc((#{$cadmin-dropdown-action-toggle-size} - (1em * 1.25)) / 2), + margin-top: + calc((#{$cadmin-dropdown-action-toggle-size} - (1em * 1.25)) / 2), + ), + $cadmin-component-title +); + +$cadmin-component-title-link: () !default; +$cadmin-component-title-link: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + focus-color: darken($cadmin-gray-900, 15%), + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-component-title-link +); + +// Component Subtitle + +$cadmin-component-subtitle: () !default; +$cadmin-component-subtitle: map-deep-merge( + ( + font-weight: $cadmin-font-weight-semi-bold, + line-height: 1.45, + ), + $cadmin-component-subtitle +); + +$cadmin-component-subtitle-link: () !default; +$cadmin-component-subtitle-link: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-component-subtitle-link +); + +// Component Action + +$cadmin-component-action: () !default; +$cadmin-component-action: map-deep-merge( + ( + font-size: 1rem, + hover-bg: rgba($cadmin-gray-900, 0.03), + hover-color: $cadmin-gray-900, + focus-bg: rgba($cadmin-gray-900, 0.03), + focus-box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow), + focus-color: $cadmin-gray-900, + focus-outline: 0, + active-bg: rgba($cadmin-gray-900, 0.06), + active-color: $cadmin-gray-900, + btn-focus-box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow), + disabled-bg: transparent, + disabled-box-shadow: none, + ), + $cadmin-component-action +); + +// Link Outline + +$cadmin-link-outline-primary: () !default; +$cadmin-link-outline-primary: map-deep-merge( + ( + hover-bg: $cadmin-primary-l3, + hover-color: $cadmin-primary, + focus-bg: $cadmin-primary-l3, + focus-box-shadow: map-get($cadmin-btn-outline-primary, focus-box-shadow), + focus-color: $cadmin-primary, + focus-outline: 0, + btn-focus-box-shadow: + map-get($cadmin-btn-outline-primary, focus-box-shadow), + btn-focus-outline: 0, + active-bg: lighten(desaturate($cadmin-primary, 42.05), 41.76), + active-color: $cadmin-primary, + disabled-box-shadow: none, + ), + $cadmin-link-outline-primary +); + +$cadmin-link-outline-secondary: () !default; +$cadmin-link-outline-secondary: map-deep-merge( + ( + border-color: $cadmin-secondary-l2, + hover-bg: rgba($cadmin-gray-900, 0.03), + hover-color: $cadmin-gray-900, + focus-bg: rgba($cadmin-gray-900, 0.03), + focus-box-shadow: + map-get($cadmin-btn-outline-secondary, focus-box-shadow), + focus-color: $cadmin-gray-900, + focus-outline: 0, + btn-focus-box-shadow: + map-get($cadmin-btn-outline-secondary, focus-box-shadow), + btn-focus-outline: 0, + active-bg: rgba($cadmin-gray-900, 0.06), + active-color: $cadmin-gray-900, + disabled-box-shadow: none, + ), + $cadmin-link-outline-secondary +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_list-group.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_list-group.scss new file mode 100644 index 0000000000..6560b14f74 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_list-group.scss @@ -0,0 +1,136 @@ +$cadmin-list-group-border-color: $cadmin-gray-300 !default; +$cadmin-list-group-color: $cadmin-gray-600 !default; +$cadmin-list-group-hover-bg: lighten( + $cadmin-component-active-bg, + 44.9 +) !default; +$cadmin-list-group-active-bg: $cadmin-list-group-hover-bg !default; +$cadmin-list-group-active-border-color: $cadmin-list-group-border-color !default; +$cadmin-list-group-active-color: $cadmin-gray-900 !default; + +$cadmin-list-group-font-size: 0.875rem !default; // 14px +$cadmin-list-group-item-padding-x: 1rem !default; // 16px +$cadmin-list-group-item-padding-y: 1rem !default; // 16px + +// List Group Header + +$cadmin-list-group-header-bg: $cadmin-gray-100 !default; +$cadmin-list-group-header-padding-y: 0.5rem !default; // 8px + +$cadmin-list-group-header-title: () !default; +$cadmin-list-group-header-title: map-deep-merge( + ( + color: $cadmin-gray-600, + font-size: 0.75rem, + text-transform: uppercase, + ), + $cadmin-list-group-header-title +); + +// List Group Title + +$cadmin-list-group-title-link: () !default; +$cadmin-list-group-title-link: map-deep-merge( + ( + border-radius: 1px, + display: inline-block, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-list-group-title-link +); + +$cadmin-list-group-title: () !default; +$cadmin-list-group-title: map-deep-merge( + ( + color: $cadmin-gray-900, + font-size: 0.875rem, + line-height: 1.45, + ), + $cadmin-list-group-title +); + +// List Group Subtitle + +$cadmin-list-group-subtitle-link: () !default; +$cadmin-list-group-subtitle-link: map-deep-merge( + ( + border-radius: 1px, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-list-group-subtitle-link +); + +// List Group Text + +$cadmin-list-group-text-link: () !default; +$cadmin-list-group-text-link: map-deep-merge( + ( + border-radius: 1px, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-list-group-text-link +); + +$cadmin-list-group-text: () !default; +$cadmin-list-group-text: map-deep-merge( + ( + line-height: 1.45, + ), + $cadmin-list-group-text +); + +// List Group Subtext + +$cadmin-list-group-subtext-link: () !default; +$cadmin-list-group-subtext-link: map-deep-merge( + ( + border-radius: 1px, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-list-group-subtext-link +); + +$cadmin-list-group-subtext: () !default; +$cadmin-list-group-subtext: map-deep-merge( + ( + line-height: 1.45, + ), + $cadmin-list-group-subtext +); + +$cadmin-list-group-subtext-active-color: $cadmin-gray-600 !default; + +// List Group Link + +$cadmin-list-group-link-color: $cadmin-gray-900 !default; +$cadmin-list-group-link-hover-color: $cadmin-list-group-link-color !default; +$cadmin-list-group-link-active-color: $cadmin-list-group-link-color !default; + +// List Group Notification + +$cadmin-list-group-notification-item-primary: () !default; +$cadmin-list-group-notification-item-primary: map-deep-merge( + ( + border-left-color: lighten($cadmin-component-active-bg, 22.94), + active-border-left-color: lighten($cadmin-component-active-bg, 22.94), + ), + $cadmin-list-group-notification-item-primary +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_loaders.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_loaders.scss new file mode 100644 index 0000000000..d741b79c65 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_loaders.scss @@ -0,0 +1,7 @@ +$cadmin-loading-animation: () !default; +$cadmin-loading-animation: map-deep-merge( + ( + color: $cadmin-gray-600, + ), + $cadmin-loading-animation +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_management-bar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_management-bar.scss new file mode 100644 index 0000000000..c31ad68343 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_management-bar.scss @@ -0,0 +1,41 @@ +$cadmin-management-bar-base: () !default; +$cadmin-management-bar-base: map-deep-merge( + ( + link-border-radius: $cadmin-border-radius, + link-outline: 0, + link-transition: box-shadow 0.15s ease-in-out, + link-focus-box-shadow: $cadmin-btn-focus-box-shadow, + link-disabled-box-shadow: none, + ), + $cadmin-management-bar-base +); + +$cadmin-management-bar-light: () !default; +$cadmin-management-bar-light: map-deep-merge( + ( + bg: $cadmin-white, + link-font-weight: $cadmin-font-weight-semi-bold, + link-hover-color: $cadmin-gray-900, + link-hover-bg: rgba($cadmin-gray-900, 0.03), + link-focus-color: $cadmin-gray-900, + link-focus-bg: rgba($cadmin-gray-900, 0.03), + link-active-bg: rgba($cadmin-gray-900, 0.06), + link-disabled-bg: transparent, + ), + $cadmin-management-bar-light +); + +$cadmin-management-bar-primary: () !default; +$cadmin-management-bar-primary: map-deep-merge( + ( + link-border-radius: $cadmin-border-radius, + link-font-weight: $cadmin-font-weight-semi-bold, + link-hover-color: $cadmin-gray-900, + link-hover-bg: rgba($cadmin-gray-900, 0.03), + link-focus-color: $cadmin-gray-900, + link-focus-bg: rgba($cadmin-gray-900, 0.03), + link-active-bg: rgba($cadmin-gray-900, 0.06), + link-disabled-bg: transparent, + ), + $cadmin-management-bar-primary +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_menubar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_menubar.scss new file mode 100644 index 0000000000..ffdc0227a5 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_menubar.scss @@ -0,0 +1,95 @@ +// Menubar Vertical MD + +$cadmin-menubar-vertical-transparent-md: () !default; +$cadmin-menubar-vertical-transparent-md: map-deep-merge( + ( + bg-mobile: $cadmin-white, + link-border-radius: 0.375rem, + link-border-radius-mobile: 0, + link-hover-bg: rgba($cadmin-gray-900, 0.03), + link-hover-color: $cadmin-gray-900, + link-active-font-weight: $cadmin-font-weight-semi-bold, + link: ( + transition: $cadmin-btn-transition, + focus-bg: rgba($cadmin-gray-900, 0.03), + focus-color: $cadmin-gray-900, + focus-box-shadow: + map-get($cadmin-dropdown-item-base, focus-box-shadow), + focus-outline: map-get($cadmin-dropdown-item-base, focus-outline), + active-class: ( + background-color: $cadmin-primary-l3, + color: $cadmin-primary, + ), + disabled-box-shadow: none, + show: ( + background-color: $cadmin-c-unset, + color: $cadmin-gray-900, + font-weight: $cadmin-font-weight-semi-bold, + ), + ), + link-mobile: ( + transition: none, + focus-bg: $cadmin-dropdown-link-hover-bg, + focus-border-radius: + map-get($cadmin-dropdown-item-base, focus-border-radius), + ), + toggler-font-size-mobile: 0.875rem, + toggler-font-weight-mobile: $cadmin-font-weight-semi-bold, + toggler-mobile: ( + border-radius: 0.375rem, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + disabled-box-shadow: none, + ), + ), + $cadmin-menubar-vertical-transparent-md +); + +// Menubar Vertical LG + +$cadmin-menubar-vertical-transparent-lg: () !default; +$cadmin-menubar-vertical-transparent-lg: map-deep-merge( + ( + bg-mobile: $cadmin-white, + link-border-radius: 0.375rem, + link-border-radius-mobile: 0, + link-hover-bg: rgba($cadmin-gray-900, 0.03), + link-hover-color: $cadmin-gray-900, + link-active-font-weight: $cadmin-font-weight-semi-bold, + link: ( + transition: $cadmin-btn-transition, + focus-bg: rgba($cadmin-gray-900, 0.03), + focus-color: $cadmin-gray-900, + focus-box-shadow: + map-get($cadmin-dropdown-item-base, focus-box-shadow), + focus-outline: map-get($cadmin-dropdown-item-base, focus-outline), + active-class: ( + background-color: $cadmin-primary-l3, + color: $cadmin-primary, + ), + disabled-box-shadow: none, + show: ( + background-color: $cadmin-c-unset, + color: $cadmin-gray-900, + font-weight: $cadmin-font-weight-semi-bold, + ), + ), + link-mobile: ( + transition: none, + focus-bg: $cadmin-dropdown-link-hover-bg, + focus-border-radius: + map-get($cadmin-dropdown-item-base, focus-border-radius), + ), + toggler-font-size-mobile: 0.875rem, + toggler-font-weight-mobile: $cadmin-font-weight-semi-bold, + toggler-mobile: ( + border-radius: 0.375rem, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + disabled-box-shadow: none, + ), + ), + $cadmin-menubar-vertical-transparent-lg +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_modals.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_modals.scss new file mode 100644 index 0000000000..31422485d4 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_modals.scss @@ -0,0 +1,90 @@ +$cadmin-modal-sm: 320px !default; +$cadmin-modal-md: 600px !default; +$cadmin-modal-lg: 896px !default; +$cadmin-modal-xl: 1140px !default; + +$cadmin-modal-backdrop-bg: $cadmin-gray-800 !default; +$cadmin-modal-backdrop-opacity: 0.8 !default; + +$cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default; +$cadmin-modal-content-border-color: transparent !default; + +$cadmin-modal-inner-padding: 1.5rem !default; // 24px + +$cadmin-modal-header-border-color: $cadmin-gray-300 !default; +$cadmin-modal-header-padding: 1.5rem !default; // 24px + +$cadmin-modal-title-font-size: 1.25rem !default; // 20px +$cadmin-modal-title-font-weight: $cadmin-font-weight-bold !default; + +// Modal Success + +$cadmin-modal-success: () !default; +$cadmin-modal-success: map-deep-merge( + ( + header-bg: $cadmin-success-l2, + header-border-color: $cadmin-success-l1, + header-color: $cadmin-success, + header-close: ( + color: $cadmin-success, + hover-color: inherit, + focus-color: inherit, + disabled-color: inherit, + ), + ), + $cadmin-modal-success +); + +// Modal Info + +$cadmin-modal-info: () !default; +$cadmin-modal-info: map-deep-merge( + ( + header-bg: $cadmin-info-l2, + header-border-color: $cadmin-info-l1, + header-color: $cadmin-info, + header-close: ( + color: $cadmin-info, + hover-color: inherit, + focus-color: inherit, + disabled-color: inherit, + ), + ), + $cadmin-modal-info +); + +// Modal Warning + +$cadmin-modal-warning: () !default; +$cadmin-modal-warning: map-deep-merge( + ( + header-bg: $cadmin-warning-l2, + header-border-color: $cadmin-warning-l1, + header-color: $cadmin-warning, + header-close: ( + color: $cadmin-warning, + hover-color: inherit, + focus-color: inherit, + disabled-color: inherit, + ), + ), + $cadmin-modal-warning +); + +// Modal Danger + +$cadmin-modal-danger: () !default; +$cadmin-modal-danger: map-deep-merge( + ( + header-bg: $cadmin-danger-l2, + header-border-color: $cadmin-danger-l1, + header-color: $cadmin-danger, + header-close: ( + color: $cadmin-danger, + hover-color: inherit, + focus-color: inherit, + disabled-color: inherit, + ), + ), + $cadmin-modal-danger +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_multi-step-nav.scss new file mode 100644 index 0000000000..50508f36a0 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_multi-step-nav.scss @@ -0,0 +1,18 @@ +$cadmin-multi-step-icon-bg: $cadmin-gray-200 !default; +$cadmin-multi-step-icon-color: $cadmin-gray-600 !default; +$cadmin-multi-step-icon-border-radius: 100px !default; +$cadmin-multi-step-icon-font-size: 0.875rem !default; +$cadmin-multi-step-icon-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default; + +$cadmin-multi-step-indicator-label-color: $cadmin-gray-600 !default; +$cadmin-multi-step-indicator-label-font-size: 0.875rem !default; +$cadmin-multi-step-indicator-label-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-multi-step-title-color: $cadmin-gray-600 !default; +$cadmin-multi-step-title-font-size: 0.875rem !default; +$cadmin-multi-step-title-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-multi-step-icon-disabled-bg: $cadmin-multi-step-icon-bg !default; +$cadmin-multi-step-icon-disabled-color: $cadmin-gray-500 !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_navbar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_navbar.scss new file mode 100644 index 0000000000..94dade419b --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_navbar.scss @@ -0,0 +1,20 @@ +$cadmin-navbar-font-size: 0.875rem !default; // 14px + +$cadmin-navbar-underline-active-bg: lighten( + $cadmin-component-active-bg, + 22.94 +) !default; + +// Navbar Light + +$cadmin-navbar-light-color: $cadmin-gray-600 !default; +$cadmin-navbar-light-hover-color: $cadmin-navbar-light-color !default; +$cadmin-navbar-light-active-color: $cadmin-gray-900 !default; +$cadmin-navbar-light-disabled-color: $cadmin-nav-link-disabled-color !default; + +// Navbar Dark + +$cadmin-navbar-dark-color: $cadmin-white !default; +$cadmin-navbar-dark-hover-color: $cadmin-navbar-dark-color !default; +$cadmin-navbar-dark-active-color: $cadmin-navbar-dark-color !default; +$cadmin-navbar-dark-disabled-color: $cadmin-nav-link-disabled-color !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_navigation-bar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_navigation-bar.scss new file mode 100644 index 0000000000..cb0ff0a925 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_navigation-bar.scss @@ -0,0 +1,53 @@ +$cadmin-navigation-bar-size: () !default; +$cadmin-navigation-bar-size: map-deep-merge( + ( + border-bottom-width: 0.0625rem, + collapse-dropdown-item-padding-y-mobile: 0.8125rem, + link-height-mobile: 2rem, + active-border-offset-bottom: -0.53125rem, + toggler-link-height: 2rem, + toggler-link-margin-y: 0.46875rem, + toggler-link-padding-y: 0, + ), + $cadmin-navigation-bar-size +); + +$cadmin-navigation-bar-base: () !default; +$cadmin-navigation-bar-base: map-deep-merge( + ( + link-border-radius: 0, + link-outline: 0, + link-focus-box-shadow: $cadmin-btn-focus-box-shadow, + link-disabled-box-shadow: none, + ), + $cadmin-navigation-bar-base +); + +$cadmin-navigation-bar-light: () !default; +$cadmin-navigation-bar-light: map-deep-merge( + ( + bg: $cadmin-white, + border-color: $cadmin-gray-200, + link-font-weight: $cadmin-font-weight-semi-bold, + link-hover-color: $cadmin-gray-900, + link-focus-color: $cadmin-gray-900, + link-disabled-color: $cadmin-gray-600, + link-disabled-opacity: $cadmin-btn-disabled-opacity, + ), + $cadmin-navigation-bar-light +); + +$cadmin-navigation-bar-secondary: () !default; +$cadmin-navigation-bar-secondary: map-deep-merge( + ( + bg: $cadmin-secondary-d1, + link-color: $cadmin-secondary-l2, + link-font-weight: $cadmin-font-weight-semi-bold, + link-hover-color: $cadmin-white, + link-focus-color: $cadmin-white, + link-active-color: $cadmin-white, + link-disabled-color: $cadmin-gray-400, + link-disabled-opacity: $cadmin-btn-disabled-opacity, + ), + $cadmin-navigation-bar-secondary +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_navs.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_navs.scss new file mode 100644 index 0000000000..a2b20fd6ce --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_navs.scss @@ -0,0 +1,100 @@ +$cadmin-nav-font-size: 0.875rem !default; + +$cadmin-nav-link-disabled-color: $cadmin-gray-500 !default; + +$cadmin-nav-link-padding-x: 1rem !default; // 16px +$cadmin-nav-link-padding-y: 0.625rem !default; // 10px + +$cadmin-nav-link: () !default; +$cadmin-nav-link: map-deep-merge( + ( + disabled-box-shadow: none, + ), + $cadmin-nav-link +); + +$cadmin-nav-link-btn-unstyled: () !default; +$cadmin-nav-link-btn-unstyled: map-deep-merge( + ( + focus-box-shadow: 0 0 0 0.125rem $cadmin-white#{','} 0 0 0 0.25rem $cadmin-primary-l1, + ), + $cadmin-nav-link-btn-unstyled +); + +// Nav Nested + +$cadmin-nav-nested-spacer-x: 1rem !default; // 16px + +// Nav Tabs + +$cadmin-nav-tabs-border-color: transparent !default; +$cadmin-nav-tabs-font-size: 0.875rem !default; // 14px + +// Nav Tabs Link + +$cadmin-nav-tabs-link-color: $cadmin-gray-600 !default; +$cadmin-nav-tabs-link-padding-y: 0.28125rem !default; // 4.5px + +$cadmin-nav-tabs-link-hover-border-color: transparent !default; + +$cadmin-nav-tabs-link-active-bg: $cadmin-white !default; +$cadmin-nav-tabs-link-active-border-color: transparent transparent + $cadmin-body-bg !default; +$cadmin-nav-tabs-link-active-color: $cadmin-gray-900 !default; + +$cadmin-nav-tabs-link: () !default; +$cadmin-nav-tabs-link: map-deep-merge( + ( + font-weight: $cadmin-font-weight-semi-bold, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + disabled-box-shadow: none, + ), + $cadmin-nav-tabs-link +); + +// Nav Tabs Link Show + +$cadmin-nav-tabs-link-show-color: $cadmin-nav-tabs-link-active-color !default; +$cadmin-nav-tabs-link-show-bg: transparent !default; +$cadmin-nav-tabs-link-show-border-color: transparent transparent + $cadmin-nav-tabs-border-color transparent !default; + +// Nav Tabs Tab Pane + +$cadmin-nav-tabs-tab-pane-bg: $cadmin-white !default; +$cadmin-nav-tabs-tab-pane-border-radius: 4px !default; +$cadmin-nav-tabs-tab-pane-padding: 2rem !default; + +// Nav Underline + +$cadmin-nav-underline-link-color: $cadmin-gray-600 !default; + +$cadmin-nav-underline-link-active-color: $cadmin-gray-900 !default; + +$cadmin-nav-underline-link-disabled-color: $cadmin-nav-link-disabled-color !default; + +$cadmin-nav-underline-link: () !default; +$cadmin-nav-underline-link: map-deep-merge( + ( + border-radius: 1px, + font-weight: $cadmin-font-weight-semi-bold, + line-height: 1, + padding-bottom: 0.5625rem, + padding-top: 0.5625rem, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + disabled-box-shadow: none, + ), + $cadmin-nav-underline-link +); + +// Nav Underline Link Highlight + +$cadmin-nav-underline-link-highlight-left: 0 !default; +$cadmin-nav-underline-link-highlight-right: 0 !default; + +$cadmin-nav-underline-link-active-highlight: $cadmin-primary-l1 !default; +$cadmin-nav-underline-link-active-highlight-height: 0.125rem !default; // 2px diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_pagination.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_pagination.scss new file mode 100644 index 0000000000..b737ba9ffc --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_pagination.scss @@ -0,0 +1,93 @@ +//// +/// @group pagination +//// + +$cadmin-pagination-font-size: 0.875rem !default; // 14px +$cadmin-pagination-line-height: 1 !default; + +// Pagination Item + +$cadmin-pagination-item-height: 2rem !default; // 32px + +// @deprecated as of v2 use the Sass map `$cadmin-pagination-item` instead + +$cadmin-pagination-item-margin-x: 0.25rem !default; // 4px + +// Pagination Link + +// @deprecated as of v2 use the Sass map `$cadmin-pagination-link` instead + +$cadmin-pagination-link-border-radius: 4px !default; + +// @deprecated as of v2 use the Sass map `$cadmin-pagination-link` instead + +$cadmin-pagination-link-transition: box-shadow 0.15s ease-in-out !default; + +$cadmin-pagination-link-first-border-radius: $cadmin-pagination-link-border-radius !default; +$cadmin-pagination-link-last-border-radius: $cadmin-pagination-link-border-radius !default; + +$cadmin-pagination-bg: transparent !default; +$cadmin-pagination-border-color: $cadmin-pagination-bg !default; +$cadmin-pagination-border-width: 0.0625rem !default; // 1px +$cadmin-pagination-color: $cadmin-gray-600 !default; +$cadmin-pagination-padding-x: 0.625rem !default; // 10px +$cadmin-pagination-padding-y: 0 !default; + +$cadmin-pagination-hover-bg: rgba(0, 0, 0, 0.02) !default; +$cadmin-pagination-hover-border-color: transparent !default; +$cadmin-pagination-hover-color: $cadmin-gray-900 !default; + +$cadmin-pagination-active-bg: rgba(0, 0, 0, 0.04) !default; +$cadmin-pagination-active-border-color: transparent !default; +$cadmin-pagination-active-color: $cadmin-pagination-hover-color !default; + +$cadmin-pagination-disabled-bg: transparent !default; +$cadmin-pagination-disabled-border-color: $cadmin-pagination-disabled-bg !default; +$cadmin-pagination-disabled-color: $cadmin-gray-600 !default; + +// @deprecated as of v2 use the Sass map `$cadmin-pagination-link-disabled` instead + +$cadmin-pagination-disabled-opacity: 0.5 !default; + +$cadmin-pagination-link-focus: () !default; +$cadmin-pagination-link-focus: map-deep-merge( + ( + bg: $cadmin-pagination-hover-bg, + border-color: $cadmin-pagination-hover-border-color, + color: $cadmin-pagination-hover-color, + ), + $cadmin-pagination-link-focus +); + +// Pagination Dropdown Menu + +$cadmin-pagination-dropdown-menu-spacer-y: 0.625rem !default; // 10px + +// Pagination Items Per Page Link + +$cadmin-pagination-items-per-page-link-focus: () !default; +$cadmin-pagination-items-per-page-link-focus: map-deep-merge( + ( + bg: map-get($cadmin-pagination-link-focus, bg), + border-color: map-get($cadmin-pagination-link-focus, border-color), + color: map-get($cadmin-pagination-link-focus, color), + ), + $cadmin-pagination-items-per-page-link-focus +); + +// Pagination Results + +$cadmin-pagination-results-color: $cadmin-pagination-color !default; + +// Sizes + +$cadmin-pagination-link-border-radius-sm: 0.3125rem !default; +$cadmin-pagination-font-size-sm: 0.75rem !default; // 12px +$cadmin-pagination-item-height-sm: 1.5rem !default; // 24px +$cadmin-pagination-padding-y-sm: 0 !default; + +$cadmin-pagination-link-border-radius-lg: 0.3125rem !default; // 5px +$cadmin-pagination-font-size-lg: 1.125rem !default; // 18px +$cadmin-pagination-item-height-lg: 2.75rem !default; //44px +$cadmin-pagination-padding-x-lg: 1rem !default; // 16px +$cadmin-pagination-padding-y-lg: 0 !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_panels.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_panels.scss new file mode 100644 index 0000000000..008d25f254 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_panels.scss @@ -0,0 +1,76 @@ +// Panel Header + +$cadmin-panel-header-border-bottom-width: 0 !default; +$cadmin-panel-header-font-size: 0.875rem !default; // 14px +$cadmin-panel-header-link-hover-text-decoration: none !default; + +$cadmin-panel-header-collapse-icon-font-size: 0.75rem !default; // 12px + +$cadmin-panel-header-link: () !default; +$cadmin-panel-header-link: map-deep-merge( + ( + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-panel-header-link +); + +$cadmin-panel-header-collapsed-link: () !default; +$cadmin-panel-header-collapsed-link: map-deep-merge( + ( + border-color: null, + transition: null, + ), + $cadmin-panel-header-collapsed-link +); + +// Panel Footer + +$cadmin-panel-footer-border-top-width: 0 !default; + +// Panel Title + +$cadmin-panel-title-font-size: 0.875rem !default; // 14px +$cadmin-panel-title-text-transform: uppercase !default; + +// Panel Title Small Element + +$cadmin-panel-title-small-font-size: 100% !default; +$cadmin-panel-title-small-margin-left: 0.375rem !default; // 6px + +// Panel Group Sm + +$cadmin-panel-group-sm: () !default; +$cadmin-panel-group-sm: map-deep-merge( + ( + title-font-size: 0.75rem, + ), + $cadmin-panel-group-sm +); + +// Panel Variants + +$cadmin-panel-secondary: () !default; +$cadmin-panel-secondary: map-deep-merge( + ( + border-color: $cadmin-gray-300, + color: $cadmin-gray-600, + header-bg: null, + header-border-color: $cadmin-gray-300, + footer-bg: null, + footer-border-color: $cadmin-gray-300, + ), + $cadmin-panel-secondary +); + +// Panel Unstyled + +$cadmin-panel-unstyled-header-link: () !default; +$cadmin-panel-unstyled-header-link: map-deep-merge( + ( + border-radius: 1px, + focus-box-shadow: 0 0 0 0.25rem $cadmin-body-bg#{','} 0 0 0 0.375rem $cadmin-primary-l1, + ), + $cadmin-panel-unstyled-header-link +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_popovers.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_popovers.scss new file mode 100644 index 0000000000..26c97f0299 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_popovers.scss @@ -0,0 +1,23 @@ +$cadmin-popover-border-color: transparent !default; +$cadmin-popover-border-radius: $cadmin-border-radius !default; // 4px +$cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default; +$cadmin-popover-max-width: 14.5rem !default; // 232px +$cadmin-popover-inline-scroller-max-height: 14.875rem !default; // 238px + +$cadmin-popover-arrow-outer-color: transparent !default; +$cadmin-popover-arrow-height: 0.3rem !default; +$cadmin-popover-arrow-offset: 0.625rem !default; // 10px +$cadmin-popover-arrow-width: $cadmin-popover-arrow-height * 2 !default; + +$cadmin-popover-header-bg: $cadmin-white !default; +$cadmin-popover-header-border-color: $cadmin-gray-300 !default; +$cadmin-popover-header-color: $cadmin-gray-900 !default; +$cadmin-popover-header-font-size: 0.875rem !default; // 14px +$cadmin-popover-header-margin-x: 1rem !default; // 16px +$cadmin-popover-header-margin-y: 0 !default; +$cadmin-popover-header-padding-x: 0 !default; +$cadmin-popover-header-padding-y: 0.75rem !default; // 12px + +$cadmin-popover-body-color: $cadmin-gray-600 !default; +$cadmin-popover-body-padding-x: 1rem !default; // 16px +$cadmin-popover-body-padding-y: 0.75rem !default; // 12px diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_progress-bars.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_progress-bars.scss new file mode 100644 index 0000000000..fb8fe39d0d --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_progress-bars.scss @@ -0,0 +1,22 @@ +$cadmin-progress-border-radius: 100px !default; +$cadmin-progress-box-shadow: none !default; +$cadmin-progress-font-size: 0.5625rem !default; +$cadmin-progress-height: 0.5rem !default; + +// Progress Sizes + +$cadmin-progress-border-radius-lg: 100px !default; + +// Progress Group + +$cadmin-progress-group-subtitle: () !default; +$cadmin-progress-group-subtitle: map-deep-merge( + ( + font-size: 0.75rem, + font-weight: $cadmin-font-weight-normal, + ), + $cadmin-progress-group-subtitle +); + +$cadmin-progress-group-addon-font-size: 0.875rem !default; +$cadmin-progress-group-addon-font-weight: $cadmin-font-weight-semi-bold !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_quick-action.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_quick-action.scss new file mode 100644 index 0000000000..a2dd9e4f52 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_quick-action.scss @@ -0,0 +1,3 @@ +$cadmin-quick-action-font-size: 1rem !default; // 16px + +$cadmin-quick-action-item-disabled-opacity: $cadmin-btn-disabled-opacity !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_range.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_range.scss new file mode 100644 index 0000000000..7e168da695 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_range.scss @@ -0,0 +1,23 @@ +$cadmin-clay-range-disabled-color: $cadmin-gray-500 !default; + +$cadmin-clay-range-input-group-text: () !default; +$cadmin-clay-range-input-group-text: map-deep-merge( + ( + color: $cadmin-gray-500, + ), + $cadmin-clay-range-input-group-text +); + +$cadmin-clay-range-input: () !default; +$cadmin-clay-range-input: map-deep-merge( + ( + color: $cadmin-gray-500, + thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), + track-bg: $cadmin-gray-200, + tooltip-padding: 0.5rem 0.75rem, + hover-thumb-bg: $cadmin-primary-l3, + focus-thumb-box-shadow: $cadmin-component-focus-inset-box-shadow, + disabled-thumb-bg: $cadmin-gray-100, + ), + $cadmin-clay-range-input +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_reorder.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_reorder.scss new file mode 100644 index 0000000000..cdbc616844 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_reorder.scss @@ -0,0 +1,7 @@ +$cadmin-clay-reorder-underlay-focus: () !default; +$cadmin-clay-reorder-underlay-focus: map-deep-merge( + ( + box-shadow: null, + ), + $cadmin-clay-reorder-underlay-focus +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_sheets.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_sheets.scss new file mode 100644 index 0000000000..2854fc41ec --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_sheets.scss @@ -0,0 +1,53 @@ +$cadmin-sheet-bg: $cadmin-white !default; +$cadmin-sheet-border-color: $cadmin-gray-300 !default; + +$cadmin-sheet-padding-bottom-mobile: null !default; +$cadmin-sheet-padding-left-mobile: 1rem !default; // 16px +$cadmin-sheet-padding-right-mobile: 1rem !default; // 16px +$cadmin-sheet-padding-top-mobile: 1rem !default; // 16px + +$cadmin-sheet-header-margin-bottom-mobile: 2rem !default; // 32px + +$cadmin-sheet-section-margin-bottom-mobile: 2rem !default; // 32px + +$cadmin-sheet-panel-group-margin-bottom-mobile: 1rem !default; // 16px + +$cadmin-sheet-footer-margin-bottom-mobile: 1rem !default; // 16px +$cadmin-sheet-footer-margin-top-mobile: 1rem !default; // 16px + +// Sheet Title + +$cadmin-sheet-title-font-size: 1.25rem !default; // 20px +$cadmin-sheet-title-font-weight: $cadmin-font-weight-bold !default; +$cadmin-sheet-title-margin-bottom-mobile: 1rem !default; // 16px + +// Sheet Subtitle + +$cadmin-sheet-subtitle-color: $cadmin-body-color !default; +$cadmin-sheet-subtitle-border-color: $cadmin-gray-500 !default; +$cadmin-sheet-subtitle-font-size: 0.875rem !default; // 14px +$cadmin-sheet-subtitle-padding-y: 0.5rem !default; // 8px +$cadmin-sheet-subtitle-margin-bottom-mobile: 1rem !default; // 16px + +// Sheet Subtitle as Panel Header + +$cadmin-sheet-subtitle-link: () !default; +$cadmin-sheet-subtitle-link: map-deep-merge( + ( + border-radius: 1px, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: 0 0 0 0.25rem $cadmin-white#{','} 0 0 0 0.375rem $cadmin-primary-l1, + focus-outline: 0, + ), + $cadmin-sheet-subtitle-link +); + +$cadmin-sheet-subtitle-collapse-icon-font-size: 0.75rem !default; + +// Sheet Tertiary Title + +$cadmin-sheet-tertiary-title-margin-bottom-mobile: 0.5rem !default; // 8px + +$cadmin-sheet-text-color: $cadmin-gray-600 !default; + +$cadmin-sheet-text-margin-bottom-mobile: 1rem !default; // 16px diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_sidebar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_sidebar.scss new file mode 100644 index 0000000000..37fdd6f1d6 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_sidebar.scss @@ -0,0 +1,81 @@ +// Sidebar Header Title + +$cadmin-sidebar-header-component-title: () !default; +$cadmin-sidebar-header-component-title: map-deep-merge( + ( + // 20px + font-size: 1.25rem + ), + $cadmin-sidebar-header-component-title +); + +// Sidebar Header Subtitle + +$cadmin-sidebar-header-component-subtitle: () !default; +$cadmin-sidebar-header-component-subtitle: map-deep-merge( + ( + font-size: 0.75rem, + font-weight: $cadmin-font-weight-normal, + ), + $cadmin-sidebar-header-component-subtitle +); + +// Sidebar DT + +$cadmin-sidebar-dt: () !default; +$cadmin-sidebar-dt: map-deep-merge( + ( + font-size: 0.75rem, + ), + $cadmin-sidebar-dt +); + +// Sidebar DD + +$cadmin-sidebar-dd: () !default; +$cadmin-sidebar-dd: map-deep-merge( + ( + font-size: 0.875rem, + ), + $cadmin-sidebar-dd +); + +// Sidebar List Group + +$cadmin-sidebar-list-group-border-color: $cadmin-secondary-l2 !default; + +// Sidebar Light + +$cadmin-sidebar-light: () !default; +$cadmin-sidebar-light: map-deep-merge( + ( + bg: $cadmin-white, + border-left-width: 0, + box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1), + panel-bg: $cadmin-gray-200, + dt: ( + color: $cadmin-gray-600, + ), + dd: ( + clay-link: ( + color: $cadmin-gray-900, + ), + ), + panel-unstyled: ( + header-link: ( + focus-box-shadow: 0 0 0 0.25rem $cadmin-white#{','} 0 0 0 0.375rem + $cadmin-primary-l1, + ), + ), + ), + $cadmin-sidebar-light +); + +$cadmin-sidebar-light-navigation-bar: () !default; +$cadmin-sidebar-light-navigation-bar: map-deep-merge( + ( + bg: $cadmin-white, + border-color: $cadmin-secondary-l2, + ), + $cadmin-sidebar-light-navigation-bar +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_stickers.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_stickers.scss new file mode 100644 index 0000000000..5fe3727bb9 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_stickers.scss @@ -0,0 +1,68 @@ +$cadmin-sticker-font-size: 1rem !default; // 16px +$cadmin-sticker-font-weight: $cadmin-font-weight-bold !default; + +// Sticker Sizes + +$cadmin-sticker-sm: () !default; +$cadmin-sticker-sm: map-deep-merge( + ( + font-size: 0.75rem, + ), + $cadmin-sticker-sm +); + +$cadmin-sticker-lg: () !default; +$cadmin-sticker-lg: map-deep-merge( + ( + font-size: 1.25rem, + ), + $cadmin-sticker-lg +); + +$cadmin-sticker-xl: () !default; +$cadmin-sticker-xl: map-deep-merge( + ( + font-size: 1.5rem, + ), + $cadmin-sticker-xl +); + +// Sticker Positions + +$cadmin-sticker-inside-offset: 1rem !default; // 16px + +// Sticker User Icon + +$cadmin-sticker-user-icon: () !default; +$cadmin-sticker-user-icon: map-deep-merge( + ( + box-shadow: 0 0 0 1px $cadmin-gray-300, + ), + $cadmin-sticker-user-icon +); + +// Sticker Variants + +$cadmin-sticker-primary-bg: $cadmin-white !default; +$cadmin-sticker-primary-color: $cadmin-primary !default; + +$cadmin-sticker-secondary-bg: $cadmin-white !default; +$cadmin-sticker-secondary-color: $cadmin-secondary !default; + +$cadmin-sticker-info-bg: $cadmin-white !default; +$cadmin-sticker-info-color: $cadmin-info !default; + +$cadmin-sticker-success-bg: $cadmin-white !default; +$cadmin-sticker-success-color: $cadmin-success !default; + +$cadmin-sticker-warning-bg: $cadmin-white !default; +$cadmin-sticker-warning-color: $cadmin-warning !default; + +$cadmin-sticker-danger-bg: $cadmin-white !default; +$cadmin-sticker-danger-color: $cadmin-danger !default; + +$cadmin-sticker-light-bg: $cadmin-white !default; +$cadmin-sticker-light-color: $cadmin-dark !default; + +$cadmin-sticker-dark-bg: $cadmin-dark !default; +$cadmin-sticker-dark-color: $cadmin-white !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_tables.scss new file mode 100644 index 0000000000..5f818bae24 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_tables.scss @@ -0,0 +1,200 @@ +$cadmin-table-bg: $cadmin-white !default; +$cadmin-table-accent-bg: $cadmin-gray-100 !default; +$cadmin-table-hover-bg: lighten($cadmin-component-active-bg, 44.9) !default; +$cadmin-table-border-color: $cadmin-gray-300 !default; +$cadmin-table-font-size: 0.875rem !default; + +$cadmin-table-disabled-color: $cadmin-gray-500 !default; + +$cadmin-table-head-bg: $cadmin-white !default; +$cadmin-table-head-border-bottom-width: 1px !default; +$cadmin-table-head-color: $cadmin-gray-600 !default; +$cadmin-table-head-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-table-head-link: () !default; +$cadmin-table-head-link: map-deep-merge( + ( + border-radius: 1px, + color: $cadmin-gray-600, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-table-head-link +); + +// Table Body + +$cadmin-c-table-tbody: () !default; +$cadmin-c-table-tbody: map-merge( + ( + background-color: $cadmin-white, + ), + $cadmin-c-table-tbody +); + +// Table Footer + +$cadmin-c-table-tfoot: () !default; +$cadmin-c-table-tfoot: map-merge( + ( + background-color: $cadmin-table-bg, + ), + $cadmin-c-table-tfoot +); + +$cadmin-table-caption-color: $cadmin-gray-900 !default; + +$cadmin-table-divider-bg: $cadmin-gray-100 !default; +$cadmin-table-divider-color: $cadmin-gray-600 !default; +$cadmin-table-divider-font-size: 0.75rem !default; // 12px +$cadmin-table-divider-font-weight: $cadmin-font-weight-semi-bold !default; +$cadmin-table-divider-padding: 0.4375rem 0.75rem !default; +$cadmin-table-divider-text-transform: uppercase !default; + +$cadmin-table-quick-action-menu-accent-bg: $cadmin-table-accent-bg !default; +$cadmin-table-quick-action-menu-accent-active-bg: $cadmin-table-hover-bg !default; +$cadmin-table-quick-action-menu-active-bg: $cadmin-gray-200 !default; +$cadmin-table-quick-action-menu-hover-bg: $cadmin-table-hover-bg !default; + +// Table Title + +$cadmin-table-title-link: () !default; +$cadmin-table-title-link: map-deep-merge( + ( + border-radius: 1px, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-table-title-link +); + +$cadmin-table-title: () !default; +$cadmin-table-title: map-deep-merge( + ( + color: $cadmin-gray-900, + font-size: 0.875rem, + ), + $cadmin-table-title +); + +// Table Action Link + +$cadmin-table-action-link: () !default; +$cadmin-table-action-link: map-deep-merge( + ( + color: $cadmin-gray-600, + font-size: 1rem, + transition: $cadmin-btn-transition, + hover-bg: rgba(0, 0, 0, 0.02), + hover-color: $cadmin-gray-900, + focus-bg: rgba(0, 0, 0, 0.02), + focus-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + active-bg: rgba(0, 0, 0, 0.04), + ), + $cadmin-table-action-link +); + +// Table Link + +$cadmin-table-link: () !default; +$cadmin-table-link: map-deep-merge( + ( + border-radius: 1px, + color: $cadmin-gray-900, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-table-link +); + +// Table List + +$cadmin-table-list-border-color: $cadmin-gray-300 !default; +$cadmin-table-list-color: $cadmin-body-color !default; + +$cadmin-table-list-accent-bg: $cadmin-gray-100 !default; +$cadmin-table-list-hover-bg: $cadmin-table-hover-bg !default; +$cadmin-table-list-active-bg: $cadmin-table-list-hover-bg !default; + +$cadmin-table-list-disabled-color: $cadmin-gray-500 !default; + +$cadmin-table-list-head-bg: $cadmin-white !default; + +$cadmin-table-list-link-color: $cadmin-gray-600 !default; + +$cadmin-table-list-divider-padding-x: 0.75rem !default; // 12px +$cadmin-table-list-divider-padding-y: 0.4375rem !default; // 7px + +// Table List Title + +$cadmin-table-list-title: () !default; +$cadmin-table-list-title: map-deep-merge( + ( + color: $cadmin-gray-900, + font-size: 0.875rem, + line-height: 1.45, + ), + $cadmin-table-list-title +); + +$cadmin-table-list-title-link: () !default; +$cadmin-table-list-title-link: map-deep-merge( + ( + border-radius: 1px, + color: $cadmin-gray-900, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-table-list-title-link +); + +// Table List Link + +$cadmin-table-list-link: () !default; +$cadmin-table-list-link: map-deep-merge( + ( + border-radius: 1px, + color: $cadmin-gray-900, + display: inline-block, + max-width: 100%, + transition: box-shadow 0.15s ease-in-out, + hover-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + ), + $cadmin-table-list-link +); + +// Table List Action Link + +$cadmin-table-list-action-link: () !default; +$cadmin-table-list-action-link: map-deep-merge( + ( + color: $cadmin-gray-600, + font-size: 1rem, + transition: $cadmin-btn-transition, + hover-bg: rgba(0, 0, 0, 0.02), + hover-color: $cadmin-gray-900, + focus-bg: rgba(0, 0, 0, 0.02), + focus-color: $cadmin-gray-900, + focus-box-shadow: $cadmin-component-focus-box-shadow, + focus-outline: 0, + active-bg: rgba(0, 0, 0, 0.04), + ), + $cadmin-table-list-action-link +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_tbar.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_tbar.scss new file mode 100644 index 0000000000..eff4202298 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_tbar.scss @@ -0,0 +1,55 @@ +$cadmin-component-tbar: () !default; +$cadmin-component-tbar: map-deep-merge( + ( + border-color: $cadmin-gray-300, + color: $cadmin-gray-600, + ), + $cadmin-component-tbar +); + +// Subnav Tbar Primary + +$cadmin-subnav-tbar-primary-component-link: () !default; +$cadmin-subnav-tbar-primary-component-link: map-deep-merge( + ( + disabled-opacity: 0.65, + ), + $cadmin-subnav-tbar-primary-component-link +); + +$cadmin-subnav-tbar-primary-component-label-close: () !default; +$cadmin-subnav-tbar-primary-component-label-close: map-deep-merge( + ( + disabled-opacity: 0.65, + ), + $cadmin-subnav-tbar-primary-component-label-close +); + +// Subnav Tbar Primary Disabled + +$cadmin-subnav-tbar-primary-disabled-component-label: () !default; +$cadmin-subnav-tbar-primary-disabled-component-label: map-deep-merge( + ( + border-color: #8e94aa, + ), + $cadmin-subnav-tbar-primary-disabled-component-label +); + +$cadmin-subnav-tbar-primary-disabled: () !default; +$cadmin-subnav-tbar-primary-disabled: map-deep-merge( + ( + color: #8e94aa, + ), + $cadmin-subnav-tbar-primary-disabled +); + +// Subnav Tbar Light + +$cadmin-subnav-tbar-light: () !default; +$cadmin-subnav-tbar-light: map-deep-merge( + ( + bg-color: $cadmin-light-l2, + color: $cadmin-gray-600, + ), + $cadmin-subnav-tbar-light +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_time.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_time.scss new file mode 100644 index 0000000000..29c3a910e6 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_time.scss @@ -0,0 +1,16 @@ +$cadmin-clay-time-btn: () !default; +$cadmin-clay-time-btn: map-deep-merge( + ( + color: $cadmin-secondary, + focus-box-shadow: 0 0 0 1px #80acff, + ), + $cadmin-clay-time-btn +); + +$cadmin-clay-time-inner-spin: () !default; +$cadmin-clay-time-inner-spin: map-deep-merge( + ( + border-color: $cadmin-secondary-l2, + ), + $cadmin-clay-time-inner-spin +); diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_timelines.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_timelines.scss new file mode 100644 index 0000000000..59e48200d2 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_timelines.scss @@ -0,0 +1,3 @@ +$cadmin-timeline-border-color: $cadmin-gray-900 !default; +$cadmin-timeline-icon-border-color: $cadmin-gray-600 !default; +$cadmin-timeline-increment-label-color: $cadmin-gray-600 !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_toggle-switch.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_toggle-switch.scss new file mode 100644 index 0000000000..187288d754 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_toggle-switch.scss @@ -0,0 +1,43 @@ +// must all be same units--start +$cadmin-toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value +$cadmin-toggle-switch-bar-padding-mobile: 4px !default; + +$cadmin-toggle-switch-button-width: 16px !default; // 24px +$cadmin-toggle-switch-button-width-mobile: 16px !default; // 16px + +$cadmin-toggle-switch-bar-height: ($cadmin-toggle-switch-bar-padding * 2) + + $cadmin-toggle-switch-button-width !default; +$cadmin-toggle-switch-bar-height-mobile: ( + $cadmin-toggle-switch-bar-padding-mobile * 2 + ) + $cadmin-toggle-switch-button-width-mobile !default; + +$cadmin-toggle-switch-bar-width: 40px !default; // width of switch bar +$cadmin-toggle-switch-bar-width-mobile: 40px !default; // width of switch bar +// must all be same units--end + +$cadmin-toggle-switch-bar-bg: $cadmin-gray-500 !default; +$cadmin-toggle-switch-bar-border-color: $cadmin-toggle-switch-bar-bg !default; +$cadmin-toggle-switch-bar-border-radius: 20px !default; +$cadmin-toggle-switch-bar-border-width: 1px !default; +$cadmin-toggle-switch-bar-font-size: 0.625rem !default; +$cadmin-toggle-switch-bar-font-size-mobile: 0.625rem !default; +$cadmin-toggle-switch-bar-icon-color: $cadmin-white !default; +$cadmin-toggle-switch-bar-focus-box-shadow: $cadmin-custom-control-indicator-focus-box-shadow !default; + +$cadmin-toggle-switch-button-bg: $cadmin-white !default; +$cadmin-toggle-switch-button-border-color: $cadmin-toggle-switch-button-bg !default; +$cadmin-toggle-switch-button-border-radius: 50% !default; +$cadmin-toggle-switch-button-border-width: 1px !default; +$cadmin-toggle-switch-button-font-size: $cadmin-toggle-switch-bar-font-size !default; // 12px +$cadmin-toggle-switch-button-font-size-mobile: $cadmin-toggle-switch-bar-font-size-mobile !default; // 10px +$cadmin-toggle-switch-button-icon-color: $cadmin-gray-900 !default; + +// Toggle Switch On +$cadmin-toggle-switch-bar-on-bg: $cadmin-component-active-bg !default; +$cadmin-toggle-switch-bar-on-border-color: $cadmin-toggle-switch-bar-on-bg !default; +$cadmin-toggle-switch-bar-on-icon-color: $cadmin-white !default; + +$cadmin-toggle-switch-button-on-bg: $cadmin-white !default; +$cadmin-toggle-switch-button-on-border-color: $cadmin-white !default; +$cadmin-toggle-switch-button-on-border-radius: $cadmin-toggle-switch-button-border-radius !default; +$cadmin-toggle-switch-button-on-icon-color: $cadmin-primary !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_tooltip.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_tooltip.scss new file mode 100644 index 0000000000..528bd7e3e3 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_tooltip.scss @@ -0,0 +1,9 @@ +$cadmin-tooltip-bg: $cadmin-gray-900 !default; +$cadmin-tooltip-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.4) !default; +$cadmin-tooltip-font-size: 0.875rem !default; // 14px +$cadmin-tooltip-max-width: 230px !default; +$cadmin-tooltip-opacity: 1 !default; +$cadmin-tooltip-padding-x: 0.75rem !default; // 12px +$cadmin-tooltip-padding-y: 0.75rem !default; // 12px + +$cadmin-tooltip-arrow-offset: 0.5rem !default; // 8px diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_type.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_type.scss new file mode 100644 index 0000000000..9a018f9009 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_type.scss @@ -0,0 +1,5 @@ +$cadmin-b-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-strong-font-weight: $cadmin-font-weight-semi-bold !default; + +$cadmin-code-color: #e83e8c !default; diff --git a/packages/clay-css/src/scss/cadmin/atlas/variables/_utilities.scss b/packages/clay-css/src/scss/cadmin/atlas/variables/_utilities.scss new file mode 100644 index 0000000000..8d6b6da5e0 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/atlas/variables/_utilities.scss @@ -0,0 +1,34 @@ +$cadmin-bg-checkered-fg: $cadmin-gray-300 !default; + +// C Focus Inset + +$cadmin-c-focus-inset-focus: () !default; +$cadmin-c-focus-inset-focus: map-deep-merge( + ( + box-shadow: $cadmin-component-focus-inset-box-shadow, + border-color: $cadmin-primary-l1, + outline: 0, + ), + $cadmin-c-focus-inset-focus +); + +// Close + +$cadmin-close: () !default; +$cadmin-close: map-deep-merge( + ( + color: $cadmin-gray-900, + opacity: 1, + hover-color: $cadmin-gray-900, + hover-opacity: 1, + focus-box-shadow: $cadmin-btn-focus-box-shadow, + focus-opacity: 1, + focus-outline: 0, + disabled-color: $cadmin-gray-600, + disabled-opacity: $cadmin-btn-disabled-opacity, + btn-focus-box-shadow: $cadmin-btn-focus-box-shadow, + ), + $cadmin-close +); + +$cadmin-page-header-bg: $cadmin-white !default; diff --git a/packages/clay-css/src/scss/cadmin/components/_alerts.scss b/packages/clay-css/src/scss/cadmin/components/_alerts.scss new file mode 100644 index 0000000000..9cb306c050 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_alerts.scss @@ -0,0 +1,276 @@ +.alert { + border-color: transparent; + border-style: $cadmin-alert-border-style; + border-width: $cadmin-alert-border-width; + + @include border-radius($cadmin-alert-border-radius); + + display: block; + font-size: $cadmin-alert-font-size; + margin-bottom: $cadmin-alert-margin-bottom; + padding: $cadmin-alert-padding-y $cadmin-alert-padding-x; + position: relative; + word-wrap: break-word; + + .alert-btn { + @include clay-button-variant($cadmin-alert-btn); + } + + .btn-group { + @include clay-container($cadmin-alert-btn-group); + } + + .btn-group-item { + @include clay-container($cadmin-alert-btn-group-item); + } + + .close { + @include clay-close($cadmin-alert-close); + } + + .lead { + font-size: $cadmin-alert-lead-font-size; + font-weight: $cadmin-alert-lead-font-weight; + margin-right: $cadmin-alert-lead-spacer-x; + } + + .component-title { + @include clay-text-typography($cadmin-alert-title); + } + + .component-subtitle { + @include clay-text-typography($cadmin-alert-subtitle); + } +} + +.alert-heading { + // Specified to prevent conflicts of changing $cadmin-headings-color + + color: inherit; +} + +.alert-footer { + @include clay-container($cadmin-alert-footer); +} + +.alert-link, +.alert-link.btn-unstyled { + font-weight: $cadmin-alert-link-font-weight; + text-decoration: $cadmin-alert-link-decoration; + + &:hover, + &:focus { + text-decoration: $cadmin-alert-link-hover-decoration; + } +} + +.alert-indicator { + font-size: $cadmin-alert-indicator-font-size; + + + .lead { + margin-left: $cadmin-alert-lead-spacer-x; + } +} + +// Alert Dismissible + +.alert-dismissible { + padding-bottom: $cadmin-alert-dismissible-padding-bottom; + padding-left: $cadmin-alert-dismissible-padding-left; + padding-right: $cadmin-alert-dismissible-padding-right; + padding-top: $cadmin-alert-dismissible-padding-top; +} + +// Alert Fluid + +.alert-fluid { + @include clay-css($cadmin-alert-fluid); + + &.alert-dismissible { + .container, + .container-fluid { + @include clay-css($cadmin-alert-fluid-dismissible-container); + } + } + + .container, + .container-fluid { + @include clay-css($cadmin-alert-fluid-container); + } + + .close { + right: calc( + #{$cadmin-grid-gutter-width / 2} + #{$cadmin-nav-btn-margin-x} + ); + } +} + +// Alert Notifications + +.alert-container { + height: 0; + position: relative; +} + +.alert-notifications { + .alert { + @include clay-css($cadmin-alert-notification); + + @include media-breakpoint-down(sm, $cadmin-grid-breakpoints) { + @include clay-css($cadmin-alert-notification-sm-down); + } + + &:last-child { + margin-bottom: 0; + } + } + + .alert-fluid { + padding-bottom: 0; + padding-top: 0; + } +} + +.alert-notifications-absolute { + bottom: $cadmin-alert-notifications-absolute-bottom; + height: 0; + left: $cadmin-alert-notifications-absolute-left; + position: absolute; + right: $cadmin-alert-notifications-absolute-right; + top: $cadmin-alert-notifications-absolute-top; + z-index: $cadmin-zindex-alert-notifications; + + @include clay-scale-component { + bottom: $cadmin-alert-notifications-absolute-bottom-mobile; + left: $cadmin-alert-notifications-absolute-left-mobile; + right: $cadmin-alert-notifications-absolute-right-mobile; + top: $cadmin-alert-notifications-absolute-top-mobile; + } +} + +.alert-notifications-fixed { + bottom: $cadmin-alert-notifications-fixed-bottom; + left: $cadmin-alert-notifications-fixed-left; + position: fixed; + right: $cadmin-alert-notifications-fixed-right; + top: $cadmin-alert-notifications-fixed-top; + z-index: $cadmin-zindex-alert-notifications; + + @include clay-scale-component { + bottom: $cadmin-alert-notifications-fixed-bottom-mobile; + left: $cadmin-alert-notifications-fixed-left-mobile; + right: $cadmin-alert-notifications-fixed-right-mobile; + top: $cadmin-alert-notifications-fixed-top-mobile; + } +} + +// Alert List + +.alert-list { + display: flex; + flex-direction: column; + margin-bottom: 0; + padding-left: 0; + + .close { + top: 50%; + transform: translateY(-50%); + } +} + +// Alert in Modal + +.modal-body { + .alert { + .close { + right: $cadmin-modal-inner-padding; + } + } + + .alert-list { + .alert-fluid:last-child { + margin-bottom: -$cadmin-alert-fluid-border-bottom-width; + } + } +} + +// Alert Autofit Row + +.autofit-row.alert-autofit-row { + @include clay-autofit-row($cadmin-alert-autofit-row); +} + +// Alert Feedback + +.alert-feedback.alert { + @include clay-css($cadmin-alert-feedback); + + .alert-autofit-row, + .autofit-row { + display: inline; + margin-left: 0; + margin-right: 0; + + > .autofit-col { + display: inline; + padding-left: 0; + padding-right: 0.25em; + + > .autofit-section { + display: inline; + } + } + } + + .close { + @include clay-close($cadmin-alert-feedback-close); + } + + .lead { + margin-right: 0; + + + .component-text { + margin-left: 0.25em; + } + } +} + +// Alert Variants + +@each $cadmin-color, $cadmin-value in $cadmin-alert-palette { + .alert-#{$cadmin-color} { + background-color: map-get($cadmin-value, bg); + border-color: map-get($cadmin-value, border-color); + color: map-get($cadmin-value, color); + + hr { + border-top-color: darken(map-get($cadmin-value, border-color), 5%); + } + + .alert-btn { + @include clay-button-variant(map-get($cadmin-value, alert-btn)); + } + + .close { + color: map-get($cadmin-value, close-color); + + &:hover, + &:focus { + color: map-get($cadmin-value, close-hover-color); + } + } + + .alert-link { + color: map-get($cadmin-value, link-color); + + &:hover, + &:focus { + color: map-get($cadmin-value, link-hover-color); + } + } + + .lead { + color: map-get($cadmin-value, lead-color); + } + } +} diff --git a/packages/clay-css/src/scss/cadmin/components/_application-bar.scss b/packages/clay-css/src/scss/cadmin/components/_application-bar.scss new file mode 100644 index 0000000000..7c164f327e --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_application-bar.scss @@ -0,0 +1,19 @@ +.application-bar { + flex-wrap: nowrap; + + @include clay-navbar-size($cadmin-application-bar-size); + @include clay-navbar-variant($cadmin-application-bar-base); + + .container, + .container-fluid { + flex-wrap: nowrap; + } + + .navbar-nav { + flex-wrap: nowrap; + } +} + +.application-bar-dark { + @include clay-navbar-variant($cadmin-application-bar-dark); +} diff --git a/packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss b/packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss new file mode 100644 index 0000000000..7744ac8d53 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_aspect-ratio.scss @@ -0,0 +1,234 @@ +%aspect-ratio { + display: block; + overflow: hidden; + position: relative; + + @include clay-aspect-ratio; +} + +.aspect-ratio { + @extend %aspect-ratio; +} + +// Aspect Ratio Item + +%aspect-ratio-item { + left: 0; + position: absolute; + word-wrap: break-word; +} + +.aspect-ratio-item { + @extend %aspect-ratio-item; +} + +// Fluid + +%aspect-ratio-item-fluid { + max-width: 100%; + position: absolute; + word-wrap: break-word; +} + +.aspect-ratio-item-fluid { + @extend %aspect-ratio-item-fluid; +} + +// Vertical Fluid + +%aspect-ratio-item-vertical-fluid { + max-height: 100%; + position: absolute; + word-wrap: break-word; +} + +.aspect-ratio-item-vertical-fluid { + @extend %aspect-ratio-item-vertical-fluid; +} + +// Flush + +%aspect-ratio-item-flush { + max-width: none; + position: absolute; + width: 100.6%; // Fixes subpixel rendering issues +} + +.aspect-ratio-item-flush { + @extend %aspect-ratio-item-flush; +} + +%aspect-ratio-item-vertical-flush { + height: 100.6%; // Fixes subpixel rendering issues + max-height: none; + position: absolute; +} + +.aspect-ratio-item-vertical-flush { + @extend %aspect-ratio-item-vertical-flush; +} + +// Top Left + +%aspect-ratio-item-top-left { + @include clay-position(top-left); +} + +.aspect-ratio-item-top-left { + @extend %aspect-ratio-item-top-left; +} + +// Top Center + +%aspect-ratio-item-top-center { + @include clay-position(top-center); +} + +.aspect-ratio-item-top-center { + @extend %aspect-ratio-item-top-center; +} + +// Top Right + +%aspect-ratio-item-top-right { + @include clay-position(top-right); +} + +.aspect-ratio-item-top-right { + @extend %aspect-ratio-item-top-right; +} + +// Right Middle + +%aspect-ratio-item-right-middle { + @include clay-position(right-middle); +} + +.aspect-ratio-item-right-middle { + @extend %aspect-ratio-item-right-middle; +} + +// Bottom Right + +%aspect-ratio-item-bottom-right { + @include clay-position(bottom-right); +} + +.aspect-ratio-item-bottom-right { + @extend %aspect-ratio-item-bottom-right; +} + +// Bottom Center + +%aspect-ratio-item-bottom-center { + @include clay-position(bottom-center); +} + +.aspect-ratio-item-bottom-center { + @extend %aspect-ratio-item-bottom-center; +} + +// Bottom Left + +%aspect-ratio-item-bottom-left { + @include clay-position(bottom-left); +} + +.aspect-ratio-item-bottom-left { + @extend %aspect-ratio-item-bottom-left; +} + +// Left Middle + +%aspect-ratio-item-left-middle { + @include clay-position(left-middle); +} + +.aspect-ratio-item-left-middle { + @extend %aspect-ratio-item-left-middle; +} + +// Center Middle + +%aspect-ratio-item-center-middle { + @include clay-position(center-middle); +} + +.aspect-ratio-item-center-middle { + @extend %aspect-ratio-item-center-middle; +} + +// 3 to 2 + +%aspect-ratio-3-to-2 { + @include clay-aspect-ratio(3, 2); +} + +.aspect-ratio-3-to-2 { + @extend %aspect-ratio-3-to-2; +} + +// 4 to 3 + +%aspect-ratio-4-to-3 { + @include clay-aspect-ratio(4, 3); +} + +.aspect-ratio-4-to-3 { + @extend %aspect-ratio-4-to-3; +} + +// 8 to 5 + +%aspect-ratio-8-to-5 { + @include clay-aspect-ratio(8, 5); +} + +.aspect-ratio-8-to-5 { + @extend %aspect-ratio-8-to-5; +} + +// 16 to 9 + +%aspect-ratio-16-to-9 { + @include clay-aspect-ratio(16, 9); +} + +.aspect-ratio-16-to-9 { + @extend %aspect-ratio-16-to-9; +} + +// Bg Contain + +%aspect-ratio-bg-contain { + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +.aspect-ratio-bg-contain { + @extend %aspect-ratio-bg-contain; +} + +// Bg Cover + +%aspect-ratio-bg-cover { + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.aspect-ratio-bg-cover { + @extend %aspect-ratio-bg-cover; +} + +// Bg Center + +%aspect-ratio-bg-center { + background-position: center; + background-repeat: no-repeat; +} + +.aspect-ratio-bg-center { + @extend %aspect-ratio-bg-center; +} diff --git a/packages/clay-css/src/scss/cadmin/components/_badges.scss b/packages/clay-css/src/scss/cadmin/components/_badges.scss new file mode 100644 index 0000000000..85d30801cf --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_badges.scss @@ -0,0 +1,203 @@ +.badge { + border-color: $cadmin-badge-border-color; + border-style: $cadmin-badge-border-style; + border-width: $cadmin-badge-border-width; + + @include border-radius($cadmin-badge-border-radius); + + display: inline-flex; + font-size: $cadmin-badge-font-size; + font-weight: $cadmin-badge-font-weight; + line-height: $cadmin-badge-line-height; + margin-bottom: $cadmin-badge-spacer-y; + margin-right: $cadmin-badge-spacer-x; + margin-top: $cadmin-badge-spacer-y; + max-width: 100%; + padding: $cadmin-badge-padding-y $cadmin-badge-padding-x; + text-align: center; + + @include transition($cadmin-badge-transition); + + white-space: inherit; + word-wrap: break-word; + + // Empty badges collapse automatically + + &:empty { + display: none; + } + + a { + color: $cadmin-badge-link-color; + text-decoration: $cadmin-badge-link-text-decoration; + + &:hover, + &:focus { + color: $cadmin-badge-link-hover-color; + text-decoration: $cadmin-badge-link-hover-text-decoration; + } + } + + // Inline Item in Badges are deprecated in v2.0.0-rc.11 use .badge-item + // pattern instead + .inline-item { + a { + align-items: center; + display: inline-flex; + margin-top: $cadmin-badge-lexicon-icon-margin-top; + } + + .btn-unstyled { + color: inherit; + display: inline-flex; + margin-top: $cadmin-badge-lexicon-icon-margin-top; + max-width: none; + } + + .close { + color: inherit; + display: inline-flex; + float: none; + font-size: inherit; + margin-top: $cadmin-badge-lexicon-icon-margin-top; + opacity: 1; + } + + a, + .btn-unstyled, + .close { + .lexicon-icon { + margin-top: 0; + } + } + + .lexicon-icon { + height: $cadmin-badge-lexicon-icon-height; + margin-top: $cadmin-badge-lexicon-icon-margin-top; + width: $cadmin-badge-lexicon-icon-width; + } + } +} + +.badge[href] { + &:hover { + text-decoration: none; + } + + &:focus { + outline: 0; + } +} + +.badge-item { + display: flex; + flex-direction: column; + flex-shrink: 0; + justify-content: center; + min-height: 0; + position: relative; + text-align: left; + + a { + display: inline-flex; + } + + .btn-unstyled { + color: inherit; + display: inline-flex; + } + + .close { + @include clay-close($cadmin-badge-close); + } + + .lexicon-icon { + height: $cadmin-badge-lexicon-icon-height; + margin-top: $cadmin-badge-lexicon-icon-margin-top; + width: $cadmin-badge-lexicon-icon-width; + } +} + +.badge-item-expand { + flex-grow: 1; + flex-shrink: 1; + min-width: $cadmin-badge-item-expand-min-width; + word-wrap: break-word; + + a { + flex-direction: column; + } +} + +.badge-item-before { + margin-right: $cadmin-badge-item-spacer-x; +} + +.badge-item-after { + margin-left: $cadmin-badge-item-spacer-x; +} + +// Badge C Inner + +@if ($cadmin-enable-c-inner) { + .badge > .c-inner { + margin: -#{$cadmin-badge-padding-y} -#{$cadmin-badge-padding-x}; + max-width: none; + } +} + +// Quick fix for badges in buttons + +.btn .badge { + margin-right: 0; + position: relative; + top: -1px; +} + +// Badge Pill + +.badge-pill { + @include border-radius($cadmin-badge-pill-border-radius); + + padding-left: $cadmin-badge-pill-padding-x; + padding-right: $cadmin-badge-pill-padding-x; +} + +// Badge Variants + +@each $cadmin-color, $cadmin-value in $cadmin-badge-palette { + .badge-#{$cadmin-color} { + background-color: map-get($cadmin-value, bg); + border-color: map-get($cadmin-value, border-color); + color: map-get($cadmin-value, color); + + &[href] { + &:hover { + background-color: map-get($cadmin-value, hover-bg); + border-color: map-get($cadmin-value, hover-border-color); + color: map-get($cadmin-value, hover-color); + } + + &:focus, + &.focus { + background-color: map-get($cadmin-value, hover-bg); + border-color: map-get($cadmin-value, hover-border-color); + box-shadow: 0 + 0 + 0 + $cadmin-badge-focus-width + rgba(map-get($cadmin-value, bg), 0.5); + color: map-get($cadmin-value, hover-color); + } + } + + a { + color: map-get($cadmin-value, link-color); + + &:hover, + &:focus { + color: map-get($cadmin-value, link-hover-color); + } + } + } +} diff --git a/packages/clay-css/src/scss/cadmin/components/_base.scss b/packages/clay-css/src/scss/cadmin/components/_base.scss new file mode 100644 index 0000000000..4063e59754 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_base.scss @@ -0,0 +1,29 @@ +// This is similar to the html and body tag allows you to isolate all styles inside it. + +%cadmin { + @include clay-css($cadmin); +} + +// %cadmin-sizing-reset resets {min-|max-}height, margin, padding, {min-|max-}width properties to browser default + +%cadmin-reset { + @include clay-css($cadmin-reset); +} + +// Resets pseudo elements + +%cadmin-pseudo-reset { + &::before, + &::after { + content: normal; + display: inline; + + @extend %cadmin-reset !optional; + } +} + +html#{$cadmin-selector} { + .cadmin { + @extend %cadmin !optional; + } +} diff --git a/packages/clay-css/src/scss/cadmin/components/_breadcrumbs.scss b/packages/clay-css/src/scss/cadmin/components/_breadcrumbs.scss new file mode 100644 index 0000000000..12d38a83f0 --- /dev/null +++ b/packages/clay-css/src/scss/cadmin/components/_breadcrumbs.scss @@ -0,0 +1,116 @@ +.breadcrumb { + background-color: $cadmin-breadcrumb-bg; + + @include border-radius($cadmin-breadcrumb-border-radius); + + display: flex; + flex-wrap: wrap; + font-size: $cadmin-breadcrumb-font-size; + list-style: none; + margin-bottom: $cadmin-breadcrumb-margin-bottom; + padding: $cadmin-breadcrumb-padding-y $cadmin-breadcrumb-padding-x; +} + +.breadcrumb-link { + @include clay-link($cadmin-breadcrumb-link); + + > .breadcrumb-text-truncate { + text-decoration: $cadmin-breadcrumb-link-text-decoration; + + &:hover, + &:focus { + text-decoration: $cadmin-breadcrumb-link-hover-text-decoration; + } + } +} + +.breadcrumb-item { + font-size: $cadmin-breadcrumb-font-size; + font-weight: $cadmin-breadcrumb-font-weight; + + @if ($cadmin-breadcrumb-divider-svg-icon) { + margin-right: 0.5em; + position: relative; + } + + &.active, + .active { + color: $cadmin-breadcrumb-active-color; + font-weight: $cadmin-breadcrumb-active-font-weight; + } + + > span { + text-transform: $cadmin-breadcrumb-text-transform; + } + + + .breadcrumb-item { + padding-left: if( + $cadmin-breadcrumb-divider-svg-icon, + 1em, + $cadmin-breadcrumb-item-padding + ); + + &::before { + color: $cadmin-breadcrumb-divider-color; + display: block; + float: left; + + @if ($cadmin-breadcrumb-divider-svg-icon) { + background-image: $cadmin-breadcrumb-divider-svg-icon; + background-repeat: no-repeat; + background-size: 100%; + content: ''; + height: $cadmin-breadcrumb-divider-svg-icon-height; + left: 0; + margin-top: -$cadmin-breadcrumb-divider-svg-icon-height / 2; + padding: 0; + position: absolute; + top: 50%; + width: $cadmin-breadcrumb-divider-svg-icon-width; + } @else { + content: escape-svg($cadmin-breadcrumb-divider); + font-family: $cadmin-breadcrumb-divider-font-family; + font-weight: $cadmin-breadcrumb-divider-font-weight; + padding-left: 0.4em; + padding-right: 0.4em; + } + } + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `