From ff811ad42f922e3aa161412139ebdfed8715aeb8 Mon Sep 17 00:00:00 2001 From: Schuster Date: Fri, 25 Aug 2017 11:47:28 -0400 Subject: [PATCH] init from GHE --- .editorconfig | 13 + .gitignore | 134 +++++ .scss-lint.yml | 218 +++++++++ README.md | 25 + assets/sass/_all-digital.scss | 31 ++ assets/sass/_xfinity_standard_fonts.scss | 158 ++++++ assets/sass/all-digital/_base.scss | 58 +++ assets/sass/all-digital/_components.scss | 18 + assets/sass/all-digital/_keyframes.scss | 21 + assets/sass/all-digital/_shame.scss | 0 assets/sass/all-digital/_utils.scss | 3 + assets/sass/all-digital/_vendors.scss | 14 + assets/sass/all-digital/base/_alignment.scss | 40 ++ assets/sass/all-digital/base/_defaults.scss | 57 +++ assets/sass/all-digital/base/_embeded.scss | 15 + assets/sass/all-digital/base/_forms.scss | 162 ++++++ assets/sass/all-digital/base/_headings.scss | 96 ++++ assets/sass/all-digital/base/_links.scss | 30 ++ assets/sass/all-digital/base/_tables.scss | 19 + assets/sass/all-digital/base/_typography.scss | 86 ++++ assets/sass/all-digital/base/_utility.scss | 31 ++ .../sass/all-digital/components/_action.scss | 50 ++ .../sass/all-digital/components/_badge.scss | 31 ++ .../components/_button-groups.scss | 18 + .../sass/all-digital/components/_buttons.scss | 231 +++++++++ .../all-digital/components/_card-group.scss | 28 ++ assets/sass/all-digital/components/_card.scss | 234 +++++++++ .../all-digital/components/_form-boolean.scss | 91 ++++ .../components/_form-control-groups.scss | 172 +++++++ .../components/_form-controls.scss | 131 +++++ .../all-digital/components/_link-group.scss | 19 + .../sass/all-digital/components/_loading.scss | 60 +++ .../all-digital/components/_page-section.scss | 98 ++++ assets/sass/all-digital/utils/_functions.scss | 4 + assets/sass/all-digital/utils/_mixins.scss | 17 + assets/sass/all-digital/utils/_variables.scss | 116 +++++ .../utils/functions/_calc-target.scss | 7 + .../all-digital/utils/mixins/_button.scss | 42 ++ .../all-digital/utils/mixins/_clearfix.scss | 7 + .../all-digital/utils/mixins/_font-size.scss | 7 + .../all-digital/utils/mixins/_gradient.scss | 4 + .../all-digital/utils/mixins/_headings.scss | 358 ++++++++++++++ .../utils/mixins/_horizontal-align.scss | 5 + .../mixins/_horizontal-vertical-align.scss | 6 + .../all-digital/utils/mixins/_icomoon.scss | 15 + .../utils/mixins/_letter-spacing.scss | 6 + .../all-digital/utils/mixins/_respond-to.scss | 35 ++ .../sass/all-digital/utils/mixins/_theme.scss | 23 + .../all-digital/utils/mixins/_transform.scss | 3 + .../all-digital/utils/mixins/_transition.scss | 5 + .../utils/mixins/_vertical-align.scss | 5 + .../utils/mixins/_visually-hidden.scss | 11 + .../all-digital/utils/mixins/_word-break.scss | 4 + .../all-digital/utils/mixins/_wrapper.scss | 9 + .../sass/all-digital/utils/themes/_blue.scss | 31 ++ .../sass/all-digital/utils/themes/_dark.scss | 30 ++ .../sass/all-digital/utils/themes/_grey.scss | 29 ++ .../utils/themes/blue/_buttons.scss | 26 + .../all-digital/utils/themes/blue/_forms.scss | 9 + .../utils/themes/blue/_headings.scss | 15 + .../all-digital/utils/themes/blue/_links.scss | 4 + .../utils/themes/dark/_buttons.scss | 6 + .../all-digital/utils/themes/dark/_forms.scss | 9 + .../utils/themes/dark/_headings.scss | 15 + .../utils/themes/dark/_page-sections.scss | 3 + .../all-digital/utils/themes/grey/_card.scss | 8 + .../all-digital/utils/themes/grey/_forms.scss | 5 + .../utils/themes/grey/_headings.scss | 15 + .../all-digital/utils/themes/grey/_links.scss | 4 + .../all-digital/utils/variables/_buttons.scss | 35 ++ .../all-digital/utils/variables/_card.scss | 15 + .../utils/variables/_form-controls.scss | 3 + .../all-digital/utils/variables/_forms.scss | 14 + .../utils/variables/_headings.scss | 56 +++ .../utils/variables/_page-section.scss | 1 + .../all-digital/utils/variables/_wrapper.scss | 3 + assets/sass/all-digital/vendors/_h5bp.scss | 293 +++++++++++ .../sass/all-digital/vendors/_normalize.scss | 461 ++++++++++++++++++ bower.json | 16 + package.json | 19 + 80 files changed, 4206 insertions(+) create mode 100755 .editorconfig create mode 100755 .gitignore create mode 100755 .scss-lint.yml create mode 100755 README.md create mode 100755 assets/sass/_all-digital.scss create mode 100755 assets/sass/_xfinity_standard_fonts.scss create mode 100755 assets/sass/all-digital/_base.scss create mode 100755 assets/sass/all-digital/_components.scss create mode 100755 assets/sass/all-digital/_keyframes.scss create mode 100755 assets/sass/all-digital/_shame.scss create mode 100755 assets/sass/all-digital/_utils.scss create mode 100755 assets/sass/all-digital/_vendors.scss create mode 100755 assets/sass/all-digital/base/_alignment.scss create mode 100755 assets/sass/all-digital/base/_defaults.scss create mode 100755 assets/sass/all-digital/base/_embeded.scss create mode 100755 assets/sass/all-digital/base/_forms.scss create mode 100755 assets/sass/all-digital/base/_headings.scss create mode 100755 assets/sass/all-digital/base/_links.scss create mode 100755 assets/sass/all-digital/base/_tables.scss create mode 100755 assets/sass/all-digital/base/_typography.scss create mode 100755 assets/sass/all-digital/base/_utility.scss create mode 100755 assets/sass/all-digital/components/_action.scss create mode 100755 assets/sass/all-digital/components/_badge.scss create mode 100755 assets/sass/all-digital/components/_button-groups.scss create mode 100755 assets/sass/all-digital/components/_buttons.scss create mode 100755 assets/sass/all-digital/components/_card-group.scss create mode 100755 assets/sass/all-digital/components/_card.scss create mode 100755 assets/sass/all-digital/components/_form-boolean.scss create mode 100755 assets/sass/all-digital/components/_form-control-groups.scss create mode 100755 assets/sass/all-digital/components/_form-controls.scss create mode 100755 assets/sass/all-digital/components/_link-group.scss create mode 100755 assets/sass/all-digital/components/_loading.scss create mode 100755 assets/sass/all-digital/components/_page-section.scss create mode 100755 assets/sass/all-digital/utils/_functions.scss create mode 100755 assets/sass/all-digital/utils/_mixins.scss create mode 100755 assets/sass/all-digital/utils/_variables.scss create mode 100755 assets/sass/all-digital/utils/functions/_calc-target.scss create mode 100755 assets/sass/all-digital/utils/mixins/_button.scss create mode 100755 assets/sass/all-digital/utils/mixins/_clearfix.scss create mode 100755 assets/sass/all-digital/utils/mixins/_font-size.scss create mode 100755 assets/sass/all-digital/utils/mixins/_gradient.scss create mode 100755 assets/sass/all-digital/utils/mixins/_headings.scss create mode 100755 assets/sass/all-digital/utils/mixins/_horizontal-align.scss create mode 100755 assets/sass/all-digital/utils/mixins/_horizontal-vertical-align.scss create mode 100755 assets/sass/all-digital/utils/mixins/_icomoon.scss create mode 100755 assets/sass/all-digital/utils/mixins/_letter-spacing.scss create mode 100755 assets/sass/all-digital/utils/mixins/_respond-to.scss create mode 100755 assets/sass/all-digital/utils/mixins/_theme.scss create mode 100755 assets/sass/all-digital/utils/mixins/_transform.scss create mode 100755 assets/sass/all-digital/utils/mixins/_transition.scss create mode 100755 assets/sass/all-digital/utils/mixins/_vertical-align.scss create mode 100755 assets/sass/all-digital/utils/mixins/_visually-hidden.scss create mode 100755 assets/sass/all-digital/utils/mixins/_word-break.scss create mode 100755 assets/sass/all-digital/utils/mixins/_wrapper.scss create mode 100755 assets/sass/all-digital/utils/themes/_blue.scss create mode 100755 assets/sass/all-digital/utils/themes/_dark.scss create mode 100755 assets/sass/all-digital/utils/themes/_grey.scss create mode 100755 assets/sass/all-digital/utils/themes/blue/_buttons.scss create mode 100755 assets/sass/all-digital/utils/themes/blue/_forms.scss create mode 100755 assets/sass/all-digital/utils/themes/blue/_headings.scss create mode 100755 assets/sass/all-digital/utils/themes/blue/_links.scss create mode 100755 assets/sass/all-digital/utils/themes/dark/_buttons.scss create mode 100755 assets/sass/all-digital/utils/themes/dark/_forms.scss create mode 100755 assets/sass/all-digital/utils/themes/dark/_headings.scss create mode 100755 assets/sass/all-digital/utils/themes/dark/_page-sections.scss create mode 100755 assets/sass/all-digital/utils/themes/grey/_card.scss create mode 100755 assets/sass/all-digital/utils/themes/grey/_forms.scss create mode 100755 assets/sass/all-digital/utils/themes/grey/_headings.scss create mode 100755 assets/sass/all-digital/utils/themes/grey/_links.scss create mode 100755 assets/sass/all-digital/utils/variables/_buttons.scss create mode 100755 assets/sass/all-digital/utils/variables/_card.scss create mode 100755 assets/sass/all-digital/utils/variables/_form-controls.scss create mode 100755 assets/sass/all-digital/utils/variables/_forms.scss create mode 100755 assets/sass/all-digital/utils/variables/_headings.scss create mode 100755 assets/sass/all-digital/utils/variables/_page-section.scss create mode 100755 assets/sass/all-digital/utils/variables/_wrapper.scss create mode 100755 assets/sass/all-digital/vendors/_h5bp.scss create mode 100755 assets/sass/all-digital/vendors/_normalize.scss create mode 100755 bower.json create mode 100755 package.json diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..125d12c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..67440a6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,134 @@ +# Created by .ignore support plugin (hsz.mobi) +### Node template +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git +node_modules +src/components +### Vagrant template +.vagrant/ +### OSX template +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Buildy things +.sass-cache +build/ +dist/ +src/assets +src/js +src/css +src/styleguide +src/*.png +!src/images +src/*.ico +src/*.json +src/*.xml +.bundle +src/icons + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk +### JetBrains template +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio + +*.iml + +## Directory-based project format: +.idea/ +# if you remove the above rule, at least ignore the following: + +# User-specific stuff: +# .idea/workspace.xml +# .idea/tasks.xml +# .idea/dictionaries + +# Sensitive or high-churn files: +# .idea/dataSources.ids +# .idea/dataSources.xml +# .idea/sqlDataSources.xml +# .idea/dynamic.xml +# .idea/uiDesigner.xml + +# Gradle: +# .idea/gradle.xml +# .idea/libraries + +# Mongo Explorer plugin: +# .idea/mongoSettings.xml + +## File-based project format: +*.ipr +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +### Vim template +[._]*.s[a-w][a-z] +[._]s[a-w][a-z] +*.un~ +Session.vim +.netrwhist +*~ + +tests/.tmp/ + +###Generated Documentation +ngdocs/ +!js/node_modules diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100755 index 0000000..689e84d --- /dev/null +++ b/.scss-lint.yml @@ -0,0 +1,218 @@ +exclude: 'assets/sass/all-digital/vendors/*' + +linters: + + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: true + max_elements: 1 + + BorderZero: + enabled: true + convention: zero + + ChainedClasses: + enabled: false + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: false + + Comment: + enabled: false + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: true + + DisableLinterReason: + enabled: true + + DuplicateProperty: + enabled: false + + ElsePlacement: + enabled: true + style: same_line + + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short + + HexNotation: + enabled: true + style: lowercase + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: false + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: true + character: space + width: 2 + + LeadingZero: + enabled: true + style: include_zero + + MergeableSelector: + enabled: false + force_nesting: false + + NameFormat: + enabled: true + convention: hyphenated_lowercase + allow_leading_underscore: true + + NestingDepth: + enabled: true + max_depth: 3 + + PlaceholderInExtend: + enabled: true + + PrivateNamingConvention: + enabled: true + prefix: _ + + PropertyCount: + enabled: false + + PropertySortOrder: + enabled: false + + PropertySpelling: + enabled: true + extra_properties: [] + + PropertyUnits: + enabled: false + + PseudoElement: + enabled: true + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 3 + + SelectorFormat: + enabled: false + convention: hyphenated_lowercase + class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$' + + Shorthand: + enabled: true + + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: false + + SingleLinePerSelector: + enabled: true + + SpaceAfterComma: + enabled: true + + SpaceAfterPropertyColon: + enabled: true + style: one_space + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableColon: + enabled: true + style: at_least_one_space + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space + + SpaceBeforeBrace: + enabled: true + style: space + allow_single_line_padding: true + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: single_quotes + + TrailingSemicolon: + enabled: true + + TrailingZero: + enabled: true + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: false + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + + VendorPrefixes: + enabled: true + identifier_list: base + include: [] + exclude: [] + + ZeroUnit: + enabled: true diff --git a/README.md b/README.md new file mode 100755 index 0000000..fd09120 --- /dev/null +++ b/README.md @@ -0,0 +1,25 @@ +# All Digital CSS + +Welcome to the All Digital brought to you by Comcast. + +* Built for unity: Using the All Digital markup and CSS framework produces UIs that reflect the Comcast All Digital look and feel. +* Focused on Simplicity: What sets All Digital apart is what we've left out. The goal of All Digital was to stay slim and not be overly opinioned. All Digital will provide common elements, but not hinder your application's ability to grow on its own. +* Continuously updated: All Digital is used in production on several Comcast properties. We're always fixing issues and updating with the latest decisions from the [design team](http://design.comcast.com/). + +## Quick start + +In your project: + +```bash +npm install git+ssh://git@github.com:Comcast/all-digital.git#v1.9.2 +``` + +or + +```bash +bower install git@github.com:Comcast/all-digital.git#~v1.9.2 +``` + +## Standards + +Please follow [Sass Guidelines](https://sass-guidelin.es/) and [CSS Guidelines](http://cssguidelin.es/). diff --git a/assets/sass/_all-digital.scss b/assets/sass/_all-digital.scss new file mode 100755 index 0000000..d9d2373 --- /dev/null +++ b/assets/sass/_all-digital.scss @@ -0,0 +1,31 @@ +// Vendors +// contains all the CSS files from +// external libraries and frameworks +@import 'all-digital/vendors'; + +// Utilities +// Contains mixins, functions and +// variables that should be used to +// make code cleaner and easier +@import 'all-digital/utils'; + +// Base +// Contains styles for base elements +// typography, tables, etc +@import 'all-digital/base'; + +// Components +// Components are more mature +// elements that are self contained +// and reusable through the UI +@import 'all-digital/components'; + +// Shame +// shame file houses code that needs +// to be refactored or re-encorporated +// in the CSS architecture +@import 'all-digital/shame'; + +// Keyframes +// keyframes for animations +@import 'all-digital/keyframes'; diff --git a/assets/sass/_xfinity_standard_fonts.scss b/assets/sass/_xfinity_standard_fonts.scss new file mode 100755 index 0000000..4f638f4 --- /dev/null +++ b/assets/sass/_xfinity_standard_fonts.scss @@ -0,0 +1,158 @@ +$xfinity-standard-fallback: helvetica, arial, sans-serif; + +$xfinity-standard: 'XfinityStandard', #{$xfinity-standard-fallback}; +$xfinity-standard-condensed: 'XfinityStandardCondensed', #{$xfinity-standard-fallback}; + +@mixin xfinity-standard-thin { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; + } +} + +@mixin xfinity-standard-thin-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ThinItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ThinItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ThinItalic.ttf') format('truetype'); + font-weight: 100; + font-style: italic; + } +} + +@mixin xfinity-standard-extra-light { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; + } +} + +@mixin xfinity-standard-extra-light-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLightItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLightItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-ExtraLightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: italic; + } +} + +@mixin xfinity-standard-light { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Light.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Light.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } +} + +@mixin xfinity-standard-light-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-LightItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-LightItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-LightItalic.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } +} + +@mixin xfinity-standard-regular { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } +} + +@mixin xfinity-standard-regular-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-RegularItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-RegularItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-RegularItalic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } +} + +@mixin xfinity-standard-medium { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + } +} + +@mixin xfinity-standard-medium-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-MediumItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-MediumItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-MediumItalic.ttf') format('truetype'); + font-weight: 500; + font-style: italic; + } +} + +@mixin xfinity-standard-bold { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } +} + +@mixin xfinity-standard-bold-italic { + @font-face { + font-family: 'XfinityStandard'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-BoldItalic.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-BoldItalic.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard/XfinityStandard-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } +} + +@mixin xfinity-standard-condensed-medium { + @font-face { + font-family: 'XfinityStandardCondensed'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Medium.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Medium.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + } +} + +@mixin xfinity-standard-condensed-bold { + @font-face { + font-family: 'XfinityStandardCondensed'; + src: url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Bold.woff2') format('woff2'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Bold.woff') format('woff'), + url('https://edge.static-assets.top.comcast.net/staticsites/fonts/latest/Xfinity_Standard_Condensed/XfinityStandardCondensed-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } +} diff --git a/assets/sass/all-digital/_base.scss b/assets/sass/all-digital/_base.scss new file mode 100755 index 0000000..efc09a3 --- /dev/null +++ b/assets/sass/all-digital/_base.scss @@ -0,0 +1,58 @@ +// CSS Base Elements +// +// Base elements are stylized base HTML elements +// +// Styleguide 4.0 + + +//Base defaults +//this file contains the html and body +//elements +@import 'base/defaults'; + + +//Text elements +//this file contains paragraph, list, and +//other basic text elements +@import 'base/typography'; + + +// Headings +// this file contains headings +@import 'base/headings'; + + +//Links elements +//this file contains text styling +//for links +@import 'base/links'; + + +//Embedded content +//this file contains image, svg, video +//and other embeded content +@import 'base/embeded'; + + +//Form +//this file contains input, textarea, select +//and button input styles +@import 'base/forms'; + + +//Tables +//this file contains styles for +//tabular data +@import 'base/tables'; + + +//Alignment +//this file contains styles for +//alignment for images and callouts +@import 'base/alignment'; + + +//Utility +//this file contains styles for +//utility classes +@import 'base/utility'; diff --git a/assets/sass/all-digital/_components.scss b/assets/sass/all-digital/_components.scss new file mode 100755 index 0000000..c33da1c --- /dev/null +++ b/assets/sass/all-digital/_components.scss @@ -0,0 +1,18 @@ +// CSS Components +// +// Components are patterns used throughout the UI of the site. +// +// Styleguide 5.0 + +@import 'components/page-section'; +@import 'components/action'; +@import 'components/button-groups'; +@import 'components/buttons'; +@import 'components/loading'; +@import 'components/card'; +@import 'components/card-group'; +@import 'components/form-controls'; +@import 'components/form-boolean'; +@import 'components/form-control-groups'; +@import 'components/link-group'; +@import 'components/badge'; diff --git a/assets/sass/all-digital/_keyframes.scss b/assets/sass/all-digital/_keyframes.scss new file mode 100755 index 0000000..0bf0833 --- /dev/null +++ b/assets/sass/all-digital/_keyframes.scss @@ -0,0 +1,21 @@ +@keyframes bounce-delay { + 0%, + 80%, + 100% { + transform: scale(.6); + } + + 40% { + transform: scale(1); + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/assets/sass/all-digital/_shame.scss b/assets/sass/all-digital/_shame.scss new file mode 100755 index 0000000..e69de29 diff --git a/assets/sass/all-digital/_utils.scss b/assets/sass/all-digital/_utils.scss new file mode 100755 index 0000000..264844c --- /dev/null +++ b/assets/sass/all-digital/_utils.scss @@ -0,0 +1,3 @@ +@import 'utils/variables'; +@import 'utils/functions'; +@import 'utils/mixins'; diff --git a/assets/sass/all-digital/_vendors.scss b/assets/sass/all-digital/_vendors.scss new file mode 100755 index 0000000..4f0c66f --- /dev/null +++ b/assets/sass/all-digital/_vendors.scss @@ -0,0 +1,14 @@ +//Normalize +//Normalize.css makes browsers render all +//elements more consistently and in line +//with modern standards. It precisely targets +//only the styles that need normalizing. +//http://necolas.github.io/normalize.css/ +@import 'vendors/normalize'; + + +//HTML5 Boilerplate CSS +//Opinionated Defaults, Helpers, +//and Print CSS from H5BP +//https://html5boilerplate.com/ +@import 'vendors/h5bp'; diff --git a/assets/sass/all-digital/base/_alignment.scss b/assets/sass/all-digital/base/_alignment.scss new file mode 100755 index 0000000..5392bb2 --- /dev/null +++ b/assets/sass/all-digital/base/_alignment.scss @@ -0,0 +1,40 @@ +.alignright, +.alignleft, +.aligncenter { + display: block; + clear: both; + margin: 0 auto 20px; + + > img, + > a > img { + margin: 0 auto; + } +} + +.alignnone { + display: block; + clear: both; + margin: 0 0 20px; +} + +@include respond-to(768) { + .alignright { + float: right; + clear: right; + margin: 0 0 20px 20px; + } + + .alignleft { + float: left; + clear: left; + margin: 0 20px 20px 0; + } + + .alignright, + .alignleft { + > img, + > a > img { + margin: 0; + } + } +} diff --git a/assets/sass/all-digital/base/_defaults.scss b/assets/sass/all-digital/base/_defaults.scss new file mode 100755 index 0000000..63bf35e --- /dev/null +++ b/assets/sass/all-digital/base/_defaults.scss @@ -0,0 +1,57 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + @include font-size($base-font-size, 16); + box-sizing: border-box; +} + +body { + @include word-break(); + position: relative; + background: $background-color; + line-height: calc-target($base-line-height, $base-font-size, 1); + color: $text-color; + font-family: $primary-font-stack; + font-weight: 400; + letter-spacing: 0.2px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.ui-blue { + background-color: map-get($ui-blue-map, background-color); + background-size: cover; + color: map-get($ui-blue-map, text-color); + + @include respond-to(700) { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221100%22%20height%3D%22343%22%20viewBox%3D%220%200%201100%20343%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2255%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22550%22%20y1%3D%224%22%20x2%3D%22550%22%20y2%3D%22343%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230066A0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23076699%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23003A74%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M0%200h1100v343H0z%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cg%20fill%3D%22%230E74A0%22%3E%3Cellipse%20cx%3D%2272%22%20cy%3D%22121%22%20rx%3D%2295%22%20ry%3D%2249%22%2F%3E%3Cellipse%20cx%3D%22781%22%20cy%3D%22171%22%20rx%3D%22132%22%20ry%3D%22166%22%2F%3E%3Cellipse%20cx%3D%221041%22%20cy%3D%22231%22%20rx%3D%22135%22%20ry%3D%22160%22%2F%3E%3Cellipse%20cx%3D%22541%22%20cy%3D%22195%22%20rx%3D%22132%22%20ry%3D%22125%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230057A0%22%3E%3Cellipse%20cx%3D%22383%22%20cy%3D%2223%22%20rx%3D%22205%22%20ry%3D%22136%22%2F%3E%3Cellipse%20cx%3D%22278%22%20cy%3D%22270%22%20rx%3D%2283%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%221083%22%20cy%3D%2223%22%20rx%3D%22117%22%20ry%3D%2258%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + } +} + +.ui-dark { + background-image: radial-gradient(at 20% 25%, rgba(46, 160, 221, 0.16) 0, rgba(46, 160, 221, 0) 100%), + radial-gradient(at 60% 50%, rgba(46, 160, 221, 0.12) 0, rgba(46, 160, 221, 0) 100%), + linear-gradient(to bottom, rgba(46, 160, 221, 0.05) 0, rgba(46, 160, 221, 0) 100%); + background-color: map-get($ui-dark-map, background-color); + background-size: 160% 768px, 100% 768px, 100% 768px; + background-repeat: no-repeat; + color: map-get($ui-dark-map, text-color); + + @include respond-to(768) { + background-size: 160% 100%, 100% 100%, 100% 100%; + } +} + +.ui-grey { + background-color: map-get($ui-grey-map, background-color); + color: map-get($ui-grey-map, text-color); +} + +.ui-light { + background: $background-color; + color: $text-color; +} diff --git a/assets/sass/all-digital/base/_embeded.scss b/assets/sass/all-digital/base/_embeded.scss new file mode 100755 index 0000000..fd6af2b --- /dev/null +++ b/assets/sass/all-digital/base/_embeded.scss @@ -0,0 +1,15 @@ +img { + display: inline-block; + max-width: 100%; + max-height: 100%; + height: auto; + -ms-interpolation-mode: bicubic; +} + +figure { + margin: 0; +} + +iframe { + max-width: 100%; +} diff --git a/assets/sass/all-digital/base/_forms.scss b/assets/sass/all-digital/base/_forms.scss new file mode 100755 index 0000000..e4f17d4 --- /dev/null +++ b/assets/sass/all-digital/base/_forms.scss @@ -0,0 +1,162 @@ +fieldset { + margin: 0 0 1.5em; +} + +.legend, +legend { + @include heading3; +} + +.label, +label { + @include body2; + margin-bottom: 10px; + display: block; + cursor: pointer; +} + +[type=text], +[type=email], +[type=url], +[type=tel], +[type=password], +[type=search], +[type=number], +[type=date], +textarea, +select, +.readonly { + font-size: $text-input-font-size; + display: inline-block; + margin-bottom: calc-target(12); + border: 1px solid $text-input-border-color; + border-radius: 3px; + background-color: $text-input-background-color; + padding: calc-target(16, 18) calc-target(20, 18); + width: 100%; + max-width: 480px; + color: $text-input-text-color; + appearance: none; + line-height: normal; + + @include respond-to(768) { + font-size: $text-input-font-size-desktop; + } + + @include ui-dark { + color: map-get($ui-dark-map, text-color); + border: 1px solid map-get($ui-dark-map, text-input-border-color); + background-color: map-get($ui-dark-map, text-input-background-color); + color: map-get($ui-dark-map, text-input-text-color); + } + + @include ui-grey { + border: 1px solid map-get($ui-grey-map, text-input-border-color); + background-color: map-get($ui-grey-map, text-input-background-color); + color: map-get($ui-grey-map, text-input-text-color); + } + + @include ui-light { + border: 1px solid $text-input-border-color; + background-color: $text-input-background-color; + color: $text-input-text-color; + } + + &:focus { + outline: none; + border-color: $text-input-border-color-focus; + background-color: $text-input-background-color-focus; + + @include ui-dark { + background-color: map-get($ui-dark-map, text-input-background-color-focus); + } + + @include ui-grey { + background-color: map-get($ui-grey-map, text-input-background-color-focus); + } + + @include ui-light { + background-color: $text-input-background-color-focus; + } + } + + &.error { + border-color: $text-input-border-color-error; + background-color: $text-input-background-color-error; + + @include ui-dark { + background-color: map-get($ui-dark-map, text-input-background-color-error); + } + + @include ui-grey { + background-color: map-get($ui-grey-map, text-input-background-color-error); + } + + @include ui-light { + background-color: $text-input-background-color-error; + } + } +} + +// scss-lint:disable QualifyingElement +// need to override normalize +input[type=search] { + box-sizing: inherit; + appearance: none; +} + +select { + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2218%22%20height%3D%2211%22%20viewBox%3D%220%200%2018%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EDown-Arrow%3C%2Ftitle%3E%3Cpath%20d%3D%22M16.75%201.25l-8%208-8-8%22%20stroke-width%3D%221.5%22%20stroke%3D%22%230272b6%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 17px 9px; + padding-right: 40px; + + &::-ms-expand { + display: none; + } +} + +[type=checkbox], +[type=radio] { + margin: 0 calc-target(10) calc-target(10) 0; + + + label { + display: inline; + max-width: 375px; + } +} + +[type=submit], +[type=button] { + @include button; +} + +[type=submit]:hover, +[type=button]:hover { + @include button-hover; +} + +[type=submit]:active, +[type=submit]:active, +[type=button]:active, +[type=button]:active { + @include button-active; +} + +textarea { + height: 90px; +} + +input::placeholder { + color: $cool-grey8; +} + +// override normalize +button, +input, +optgroup, +select, +textarea { + font-family: inherit; +} diff --git a/assets/sass/all-digital/base/_headings.scss b/assets/sass/all-digital/base/_headings.scss new file mode 100755 index 0000000..3808be6 --- /dev/null +++ b/assets/sass/all-digital/base/_headings.scss @@ -0,0 +1,96 @@ +.display1 { + @include display1; +} + +.display2 { + @include display2; +} + +.display3 { + @include display3; +} + +h1, +.heading1 { + @include heading1; +} + +h2, +.heading2 { + @include heading2; +} + +h3, +.heading3 { + @include heading3; +} + +.body1 { + @include body1; +} + +.body2 { + @include body2; +} + +.body3 { + @include body3; +} + +.body4 { + @include body4; +} + +h4, +.heading4 { + @include heading4; +} + +h5, +h6, +.heading5 { + @include heading5; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; +} + +.hgroup { + margin-bottom: 14px; + + .display1, + .display2, + .display3, + .heading3, + .heading4, + .heading5, + .heading6, + .body1, + .body2, + .body3, + .body4, + h3, + h4, + h5, + h6, + p { + margin-bottom: 0; + } + + .heading1, + .heading2, + h1, + h2 { + margin-bottom: 6px; + } +} + +.hgroup--spaced { + margin-bottom: 24px; +} diff --git a/assets/sass/all-digital/base/_links.scss b/assets/sass/all-digital/base/_links.scss new file mode 100755 index 0000000..1bc7890 --- /dev/null +++ b/assets/sass/all-digital/base/_links.scss @@ -0,0 +1,30 @@ +a, +.link { + text-decoration: none; + color: $link-color; + + &:hover { + text-decoration: underline; + color: $link-hover-color; + } + + @include ui-dark { + color: map-get($ui-dark-map, link-color); + + &:hover { + color: map-get($ui-dark-map, link-hover-color); + } + } + + @include ui-blue { + color: map-get($ui-blue-map, link-color); + + &:hover { + color: map-get($ui-blue-map, link-color); + } + } +} + +[role="button"] { + cursor: pointer; +} diff --git a/assets/sass/all-digital/base/_tables.scss b/assets/sass/all-digital/base/_tables.scss new file mode 100755 index 0000000..4e8bad4 --- /dev/null +++ b/assets/sass/all-digital/base/_tables.scss @@ -0,0 +1,19 @@ +table { + margin-bottom: 1.5em; + border: 0; + width: 100%; +} + +th { + @include font-size(15); + text-align: left; + font-weight: 400; +} + +th, +td { + border: 1px solid $cool-grey5; + border-width: 0 0 1px; + padding: 0.5em; + vertical-align: top; +} diff --git a/assets/sass/all-digital/base/_typography.scss b/assets/sass/all-digital/base/_typography.scss new file mode 100755 index 0000000..9214e8c --- /dev/null +++ b/assets/sass/all-digital/base/_typography.scss @@ -0,0 +1,86 @@ +b, +strong { + // boldest font weight + // include is medium + font-weight: 500; +} + +p, +ul, +ol, +dl, +address { + @include font-size($base-font-size); + margin: 0 0 1.5em; + padding: 0; +} + +ul, +ol, +dd { + margin-left: 1.5em; +} + +li ul, +li ol { + margin-bottom: 0; +} + +li { + margin: 0; + padding: 0; +} + +address { + font-style: normal; +} + +.address { + .street-address { + display: block; + } +} + +pre { + margin: 0 0 1.5em; + background: $grey-27; + padding: 0.5em; + word-wrap: normal; +} + +.pre-line { + white-space: pre-line; +} + +blockquote { + @include font-size(20); + display: block; + margin: 0 0 20px; + border-left: 3px solid $grey-9; + padding-left: 10px; + overflow: hidden; + + > :last-child { + margin-bottom: 0; + } +} + +hr { + margin: 0 0 1.5em; + + @include ui-dark { + border-color: rgba($white, 0.15); + } + + @include ui-grey { + border-color: rgba($black, 0.2); + } + + @include ui-light { + border-color: rgba($black, 0.15); + } +} + +.no-bottom-margin { + margin-bottom: 0; +} diff --git a/assets/sass/all-digital/base/_utility.scss b/assets/sass/all-digital/base/_utility.scss new file mode 100755 index 0000000..d4f59c3 --- /dev/null +++ b/assets/sass/all-digital/base/_utility.scss @@ -0,0 +1,31 @@ +@media (max-width: 767px) { + .desktop { + display: none !important; + } +} + +@include respond-to(768) { + .mobile { + display: none !important; + } +} + +.nowrap { + white-space: nowrap; +} + +.right { + float: right; +} + +.left { + float: left; +} + +.clear { + clear: both; +} + +.hide { + display: none; +} diff --git a/assets/sass/all-digital/components/_action.scss b/assets/sass/all-digital/components/_action.scss new file mode 100755 index 0000000..198a255 --- /dev/null +++ b/assets/sass/all-digital/components/_action.scss @@ -0,0 +1,50 @@ +.action { + clear: both; +} + +.action--centered { + text-align: center; + + .action__item { + display: inline-block; + vertical-align: top; + margin: 0 6px; + } +} + +.action--right { + @include respond-to(768) { + text-align: right; + overflow: hidden; + } + + .action__item { + @include respond-to(768) { + float: right; + margin-left: 10px; + } + } +} + +.action__item { + .button { + @media (max-width: 767px) { + display: block; + width: 100%; + } + } +} + +.action--right-centered { + @include respond-to(768) { + display: inline-block; + overflow: hidden; + } + + .action__item { + @include respond-to(768) { + padding: 0 6px; + float: right; + } + } +} diff --git a/assets/sass/all-digital/components/_badge.scss b/assets/sass/all-digital/components/_badge.scss new file mode 100755 index 0000000..05ec55a --- /dev/null +++ b/assets/sass/all-digital/components/_badge.scss @@ -0,0 +1,31 @@ +.badge { + @include heading5; + display: inline-block; + padding: calc-target(2, $heading5-size) calc-target(6, $heading5-size); + color: $cool-grey9; + border-radius: calc-target(3, $heading5-size); + background-color: $cool-grey6; + + + & { + margin-left: 6px; + } +} + +.badge--success { + background-color: $green-lime; + color: $cool-grey10; +} + +.badge--info { + background-color: $blue-jeans; + color: $white; +} + +.badge--warning { + background-color: $yellow-pumpkin; +} + +.badge--danger { + background-color: $red-cherry; + color: $white; +} diff --git a/assets/sass/all-digital/components/_button-groups.scss b/assets/sass/all-digital/components/_button-groups.scss new file mode 100755 index 0000000..2068eee --- /dev/null +++ b/assets/sass/all-digital/components/_button-groups.scss @@ -0,0 +1,18 @@ +.button-group { + margin-bottom: 20px; +} + +.button-group__item { + margin-bottom: 20px; + + .button { + margin: 0; + } +} + +.button-group--inline { + .button-group__item { + display: inline-block; + margin-right: 10px; + } +} diff --git a/assets/sass/all-digital/components/_buttons.scss b/assets/sass/all-digital/components/_buttons.scss new file mode 100755 index 0000000..ba13309 --- /dev/null +++ b/assets/sass/all-digital/components/_buttons.scss @@ -0,0 +1,231 @@ +.button { + @include button; + + &:hover, + &.pseudo-class-hover { + @include button-hover; + } + + &:active, + &.pseudo-class-active { + @include button-active; + } + + &:disabled { + opacity: 0.4; + border-color: $button-border-color !important; + background-color: $button-background-color !important; + color: $button-text-color !important; + cursor: default; + outline: none; + } + + &.is-loading { + border-color: $button-primary-border-color !important; + background-color: $button-primary-background-color !important; + color: $button-primary-text-color !important; + opacity: 1; + + &::before { + display: inline-block; + content: ''; + height: 1em; + width: 1em; + margin-top: calc-target(5, $body2-size); + margin-right: calc-target(5, $body2-size); + background-size: cover; + vertical-align: top; + animation: spin 1s linear infinite; + background-repeat: no-repeat; + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M256%20512c-68.38%200-132.667-26.63-181.02-74.98C26.63%20388.667%200%20324.38%200%20256c0-48.42%2013.59-95.567%2039.303-136.346%2025-39.648%2060.332-71.686%20102.178-92.65l21.5%2042.916c-34.018%2017.042-62.745%2043.093-83.074%2075.335C59.033%20178.36%2048%20216.655%2048%20256c0%20114.69%2093.31%20208%20208%20208s208-93.31%20208-208c0-39.346-11.033-77.64-31.905-110.745-20.33-32.242-49.057-58.292-83.075-75.335l21.5-42.916c41.846%2020.964%2077.18%2053.002%20102.178%2092.65C498.408%20160.434%20512%20207.58%20512%20256c0%2068.38-26.63%20132.667-74.98%20181.02C388.667%20485.37%20324.38%20512%20256%20512z%22%2F%3E%3C%2Fsvg%3E'); + } + } + + @include ui-dark { + color: map-get($ui-dark-map, button-text-color); + + &:hover, + &.pseudo-class-hover { + color: map-get($ui-dark-map, button-text-color-hover); + } + } + + @include ui-blue { + color: map-get($ui-blue-map, button-text-color); + border-color: map-get($ui-blue-map, button-border-color); + background-color: map-get($ui-blue-map, button-background-color); + + &:hover, + &.pseudo-class-hover { + color: map-get($ui-blue-map, button-text-color-hover); + border-color: map-get($ui-blue-map, button-border-color-hover); + background-color: map-get($ui-blue-map, button-background-color-hover); + } + + &:active, + &.pseudo-class-active { + color: map-get($ui-blue-map, button-text-color-active); + border-color: map-get($ui-blue-map, button-border-color-active); + background-color: map-get($ui-blue-map, button-background-color-active); + } + + &:disabled { + color: map-get($ui-blue-map, button-text-color) !important; + border-color: map-get($ui-blue-map, button-border-color) !important; + background-color: map-get($ui-blue-map, button-background-color) !important; + } + } + + @include ui-grey { + color: map-get($ui-grey-map, button-text-color); + + &:hover, + &.pseudo-class-hover { + color: map-get($ui-grey-map, button-text-color-hover); + } + } + + @include ui-light { + color: $button-text-color; + + &:hover, + &.pseudo-class-hover { + color: $button-text-color-hover; + } + } + + + [class*="button"] { + margin-left: 10px; + } +} + +.button--primary { + border-color: $button-primary-border-color; + background-color: $button-primary-background-color; + color: $button-primary-text-color; + + &:hover, + &.pseudo-class-hover { + border-color: $button-primary-border-color-hover; + background-color: $button-primary-background-color-hover; + color: $button-primary-text-color-hover; + } + + &:active, + &.pseudo-class-active { + border-color: $button-primary-border-color-active; + background-color: $button-primary-background-color-active; + } + + &:disabled { + border-color: $button-primary-border-color !important; + background-color: $button-primary-background-color !important; + color: $button-primary-text-color !important; + } + + @include ui-dark { + color: map-get($ui-dark-map, button-primary-text-color); + } + + @include ui-blue { + border-color: map-get($ui-blue-map, button-primary-border-color); + background-color: map-get($ui-blue-map, button-primary-background-color); + color: map-get($ui-blue-map, button-primary-text-color); + + &:hover, + &.pseudo-class-hover { + border-color: map-get($ui-blue-map, button-primary-border-color-hover); + background-color: map-get($ui-blue-map, button-primary-background-color-hover); + color: map-get($ui-blue-map, button-primary-text-color-hover); + } + + &:active, + &.pseudo-class-active { + border-color: map-get($ui-blue-map, button-primary-border-color-active); + background-color: map-get($ui-blue-map, button-primary-background-color-active); + color: map-get($ui-blue-map, button-primary-text-color-active); + } + + &:disabled { + border-color: map-get($ui-blue-map, button-primary-border-color) !important; + background-color: map-get($ui-blue-map, button-primary-background-color) !important; + color: map-get($ui-blue-map, button-primary-text-color) !important; + } + } + + @include ui-grey { + color: map-get($ui-grey-map, button-primary-text-color); + } + + @include ui-light { + color: $button-primary-text-color; + } +} + +.button--utility { + border-radius: 3px; +} + +.button--small { + @include font-size($body3-size); + min-width: 120px; +} + +.button--large { + @include font-size($body1-size-large); +} + +.button--full-width { + display: block; + width: 100%; +} + +.button--text { + @include button-text; + + &:hover, + &.pseudo-class-hover { + background-color: transparent; + border-color: transparent; + color: $link-hover-color; + text-decoration: underline; + } + + &:active { + background-color: transparent; + border-color: transparent; + color: $link-hover-color; + } + + @include ui-dark { + color: map-get($ui-dark-map, link-color); + + &:hover { + background-color: transparent; + border-color: transparent; + color: map-get($ui-dark-map, link-hover-color); + } + + &:active { + background-color: transparent; + border-color: transparent; + color: map-get($ui-dark-map, link-hover-color); + } + } + + @include ui-blue { + color: map-get($ui-blue-map, link-color); + + &:hover { + background-color: transparent; + border-color: transparent; + color: map-get($ui-blue-map, link-color); + } + + &:active { + background-color: transparent; + border-color: transparent; + color: map-get($ui-blue-map, link-color); + } + } +} diff --git a/assets/sass/all-digital/components/_card-group.scss b/assets/sass/all-digital/components/_card-group.scss new file mode 100755 index 0000000..a838a4a --- /dev/null +++ b/assets/sass/all-digital/components/_card-group.scss @@ -0,0 +1,28 @@ +.card-group { + margin-bottom: 30px; +} + +.card-group__item { + margin-top: -1px; + + &:first-child { + margin-top: 0; + + > .card { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } + + &:last-child { + > .card { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + } + + > .card { + margin-bottom: 0; + border-radius: 0; + } +} diff --git a/assets/sass/all-digital/components/_card.scss b/assets/sass/all-digital/components/_card.scss new file mode 100755 index 0000000..e93c14e --- /dev/null +++ b/assets/sass/all-digital/components/_card.scss @@ -0,0 +1,234 @@ +.card { + display: block; + margin: 0 0 12px #{-($wrapper-gutters + 1px)}; + width: calc(100% + #{($wrapper-gutters * 2 + 2px)}); + padding: 12px; + border: 1px solid $card-border-color; + background: $card-background-color; + color: $card-text-color; + position: relative; + border-radius: 3px; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + + @include respond-to(768) { + padding: 18px 24px; + width: auto; + margin-left: 0; + } + + @include ui-dark { + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } + + @include ui-blue { + background: rgba(255, 255, 255, 0.1); + border-color: transparent; + } +} + +a.card, +.card--is-link, +button.card { + color: inherit; + font-weight: inherit; + font-size: 1rem; + text-align: left; + + @include respond-to(768) { + width: 100%; + } + + &:hover, + &:focus { + background: $white; + border-color: $blue-sky; + text-decoration: none; + color: inherit; + position: relative; + z-index: 1; + } +} + +.card__content { + margin-bottom: 0; + flex-grow: 1; + + > :last-child { + margin-bottom: 0; + } + + + .card__content { + margin-top: 24px; + padding-top: 24px; + border-top: 1px solid $card-border-color; + } +} + +.card--secondary { + background: $card-secondary-background-color; +} + +.card--form-control { + position: relative; + + > .label, + > .form-control { + margin-bottom: 0; + } +} + +.card--success { + border-left: 5px solid $minty; +} + +.card--info { + border-left: 5px solid $ui-info; +} + +.card--warning { + border-left: 5px solid $yellow-pumpkin; +} + +.card--danger { + border-left: 5px solid $ui-danger; +} + +.card__action { + flex-grow: 0; + flex-shrink: 0; + + > :last-child { + margin-bottom: 0; + } +} + +.card--action-right { + display: flex; + + .card__content { + text-align: left; + } + + .card__action { + padding-left: 24px; + text-align: right; + } +} + +.card--action-right-at-768 { + @include respond-to(768) { + display: flex; + } + + .card__content { + @include respond-to(768) { + text-align: left; + } + } + + .card__content + .card__action { + padding-top: 12px; + + @include respond-to(768) { + padding-top: 0; + } + } + + .card__action { + @include respond-to(768) { + padding-left: 24px; + text-align: right; + } + } +} + +.card--flex-start { + align-items: flex-start; +} + +.card--has-media { + .card__content { + padding-left: 64px; + } +} + +.card--has-media-at-768 { + .card__media { + display: none; + + @include respond-to(768) { + display: block; + } + } + + .card__content { + @include respond-to(768) { + padding-left: 64px; + } + } +} + +.card__media { + @include vertical-align; + left: 6px; + margin-bottom: 0; + text-align: center; + width: 60px; + + @include respond-to(768) { + left: 12px; + } +} + +.card__date { + margin-bottom: 0; + + @include respond-to(768) { + margin-bottom: 0; + margin-right: 12px; + text-align: center; + width: 55px; + } +} + +.card__date-item { + @include respond-to(768) { + display: block; + } +} + +.card__date-item--time { + margin-left: 5px; + + @include respond-to(768) { + margin-left: 0; + } +} + +.card--centered-text { + text-align: center; +} + +.card--loading-dots { + height: 80px; + + .loading { + background: none; + } + + .loading__content { + width: 40px; + height: 40px; + background: none; + } + + .loading__dot { + margin: 0 2px; + width: 6px; + height: 6px; + background: $cool-grey7; + } +} diff --git a/assets/sass/all-digital/components/_form-boolean.scss b/assets/sass/all-digital/components/_form-boolean.scss new file mode 100755 index 0000000..5b0608c --- /dev/null +++ b/assets/sass/all-digital/components/_form-boolean.scss @@ -0,0 +1,91 @@ +.form-control--boolean { + max-width: none; + + .form-control__label { + display: inline-block; + position: relative; + float: none; + font-size: 1em; + margin-bottom: 0; + padding: 1px 0 1px 40px; + max-width: none; + + &::before { + display: block; + position: absolute; + top: 1px; + left: 0; + content: ''; + width: 22px; + height: 22px; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + } + + &.heading1, + &.heading2 { + &::before { + top: 7px; + } + } + } + + input { + @include visually-hidden(); + } + + input:focus ~ .form-control__label::before { + outline: 1px dotted $blue-sky; + } + + input:disabled ~ .form-control__label { + opacity: 0.4; + cursor: default; + outline: none; + } + + input[type="checkbox"] ~ .form-control__label::before { + border-radius: 3px; + background-color: $cool-grey2; + border: 1px solid $cool-grey8; + } + + input[type="checkbox"]:checked ~ .form-control__label::before { + background-color: $blue-sky; + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22none%22%20stroke-width%3D%220%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9.30237317,15.0575648%20L6.19035258,11.906109%20C5.93654914,11.6490893%205.93654914,11.2312677%206.19035258,10.9742481%20C6.44415601,10.7172285%206.85674929,10.7172285%207.11055273,10.9742481%20L9.76052091,13.6591145%20L16.1394473,7.19276471%20C16.3932507,6.9357451%2016.8045424,6.9357451%2017.0596474,7.19276471%20C17.3134509,7.44978432%2017.3134509,7.86760594%2017.0596474,8.12462555%20L10.2212718,15.0575648%20C10.1015286,15.1801434%209.93623098,15.25%209.76312402,15.25%20C9.59131862,15.25%209.426021,15.1801434%209.30237317,15.0575648%20Z%22%2F%3E%3C%2Fsvg%3E'); + border-color: $blue-sky; + } + + input[type="radio"] ~ .form-control__label::before { + border-radius: 50%; + background: $cool-grey2; + border: 1px solid $cool-grey8; + } + + input[type="radio"]:checked ~ .form-control__label::before { + background: $cool-grey2; + border: 6px solid $blue-sky; + } + + @include ui-dark { + input[type="checkbox"] ~ .form-control__label::before, + input[type="radio"] ~ .form-control__label::before { + border-color: $cool-grey7; + background-color: transparent; + } + + input[type="checkbox"]:checked ~ .form-control__label::before, + input[type="radio"]:checked ~ .form-control__label::before { + border-color: $blue-jeans; + } + + input[type="radio"]:checked ~ .form-control__label::before { + background-color: $cool-grey2; + } + + input[type="checkbox"]:checked ~ .form-control__label::before { + background-color: $blue-jeans; + } + } +} diff --git a/assets/sass/all-digital/components/_form-control-groups.scss b/assets/sass/all-digital/components/_form-control-groups.scss new file mode 100755 index 0000000..e890720 --- /dev/null +++ b/assets/sass/all-digital/components/_form-control-groups.scss @@ -0,0 +1,172 @@ +.form-control-group { + > .form-control, + > .form-control-group { + margin-bottom: 10px; + + @include respond-to(768) { + margin-bottom: 16px; + } + } +} + +.form-control-group__helper { + clear: both; + position: relative; + top: -10px; + margin-bottom: 10px; +} + +.form-control-group--inline { + @include clearfix; + + > .form-control, + > .form-control-group { + padding-right: 16px; + max-width: 250px; + float: left; + clear: none; + vertical-align: top; + } +} + +.form-control-group--inline-at-768 { + @include respond-to(768) { + @include clearfix; + } + + > .form-control, + > .form-control-group { + @include respond-to(768) { + padding-right: 12px; + max-width: 250px; + float: left; + clear: none; + vertical-align: top; + } + } +} + +.form-control-group--split { + width: calc(100% + 24px); + margin-left: -12px; + font-size: 0; + letter-spacing: normal; + + > .form-control, + > .form-control-group { + display: inline-block; + padding: 0 12px; + width: 50%; + vertical-align: top; + font-size: #{$base-font-size}px; //overcome font-size 0 for inline block + letter-spacing: calc-target(0.2); + } +} + +.form-control-group--split-at-768 { + @include respond-to(768) { + width: calc(100% + 24px); + margin-left: -12px; + font-size: 0; + letter-spacing: normal; + } + + > .form-control, + > .form-control-group { + @include respond-to(768) { + display: inline-block; + padding: 0 12px; + width: 50%; + vertical-align: top; + font-size: #{$base-font-size}px; //overcome font-size 0 for inline block + letter-spacing: calc-target(0.2); + } + } +} + +.form-control-group--phone { + @include respond-to(768) { + width: calc(100% + 8px); + } + + > .form-control.phone { + @include respond-to(768) { + width: 60%; + max-width: 292px; + } + } + + > .form-control.phone-type { + @include respond-to(768) { + width: 40%; + max-width: 196px; + } + + &::before { + @include respond-to(768) { + margin-bottom: 5px; + height: calc-target(28); + display: block; + content: ''; + } + } + } +} + +.form-control-group--name { + width: calc(100% + 8px); + + .form-control { + width: 50%; + } +} + +.form-control-group--address { + @include clearfix; + margin-bottom: 0; + padding-left: 8px; + + @include respond-to(768) { + width: 50%; + float: right; + } + + .form-control-group--inline { + padding-bottom: 0; + } + + .form-control.street-name { + margin-bottom: 10px; + } + + .form-control.apt-suite { + max-width: 150px; + margin-bottom: 10px; + } + + .form-control.city { + max-width: 300px; + margin-bottom: 10px; + } + + .form-control.state { + max-width: 150px; + } + + .form-control.zip { + max-width: 150px; + } +} + +.form-control-group--card { + > .form-control--boolean { + margin-bottom: 0; + padding: 20px; + background: $white; + border-top: 1px solid $cool-grey5; + + &:first-child { + border-top: 0; + } + } +} diff --git a/assets/sass/all-digital/components/_form-controls.scss b/assets/sass/all-digital/components/_form-controls.scss new file mode 100755 index 0000000..5957c36 --- /dev/null +++ b/assets/sass/all-digital/components/_form-controls.scss @@ -0,0 +1,131 @@ +$form-control: ( + max-width: 480px, + inline-label-width: 224px +); + +.form-control { + @include clearfix; + clear: both; + margin-bottom: 16px; + max-width: map-get($form-control, max-width); + + @include respond-to(768) { + margin-bottom: 26px; + } + + input, + textarea, + select, + .readonly { + margin-bottom: 0; + max-width: none; + } +} + +.form-control__helper { + margin: 0; + padding-bottom: 5px; + color: $grey-36; + + input + & { + padding-top: 5px; + padding-bottom: 0; + } +} + +.form-control__label-text { + display: block; + margin-bottom: 0; +} + +.form-control__label-body { + display: block; + color: $grey-72; + + &.heading5 { + margin-bottom: 0; + } +} + +.form-control__input { + clear: both; + position: relative; +} + +.form-control__error, +label.error { + @include font-size($body3-size); + padding-top: 5px; + padding-bottom: 5px; + display: block; + clear: both; + color: $red-cherry; +} + +.form-control__note { + display: inline-block; + margin: 0; +} + +.form-control--primary { + [type=text], + [type=email], + [type=url], + [type=tel], + [type=password], + [type=search], + [type=number], + [type=date], + textarea, + select, + .readonly { + @include ui-dark { + background-color: $white; + color: $text-color; + border-color: $text-input-border-color; + } + + &:focus { + @include ui-dark { + border-color: $text-input-border-color-focus; + background-color: $text-input-background-color-focus; + } + } + } +} + +.form-control--inline { + display: flex; + max-width: map-get($form-control, max-width) + map-get($form-control, inline-label-width); + + > .form-control__label { + padding-top: 17px; + width: map-get($form-control, inline-label-width); + margin-right: 12px; + } + + > .form-control__input { + flex: 1; + } +} + +.form-control--inline-at-768 { + @include respond-to(768) { + display: flex; + max-width: map-get($form-control, max-width) + map-get($form-control, inline-label-width); + } + + > .form-control__label { + @include respond-to(768) { + padding-top: 17px; + width: map-get($form-control, inline-label-width); + margin-right: 12px; + } + } + + > .form-control__input { + @include respond-to(768) { + flex: 1; + } + } +} diff --git a/assets/sass/all-digital/components/_link-group.scss b/assets/sass/all-digital/components/_link-group.scss new file mode 100755 index 0000000..bcb5f0b --- /dev/null +++ b/assets/sass/all-digital/components/_link-group.scss @@ -0,0 +1,19 @@ +.link-group { + line-height: 1; + margin-bottom: 8px; + display: inline-block; +} + +.link-group__item { + display: inline-block; + margin-bottom: 12px; + margin-left: 10px; + padding-left: 10px; + border-left: 1px solid $cool-grey7; + + &:first-child { + margin-left: 0; + padding-left: 0; + border-left: 0; + } +} diff --git a/assets/sass/all-digital/components/_loading.scss b/assets/sass/all-digital/components/_loading.scss new file mode 100755 index 0000000..fc6bf89 --- /dev/null +++ b/assets/sass/all-digital/components/_loading.scss @@ -0,0 +1,60 @@ +.loading { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba($smolder, 0.85); + z-index: 1; + + .page-section & { + position: absolute; + background-color: $cool-grey3; + } + + @include ui-blue { + background-color: transparent; + } +} + +.loading__content { + @include horizontal-vertical-align(); + background-color: rgba($cool-grey7, 0.2); + border-radius: 50%; + width: 100px; + height: 100px; + font-size: 0; + text-align: center; + + .page-section & { + background-color: $cool-grey7; + } + + @include ui-blue { + background-color: rgba($cool-grey7, 0.2); + } +} + +.loading__dots { + @include vertical-align(); + right: 0; + left: 0; +} + +.loading__dot { + display: inline-block; + background-color: rgba(255, 255, 255, 0.6); + border-radius: 50%; + margin: 0 2px; + width: 13px; + height: 13px; + animation: bounce-delay 1.4s infinite ease-in-out both; +} + +.loading__dot:nth-child(1) { + animation-delay: -.32s; +} + +.loading__dot:nth-child(2) { + animation-delay: -.16s; +} diff --git a/assets/sass/all-digital/components/_page-section.scss b/assets/sass/all-digital/components/_page-section.scss new file mode 100755 index 0000000..43aa594 --- /dev/null +++ b/assets/sass/all-digital/components/_page-section.scss @@ -0,0 +1,98 @@ +.page-section { + @include clearfix(); + position: relative; + clear: both; + + &.ui-grey + .ui-grey { + .page-section__content { + padding-top: 0; + } + } +} + +.page-section__wrapper { + @include wrapper; +} + +.page-section__content { + padding: 30px 0; + + > :last-child { + margin-bottom: 0; + } +} + +.page-section--centered-text { + text-align: center; + + hr { + margin-right: auto; + margin-left: auto; + max-width: 50px; + } +} + +.page-section--overlay { + background-size: cover; + background-position: center center; + + .page-section__content { + max-width: 600px; + color: $white; + + @include respond-to(768) { + padding-right: 40px; + padding-left: 40px; + } + } + + .page-section__content--no-bg { + background: none !important; + } + + &.ui-dark { + background-attachment: scroll; + + .page-section__content { + background: map-get($ui-dark-map, page-section-overlay-background-color); + } + } +} + +.page-section--overlay-centered { + .page-section__content { + margin: 0 auto; + } +} + +.page-section--overlay-right, +.page-section--overlay-image-left { + .page-section__content { + width: 100%; + float: right; + } +} + +.page-section--medium { + .page-section__content { + padding-top: 40px; + padding-bottom: 40px; + + @include respond-to(768) { + padding-top: 100px; + padding-bottom: 100px; + } + } +} + +.page-section--tall { + .page-section__content { + padding-top: 50px; + padding-bottom: 50px; + + @include respond-to(768) { + padding-top: 200px; + padding-bottom: 200px; + } + } +} diff --git a/assets/sass/all-digital/utils/_functions.scss b/assets/sass/all-digital/utils/_functions.scss new file mode 100755 index 0000000..3c684d1 --- /dev/null +++ b/assets/sass/all-digital/utils/_functions.scss @@ -0,0 +1,4 @@ +//Calc Target +//this file contains the function +//for calc target +@import 'functions/calc-target'; diff --git a/assets/sass/all-digital/utils/_mixins.scss b/assets/sass/all-digital/utils/_mixins.scss new file mode 100755 index 0000000..39092bb --- /dev/null +++ b/assets/sass/all-digital/utils/_mixins.scss @@ -0,0 +1,17 @@ +@import 'mixins/headings'; +@import 'mixins/font-size'; +@import 'mixins/gradient'; +@import 'mixins/icomoon'; +@import 'mixins/letter-spacing'; +@import 'mixins/respond-to'; +@import 'mixins/transition'; +@import 'mixins/visually-hidden'; +@import 'mixins/word-break'; +@import 'mixins/vertical-align'; +@import 'mixins/horizontal-align'; +@import 'mixins/horizontal-vertical-align'; +@import 'mixins/button'; +@import 'mixins/wrapper'; +@import 'mixins/clearfix'; +@import 'mixins/transform'; +@import 'mixins/theme'; diff --git a/assets/sass/all-digital/utils/_variables.scss b/assets/sass/all-digital/utils/_variables.scss new file mode 100755 index 0000000..596c257 --- /dev/null +++ b/assets/sass/all-digital/utils/_variables.scss @@ -0,0 +1,116 @@ +// ========================================================================== +// site specific colors and overrides +// ========================================================================== + +// brand colors +$blue-genie: #2b9cd8; +$blue-berry: #1f6f9a; +$blue-sky: #0272b6; +$blue-ocean: #00619a; +$blue-moon: #015383; +$blue-knight: #051219; +$blue-jeans: #0b7dbf; + +$red-cherry: #c90318; + +$yellow-banana: #fece00; +$yellow-pumpkin: #ffa700; + +$green-lime: #5bc942; +$green-grass: #19a926; +$green-forest: #007B76; + +// additional colors +$minty: #65d0a7; +$lagoon: #1bcfe1; +$green-tea: #1ee2c9; +$smolder: #1f232e; +$urban: #051219; +$red-watermelon: #fb543f; +$turq: #50c3d5; +$haute: #ff5a5a; +$tangerine: #ff9271; +$berry: #ff638d; +$bramble: #bc43d3; +$reign: #7155d3; + +// greys +$white: #fff; +$grey-5: #f2f2f2; +$grey-9: #e8e8e8; +$grey-18: #d1d1d1; +$grey-27: #bababa; +$grey-36: #a3a3a3; +$grey-45: #8c8c8c; +$grey-54: #757575; +$grey-63: #5e5e5e; +$grey-72: #474747; +$grey-81: #303030; +$grey-90: #191919; +$black: #000; + +// cool greys +$cool-grey1: #fbfcfc; +$cool-grey2: #f2f4f5; +$cool-grey3: #eef1f3; +$cool-grey4: #ebeef0; +$cool-grey5: #e6eaed; +$cool-grey6: #dde2e6; +$cool-grey7: #b1b9bf; +$cool-grey8: #6c747c; +$cool-grey9: #44484c; +$cool-grey10: #191919; + +// ========================================================================== +// functional color palette +// ========================================================================== + +// general +$text-color: $cool-grey10; +$link-color: $blue-sky; +$link-hover-color: $blue-sky; +$background-color: $white; + +// color degrees +$primary: $blue-sky; +$secondary: $blue-berry; + +// ui colors +$ui-success: $green-lime; +$ui-info: $blue-sky; +$ui-warning: $yellow-banana; +$ui-danger: $red-cherry; + +// ========================================================================== +// base elements +// ========================================================================== + +@import 'variables/headings'; +@import 'variables/forms'; + +// ========================================================================== +// components +// ========================================================================== + +@import 'variables/buttons'; +@import 'variables/page-section'; +@import 'variables/form-controls'; +@import 'variables/card'; +@import 'variables/wrapper'; + +// ========================================================================== +// font stacks +// ========================================================================== + +$base-font-size: 14 !default; +$base-line-height: 22 !default; +$primary-font-stack: $xfinity-standard; +$secondary-font-stack: $xfinity-standard-condensed; + +// ========================================================================== +// theme maps +// ========================================================================== + +@import 'themes/dark'; +@import 'themes/blue'; +@import 'themes/grey'; diff --git a/assets/sass/all-digital/utils/functions/_calc-target.scss b/assets/sass/all-digital/utils/functions/_calc-target.scss new file mode 100755 index 0000000..1be03e0 --- /dev/null +++ b/assets/sass/all-digital/utils/functions/_calc-target.scss @@ -0,0 +1,7 @@ +// ========================================================================== +// calc target +// ========================================================================== + +@function calc-target($target, $context: $base-font-size, $unit: 1em) { + @return $target / $context * $unit; +} diff --git a/assets/sass/all-digital/utils/mixins/_button.scss b/assets/sass/all-digital/utils/mixins/_button.scss new file mode 100755 index 0000000..28457d7 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_button.scss @@ -0,0 +1,42 @@ +@mixin button { + @include font-size($body2-size); + @include transition(min-width, 0.15); + display: inline-block; + position: relative; + margin-bottom: 20px; + background-color: $button-background-color; + border: 1px solid $button-border-color; + min-width: calc-target(160, $body2-size); + cursor: pointer; + padding: calc-target(12, $body2-size) calc-target(30, $body2-size); + text-align: center; + text-decoration: none; + line-height: calc-target($body2-height, $body2-size, 1); + color: $button-text-color; + border-radius: 2em; + font-weight: normal; +} + +@mixin button-hover { + color: $button-text-color-hover; + border-color: $button-border-color-hover; + background-color: $button-background-color-hover; + text-decoration: none; +} + +@mixin button-active { + color: $button-text-color-active; + border-color: $button-border-color-active; + background-color: $button-background-color-active; +} + +@mixin button-text { + font-size: 1em; + display: inline; + margin-bottom: 0; + background-color: transparent; + border: 0; + min-width: 0; + padding: 0; + border-radius: 0; +} diff --git a/assets/sass/all-digital/utils/mixins/_clearfix.scss b/assets/sass/all-digital/utils/mixins/_clearfix.scss new file mode 100755 index 0000000..030d78a --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_clearfix.scss @@ -0,0 +1,7 @@ +@mixin clearfix { + &::after { + content: ''; + display: table; + clear: both; + } +} diff --git a/assets/sass/all-digital/utils/mixins/_font-size.scss b/assets/sass/all-digital/utils/mixins/_font-size.scss new file mode 100755 index 0000000..0ec5bb1 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_font-size.scss @@ -0,0 +1,7 @@ +// ========================================================================== +// @mixin font-size +// ========================================================================== +@mixin font-size($target-size, $base: $base-font-size) { + font-size: $target-size * 1px; // fallback + font-size: $target-size / $base * 1rem; +} diff --git a/assets/sass/all-digital/utils/mixins/_gradient.scss b/assets/sass/all-digital/utils/mixins/_gradient.scss new file mode 100755 index 0000000..6f6bccc --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_gradient.scss @@ -0,0 +1,4 @@ +@mixin gradient($start-color, $end-color, $start-position: 0%, $end-position: 100%) { + background-color: $start-color; + background-image: linear-gradient(top, $start-color $start-position, $end-color $end-position); +} diff --git a/assets/sass/all-digital/utils/mixins/_headings.scss b/assets/sass/all-digital/utils/mixins/_headings.scss new file mode 100755 index 0000000..41d2d87 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_headings.scss @@ -0,0 +1,358 @@ +@mixin display1 { + @include font-size($display1-size); + margin: 0 0 12px; + line-height: calc-target($display1-height, $display1-size, 1); + color: $display1-color; + font-weight: 100; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($display1-size-large); + line-height: calc-target($display1-height-large, $display1-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, display1-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, display1-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, display1-color); + } + + @include ui-light { + color: $display1-color; + } +} + +@mixin display2 { + @include font-size($display2-size); + margin: 0 0 12px; + line-height: calc-target($display2-height, $display2-size, 1); + color: $display2-color; + font-weight: 100; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($display2-size-large); + line-height: calc-target($display2-height-large, $display2-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, display2-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, display2-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, display2-color); + } + + @include ui-light { + color: $display2-color; + } +} + +@mixin display3 { + @include font-size($display3-size); + margin: 0 0 12px; + line-height: calc-target($display3-height, $display3-size, 1); + color: $display3-color; + font-weight: 100; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($display3-size-large); + line-height: calc-target($display3-height-large, $display3-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, display3-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, display3-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, display3-color); + } + + @include ui-light { + color: $display3-color; + } +} + +@mixin heading1 { + @include font-size($heading1-size); + margin: 0 0 12px; + line-height: calc-target($heading1-height, $heading1-size, 1); + color: $heading1-color; + font-weight: 100; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($heading1-size-large); + line-height: calc-target($heading1-height-large, $heading1-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, heading1-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, heading1-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, heading1-color); + } + + @include ui-light { + color: $heading1-color; + } +} + +@mixin heading2 { + @include font-size($heading2-size); + margin: 0 0 12px; + line-height: calc-target($heading2-height, $heading2-size, 1); + color: $heading2-color; + font-weight: 200; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($heading2-size-large); + line-height: calc-target($heading2-height-large, $heading2-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, heading2-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, heading2-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, heading2-color); + } + + @include ui-light { + color: $heading2-color; + } +} + +@mixin heading3 { + @include font-size($heading3-size); + margin: 0 0 12px; + line-height: calc-target($heading3-height, $heading3-size, 1); + color: $heading3-color; + font-weight: 200; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($heading3-size-large); + line-height: calc-target($heading3-height-large, $heading3-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, heading3-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, heading3-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, heading3-color); + } + + @include ui-light { + color: $heading3-color; + } +} + +@mixin body1 { + @include font-size($body1-size); + margin: 0 0 12px; + line-height: calc-target($body1-height, $body1-size, 1); + color: $body1-color; + font-weight: 300; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include respond-to(1024) { + @include font-size($body1-size-large); + line-height: calc-target($body1-height-large, $body1-size-large, 1); + } + + @include ui-dark { + color: map-get($ui-dark-map, body1-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, body1-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, body1-color); + } + + @include ui-light { + color: $body1-color; + } +} + +@mixin body2 { + @include font-size($body2-size); + margin: 0 0 12px; + line-height: calc-target($body2-height, $body2-size, 1); + color: $body2-color; + font-weight: 300; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include ui-dark { + color: map-get($ui-dark-map, body2-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, body2-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, body2-color); + } + + @include ui-light { + color: $body2-color; + } +} + +@mixin body3 { + @include font-size($body3-size); + margin: 0 0 12px; + line-height: calc-target($body3-height, $body3-size, 1); + color: $body3-color; + font-weight: 400; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include ui-dark { + color: map-get($ui-dark-map, body3-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, body3-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, body3-color); + } + + @include ui-light { + color: $body3-color; + } +} + +@mixin body4 { + @include font-size($body4-size); + margin: 0 0 12px; + line-height: calc-target($body4-height, $body4-size, 1); + color: $body4-color; + font-weight: 400; + text-transform: none; + font-family: $primary-font-stack; + letter-spacing: 0.2px; + + @include ui-dark { + color: map-get($ui-dark-map, body4-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, body4-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, body4-color); + } + + @include ui-light { + color: $body4-color; + } +} + +@mixin heading4 { + @include font-size($heading4-size); + margin: 0 0 12px; + line-height: calc-target($heading4-height, $heading4-size, 1); + color: $heading4-color; + font-weight: 700; + text-transform: uppercase; + font-family: $primary-font-stack; + letter-spacing: 0.5px; + + @include ui-dark { + color: map-get($ui-dark-map, heading4-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, heading4-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, heading4-color); + } + + @include ui-light { + color: $heading4-color; + } +} + +@mixin heading5 { + @include font-size($heading5-size); + margin: 0 0 12px; + line-height: calc-target($heading5-height, $heading5-size, 1); + color: $heading5-color; + font-weight: 500; + text-transform: uppercase; + font-family: $primary-font-stack; + letter-spacing: 0.5px; + + @include ui-dark { + color: map-get($ui-dark-map, heading5-color); + } + + @include ui-blue { + color: map-get($ui-blue-map, heading5-color); + } + + @include ui-grey { + color: map-get($ui-grey-map, heading5-color); + } + + @include ui-light { + color: $heading5-color; + } +} diff --git a/assets/sass/all-digital/utils/mixins/_horizontal-align.scss b/assets/sass/all-digital/utils/mixins/_horizontal-align.scss new file mode 100755 index 0000000..1b60d73 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_horizontal-align.scss @@ -0,0 +1,5 @@ +@mixin horizontal-align() { + transform: translateX(-50%); + position: absolute; + left: 50%; +} diff --git a/assets/sass/all-digital/utils/mixins/_horizontal-vertical-align.scss b/assets/sass/all-digital/utils/mixins/_horizontal-vertical-align.scss new file mode 100755 index 0000000..5aeaf3a --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_horizontal-vertical-align.scss @@ -0,0 +1,6 @@ +@mixin horizontal-vertical-align() { + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; +} diff --git a/assets/sass/all-digital/utils/mixins/_icomoon.scss b/assets/sass/all-digital/utils/mixins/_icomoon.scss new file mode 100755 index 0000000..57f4f9c --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_icomoon.scss @@ -0,0 +1,15 @@ +// ========================================================================== +// icomoon +// ========================================================================== + +@mixin icomoon() { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/assets/sass/all-digital/utils/mixins/_letter-spacing.scss b/assets/sass/all-digital/utils/mixins/_letter-spacing.scss new file mode 100755 index 0000000..9f5de00 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_letter-spacing.scss @@ -0,0 +1,6 @@ +// ========================================================================== +// @mixin letter-spacing +// ========================================================================== +@mixin letter-spacing($tracking-size) { + letter-spacing: $tracking-size / 1000 * 1px; +} diff --git a/assets/sass/all-digital/utils/mixins/_respond-to.scss b/assets/sass/all-digital/utils/mixins/_respond-to.scss new file mode 100755 index 0000000..2661446 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_respond-to.scss @@ -0,0 +1,35 @@ +// ========================================================================== +// @mixin respond-to +// ========================================================================== + +$media-query-support: true !default; + +@mixin respond-to($media: 320, $mq-support: $media-query-support) { + @if $mq-support == true { + @if $media == retina { + @media + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + @content; + } + } @else { + // output content wrapped in media queries + @media (min-width: $media / 16 * 1em) { @content; } + } + } @elseif $mq-support == false { + // just output the content + @if $media <= 1024 { + @content; + } + } +} + +@mixin respond-to-retina($media: 320, $mq-support: $media-query-support) { + @if $mq-support == true { + @media + (-webkit-min-device-pixel-ratio: 2) and (min-width: $media / 16 * 1em), + (min-resolution: 192dpi) and (min-width: $media / 16 * 1em) { + @content; + } + } +} diff --git a/assets/sass/all-digital/utils/mixins/_theme.scss b/assets/sass/all-digital/utils/mixins/_theme.scss new file mode 100755 index 0000000..87e748b --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_theme.scss @@ -0,0 +1,23 @@ +@mixin ui-light { + .ui-light & { + @content; + } +} + +@mixin ui-dark { + .ui-dark & { + @content; + } +} + +@mixin ui-grey { + .ui-grey & { + @content; + } +} + +@mixin ui-blue { + .ui-blue & { + @content; + } +} diff --git a/assets/sass/all-digital/utils/mixins/_transform.scss b/assets/sass/all-digital/utils/mixins/_transform.scss new file mode 100755 index 0000000..e5bed29 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_transform.scss @@ -0,0 +1,3 @@ +@mixin transform($property) { + transform: $property; +} diff --git a/assets/sass/all-digital/utils/mixins/_transition.scss b/assets/sass/all-digital/utils/mixins/_transition.scss new file mode 100755 index 0000000..5d4f5b5 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_transition.scss @@ -0,0 +1,5 @@ +@mixin transition($property, $time: 1, $easing: ease-in-out) { + $time: $time * 1s; + + transition: $property $time $easing; +} diff --git a/assets/sass/all-digital/utils/mixins/_vertical-align.scss b/assets/sass/all-digital/utils/mixins/_vertical-align.scss new file mode 100755 index 0000000..2f20efc --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_vertical-align.scss @@ -0,0 +1,5 @@ +@mixin vertical-align() { + transform: translateY(-50%); + position: absolute; + top: 50%; +} diff --git a/assets/sass/all-digital/utils/mixins/_visually-hidden.scss b/assets/sass/all-digital/utils/mixins/_visually-hidden.scss new file mode 100755 index 0000000..ddc10e3 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_visually-hidden.scss @@ -0,0 +1,11 @@ +@mixin visually-hidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/assets/sass/all-digital/utils/mixins/_word-break.scss b/assets/sass/all-digital/utils/mixins/_word-break.scss new file mode 100755 index 0000000..782d72b --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_word-break.scss @@ -0,0 +1,4 @@ +@mixin word-break() { + word-break: break-word; + overflow-wrap: break-word; +} diff --git a/assets/sass/all-digital/utils/mixins/_wrapper.scss b/assets/sass/all-digital/utils/mixins/_wrapper.scss new file mode 100755 index 0000000..56142d4 --- /dev/null +++ b/assets/sass/all-digital/utils/mixins/_wrapper.scss @@ -0,0 +1,9 @@ +@mixin wrapper { + margin: 0 auto; + padding: 0 $wrapper-gutters; + max-width: $wrapper-max-width; + + @include respond-to(768) { + padding: 0 $wrapper-gutters-768; + } +} diff --git a/assets/sass/all-digital/utils/themes/_blue.scss b/assets/sass/all-digital/utils/themes/_blue.scss new file mode 100755 index 0000000..89313a3 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/_blue.scss @@ -0,0 +1,31 @@ +// ========================================================================== +// functional color palette +// ========================================================================== + +// general + +$ui-blue-map: ( + text-color: $white, + link-color: $white, + background-color: $blue-ocean +); + +// ========================================================================== +// base elements +// ========================================================================== + +@import 'blue/headings'; +@import 'blue/forms'; +@import 'blue/links'; + +$ui-blue-map: map-merge($ui-blue-map, $headings); +$ui-blue-map: map-merge($ui-blue-map, $forms); +$ui-blue-map: map-merge($ui-blue-map, $links); + +// ========================================================================== +// components +// ========================================================================== + +@import 'blue/buttons'; + +$ui-blue-map: map-merge($ui-blue-map, $buttons); diff --git a/assets/sass/all-digital/utils/themes/_dark.scss b/assets/sass/all-digital/utils/themes/_dark.scss new file mode 100755 index 0000000..0a39dea --- /dev/null +++ b/assets/sass/all-digital/utils/themes/_dark.scss @@ -0,0 +1,30 @@ +// ========================================================================== +// functional color palette +// ========================================================================== + +// general +$ui-dark-map: ( + text-color: $white, + background-color: #030b0f, + link-color: $blue-genie, + link-hover-color: $blue-genie +); + +// ========================================================================== +// base elements +// ========================================================================== + +@import 'dark/headings'; +@import 'dark/forms'; + +// ========================================================================== +// components +// ========================================================================== + +@import 'dark/buttons'; +@import 'dark/page-sections'; + +$ui-dark-map: map-merge($ui-dark-map, $headings); +$ui-dark-map: map-merge($ui-dark-map, $forms); +$ui-dark-map: map-merge($ui-dark-map, $buttons); +$ui-dark-map: map-merge($ui-dark-map, $page-sections); diff --git a/assets/sass/all-digital/utils/themes/_grey.scss b/assets/sass/all-digital/utils/themes/_grey.scss new file mode 100755 index 0000000..6533b00 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/_grey.scss @@ -0,0 +1,29 @@ +// ========================================================================== +// functional color palette +// ========================================================================== + +// general +$ui-grey-map: ( + text-color: $text-color, + background-color: $cool-grey3 +); + +// ========================================================================== +// base elements +// ========================================================================== + +@import 'grey/links'; +@import 'grey/headings'; +@import 'grey/forms'; + +$ui-grey-map: map-merge($ui-grey-map, $links); +$ui-grey-map: map-merge($ui-grey-map, $headings); +$ui-grey-map: map-merge($ui-grey-map, $forms); + +// ========================================================================== +// components +// ========================================================================== + +@import 'grey/card'; + +$ui-grey-map: map-merge($ui-grey-map, $card); diff --git a/assets/sass/all-digital/utils/themes/blue/_buttons.scss b/assets/sass/all-digital/utils/themes/blue/_buttons.scss new file mode 100755 index 0000000..bba5ac9 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/blue/_buttons.scss @@ -0,0 +1,26 @@ +$buttons: ( + button-text-color: $cool-grey1, + button-border-color: $cool-grey1, + button-background-color: transparent, + button-text-color-hover: $blue-ocean, + button-border-color-hover: $white, + button-background-color-hover: $white, + button-text-color-active: $blue-moon, + button-border-color-active: $cool-grey3, + button-background-color-active: $cool-grey3, + + button-primary-text-color: $blue-sky, + button-primary-border-color: $cool-grey1, + button-primary-background-color: $cool-grey1, + button-primary-text-color-hover: $blue-ocean, + button-primary-border-color-hover: $white, + button-primary-background-color-hover: $white, + button-primary-text-color-active: $blue-moon, + button-primary-border-color-active: $cool-grey3, + button-primary-background-color-active: $cool-grey3, + + button-secondary-border-color: transparent, + button-secondary-border-color-hover: transparent, + button-secondary-text-color-hover: $cool-grey1, + button-secondary-text-color-active: $cool-grey2 +); diff --git a/assets/sass/all-digital/utils/themes/blue/_forms.scss b/assets/sass/all-digital/utils/themes/blue/_forms.scss new file mode 100755 index 0000000..6731926 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/blue/_forms.scss @@ -0,0 +1,9 @@ +$forms: ( + text-input-border-color: transparent, + text-input-background-color: rgba($white, 0.15), + text-input-text-color: $white, + + text-input-background-color-focus: rgba($white, 0.1), + + text-input-background-color-error: rgba($white, 0.1) +); diff --git a/assets/sass/all-digital/utils/themes/blue/_headings.scss b/assets/sass/all-digital/utils/themes/blue/_headings.scss new file mode 100755 index 0000000..13b90b8 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/blue/_headings.scss @@ -0,0 +1,15 @@ +$headings: ( + display1-color: $white, + display2-color: $white, + display3-color: $white, + heading1-color: $white, + heading2-color: $white, + heading3-color: $white, + heading4-color: $white, + body1-color: $white, + body2-color: $white, + body3-color: $white, + body4-color: $white, + heading5-color: $white, + heading6-color: $white +); diff --git a/assets/sass/all-digital/utils/themes/blue/_links.scss b/assets/sass/all-digital/utils/themes/blue/_links.scss new file mode 100755 index 0000000..427754c --- /dev/null +++ b/assets/sass/all-digital/utils/themes/blue/_links.scss @@ -0,0 +1,4 @@ +$links: ( + link-color: $white, + link-hover-color: $white +); diff --git a/assets/sass/all-digital/utils/themes/dark/_buttons.scss b/assets/sass/all-digital/utils/themes/dark/_buttons.scss new file mode 100755 index 0000000..38ad09d --- /dev/null +++ b/assets/sass/all-digital/utils/themes/dark/_buttons.scss @@ -0,0 +1,6 @@ +$buttons: ( + button-text-color: $white, + button-secondary-border-color: transparent, + button-secondary-text-color-hover: $cool-grey1, + button-secondary-text-color-active: $cool-grey2 +); diff --git a/assets/sass/all-digital/utils/themes/dark/_forms.scss b/assets/sass/all-digital/utils/themes/dark/_forms.scss new file mode 100755 index 0000000..6731926 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/dark/_forms.scss @@ -0,0 +1,9 @@ +$forms: ( + text-input-border-color: transparent, + text-input-background-color: rgba($white, 0.15), + text-input-text-color: $white, + + text-input-background-color-focus: rgba($white, 0.1), + + text-input-background-color-error: rgba($white, 0.1) +); diff --git a/assets/sass/all-digital/utils/themes/dark/_headings.scss b/assets/sass/all-digital/utils/themes/dark/_headings.scss new file mode 100755 index 0000000..13b90b8 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/dark/_headings.scss @@ -0,0 +1,15 @@ +$headings: ( + display1-color: $white, + display2-color: $white, + display3-color: $white, + heading1-color: $white, + heading2-color: $white, + heading3-color: $white, + heading4-color: $white, + body1-color: $white, + body2-color: $white, + body3-color: $white, + body4-color: $white, + heading5-color: $white, + heading6-color: $white +); diff --git a/assets/sass/all-digital/utils/themes/dark/_page-sections.scss b/assets/sass/all-digital/utils/themes/dark/_page-sections.scss new file mode 100755 index 0000000..267e5dc --- /dev/null +++ b/assets/sass/all-digital/utils/themes/dark/_page-sections.scss @@ -0,0 +1,3 @@ +$page-sections: ( + page-section-overlay-background-color: rgba(#0f232b, 0.8) +); diff --git a/assets/sass/all-digital/utils/themes/grey/_card.scss b/assets/sass/all-digital/utils/themes/grey/_card.scss new file mode 100755 index 0000000..94ef97f --- /dev/null +++ b/assets/sass/all-digital/utils/themes/grey/_card.scss @@ -0,0 +1,8 @@ +$card: ( + card-text-color: $cool-grey10, + card-background-color: $white, + card-border-color: $cool-grey5, + card-secondary-text-color: $cool-grey10, + card-secondary-background-color: $cool-grey1, + card-secondary-border-color: $cool-grey5 +); diff --git a/assets/sass/all-digital/utils/themes/grey/_forms.scss b/assets/sass/all-digital/utils/themes/grey/_forms.scss new file mode 100755 index 0000000..5d38b7c --- /dev/null +++ b/assets/sass/all-digital/utils/themes/grey/_forms.scss @@ -0,0 +1,5 @@ +$forms: ( + text-input-border-color: $cool-grey8, + text-input-background-color: rgba($white, 0.75), + text-input-text-color: inherit +); diff --git a/assets/sass/all-digital/utils/themes/grey/_headings.scss b/assets/sass/all-digital/utils/themes/grey/_headings.scss new file mode 100755 index 0000000..c0f3cbf --- /dev/null +++ b/assets/sass/all-digital/utils/themes/grey/_headings.scss @@ -0,0 +1,15 @@ +$headings: ( + display1-color: $cool-grey10, + display2-color: $cool-grey10, + display3-color: $cool-grey10, + heading1-color: $cool-grey10, + heading2-color: $cool-grey10, + heading3-color: $cool-grey10, + heading4-color: $cool-grey10, + body1-color: $cool-grey10, + body2-color: $cool-grey10, + body3-color: $cool-grey10, + body4-color: $cool-grey10, + heading5-color: $cool-grey10, + heading6-color: $cool-grey10 +); diff --git a/assets/sass/all-digital/utils/themes/grey/_links.scss b/assets/sass/all-digital/utils/themes/grey/_links.scss new file mode 100755 index 0000000..01735c1 --- /dev/null +++ b/assets/sass/all-digital/utils/themes/grey/_links.scss @@ -0,0 +1,4 @@ +$links: ( + link-color: $blue-sky, + link-hover-color: $blue-berry +); diff --git a/assets/sass/all-digital/utils/variables/_buttons.scss b/assets/sass/all-digital/utils/variables/_buttons.scss new file mode 100755 index 0000000..c6cda76 --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_buttons.scss @@ -0,0 +1,35 @@ +// ========================================================================== +// default button +// ========================================================================== + +$button-text-color: $blue-sky; +$button-background-color: transparent; +$button-border-color: $blue-sky; + +//hover +$button-text-color-hover: $white; +$button-background-color-hover: $blue-ocean; +$button-border-color-hover: $blue-ocean; + +//active +$button-text-color-active: $white; +$button-background-color-active: $blue-moon; +$button-border-color-active: $blue-moon; + +// ========================================================================== +// primary button +// ========================================================================== + +$button-primary-text-color: $white; +$button-primary-background-color: $blue-sky; +$button-primary-border-color: $blue-sky; + +//hover +$button-primary-text-color-hover: $white; +$button-primary-background-color-hover: $blue-ocean; +$button-primary-border-color-hover: $blue-ocean; + +//active +$button-primary-text-color-active: $white; +$button-primary-background-color-active: $blue-moon; +$button-primary-border-color-active: $blue-moon; diff --git a/assets/sass/all-digital/utils/variables/_card.scss b/assets/sass/all-digital/utils/variables/_card.scss new file mode 100755 index 0000000..b5b8150 --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_card.scss @@ -0,0 +1,15 @@ +// ========================================================================== +// default card +// ========================================================================== + +$card-text-color: $cool-grey10; +$card-background-color: $white; +$card-border-color: $cool-grey6; + +// ========================================================================== +// secondary card +// ========================================================================== + +$card-secondary-text-color: $cool-grey10; +$card-secondary-background-color: $cool-grey1; +$card-secondary-border-color: $cool-grey6; diff --git a/assets/sass/all-digital/utils/variables/_form-controls.scss b/assets/sass/all-digital/utils/variables/_form-controls.scss new file mode 100755 index 0000000..091cdbe --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_form-controls.scss @@ -0,0 +1,3 @@ +$booleen-box-border-color: $cool-grey5; +$booleen-box-background-color: rgba($white, 0.7); +$booleen-box-background-color-active: $white; diff --git a/assets/sass/all-digital/utils/variables/_forms.scss b/assets/sass/all-digital/utils/variables/_forms.scss new file mode 100755 index 0000000..74acdb4 --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_forms.scss @@ -0,0 +1,14 @@ +// default +$text-input-border-color: $cool-grey8 !default; +$text-input-background-color: rgba($white, 0.75) !default; +$text-input-text-color: inherit !default; +$text-input-font-size: 16px !default; +$text-input-font-size-desktop: 18px !default; + +// focus +$text-input-border-color-focus: $blue-sky !default; +$text-input-background-color-focus: $white !default; + +// error +$text-input-border-color-error: $red-cherry !default; +$text-input-background-color-error: $white !default; diff --git a/assets/sass/all-digital/utils/variables/_headings.scss b/assets/sass/all-digital/utils/variables/_headings.scss new file mode 100755 index 0000000..e0ec6c3 --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_headings.scss @@ -0,0 +1,56 @@ +$display1-color: $cool-grey10; +$display2-color: $cool-grey10; +$display3-color: $cool-grey10; +$heading1-color: $cool-grey10; +$heading2-color: $cool-grey10; +$heading3-color: $cool-grey10; +$body1-color: $cool-grey10; +$body2-color: $cool-grey9; +$body3-color: $cool-grey9; +$body4-color: $cool-grey10; +$heading4-color: $cool-grey10; +$heading5-color: $cool-grey10; + +$display1-size: 50; +$display2-size: 40; +$display3-size: 30; +$heading1-size: 24; +$heading2-size: 20; +$heading3-size: 18; +$body1-size: 16; +$body2-size: 16; +$body3-size: 14; +$body4-size: 12; +$heading4-size: 15; +$heading5-size: 12; + +$display1-height: 75; +$display2-height: 60; +$display3-height: 45; +$heading1-height: 36; +$heading2-height: 30; +$heading3-height: 27; +$body1-height: 24; +$body2-height: 24; +$body3-height: 21; +$body4-height: 18; +$heading4-height: 22; +$heading5-height: 18; + +// Desktop + +$display1-size-large: 70; +$display2-size-large: 50; +$display3-size-large: 40; +$heading1-size-large: 30; +$heading2-size-large: 24; +$heading3-size-large: 20; +$body1-size-large: 18; + +$display1-height-large: 105; +$display2-height-large: 75; +$display3-height-large: 60; +$heading1-height-large: 45; +$heading2-height-large: 36; +$heading3-height-large: 30; +$body1-height-large: 27; diff --git a/assets/sass/all-digital/utils/variables/_page-section.scss b/assets/sass/all-digital/utils/variables/_page-section.scss new file mode 100755 index 0000000..f3c81ad --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_page-section.scss @@ -0,0 +1 @@ +$page-section-overlay-background-color: rgba($white, 0.9); diff --git a/assets/sass/all-digital/utils/variables/_wrapper.scss b/assets/sass/all-digital/utils/variables/_wrapper.scss new file mode 100755 index 0000000..6bc66c8 --- /dev/null +++ b/assets/sass/all-digital/utils/variables/_wrapper.scss @@ -0,0 +1,3 @@ +$wrapper-max-width: 1120px !default; +$wrapper-gutters: 12px !default; +$wrapper-gutters-768: 24px !default; diff --git a/assets/sass/all-digital/vendors/_h5bp.scss b/assets/sass/all-digital/vendors/_h5bp.scss new file mode 100755 index 0000000..9e9668b --- /dev/null +++ b/assets/sass/all-digital/vendors/_h5bp.scss @@ -0,0 +1,293 @@ +/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * These selection rule sets have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + + + + + + + + + + + + + + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* + * Hide only visually, but have it available for screen readers: + * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility + * + * 1. For long content, line feeds are not interpreted as spaces and small width + * causes content to wrap 1 word per line: + * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe + */ + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; /* 1 */ +} + +/* + * Extends the .visuallyhidden class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + white-space: inherit; +} + +/* + * Hide visually and from screen readers, but maintain layout + */ + +.invisible { + visibility: hidden; +} + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + http://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *:before, + *:after, + p:first-letter, + div:first-letter, + blockquote:first-letter, + li:first-letter, + p:first-line, + div:first-line, + blockquote:first-line, + li:first-line { + background: transparent !important; + color: #000 !important; /* Black prints faster: + http://www.sanbeiji.com/archives/953 */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre { + white-space: pre-wrap !important; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/assets/sass/all-digital/vendors/_normalize.scss b/assets/sass/all-digital/vendors/_normalize.scss new file mode 100755 index 0000000..9b77e0e --- /dev/null +++ b/assets/sass/all-digital/vendors/_normalize.scss @@ -0,0 +1,461 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/bower.json b/bower.json new file mode 100755 index 0000000..dfe5c66 --- /dev/null +++ b/bower.json @@ -0,0 +1,16 @@ +{ + "name": "all-digital", + "version": "1.9.2", + "description": "CSS for All Digital", + "main": "assets/sass/_all-digital.scss", + "keywords": [ + "all-digital" + ], + "authors": [ + "Comcast" + ], + "license": "Apache", + "ignore": [ + "**/.*" + ] +} diff --git a/package.json b/package.json new file mode 100755 index 0000000..3a1415d --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "all-digital", + "version": "1.9.2", + "description": "CSS for All Digital", + "repository": { + "type": "git", + "url": "https://github.com/Comcast/all-digital.git" + }, + "keywords": [ + "css", + "sass", + "mobile-first", + "responsive", + "front-end", + "web" + ], + "author": "Comcast", + "license": "Apache" +}