1 line
7.2 KiB
Plaintext
1 line
7.2 KiB
Plaintext
{"version":3,"sources":["TCAssignmentDemo.module.scss","../../styles/_variables.scss"],"names":[],"mappings":"AAEA,4CACE,eAAgB,CADlB,2DAIM,WAAY,CACZ,WAAY,CACZ,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,yBC0Gc,CDzGd,eCkGgB,CD5GtB,oFAcI,kBC2ImB,CD1InB,UCmGa,CDlHjB,sFAmBI,wBCuHkB,CD1ItB,kFAuBI,YAAa,CAvBjB,uFAyBM,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,cAAe","file":"4.4467dc84.chunk.css","sourcesContent":["@import './../../styles/variables';\n\n.c-TCAssignmentDemo {\n margin-top: 1rem;\n\n [class*=\"jCol-\"] {\n width: 100px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px groove $neutral-10;\n font-weight: $bold-font-weight;\n }\n\n .tile-animation {\n background: $success-color;\n color: $neutral-00;\n }\n\n .tile-highlighted {\n border: 5px solid $accent-color;\n }\n\n .current-tile {\n padding: 15px;\n span {\n width: 100%;\n height: 100%;\n border-radius: 24px;\n background: red;\n }\n }\n}\n","// Project-Wide Variables\n// ===\n//\n// Edit these as needed. Some guidelines:\n//\n// - Names should be lowercase and dash-separated;\n// - Qualifiers should be added to the beginning of related variables: use\n// `$small-font-size`, not `$font-size-small`;\n// - Numeric scales should use increments of 10; these numbers are arbitrary and\n// should not map to actual values. If really necessary, additional values can\n// be added in between, e.g. $neutral-15 between 10 and 20.\n//\n//\n// Table of Contents\n// ---\n//\n// [AAA] Basic Layout\n// [BBB] Responsive Layout\n// [CCC] Typography\n// [DDD] Color Palette\n// [EEE] Appearance\n// [FFF] Z-Index\n// [GGG] Shorthands\n\n\n// [AAA] Basic Layout\n// ---\n\n// Basic unit for spacing and alignment; 6 to 12px recommended. Apply in whole\n// or half multiples.\n$sub-unit: 4px;\n$unit: 8px;\n\n// Standard tap-target size\n$tap-size: 44px;\n\n// Container max-width.\n$max-width: 1280px;\n\n// Content Height Calculations\n$header-height: 64px;\n$footer-height: 173px;\n$content-height: calc(100vh - #{$header-height} - #{$footer-height});\n\n// [BBB] Responsive Layout\n// ---\n//\n// Media query breakpoints and grid setup. Please see Mobify's Responsive Best\n// Practices doc here: https://bit.ly/2tmRnEi, and our Responsive Grid\n// documentation here: http://docs.mobify.com/latest/guides/responsive-grid/\n//\n// Note: $small-breakpoint isn't needed, since it is 0px\n\n$medium-breakpoint: 600px;\n$large-breakpoint: 960px;\n$xlarge-breakpoint: $max-width;\n\n$susy: (\n // Add color to show the columns and gutters\n 'svg-grid-colors': hsl(0, 0%, 95%),\n 'columns': susy-repeat(4),\n 'gutters': 12px\n);\n\n$medium-layout: (\n 'svg-grid-colors': hsl(0, 0%, 95%),\n 'columns': susy-repeat(12),\n 'gutters': 12px\n);\n\n$large-layout: (\n 'svg-grid-colors': hsl(0, 0%, 95%),\n 'columns': susy-repeat(12),\n 'gutters': 24px\n);\n\n\n// [CCC] Typography\n// ---\n// $font-family: 'San Francisco', 'Roboto', 'Fira Sans', 'Segoe UI', sans-serif;\n$font-family: Verdana, Geneva, sans-serif; \n$header-font-family: 'Avenir Next Condensed', 'Roboto Condensed', 'Helvetica Neue', 'Roboto', sans-serif;\n$loaded-header-font-family: 'Roboto', $header-font-family;\n\n// Line height\n$huge-line-height: 32px;\n$bigger-line-height: 28px;\n$big-line-height: 24px;\n$line-height: 20px;\n$small-line-height: 16px;\n$smaller-line-height: 12px;\n$tiny-line-height: 8px;\n\n// Font sizes\n$huge-font-size: 28px;\n$bigger-font-size: 24px;\n$big-font-size: 20px;\n$font-size: 16px;\n$small-font-size: 14px;\n$smaller-font-size: 12px;\n$tiny-font-size: 10px;\n$smallest-font-size: 8px;\n\n// Font weight\n$thin-font-weight: 100;\n$extra-light-font-weight: 200;\n$light-font-weight: 300;\n$regular-font-weight: 400;\n$medium-font-weight: 500;\n$semi-bold-font-weight: 600;\n$bold-font-weight: 700;\n\n// [DDD] Color Palette\n// ---\n\n// Neutrals\n$neutral-00: #fff;\n$neutral-10: #f7f7f7;\n$neutral-12: #f1f3f6;\n$neutral-15: #eee;\n$neutral-17: #e1e1e1;\n$neutral-20: #d5d5d5;\n$neutral-30: #bfbfbf;\n$neutral-40: #999;\n$neutral-50: #696969;\n$neutral-60: #333;\n$neutral-70: #000;\n\n// Brand colors\n// $brand-color: #017e9b; // blue\n$brand-color: #4471ea; // blue\n// $secondary-brand-color: #005569;\n$secondary-brand-color: #fafafa;\n$tertiary-brand-color: #83bdcb;\n$quaternary-brand-color: #bfdfe6;\n\n// UI Kit colors\n$ui-brand-color: #005c83; // dark blue\n\n// Accent colors\n$accent-color: #ff852c; // orange\n$light-accent-color: lighten($accent-color, 15%);\n$dark-accent-color: darken($accent-color, 15%);\n\n// Primary Action\n$primary-action-color: #dc0a3c;\n$light-primary-action-color: lighten($primary-action-color, 15%);\n$dark-primary-action-color: darken($primary-action-color, 15%);\n\n// Secondary Action\n$secondary-action-color: #ff852c;\n$light-secondary-action-color: lighten($secondary-action-color, 15%);\n$dark-secondary-action-color: darken($secondary-action-color, 15%);\n\n// Success colors\n$success-color: #037b30;\n$light-success-color: lighten($success-color, 15%);\n$dark-success-color: darken($success-color, 15%);\n\n// Error colors\n$error-color: #c70936;\n$light-error-color: lighten($error-color, 15%);\n$feedback-error-color: #f8e7eb;\n$dark-error-color: darken($error-color, 15%);\n\n// Sale color\n$sale-color: $error-color;\n$prominent-color: $error-color;\n\n// Social colors\n$facebook-color: #3a5a93;\n$twitter-color: #55aace;\n$instagram-color: #405de6;\n$pinterest-color: #bd081c;\n$youtube-color: #e52d27;\n$google-plus-color: #dd4b39;\n$yelp-color: #af0606;\n\n\n// [EEE] Appearance\n// ---\n\n$font-color: $neutral-60;\n$font-color-light: $neutral-12;\n\n$link-color: $ui-brand-color;\n$active-link-color: $dark-accent-color;\n\n$focus-color: $brand-color;\n\n$border-color: $neutral-20;\n$border-radius: 4px;\n\n$input-background-color: $neutral-00;\n$input-border-color: $border-color;\n$focused-input-border-color: $secondary-brand-color;\n$disabled-input-color: $neutral-40;\n$disabled-input-background-color: $neutral-15;\n$disabled-button-background-color: $neutral-15;\n$add-to-cart-button-background-color: #f7ae3a;\n$horizontal-input-padding: $unit;\n$vertical-input-padding: $unit;\n\n$background-color: $neutral-12;\n$overlay-color: rgba($neutral-00, 0.85);\n\n\n// [FFF] Z-Index\n// ---\n\n// Organizes z-index usage by name. Values can be incremented/decremented\n// slightly as necessary. eg. $z1-layer + 1;\n\n$z1-depth: 1; // background\n$z2-depth: 10; // icon or other ui element\n$z3-depth: 100; // modal shade or similar\n$z4-depth: 1000; // modal dialog or similar\n\n\n// [GGG] Shorthands\n// ---\n\n$border: 1px solid $border-color;\n$light-border: 1px solid $neutral-15;\n$input-padding: $vertical-input-padding $horizontal-input-padding;\n\n$box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);\n$large-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n$inset-box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.3), inset 0 -2px 2px -2px rgba(0, 0, 0, 0.3);\n$input-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);\n$themeColor-Light: #f3e2c7;\n$themeColor-Dark:#252525;\n$theme-font: verdana, sans-serif;\n$theme-supplementer: #f39c12;\n$font-size-desktop-h5: 1.25em;\n$font-size-mobile-h5: 0.8em;\n$font-size-desktop-p: 1.1em;\n$font-size-mobile-p: 0.7em;\n"]} |