From 61e0264415112830505283ea29cec6ce888e64c1 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Wed, 18 Apr 2018 15:05:40 -0700 Subject: [PATCH] Clean up, more components and elements (#97) #97 - Clean up KSS Adds KSS comments everywhere setting the structure for the styleguide navigation. --- css/decanter.css | 383 +- .../atoms}/_buttons.scss | 13 +- scss/components/atoms/_media-block.scss | 12 +- scss/components/atoms/_skipnav.scss | 2 +- scss/components/atoms/index.scss | 1 + scss/components/index.scss | 28 +- scss/components/molecules/_alerts.scss | 2 +- scss/components/molecules/_icon-grid.scss | 2 +- scss/components/molecules/_main-menu.scss | 2 +- scss/components/molecules/_mega-menu.scss | 6 +- scss/components/molecules/_sidenav.scss | 9 +- scss/components/organisms/_accordions.scss | 2 +- scss/components/organisms/_hero-banner.scss | 9 - scss/components/organisms/index.scss | 3 +- scss/components/templates/index.scss | 13 +- scss/core/index.scss | 6 + scss/elements/_embed.scss | 7 +- scss/elements/_links.scss | 25 + scss/elements/_list.scss | 9 +- scss/elements/_table.scss | 13 +- scss/elements/_typography.scss | 27 +- scss/elements/helpers/_sr-only.scss | 12 +- scss/elements/helpers/index.scss | 10 +- scss/elements/index.scss | 6 +- scss/utilities/index.scss | 8 + .../accessibility/_accessibly-hidden.scss | 2 +- .../mixins/accessibility/_skipnav.scss | 2 +- .../mixins/accessibility/_sr-only.scss | 2 +- .../utilities/mixins/accessibility/index.scss | 4 +- .../accordions/_accordion-bordered.scss | 4 +- .../_accordion-button-unopened.scss | 4 +- .../mixins/accordions/_accordion-button.scss | 4 +- .../mixins/accordions/_accordion-content.scss | 4 +- .../accordions/_accordion-list-item.scss | 4 +- .../mixins/accordions/_accordion-list.scss | 4 +- .../accordions/_accordion-nested-list.scss | 4 +- scss/utilities/mixins/accordions/index.scss | 10 +- .../mixins/alerts/_alerts-icons-colors.scss | 4 +- scss/utilities/mixins/alerts/_alerts.scss | 8 +- scss/utilities/mixins/alerts/index.scss | 10 +- .../mixins/banners/_hero-banner.scss | 38 - scss/utilities/mixins/banners/index.scss | 8 - .../utilities/mixins/buttons/_button-big.scss | 4 +- .../mixins/buttons/_button-primary.scss | 4 +- .../mixins/buttons/_button-secondary.scss | 4 +- .../mixins/buttons/_button-unstyled.scss | 4 +- scss/utilities/mixins/buttons/index.scss | 10 +- .../mixins/display/_display-icon.scss | 7 +- .../mixins/display/_embed-container.scss | 5 +- .../mixins/display/_media-block-img.scss | 5 +- scss/utilities/mixins/display/_overflow.scss | 14 + scss/utilities/mixins/display/index.scss | 13 +- .../mixins/grid/_allow-layout-classes.scss | 2 +- scss/utilities/mixins/grid/index.scss | 4 +- .../mixins/icon-grid/_icon-grid.scss | 6 +- scss/utilities/mixins/index.scss | 1 - .../mixins/links/_external-link.scss | 7 +- scss/utilities/mixins/links/_link.scss | 7 +- scss/utilities/mixins/links/_more-link.scss | 7 +- scss/utilities/mixins/links/index.scss | 10 +- .../mixins/lists/_list-unstyled.scss | 7 +- scss/utilities/mixins/lists/index.scss | 10 +- scss/utilities/mixins/menus/_main-menu.scss | 7 +- scss/utilities/mixins/menus/_megamenu.scss | 9 +- .../mixins/menus/_outer-megamenu.scss | 7 +- .../utilities/mixins/menus/_sidenav-list.scss | 7 +- .../mixins/menus/_sidenav-sublist.scss | 7 +- scss/utilities/mixins/menus/index.scss | 10 +- .../mixins/navigation/_nav-border.scss | 7 +- .../mixins/navigation/_nav-close.scss | 7 +- .../mixins/navigation/_nav-overlay.scss | 7 +- scss/utilities/mixins/navigation/index.scss | 10 +- .../mixins/tables/_table-borderless.scss | 7 +- scss/utilities/mixins/tables/_tables.scss | 7 +- scss/utilities/mixins/tables/index.scss | 10 +- .../utilities/mixins/typography/_caption.scss | 7 +- .../utilities/mixins/typography/_credits.scss | 7 +- .../mixins/typography/_font-lead.scss | 8 +- .../mixins/typography/_font-smoothing.scss | 7 +- .../mixins/typography/_font-splash.scss | 10 +- scss/utilities/mixins/typography/_h1.scss | 7 +- scss/utilities/mixins/typography/_h2.scss | 7 +- scss/utilities/mixins/typography/_h3.scss | 7 +- scss/utilities/mixins/typography/_h4.scss | 7 +- scss/utilities/mixins/typography/_h5.scss | 7 +- scss/utilities/mixins/typography/_h6.scss | 7 +- .../mixins/typography/_headings.scss | 7 +- scss/utilities/mixins/typography/_sans.scss | 7 +- scss/utilities/mixins/typography/_serif.scss | 7 +- .../mixins/typography/_short-line-length.scss | 8 +- scss/utilities/mixins/typography/_slab.scss | 7 +- scss/utilities/mixins/typography/_title.scss | 10 - scss/utilities/mixins/typography/index.scss | 13 +- scss/variables/components/_accordions.scss | 10 +- scss/variables/components/_alerts.scss | 37 +- scss/variables/components/_navigation.scss | 22 +- scss/variables/components/index.scss | 10 +- scss/variables/core/_asset-pipeline.scss | 11 +- scss/variables/core/_breakpoints.scss | 34 +- scss/variables/core/_colors.scss | 195 +- scss/variables/core/_file-paths.scss | 16 +- scss/variables/core/_magic-numbers.scss | 99 +- scss/variables/core/_typography.scss | 144 +- scss/variables/core/index.scss | 10 +- scss/variables/elements/_buttons.scss | 11 +- scss/variables/elements/_embed.scss | 17 +- scss/variables/elements/_inputs.scss | 20 +- scss/variables/elements/index.scss | 10 +- scss/variables/index.scss | 8 + scss/variables/pre-vendor/index.scss | 10 +- styleguide/index.html | 35 +- styleguide/item-components-atoms-buttons.html | 212 + .../item-components-atoms-mediablockbody.html | 36 +- .../item-components-atoms-mediablockimg.html | 17 +- styleguide/item-components-atoms-skipnav.html | 14 +- styleguide/item-components-atoms.html | 31 +- .../item-components-molecules-alerts.html | 12 +- .../item-components-molecules-icongrid.html | 12 +- .../item-components-molecules-mainmenu.html | 12 +- .../item-components-molecules-mega-menu.html | 16 +- .../item-components-molecules-sidenav.html | 252 + styleguide/item-components-molecules.html | 31 +- .../item-components-organisims-accordion.html | 12 +- styleguide/item-components-organisims.html | 31 +- ...rs.html => item-components-organisms.html} | 10 +- styleguide/item-components-templates.html | 138 + styleguide/item-components.html | 85 +- styleguide/item-core-colors.html | 336 +- styleguide/item-core-elements-buttons.html | 13 +- styleguide/item-core-elements.html | 13 +- styleguide/item-core-fonts.html | 158 +- styleguide/item-core-grid.html | 128 +- styleguide/item-core.html | 55 +- styleguide/item-elements-buttons.html | 228 + styleguide/item-elements-embedcontainer.html | 196 + .../item-elements-helpers-screenreader.html | 133 + styleguide/item-elements-helpers-sr-only.html | 143 + styleguide/item-elements-helpers.html | 142 + styleguide/item-elements-links.html | 216 + styleguide/item-elements-lists.html | 271 ++ styleguide/item-elements-tables.html | 270 ++ styleguide/item-elements-typography.html | 251 + styleguide/item-elements.html | 186 + styleguide/item-functions.html | 42 +- .../item-mixins-accessibility-hidden.html | 37 +- .../item-mixins-accessibility-skipnav.html | 37 +- .../item-mixins-accessibility-sr-only.html | 37 +- styleguide/item-mixins-accessibility.html | 41 +- ...-mixins-accordions-accordion-bordered.html | 41 +- ...-accordions-accordion-button-unopened.html | 41 +- ...em-mixins-accordions-accordion-button.html | 41 +- ...m-mixins-accordions-accordion-content.html | 41 +- ...mixins-accordions-accordion-list-item.html | 41 +- ...item-mixins-accordions-accordion-list.html | 41 +- ...xins-accordions-accordion-nested-list.html | 41 +- styleguide/item-mixins-accordions.html | 46 +- ...tem-mixins-alerts-alerts-icons-colors.html | 41 +- styleguide/item-mixins-alerts-alerts.html | 43 +- styleguide/item-mixins-alerts.html | 46 +- .../item-mixins-buttons-button-big.html | 41 +- .../item-mixins-buttons-button-primary.html | 41 +- .../item-mixins-buttons-button-secondary.html | 41 +- .../item-mixins-buttons-button-unstyled.html | 41 +- styleguide/item-mixins-buttons.html | 46 +- .../item-mixins-display-display-icon.html | 40 +- .../item-mixins-display-embed-container.html | 40 +- .../item-mixins-display-media-block-img.html | 40 +- styleguide/item-mixins-display-overflow.html | 151 + styleguide/item-mixins-display.html | 46 +- ...item-mixins-grid-allow-layout-classes.html | 37 +- styleguide/item-mixins-grid.html | 39 +- styleguide/item-mixins-icon-grid.html | 41 +- .../item-mixins-links-external-link.html | 142 + styleguide/item-mixins-links-link.html | 142 + styleguide/item-mixins-links-more-link.html | 142 + styleguide/item-mixins-links.html | 142 + .../item-mixins-lists-list-unstyled.html | 142 + styleguide/item-mixins-lists.html | 142 + styleguide/item-mixins-menus-main-menu.html | 142 + styleguide/item-mixins-menus-megamenu.html | 144 + .../item-mixins-menus-outter-megamenu.html | 142 + .../item-mixins-menus-sidenav-sublist.html | 142 + styleguide/item-mixins-menus-subnav-list.html | 142 + styleguide/item-mixins-menus.html | 142 + .../item-mixins-navigation-nav-border.html | 142 + .../item-mixins-navigation-nav-close.html | 142 + .../item-mixins-navigation-nav-overlay.html | 142 + styleguide/item-mixins-navigation.html | 142 + .../item-mixins-tables-table-borderless.html | 142 + styleguide/item-mixins-tables-tables.html | 142 + styleguide/item-mixins-tables.html | 142 + .../item-mixins-typography-caption.html | 142 + .../item-mixins-typography-credits.html | 142 + .../item-mixins-typography-font-lead.html | 143 + ...item-mixins-typography-font-smoothing.html | 142 + .../item-mixins-typography-font-splash.html | 142 + styleguide/item-mixins-typography-h1.html | 142 + styleguide/item-mixins-typography-h2.html | 142 + styleguide/item-mixins-typography-h3.html | 142 + styleguide/item-mixins-typography-h4.html | 142 + styleguide/item-mixins-typography-h5.html | 142 + styleguide/item-mixins-typography-h6.html | 142 + .../item-mixins-typography-headings.html | 142 + styleguide/item-mixins-typography-sans.html | 142 + styleguide/item-mixins-typography-serif.html | 142 + ...m-mixins-typography-short-line-length.html | 143 + styleguide/item-mixins-typography-slab.html | 142 + styleguide/item-mixins-typography-title.html | 132 + styleguide/item-mixins-typography.html | 142 + styleguide/item-mixins.html | 346 +- styleguide/item-templates.html | 39 +- ...ccordions-components-accordion-border.html | 174 + ...item-variables-accordions-components.html} | 13 +- styleguide/item-variables-accordions.html | 12 +- styleguide/item-variables-alerts-alerts.html | 2 +- ...item-variables-alerts-decanter-alerts.html | 18 +- ...riables-alerts-decanter-custom-alerts.html | 2 +- styleguide/item-variables-alerts.html | 14 +- ...iables-breakpoints-grid-columns-large.html | 2 +- ...ables-breakpoints-grid-columns-medium.html | 2 +- ...iables-breakpoints-grid-columns-small.html | 2 +- ...em-variables-breakpoints-large-screen.html | 2 +- .../item-variables-breakpoints-large.html | 2 +- ...m-variables-breakpoints-medium-screen.html | 2 +- .../item-variables-breakpoints-medium.html | 2 +- ...em-variables-breakpoints-small-screen.html | 2 +- .../item-variables-breakpoints-small.html | 2 +- styleguide/item-variables-breakpoints.html | 14 +- styleguide/item-variables-buttons-stroke.html | 4 +- styleguide/item-variables-buttons.html | 14 +- styleguide/item-variables-colors-black.html | 2 +- .../item-variables-colors-color-beige.html | 8 +- .../item-variables-colors-color-blue.html | 8 +- ...em-variables-colors-color-bright-blue.html | 8 +- ...tem-variables-colors-color-bright-red.html | 8 +- .../item-variables-colors-color-brown.html | 8 +- ...m-variables-colors-color-cardinal-red.html | 6 +- ...item-variables-colors-color-chocolate.html | 8 +- .../item-variables-colors-color-clay.html | 8 +- .../item-variables-colors-color-cloud.html | 8 +- ...item-variables-colors-color-cool-grey.html | 6 +- .../item-variables-colors-color-dark-red.html | 8 +- ...item-variables-colors-color-driftwood.html | 8 +- .../item-variables-colors-color-fog.html | 8 +- .../item-variables-colors-color-gold.html | 8 +- .../item-variables-colors-color-lagunita.html | 8 +- ...tem-variables-colors-color-light-sage.html | 8 +- ...ariables-colors-color-light-sandstone.html | 8 +- .../item-variables-colors-color-mint.html | 8 +- ...item-variables-colors-color-palo-alto.html | 8 +- .../item-variables-colors-color-poppy.html | 8 +- .../item-variables-colors-color-purple.html | 8 +- .../item-variables-colors-color-redwood.html | 8 +- .../item-variables-colors-color-sandhill.html | 8 +- ...item-variables-colors-color-sandstone.html | 8 +- .../item-variables-colors-color-sky.html | 8 +- .../item-variables-colors-color-stone.html | 8 +- .../item-variables-colors-color-sun.html | 8 +- .../item-variables-colors-color-teal.html | 8 +- ...item-variables-colors-color-warm-grey.html | 8 +- .../item-variables-colors-color-white.html | 6 +- styleguide/item-variables-colors.html | 16 +- ...omponents-accordions-accordion-border.html | 189 + .../item-variables-components-accordions.html | 138 + ...em-variables-components-alerts-alerts.html | 192 + ...les-components-alerts-decanter-alerts.html | 199 + ...ponents-alerts-decanter-custom-alerts.html | 189 + .../item-variables-components-alerts.html | 138 + ...onents-navigation-sliding-panel-width.html | 189 + ...mponents-navigation-z-index-main-menu.html | 189 + ...les-components-navigation-z-index-nav.html | 189 + ...components-navigation-z-index-overlay.html | 189 + .../item-variables-components-navigation.html | 138 + styleguide/item-variables-components.html | 142 + ...s-core-breakpoints-grid-columns-large.html | 189 + ...-core-breakpoints-grid-columns-medium.html | 189 + ...s-core-breakpoints-grid-columns-small.html | 189 + ...riables-core-breakpoints-large-screen.html | 185 + ...item-variables-core-breakpoints-large.html | 189 + ...iables-core-breakpoints-medium-screen.html | 185 + ...tem-variables-core-breakpoints-medium.html | 189 + ...riables-core-breakpoints-small-screen.html | 185 + ...item-variables-core-breakpoints-small.html | 189 + .../item-variables-core-breakpoints.html | 138 + .../item-variables-core-colors-black.html | 185 + ...tem-variables-core-colors-color-beige.html | 185 + ...item-variables-core-colors-color-blue.html | 185 + ...riables-core-colors-color-bright-blue.html | 185 + ...ariables-core-colors-color-bright-red.html | 185 + ...tem-variables-core-colors-color-brown.html | 185 + ...iables-core-colors-color-cardinal-red.html | 185 + ...variables-core-colors-color-chocolate.html | 185 + ...item-variables-core-colors-color-clay.html | 185 + ...tem-variables-core-colors-color-cloud.html | 185 + ...variables-core-colors-color-cool-grey.html | 185 + ...-variables-core-colors-color-dark-red.html | 185 + ...variables-core-colors-color-driftwood.html | 185 + .../item-variables-core-colors-color-fog.html | 185 + ...item-variables-core-colors-color-gold.html | 185 + ...-variables-core-colors-color-lagunita.html | 185 + ...ariables-core-colors-color-light-sage.html | 185 + ...les-core-colors-color-light-sandstone.html | 185 + ...item-variables-core-colors-color-mint.html | 185 + ...variables-core-colors-color-palo-alto.html | 185 + ...tem-variables-core-colors-color-poppy.html | 185 + ...em-variables-core-colors-color-purple.html | 185 + ...m-variables-core-colors-color-redwood.html | 185 + ...-variables-core-colors-color-sandhill.html | 185 + ...variables-core-colors-color-sandstone.html | 185 + .../item-variables-core-colors-color-sky.html | 185 + ...tem-variables-core-colors-color-stone.html | 185 + .../item-variables-core-colors-color-sun.html | 185 + ...item-variables-core-colors-color-teal.html | 185 + ...variables-core-colors-color-warm-grey.html | 185 + ...tem-variables-core-colors-color-white.html | 185 + styleguide/item-variables-core-colors.html | 145 + ...ariables-core-magic-article-max-width.html | 179 + ...em-variables-core-magic-border-radius.html | 189 + .../item-variables-core-magic-box-shadow.html | 189 + ...tem-variables-core-magic-focus-shadow.html | 189 + .../item-variables-core-magic-hit-area.html | 189 + ...-variables-core-magic-input-max-width.html | 189 + ...m-variables-core-magic-lead-max-width.html | 189 + .../item-variables-core-magic-nav-width.html | 189 + ...iables-core-magic-site-margins-mobile.html | 189 + ...tem-variables-core-magic-site-margins.html | 189 + ...m-variables-core-magic-site-max-width.html | 189 + ...m-variables-core-magic-text-max-width.html | 189 + styleguide/item-variables-core-magic.html | 142 + .../item-variables-core-paths-font.html | 189 + .../item-variables-core-paths-image.html | 189 + styleguide/item-variables-core-paths.html | 138 + ...m-variables-core-rails-asset-pipeline.html | 189 + styleguide/item-variables-core-rails.html | 138 + ...iables-core-typography-base-font-size.html | 189 + ...bles-core-typography-base-line-height.html | 189 + ...tem-variables-core-typography-em-base.html | 191 + ...m-variables-core-typography-font-bold.html | 189 + ...-variables-core-typography-font-light.html | 189 + ...variables-core-typography-font-normal.html | 189 + ...m-variables-core-typography-font-sans.html | 189 + ...-variables-core-typography-font-serif.html | 189 + ...m-variables-core-typography-font-slab.html | 189 + ...variables-core-typography-font-x-bold.html | 189 + ...ariables-core-typography-font-x-light.html | 189 + ...ariables-core-typography-h1-font-size.html | 189 + ...ariables-core-typography-h2-font-size.html | 189 + ...ariables-core-typography-h3-font-size.html | 189 + ...ariables-core-typography-h4-font-size.html | 189 + ...ariables-core-typography-h5-font-size.html | 189 + ...ariables-core-typography-h6-font-size.html | 189 + ...s-core-typography-heading-line-height.html | 189 + ...iables-core-typography-lead-font-size.html | 189 + ...bles-core-typography-lead-line-height.html | 189 + ...ables-core-typography-small-font-size.html | 189 + ...bles-core-typography-splash-font-size.html | 189 + ...ables-core-typography-title-font-size.html | 179 + .../item-variables-core-typography.html | 138 + styleguide/item-variables-core.html | 142 + ...tem-variables-elements-buttons-stroke.html | 189 + .../item-variables-elements-buttons.html | 138 + ...ariables-elements-embed-aspect-height.html | 189 + ...variables-elements-embed-aspect-width.html | 189 + styleguide/item-variables-elements-embed.html | 138 + ...ariables-elements-inputs-border-width.html | 189 + ...ariables-elements-inputs-height-exact.html | 190 + ...ariables-elements-inputs-input-height.html | 190 + ...variables-elements-inputs-line-height.html | 189 + ...bles-elements-inputs-padding-vertical.html | 190 + .../item-variables-elements-inputs.html | 138 + styleguide/item-variables-elements.html | 142 + .../item-variables-embed-aspect-height.html | 6 +- .../item-variables-embed-aspect-width.html | 6 +- styleguide/item-variables-embed.html | 14 +- .../item-variables-inputs-border-width.html | 2 +- .../item-variables-inputs-height-exact.html | 2 +- .../item-variables-inputs-input-height.html | 2 +- .../item-variables-inputs-line-height.html | 2 +- ...tem-variables-inputs-padding-vertical.html | 2 +- styleguide/item-variables-inputs.html | 14 +- ...tem-variables-magic-article-max-width.html | 8 +- .../item-variables-magic-border-radius.html | 8 +- .../item-variables-magic-box-shadow.html | 8 +- .../item-variables-magic-focus-shadow.html | 8 +- styleguide/item-variables-magic-hit-area.html | 4 +- .../item-variables-magic-input-max-width.html | 8 +- .../item-variables-magic-lead-max-width.html | 8 +- .../item-variables-magic-nav-width.html | 8 +- ...m-variables-magic-site-margins-mobile.html | 4 +- .../item-variables-magic-site-margins.html | 8 +- .../item-variables-magic-site-max-width.html | 8 +- .../item-variables-magic-text-max-width.html | 8 +- styleguide/item-variables-magic.html | 14 +- ...iables-navigation-sliding-panel-width.html | 2 +- ...ariables-navigation-z-index-main-menu.html | 2 +- ...item-variables-navigation-z-index-nav.html | 2 +- ...-variables-navigation-z-index-overlay.html | 2 +- styleguide/item-variables-navigation.html | 14 +- styleguide/item-variables-paths.html | 12 +- .../item-variables-rails-asset-pipeline.html | 2 +- styleguide/item-variables-rails.html | 12 +- ...m-variables-typography-base-font-size.html | 6 +- ...variables-typography-base-line-height.html | 6 +- .../item-variables-typography-em-base.html | 6 +- .../item-variables-typography-font-bold.html | 6 +- .../item-variables-typography-font-light.html | 6 +- ...item-variables-typography-font-normal.html | 6 +- .../item-variables-typography-font-sans.html | 6 +- .../item-variables-typography-font-serif.html | 6 +- .../item-variables-typography-font-slab.html | 6 +- ...item-variables-typography-font-x-bold.html | 6 +- ...tem-variables-typography-font-x-light.html | 6 +- ...tem-variables-typography-h1-font-size.html | 6 +- ...tem-variables-typography-h2-font-size.html | 6 +- ...tem-variables-typography-h3-font-size.html | 6 +- ...tem-variables-typography-h4-font-size.html | 6 +- ...tem-variables-typography-h5-font-size.html | 6 +- ...tem-variables-typography-h6-font-size.html | 6 +- ...iables-typography-heading-line-height.html | 2 +- ...m-variables-typography-lead-font-size.html | 6 +- ...variables-typography-lead-line-height.html | 6 +- ...-variables-typography-small-font-size.html | 6 +- ...-variables-typography-title-font-size.html | 6 +- styleguide/item-variables-typography.html | 14 +- styleguide/item-variables.html | 663 +-- styleguide/section-components.html | 1263 +---- styleguide/section-core.html | 629 ++- styleguide/section-elements.html | 970 ++++ styleguide/section-functions.html | 42 +- styleguide/section-mixins.html | 1588 +++++- styleguide/section-templates.html | 39 +- styleguide/section-variables.html | 4258 +++++++---------- .../atoms/buttons/buttons.html.json | 4 + .../atoms/buttons/buttons.html.twig | 1 + .../atoms/skipnav/skipnav.html.json} | 1 + .../molecules/main-menu/main-menu.html.json | 3 + .../media-block-row/media-block-row.html.json | 3 + .../mega-menu/mega-menu.html | 0 .../molecules/mega-menu/mega-menu.html.json | 3 + .../molecules/sidenav/sidenav.html.json | 8 + .../molecules/sidenav/sidenav.html.twig | 39 + .../organisms/accordions/accordions.html.json | 3 + .../components/organisms/hero-banner.html | 60 - .../components/organisms/sidenav/sidenav.html | 124 - templates/core/colors.html | 389 -- templates/core/colors/colors.html.json | 3 + templates/core/colors/colors.html.twig | 124 + templates/core/fonts/fonts.html.json | 4 + templates/core/fonts/fonts.html.twig | 36 + templates/core/{ => grid}/grid.html | 0 templates/core/grid/grid.html.json | 3 + templates/core/grid/grid.html.twig | 10 + templates/core/typography.html | 97 - templates/elements/buttons/buttons.html.twig | 3 - templates/elements/embed.html | 37 - templates/elements/embed/embed.html.json | 6 + templates/elements/embed/embed.html.twig | 3 + templates/elements/font-styles.html | 50 - .../font-styles/font-styles.html.json | 3 + .../font-styles/font-styles.html.twig | 1 + templates/elements/{ => inputs}/inputs.html | 0 templates/elements/inputs/inputs.html.json | 3 + templates/elements/links.html | 37 - templates/elements/links/links.html.json | 3 + templates/elements/links/links.html.twig | 1 + templates/elements/lists.html | 79 - templates/elements/lists/lists.html.json | 3 + templates/elements/lists/lists.html.twig | 41 + templates/elements/tables.html | 82 - templates/elements/tables/tables.html.json | 4 + templates/elements/tables/tables.html.twig | 22 + 471 files changed, 36445 insertions(+), 7292 deletions(-) rename scss/{elements => components/atoms}/_buttons.scss (67%) delete mode 100644 scss/components/organisms/_hero-banner.scss create mode 100644 scss/elements/_links.scss delete mode 100644 scss/utilities/mixins/banners/_hero-banner.scss delete mode 100644 scss/utilities/mixins/banners/index.scss create mode 100644 scss/utilities/mixins/display/_overflow.scss delete mode 100644 scss/utilities/mixins/typography/_title.scss create mode 100644 styleguide/item-components-atoms-buttons.html create mode 100644 styleguide/item-components-molecules-sidenav.html rename styleguide/{item-mixins-banners.html => item-components-organisms.html} (93%) create mode 100644 styleguide/item-components-templates.html create mode 100644 styleguide/item-elements-buttons.html create mode 100644 styleguide/item-elements-embedcontainer.html create mode 100644 styleguide/item-elements-helpers-screenreader.html create mode 100644 styleguide/item-elements-helpers-sr-only.html create mode 100644 styleguide/item-elements-helpers.html create mode 100644 styleguide/item-elements-links.html create mode 100644 styleguide/item-elements-lists.html create mode 100644 styleguide/item-elements-tables.html create mode 100644 styleguide/item-elements-typography.html create mode 100644 styleguide/item-elements.html create mode 100644 styleguide/item-mixins-display-overflow.html create mode 100644 styleguide/item-mixins-links-external-link.html create mode 100644 styleguide/item-mixins-links-link.html create mode 100644 styleguide/item-mixins-links-more-link.html create mode 100644 styleguide/item-mixins-links.html create mode 100644 styleguide/item-mixins-lists-list-unstyled.html create mode 100644 styleguide/item-mixins-lists.html create mode 100644 styleguide/item-mixins-menus-main-menu.html create mode 100644 styleguide/item-mixins-menus-megamenu.html create mode 100644 styleguide/item-mixins-menus-outter-megamenu.html create mode 100644 styleguide/item-mixins-menus-sidenav-sublist.html create mode 100644 styleguide/item-mixins-menus-subnav-list.html create mode 100644 styleguide/item-mixins-menus.html create mode 100644 styleguide/item-mixins-navigation-nav-border.html create mode 100644 styleguide/item-mixins-navigation-nav-close.html create mode 100644 styleguide/item-mixins-navigation-nav-overlay.html create mode 100644 styleguide/item-mixins-navigation.html create mode 100644 styleguide/item-mixins-tables-table-borderless.html create mode 100644 styleguide/item-mixins-tables-tables.html create mode 100644 styleguide/item-mixins-tables.html create mode 100644 styleguide/item-mixins-typography-caption.html create mode 100644 styleguide/item-mixins-typography-credits.html create mode 100644 styleguide/item-mixins-typography-font-lead.html create mode 100644 styleguide/item-mixins-typography-font-smoothing.html create mode 100644 styleguide/item-mixins-typography-font-splash.html create mode 100644 styleguide/item-mixins-typography-h1.html create mode 100644 styleguide/item-mixins-typography-h2.html create mode 100644 styleguide/item-mixins-typography-h3.html create mode 100644 styleguide/item-mixins-typography-h4.html create mode 100644 styleguide/item-mixins-typography-h5.html create mode 100644 styleguide/item-mixins-typography-h6.html create mode 100644 styleguide/item-mixins-typography-headings.html create mode 100644 styleguide/item-mixins-typography-sans.html create mode 100644 styleguide/item-mixins-typography-serif.html create mode 100644 styleguide/item-mixins-typography-short-line-length.html create mode 100644 styleguide/item-mixins-typography-slab.html create mode 100644 styleguide/item-mixins-typography-title.html create mode 100644 styleguide/item-mixins-typography.html create mode 100644 styleguide/item-variables-accordions-components-accordion-border.html rename styleguide/{item-mixins-banners-hero-banner.html => item-variables-accordions-components.html} (89%) create mode 100644 styleguide/item-variables-components-accordions-accordion-border.html create mode 100644 styleguide/item-variables-components-accordions.html create mode 100644 styleguide/item-variables-components-alerts-alerts.html create mode 100644 styleguide/item-variables-components-alerts-decanter-alerts.html create mode 100644 styleguide/item-variables-components-alerts-decanter-custom-alerts.html create mode 100644 styleguide/item-variables-components-alerts.html create mode 100644 styleguide/item-variables-components-navigation-sliding-panel-width.html create mode 100644 styleguide/item-variables-components-navigation-z-index-main-menu.html create mode 100644 styleguide/item-variables-components-navigation-z-index-nav.html create mode 100644 styleguide/item-variables-components-navigation-z-index-overlay.html create mode 100644 styleguide/item-variables-components-navigation.html create mode 100644 styleguide/item-variables-components.html create mode 100644 styleguide/item-variables-core-breakpoints-grid-columns-large.html create mode 100644 styleguide/item-variables-core-breakpoints-grid-columns-medium.html create mode 100644 styleguide/item-variables-core-breakpoints-grid-columns-small.html create mode 100644 styleguide/item-variables-core-breakpoints-large-screen.html create mode 100644 styleguide/item-variables-core-breakpoints-large.html create mode 100644 styleguide/item-variables-core-breakpoints-medium-screen.html create mode 100644 styleguide/item-variables-core-breakpoints-medium.html create mode 100644 styleguide/item-variables-core-breakpoints-small-screen.html create mode 100644 styleguide/item-variables-core-breakpoints-small.html create mode 100644 styleguide/item-variables-core-breakpoints.html create mode 100644 styleguide/item-variables-core-colors-black.html create mode 100644 styleguide/item-variables-core-colors-color-beige.html create mode 100644 styleguide/item-variables-core-colors-color-blue.html create mode 100644 styleguide/item-variables-core-colors-color-bright-blue.html create mode 100644 styleguide/item-variables-core-colors-color-bright-red.html create mode 100644 styleguide/item-variables-core-colors-color-brown.html create mode 100644 styleguide/item-variables-core-colors-color-cardinal-red.html create mode 100644 styleguide/item-variables-core-colors-color-chocolate.html create mode 100644 styleguide/item-variables-core-colors-color-clay.html create mode 100644 styleguide/item-variables-core-colors-color-cloud.html create mode 100644 styleguide/item-variables-core-colors-color-cool-grey.html create mode 100644 styleguide/item-variables-core-colors-color-dark-red.html create mode 100644 styleguide/item-variables-core-colors-color-driftwood.html create mode 100644 styleguide/item-variables-core-colors-color-fog.html create mode 100644 styleguide/item-variables-core-colors-color-gold.html create mode 100644 styleguide/item-variables-core-colors-color-lagunita.html create mode 100644 styleguide/item-variables-core-colors-color-light-sage.html create mode 100644 styleguide/item-variables-core-colors-color-light-sandstone.html create mode 100644 styleguide/item-variables-core-colors-color-mint.html create mode 100644 styleguide/item-variables-core-colors-color-palo-alto.html create mode 100644 styleguide/item-variables-core-colors-color-poppy.html create mode 100644 styleguide/item-variables-core-colors-color-purple.html create mode 100644 styleguide/item-variables-core-colors-color-redwood.html create mode 100644 styleguide/item-variables-core-colors-color-sandhill.html create mode 100644 styleguide/item-variables-core-colors-color-sandstone.html create mode 100644 styleguide/item-variables-core-colors-color-sky.html create mode 100644 styleguide/item-variables-core-colors-color-stone.html create mode 100644 styleguide/item-variables-core-colors-color-sun.html create mode 100644 styleguide/item-variables-core-colors-color-teal.html create mode 100644 styleguide/item-variables-core-colors-color-warm-grey.html create mode 100644 styleguide/item-variables-core-colors-color-white.html create mode 100644 styleguide/item-variables-core-colors.html create mode 100644 styleguide/item-variables-core-magic-article-max-width.html create mode 100644 styleguide/item-variables-core-magic-border-radius.html create mode 100644 styleguide/item-variables-core-magic-box-shadow.html create mode 100644 styleguide/item-variables-core-magic-focus-shadow.html create mode 100644 styleguide/item-variables-core-magic-hit-area.html create mode 100644 styleguide/item-variables-core-magic-input-max-width.html create mode 100644 styleguide/item-variables-core-magic-lead-max-width.html create mode 100644 styleguide/item-variables-core-magic-nav-width.html create mode 100644 styleguide/item-variables-core-magic-site-margins-mobile.html create mode 100644 styleguide/item-variables-core-magic-site-margins.html create mode 100644 styleguide/item-variables-core-magic-site-max-width.html create mode 100644 styleguide/item-variables-core-magic-text-max-width.html create mode 100644 styleguide/item-variables-core-magic.html create mode 100644 styleguide/item-variables-core-paths-font.html create mode 100644 styleguide/item-variables-core-paths-image.html create mode 100644 styleguide/item-variables-core-paths.html create mode 100644 styleguide/item-variables-core-rails-asset-pipeline.html create mode 100644 styleguide/item-variables-core-rails.html create mode 100644 styleguide/item-variables-core-typography-base-font-size.html create mode 100644 styleguide/item-variables-core-typography-base-line-height.html create mode 100644 styleguide/item-variables-core-typography-em-base.html create mode 100644 styleguide/item-variables-core-typography-font-bold.html create mode 100644 styleguide/item-variables-core-typography-font-light.html create mode 100644 styleguide/item-variables-core-typography-font-normal.html create mode 100644 styleguide/item-variables-core-typography-font-sans.html create mode 100644 styleguide/item-variables-core-typography-font-serif.html create mode 100644 styleguide/item-variables-core-typography-font-slab.html create mode 100644 styleguide/item-variables-core-typography-font-x-bold.html create mode 100644 styleguide/item-variables-core-typography-font-x-light.html create mode 100644 styleguide/item-variables-core-typography-h1-font-size.html create mode 100644 styleguide/item-variables-core-typography-h2-font-size.html create mode 100644 styleguide/item-variables-core-typography-h3-font-size.html create mode 100644 styleguide/item-variables-core-typography-h4-font-size.html create mode 100644 styleguide/item-variables-core-typography-h5-font-size.html create mode 100644 styleguide/item-variables-core-typography-h6-font-size.html create mode 100644 styleguide/item-variables-core-typography-heading-line-height.html create mode 100644 styleguide/item-variables-core-typography-lead-font-size.html create mode 100644 styleguide/item-variables-core-typography-lead-line-height.html create mode 100644 styleguide/item-variables-core-typography-small-font-size.html create mode 100644 styleguide/item-variables-core-typography-splash-font-size.html create mode 100644 styleguide/item-variables-core-typography-title-font-size.html create mode 100644 styleguide/item-variables-core-typography.html create mode 100644 styleguide/item-variables-core.html create mode 100644 styleguide/item-variables-elements-buttons-stroke.html create mode 100644 styleguide/item-variables-elements-buttons.html create mode 100644 styleguide/item-variables-elements-embed-aspect-height.html create mode 100644 styleguide/item-variables-elements-embed-aspect-width.html create mode 100644 styleguide/item-variables-elements-embed.html create mode 100644 styleguide/item-variables-elements-inputs-border-width.html create mode 100644 styleguide/item-variables-elements-inputs-height-exact.html create mode 100644 styleguide/item-variables-elements-inputs-input-height.html create mode 100644 styleguide/item-variables-elements-inputs-line-height.html create mode 100644 styleguide/item-variables-elements-inputs-padding-vertical.html create mode 100644 styleguide/item-variables-elements-inputs.html create mode 100644 styleguide/item-variables-elements.html create mode 100644 styleguide/section-elements.html create mode 100644 templates/components/atoms/buttons/buttons.html.json create mode 100644 templates/components/atoms/buttons/buttons.html.twig rename templates/{elements/buttons/buttons.html.json => components/atoms/skipnav/skipnav.html.json} (80%) create mode 100644 templates/components/molecules/main-menu/main-menu.html.json create mode 100644 templates/components/molecules/media-block-row/media-block-row.html.json rename templates/components/{organisms => molecules}/mega-menu/mega-menu.html (100%) create mode 100644 templates/components/molecules/mega-menu/mega-menu.html.json create mode 100644 templates/components/molecules/sidenav/sidenav.html.json create mode 100644 templates/components/molecules/sidenav/sidenav.html.twig create mode 100644 templates/components/organisms/accordions/accordions.html.json delete mode 100644 templates/components/organisms/hero-banner.html delete mode 100644 templates/components/organisms/sidenav/sidenav.html delete mode 100644 templates/core/colors.html create mode 100644 templates/core/colors/colors.html.json create mode 100644 templates/core/colors/colors.html.twig create mode 100644 templates/core/fonts/fonts.html.json create mode 100644 templates/core/fonts/fonts.html.twig rename templates/core/{ => grid}/grid.html (100%) create mode 100644 templates/core/grid/grid.html.json create mode 100644 templates/core/grid/grid.html.twig delete mode 100644 templates/core/typography.html delete mode 100644 templates/elements/buttons/buttons.html.twig delete mode 100644 templates/elements/embed.html create mode 100644 templates/elements/embed/embed.html.json create mode 100644 templates/elements/embed/embed.html.twig delete mode 100644 templates/elements/font-styles.html create mode 100644 templates/elements/font-styles/font-styles.html.json create mode 100644 templates/elements/font-styles/font-styles.html.twig rename templates/elements/{ => inputs}/inputs.html (100%) create mode 100644 templates/elements/inputs/inputs.html.json delete mode 100644 templates/elements/links.html create mode 100644 templates/elements/links/links.html.json create mode 100644 templates/elements/links/links.html.twig delete mode 100644 templates/elements/lists.html create mode 100644 templates/elements/lists/lists.html.json create mode 100644 templates/elements/lists/lists.html.twig delete mode 100644 templates/elements/tables.html create mode 100644 templates/elements/tables/tables.html.json create mode 100644 templates/elements/tables/tables.html.twig diff --git a/css/decanter.css b/css/decanter.css index 27a5a235e..119c4961a 100644 --- a/css/decanter.css +++ b/css/decanter.css @@ -3062,154 +3062,6 @@ body { position: absolute; left: -999em; } -.decanter-button, -a.decanter-button, -button, -[type=button], -[type=submit], -[type=reset], -[type=image] { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - margin-top: 0.5em; - margin-right: 0.5em; - margin-bottom: 0.5em; - padding: 1rem 2rem; - appearance: none; - background-color: #b1040e; - border: 0; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; - font-size: 2rem; - font-weight: 600; - line-height: 1; - outline: none; - text-align: center; - text-decoration: none; - width: 100%; } - @media screen and (min-width: 481px) { - .decanter-button, - a.decanter-button, - button, - [type=button], - [type=submit], - [type=reset], - [type=image] { - width: auto; } } - .decanter-button:hover, - a.decanter-button:hover, - button:hover, - [type=button]:hover, - [type=submit]:hover, - [type=reset]:hover, - [type=image]:hover { - background-color: #2e2d29; - border-bottom: 0; - color: #ffffff; - text-decoration: none; } - .decanter-button:focus, - a.decanter-button:focus, - button:focus, - [type=button]:focus, - [type=submit]:focus, - [type=reset]:focus, - [type=image]:focus { - background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } - -.decanter-button--secondary, -a.decanter-button--secondary { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - margin-top: 0.5em; - margin-right: 0.5em; - margin-bottom: 0.5em; - padding: 1rem 2rem; - appearance: none; - background-color: #ffffff; - border: 0; - box-shadow: inset 0 0 0 2px #b1040e; - color: #b1040e; - cursor: pointer; - display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; - font-size: 2rem; - font-weight: 600; - line-height: 1; - outline: none; - text-align: center; - text-decoration: none; - width: 100%; } - @media screen and (min-width: 481px) { - .decanter-button--secondary, - a.decanter-button--secondary { - width: auto; } } - .decanter-button--secondary:hover, - a.decanter-button--secondary:hover { - background-color: #ffffff; - border-bottom: 0; - box-shadow: inset 0 0 0 2px #2e2d29; - color: #2e2d29; - text-decoration: none; } - .decanter-button--secondary:focus, - a.decanter-button--secondary:focus { - background-color: #ffffff; - box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; - color: #2e2d29; } - -.decanter-button--big, -a.decanter-button--big { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - margin-top: 0.5em; - margin-right: 0.5em; - margin-bottom: 0.5em; - padding: 1.5rem 3rem; - appearance: none; - background-color: #b1040e; - border: 0; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; - font-size: 2.3rem; - font-weight: 600; - line-height: 1; - outline: none; - text-align: center; - text-decoration: none; - width: 100%; } - @media screen and (min-width: 481px) { - .decanter-button--big, - a.decanter-button--big { - width: auto; } } - .decanter-button--big:hover, - a.decanter-button--big:hover { - background-color: #2e2d29; - border-bottom: 0; - color: #ffffff; - text-decoration: none; } - .decanter-button--big:focus, - a.decanter-button--big:focus { - background-color: #2e2d29; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } - -.decanter-button--unstyled, -a.decanter-button--unstyled { - background-color: transparent; - border: 0; - font-weight: 400; - outline: 0; - text-align: left; - -webkit-font-smoothing: auto; - margin: 0; - padding: 0; } - .decanter-button--unstyled:hover, - a.decanter-button--unstyled:hover { - background-color: transparent; } - .decanter-embed-container { padding-bottom: 56.25%; position: relative; @@ -3420,6 +3272,38 @@ fieldset { [type=range]:focus::-ms-thumb { border: 2px solid #b6b1a9; } +a { + color: #b1040e; + text-decoration: underline; } + a:hover, a:active { + color: #2e2d29; } + a:focus { + outline: 0; } + +.decanter-external-link::after { + background: url("../img/external-link.png") no-repeat 0 0; + background: url("../img/external-link.svg") no-repeat 0 0; + background-size: 100%; + content: ''; + display: inline-block; + height: 0.65em; + width: 0.65em; + margin-bottom: -1px; + margin-left: 4px; } + +.decanter-external-link:hover::after { + background-image: url("../img/external-link-hover.png"); + background-image: url("../img/external-link-hover.svg"); } + +.decanter-more-link::after { + color: #b1040e; + content: '\00BB'; + display: inline-block; + margin-left: 4px; } + +.decanter-more-link:hover::after { + color: #2e2d29; } + ul, ol { margin-top: 1em; @@ -3500,38 +3384,6 @@ p { margin-top: 1em; margin-bottom: 1em; } -a { - color: #b1040e; - text-decoration: underline; } - a:hover, a:active { - color: #2e2d29; } - a:focus { - outline: 0; } - -.decanter-external-link::after { - background: url("../img/external-link.png") no-repeat 0 0; - background: url("../img/external-link.svg") no-repeat 0 0; - background-size: 100%; - content: ''; - display: inline-block; - height: 0.65em; - width: 0.65em; - margin-bottom: -1px; - margin-left: 4px; } - -.decanter-external-link:hover::after { - background-image: url("../img/external-link-hover.png"); - background-image: url("../img/external-link-hover.svg"); } - -.decanter-more-link::after { - color: #b1040e; - content: '\00BB'; - display: inline-block; - margin-left: 4px; } - -.decanter-more-link:hover::after { - color: #2e2d29; } - h1, h2, h3, @@ -3714,6 +3566,154 @@ dfn { .decanter-width-one-twelfth > :last-child { margin-bottom: 0; } } +.decanter-button, +a.decanter-button, +button, +[type=button], +[type=submit], +[type=reset], +[type=image] { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + margin-top: 0.5em; + margin-right: 0.5em; + margin-bottom: 0.5em; + padding: 1rem 2rem; + appearance: none; + background-color: #b1040e; + border: 0; + color: #ffffff; + cursor: pointer; + display: inline-block; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + font-size: 2rem; + font-weight: 600; + line-height: 1; + outline: none; + text-align: center; + text-decoration: none; + width: 100%; } + @media screen and (min-width: 481px) { + .decanter-button, + a.decanter-button, + button, + [type=button], + [type=submit], + [type=reset], + [type=image] { + width: auto; } } + .decanter-button:hover, + a.decanter-button:hover, + button:hover, + [type=button]:hover, + [type=submit]:hover, + [type=reset]:hover, + [type=image]:hover { + background-color: #2e2d29; + border-bottom: 0; + color: #ffffff; + text-decoration: none; } + .decanter-button:focus, + a.decanter-button:focus, + button:focus, + [type=button]:focus, + [type=submit]:focus, + [type=reset]:focus, + [type=image]:focus { + background-color: #2e2d29; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + +.decanter-button--secondary, +a.decanter-button--secondary { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + margin-top: 0.5em; + margin-right: 0.5em; + margin-bottom: 0.5em; + padding: 1rem 2rem; + appearance: none; + background-color: #ffffff; + border: 0; + box-shadow: inset 0 0 0 2px #b1040e; + color: #b1040e; + cursor: pointer; + display: inline-block; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + font-size: 2rem; + font-weight: 600; + line-height: 1; + outline: none; + text-align: center; + text-decoration: none; + width: 100%; } + @media screen and (min-width: 481px) { + .decanter-button--secondary, + a.decanter-button--secondary { + width: auto; } } + .decanter-button--secondary:hover, + a.decanter-button--secondary:hover { + background-color: #ffffff; + border-bottom: 0; + box-shadow: inset 0 0 0 2px #2e2d29; + color: #2e2d29; + text-decoration: none; } + .decanter-button--secondary:focus, + a.decanter-button--secondary:focus { + background-color: #ffffff; + box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; + color: #2e2d29; } + +.decanter-button--big, +a.decanter-button--big { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + margin-top: 0.5em; + margin-right: 0.5em; + margin-bottom: 0.5em; + padding: 1.5rem 3rem; + appearance: none; + background-color: #b1040e; + border: 0; + color: #ffffff; + cursor: pointer; + display: inline-block; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; + font-size: 2.3rem; + font-weight: 600; + line-height: 1; + outline: none; + text-align: center; + text-decoration: none; + width: 100%; } + @media screen and (min-width: 481px) { + .decanter-button--big, + a.decanter-button--big { + width: auto; } } + .decanter-button--big:hover, + a.decanter-button--big:hover { + background-color: #2e2d29; + border-bottom: 0; + color: #ffffff; + text-decoration: none; } + .decanter-button--big:focus, + a.decanter-button--big:focus { + background-color: #2e2d29; + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } + +.decanter-button--unstyled, +a.decanter-button--unstyled { + background-color: transparent; + border: 0; + font-weight: 400; + outline: 0; + text-align: left; + -webkit-font-smoothing: auto; + margin: 0; + padding: 0; } + .decanter-button--unstyled:hover, + a.decanter-button--unstyled:hover { + background-color: transparent; } + .decanter-media-block__img { float: left; margin-right: 1rem; } @@ -3739,7 +3739,7 @@ dfn { transition: all 0.2s ease-in-out; } .decanter-alert { - background-color: #4d4f53; + background-color: #f4f4f4; background-position: 1rem 2rem; background-repeat: no-repeat; background-size: 4rem; @@ -4339,25 +4339,4 @@ dfn { border-left: 1px solid #b6b1a9; border-right: 1px solid #b6b1a9; } -.decanter-hero-banner { - padding-top: 3rem; - padding-bottom: 3rem; - background-image: url("../img/hero-banner.png"); - background-position: center; - background-size: cover; } - .decanter-hero-banner .decanter-button { - color: #ffffff; } - .decanter-hero-banner .decanter-hero-banner__callout { - background-color: #ffffff; - padding: 3rem; } - @media screen and (min-width: 481px) { - .decanter-hero-banner .decanter-hero-banner__callout { - max-width: 30rem; } } - .decanter-hero-banner .decanter-hero-banner__callout > *:first-child { - margin-top: 0; - margin-bottom: 3rem; } - .decanter-hero-banner .decanter-hero-banner__callout .decanter-button { - margin-top: 3rem; - width: 100%; } - /*# sourceMappingURL=decanter.css.map */ \ No newline at end of file diff --git a/scss/elements/_buttons.scss b/scss/components/atoms/_buttons.scss similarity index 67% rename from scss/elements/_buttons.scss rename to scss/components/atoms/_buttons.scss index e1e0d13e3..20d807cbe 100644 --- a/scss/elements/_buttons.scss +++ b/scss/components/atoms/_buttons.scss @@ -5,12 +5,14 @@ // // Simple button element to aid in creating interactive design. // -// Markup: ../../templates/elements/buttons/buttons.html.twig +// .decanter-button--secondary - Secondary button +// .decanter-button--big - Big button +// .decanter-button--unstyled - Unstyled button // -// Style guide: Core.Elements.Buttons +// Markup: ../../templates/components/atoms/buttons/buttons.html.twig +// +// Style guide: Atoms.Buttons // - -// Primary button (default). .decanter-button, a.decanter-button, button, @@ -21,19 +23,16 @@ button, @include button-primary; } -// Secondary button. .decanter-button--secondary, a.decanter-button--secondary { @include button-secondary; } -// Big button. .decanter-button--big, a.decanter-button--big { @include button-big; } -// For removing styling from buttons. .decanter-button--unstyled, a.decanter-button--unstyled { @include button-unstyled; diff --git a/scss/components/atoms/_media-block.scss b/scss/components/atoms/_media-block.scss index c031f0336..839a99bcd 100644 --- a/scss/components/atoms/_media-block.scss +++ b/scss/components/atoms/_media-block.scss @@ -3,12 +3,13 @@ // // Media Block Image // -// TODO: Describe what this does. +// Floats an image to the left and provides a specified margin right. To be used +// when floating images alongside other content. // // Markup: // Alt text // -// Styleguide: Components.Atoms.MediaBlockImg +// Style guide: Atoms.MediaBlockImg // .decanter-media-block__img { @include media-block-img; @@ -17,7 +18,8 @@ // // Media Block Body // -// TODO: Describe what this does. Does this really need to exist? +// Allows for text that is next to a floated media block image to flow within +// the grid without dropping to a new line prematurely. // // Markup: //
@@ -25,8 +27,8 @@ //

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

//
// -// Styleguide: Components.Atoms.MediaBlockBody +// Style guide: Atoms.MediaBlockBody // .decanter-media-block__body { - overflow: hidden; + @include overflow; } diff --git a/scss/components/atoms/_skipnav.scss b/scss/components/atoms/_skipnav.scss index 6fc67c2a6..1f6ce6356 100644 --- a/scss/components/atoms/_skipnav.scss +++ b/scss/components/atoms/_skipnav.scss @@ -9,7 +9,7 @@ // // Markup: ../../templates/components/atoms/skipnav/skipnav.html.twig // -// Styleguide: Components.Atoms.Skipnav +// Style guide: Atoms.Skipnav // .decanter-skipnav { @include skipnav; diff --git a/scss/components/atoms/index.scss b/scss/components/atoms/index.scss index 3808541cb..fc61e71f8 100644 --- a/scss/components/atoms/index.scss +++ b/scss/components/atoms/index.scss @@ -5,5 +5,6 @@ /// @import + 'buttons', 'media-block', 'skipnav'; diff --git a/scss/components/index.scss b/scss/components/index.scss index d81242aea..468db8d3a 100644 --- a/scss/components/index.scss +++ b/scss/components/index.scss @@ -1,10 +1,5 @@ @charset "UTF-8"; -// -// Components -// -// Style guide: Components - // Atoms // // Atoms are the basic building blocks of matter. Applied to web interfaces, @@ -15,7 +10,9 @@ // their own. However, they’re good as a reference in the context of a pattern // library as you can see all your global styles laid out at a glance. // -// Style guide: Components.Atoms +// Weight: -1 +// +// Style guide: Atoms // Molecules // @@ -27,7 +24,9 @@ // but combine them together as a form and now they can actually do something // together. // -// Style guide: Components.Molecules +// Weight: -1 +// +// Style guide: Molecules // Organisims // @@ -48,9 +47,20 @@ // again. Building up from molecules to organisms encourages creating // standalone, portable, reusable components. // -// Style guide: Components.Organisims +// Weight: -1 +// +// Style guide: Organisims + +// +// Templates +// +// Weight: -1 +// +// Style guide: Templates +// @import 'atoms/index', 'molecules/index', - 'organisms/index'; + 'organisms/index', + 'templates/index'; diff --git a/scss/components/molecules/_alerts.scss b/scss/components/molecules/_alerts.scss index a39b882cb..886bf6ce8 100644 --- a/scss/components/molecules/_alerts.scss +++ b/scss/components/molecules/_alerts.scss @@ -14,7 +14,7 @@ // // Markup: ../templates/components/molecules/alerts/alerts.html.twig // -// Style guide: Components.Molecules.Alerts +// Style guide: Molecules.Alerts // .decanter-alert { @include alerts; diff --git a/scss/components/molecules/_icon-grid.scss b/scss/components/molecules/_icon-grid.scss index 94a926f98..9ec645859 100644 --- a/scss/components/molecules/_icon-grid.scss +++ b/scss/components/molecules/_icon-grid.scss @@ -7,7 +7,7 @@ // // Markup: ../../templates/components/molecules/icon-grid/icon-grid.html.twig // -// Style guide: Components.Molecules.IconGrid +// Style guide: Molecules.IconGrid // .decanter-icon-grid { @include icon-grid; diff --git a/scss/components/molecules/_main-menu.scss b/scss/components/molecules/_main-menu.scss index 449063eaf..04b9e26ae 100644 --- a/scss/components/molecules/_main-menu.scss +++ b/scss/components/molecules/_main-menu.scss @@ -7,7 +7,7 @@ // // Markup: ../../../templates/components/molecules/main-menu/main-menu.html.twig // -// Styleguide: Components.Molecules.MainMenu +// Style guide: Molecules.MainMenu // .decanter-main-menu { @include main-menu; diff --git a/scss/components/molecules/_mega-menu.scss b/scss/components/molecules/_mega-menu.scss index 8073cb51d..5d28723f3 100644 --- a/scss/components/molecules/_mega-menu.scss +++ b/scss/components/molecules/_mega-menu.scss @@ -3,11 +3,13 @@ // // Mega Menu // -// This is a mega menu. +// An expandable menu in which choices are displayed in a two-dimensional +// dropdown layout. Excellent design choice for accommodating a large number of +// options or for revealing lower-level site pages at a glance. // // Markup:

Hello

// -// Style guide: Components.Molecules.Mega Menu +// Style guide: Molecules.Mega Menu // .decanter-megamenu { @include megamenu; diff --git a/scss/components/molecules/_sidenav.scss b/scss/components/molecules/_sidenav.scss index db7466bd1..9b4695ebd 100644 --- a/scss/components/molecules/_sidenav.scss +++ b/scss/components/molecules/_sidenav.scss @@ -1,9 +1,14 @@ @charset "UTF-8"; // -// SIDENAV COMPONENT +// Sidenav +// +// A side navigation component. +// +// Markup: ../../templates/components/molecules/sidenav/sidenav.html.twig +// +// Style guide: Molecules.Sidenav // - .decanter-sidenav__list { @include sidenav-list; } diff --git a/scss/components/organisms/_accordions.scss b/scss/components/organisms/_accordions.scss index aa77e36bb..da1c052ed 100644 --- a/scss/components/organisms/_accordions.scss +++ b/scss/components/organisms/_accordions.scss @@ -11,7 +11,7 @@ // // Markup: ../../templates/components/organisms/accordions/accordions.html.twig // -// Styleguide: Components.Organisims.Accordion +// Style guide: Organisims.Accordion // .decanter-accordion { @include accordion-list; diff --git a/scss/components/organisms/_hero-banner.scss b/scss/components/organisms/_hero-banner.scss deleted file mode 100644 index 6d0e2b80f..000000000 --- a/scss/components/organisms/_hero-banner.scss +++ /dev/null @@ -1,9 +0,0 @@ -@charset "UTF-8"; - -// -// Hero -// - -.decanter-hero-banner { - @include hero-banner; -} diff --git a/scss/components/organisms/index.scss b/scss/components/organisms/index.scss index 18c3a139c..e4a73e0c9 100644 --- a/scss/components/organisms/index.scss +++ b/scss/components/organisms/index.scss @@ -5,5 +5,4 @@ /// @import - 'accordions', - 'hero-banner'; + 'accordions'; diff --git a/scss/components/templates/index.scss b/scss/components/templates/index.scss index d535942d2..e6844deec 100644 --- a/scss/components/templates/index.scss +++ b/scss/components/templates/index.scss @@ -1,5 +1,8 @@ -// -// Templates -// -// Style guide: Templates -// +@charset "UTF-8"; + +/// +/// ROLL UP +/// + +// @import +// 'template-file-name'; diff --git a/scss/core/index.scss b/scss/core/index.scss index be49647bd..788faae7c 100644 --- a/scss/core/index.scss +++ b/scss/core/index.scss @@ -7,14 +7,20 @@ // Fonts // +// Markup: ../../templates/core/fonts/fonts.html.twig +// // Style guide: Core.Fonts // Grid // +// Markup: ../../templates/core/grid/grid.html.twig +// // Style guide: Core.Grid // Colors // +// Markup: ../templates/core/colors/colors.html.twig +// // Style guide: Core.Colors @import diff --git a/scss/elements/_embed.scss b/scss/elements/_embed.scss index ee17799c1..840a7b97b 100644 --- a/scss/elements/_embed.scss +++ b/scss/elements/_embed.scss @@ -3,10 +3,13 @@ // // Embed // - // Responsive embed container to ensure that contents scale to the // width of parent element while retaining an aspect ratio of 16:9. - +// +// Markup: ../../templates/elements/embed/embed.html.twig +// +// Style guide: Elements.EmbedContainer +// .decanter-embed-container { @include embed-container($aspect-height, $aspect-width); } diff --git a/scss/elements/_links.scss b/scss/elements/_links.scss new file mode 100644 index 000000000..21edbab82 --- /dev/null +++ b/scss/elements/_links.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + +// +// Links +// +// Default link styling, as well as special link treatment styling. +// +// .decanter-external-link - External Link +// .decanter-more-link - More Link +// +// Markup: ../../templates/elements/links/links.html.twig +// +// Style guide: Elements.Links +// +a { + @include link; +} + +.decanter-external-link { + @include external-link(external-link, external-link-hover); +} + +.decanter-more-link { + @include more-link(more-link, more-link-hover); +} diff --git a/scss/elements/_list.scss b/scss/elements/_list.scss index 5cb8bcea9..18e16f939 100644 --- a/scss/elements/_list.scss +++ b/scss/elements/_list.scss @@ -1,9 +1,14 @@ @charset "UTF-8"; // -// List +// Lists +// +// Default styling for lists, including ordered and unordered lists. +// +// Markup: ../../templates/elements/lists/lists.html.twig +// +// Style guide: Elements.Lists // - ul, ol { @include margin(1em null); diff --git a/scss/elements/_table.scss b/scss/elements/_table.scss index c2b02af58..da41fccac 100644 --- a/scss/elements/_table.scss +++ b/scss/elements/_table.scss @@ -1,9 +1,18 @@ @charset "UTF-8"; // -// Table +// Tables +// +// Default styling for tables. For displaying tabular data that best lends +// itself to being layed out in columns and rows. +// Modifier class available to remove tables borders. +// +// .decanter-table--borderless - Borderless Table +// +// Markup: ../../templates/elements/tables/tables.html.twig +// +// Style guide: Elements.Tables // - table { @include tables; } diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index b8268e003..f954b2ea1 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -3,7 +3,20 @@ // // Typography // - +// Default typography styling for base HTML typography elements, including +// paragraphs and headings. Also includes special type treatment classes such as +// splash font and lead font. +// +// .decanter-font-lead - Lead Font +// .decanter-font-splash - Splash Font +// .decanter-short-line-length - Short Line Length +// .decanter-caption - Caption Font +// .decanter-credits - Credits Font +// +// Markup: ../../templates/elements/font-styles/font-styles.html.twig +// +// Style guide: Elements.Typography +// html { font-family: $font-sans; font-size: $em-base; @@ -20,18 +33,6 @@ p { @include margin(1em null); } -a { - @include link; -} - -.decanter-external-link { - @include external-link(external-link, external-link-hover); -} - -.decanter-more-link { - @include more-link(more-link, more-link-hover); -} - h1, h2, h3, diff --git a/scss/elements/helpers/_sr-only.scss b/scss/elements/helpers/_sr-only.scss index cff2d2aa0..b7963a757 100644 --- a/scss/elements/helpers/_sr-only.scss +++ b/scss/elements/helpers/_sr-only.scss @@ -1,11 +1,15 @@ @charset "UTF-8"; +@charset "UTF-8"; + // -// Screen Reader Only +// @sr-only +// +// Hides piece of content from the screen but keeps in the DOM for screen +// readers. +// +// Style guide: Elements.Helpers.sr-only // - -// Screen reader only helper. - .decanter-sr-only { @include sr-only; } diff --git a/scss/elements/helpers/index.scss b/scss/elements/helpers/index.scss index 49d4e98d3..fc58d33bd 100644 --- a/scss/elements/helpers/index.scss +++ b/scss/elements/helpers/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Helpers +// +// Helper partials for element css. +// +// Style guide: Elements.Helpers +// @import 'sr-only'; diff --git a/scss/elements/index.scss b/scss/elements/index.scss index c8053ef23..11e37c4bc 100644 --- a/scss/elements/index.scss +++ b/scss/elements/index.scss @@ -3,13 +3,15 @@ // // Elements // -// Style guide: Core.Elements +// Elements are individual units of an HTML document or web page. +// +// Style guide: Elements @import 'helpers/index', - 'buttons', 'embed', 'inputs', + 'links', 'list', 'table', 'typography'; diff --git a/scss/utilities/index.scss b/scss/utilities/index.scss index 25e08bebb..9ac9b603b 100644 --- a/scss/utilities/index.scss +++ b/scss/utilities/index.scss @@ -3,11 +3,19 @@ // // Functions // +// Programmatic procedure or routine to help making writing code or declaring +// something easier and more seamlesss. +// // Style guide: Functions // // Mixins // +// Mixins help with things that are a bit tedious to write in CSS (e.g., +// vendor prefixes that exist). Mixins allow for making groups of CSS +// declarations for reuse throughout a project. Mixins can even pass in values +// to make things more flexible. +// // Style guide: Mixins @import diff --git a/scss/utilities/mixins/accessibility/_accessibly-hidden.scss b/scss/utilities/mixins/accessibility/_accessibly-hidden.scss index c15e8773b..b6c6355ee 100644 --- a/scss/utilities/mixins/accessibility/_accessibly-hidden.scss +++ b/scss/utilities/mixins/accessibility/_accessibly-hidden.scss @@ -5,7 +5,7 @@ // // Aria hidden helper. // -// Styleguide: Mixins.Accessibility.hidden +// Style guide: Mixins.Accessibility.hidden // @mixin accessibly-hidden { &[aria-hidden=true] { diff --git a/scss/utilities/mixins/accessibility/_skipnav.scss b/scss/utilities/mixins/accessibility/_skipnav.scss index cff2264ec..d07082a59 100644 --- a/scss/utilities/mixins/accessibility/_skipnav.scss +++ b/scss/utilities/mixins/accessibility/_skipnav.scss @@ -5,7 +5,7 @@ // // Skip to navigation helper. // -// Styleguide: Mixins.Accessibility.skipnav +// Style guide: Mixins.Accessibility.skipnav // @mixin skipnav { background: transparent; diff --git a/scss/utilities/mixins/accessibility/_sr-only.scss b/scss/utilities/mixins/accessibility/_sr-only.scss index e23c7cce7..dde72033d 100644 --- a/scss/utilities/mixins/accessibility/_sr-only.scss +++ b/scss/utilities/mixins/accessibility/_sr-only.scss @@ -5,7 +5,7 @@ // // Screen reader only content hiding helper. // -// Styleguide: Mixins.Accessibility.sr-only +// Style guide: Mixins.Accessibility.sr-only // @mixin sr-only { position: absolute; diff --git a/scss/utilities/mixins/accessibility/index.scss b/scss/utilities/mixins/accessibility/index.scss index c48d6c7aa..a88d8b1bc 100644 --- a/scss/utilities/mixins/accessibility/index.scss +++ b/scss/utilities/mixins/accessibility/index.scss @@ -3,7 +3,9 @@ // // Accessibility // -// Styleguide: Mixins.Accessibility +// Mixins for Accessibility +// +// Style guide: Mixins.Accessibility // @import diff --git a/scss/utilities/mixins/accordions/_accordion-bordered.scss b/scss/utilities/mixins/accordions/_accordion-bordered.scss index e1a5deef5..baf43cf2c 100644 --- a/scss/utilities/mixins/accordions/_accordion-bordered.scss +++ b/scss/utilities/mixins/accordions/_accordion-bordered.scss @@ -3,7 +3,9 @@ // // @accordion-bordered // -// Styleguide: Mixins.Accordions.accordion-bordered +// Adds a border to the accordion. +// +// Style guide: Mixins.Accordions.accordion-bordered // @mixin accordion-bordered { .decanter-accordion__content { diff --git a/scss/utilities/mixins/accordions/_accordion-button-unopened.scss b/scss/utilities/mixins/accordions/_accordion-button-unopened.scss index 1d602a7c5..116928255 100644 --- a/scss/utilities/mixins/accordions/_accordion-button-unopened.scss +++ b/scss/utilities/mixins/accordions/_accordion-button-unopened.scss @@ -3,7 +3,9 @@ // // @accordion-button-unopened // -// Styleguide: Mixins.Accordions.accordion-button-unopened +// Adds the closed icon (plus) to the accordion. +// +// Style guide: Mixins.Accordions.accordion-button-unopened // @mixin accordion-button-unopened { background-image: url("#{$image-path}/plus.png"); diff --git a/scss/utilities/mixins/accordions/_accordion-button.scss b/scss/utilities/mixins/accordions/_accordion-button.scss index 2f8a89978..b196094b3 100644 --- a/scss/utilities/mixins/accordions/_accordion-button.scss +++ b/scss/utilities/mixins/accordions/_accordion-button.scss @@ -3,7 +3,9 @@ // // @accordion-button // -// Styleguide: Mixins.Accordions.accordion-button +// Default styling for the clickable button of an accordion. +// +// Style guide: Mixins.Accordions.accordion-button // @mixin accordion-button { @include button-unstyled; diff --git a/scss/utilities/mixins/accordions/_accordion-content.scss b/scss/utilities/mixins/accordions/_accordion-content.scss index ff083956f..d444e3d0d 100644 --- a/scss/utilities/mixins/accordions/_accordion-content.scss +++ b/scss/utilities/mixins/accordions/_accordion-content.scss @@ -3,7 +3,9 @@ // // @accordion-content // -// Styleguide: Mixins.Accordions.accordion-content +// Default styling for the content within the expanded accordion. +// +// Style guide: Mixins.Accordions.accordion-content // @mixin accordion-content { background-color: $color-white; diff --git a/scss/utilities/mixins/accordions/_accordion-list-item.scss b/scss/utilities/mixins/accordions/_accordion-list-item.scss index f281bd31d..1f3856d0d 100644 --- a/scss/utilities/mixins/accordions/_accordion-list-item.scss +++ b/scss/utilities/mixins/accordions/_accordion-list-item.scss @@ -3,7 +3,9 @@ // // @accordion-list-item // -// Styleguide: Mixins.Accordions.accordion-list-item +// Default styling for list items that appear within an expanded accordion. +// +// Style guide: Mixins.Accordions.accordion-list-item // @mixin accordion-list-item { background-color: $color-cool-grey; diff --git a/scss/utilities/mixins/accordions/_accordion-list.scss b/scss/utilities/mixins/accordions/_accordion-list.scss index e566e7521..05e377b96 100644 --- a/scss/utilities/mixins/accordions/_accordion-list.scss +++ b/scss/utilities/mixins/accordions/_accordion-list.scss @@ -3,7 +3,9 @@ // // @accordion-list // -// Styleguide: Mixins.Accordions.accordion-list +// Default styling for an expanded accordion that includes a list. +// +// Style guide: Mixins.Accordions.accordion-list // @mixin accordion-list { @include list-unstyled; diff --git a/scss/utilities/mixins/accordions/_accordion-nested-list.scss b/scss/utilities/mixins/accordions/_accordion-nested-list.scss index fe6b9d9e1..5dba83423 100644 --- a/scss/utilities/mixins/accordions/_accordion-nested-list.scss +++ b/scss/utilities/mixins/accordions/_accordion-nested-list.scss @@ -3,7 +3,9 @@ // // @accordion-nested-list // -// Styleguide: Mixins.Accordions.accordion-nested-list +// Default styling for nested lists within an expanded accordion. +// +// Style guide: Mixins.Accordions.accordion-nested-list // @mixin accordion-nested-list { > ul li ul { diff --git a/scss/utilities/mixins/accordions/index.scss b/scss/utilities/mixins/accordions/index.scss index 22be30001..fb06bf8df 100644 --- a/scss/utilities/mixins/accordions/index.scss +++ b/scss/utilities/mixins/accordions/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Accordions +// +// Mixins for Accordions +// +// Style guide: Mixins.Accordions +// @import 'accordion-bordered', diff --git a/scss/utilities/mixins/alerts/_alerts-icons-colors.scss b/scss/utilities/mixins/alerts/_alerts-icons-colors.scss index c89c87dab..a79b238fd 100644 --- a/scss/utilities/mixins/alerts/_alerts-icons-colors.scss +++ b/scss/utilities/mixins/alerts/_alerts-icons-colors.scss @@ -3,7 +3,9 @@ // // @alerts-icons-colors // -// Styleguide: Mixins.Alerts.alerts-icons-colors +// Loops through color option settings for Alets component. +// +// Style guide: Mixins.Alerts.alerts-icons-colors // @mixin alerts-icons-colors { @each $name, $bgcolor in $alerts { diff --git a/scss/utilities/mixins/alerts/_alerts.scss b/scss/utilities/mixins/alerts/_alerts.scss index f6434d60f..2cb2e9ad6 100644 --- a/scss/utilities/mixins/alerts/_alerts.scss +++ b/scss/utilities/mixins/alerts/_alerts.scss @@ -3,10 +3,14 @@ // // @alerts // -// Styleguide: Mixins.Alerts.alerts +// For displaying a notification that keeps people informed +// of a status, or for displaying a validation message that +// alerts someone of an important piece of information. +// +// Style guide: Mixins.Alerts.alerts // @mixin alerts { - background-color: $color-cool-grey; + background-color: $color-fog; background-position: 1rem 2rem; background-repeat: no-repeat; background-size: 4rem; diff --git a/scss/utilities/mixins/alerts/index.scss b/scss/utilities/mixins/alerts/index.scss index ed64b46df..983df1994 100644 --- a/scss/utilities/mixins/alerts/index.scss +++ b/scss/utilities/mixins/alerts/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Alerts +// +// Mixins for Alerts +// +// Style guide: Mixins.Alerts +// @import 'alerts-icons-colors', diff --git a/scss/utilities/mixins/banners/_hero-banner.scss b/scss/utilities/mixins/banners/_hero-banner.scss deleted file mode 100644 index 6e43d7717..000000000 --- a/scss/utilities/mixins/banners/_hero-banner.scss +++ /dev/null @@ -1,38 +0,0 @@ -@charset "UTF-8"; - -// -// @hero-banner -// -// Styleguide: Mixins.Banners.hero-banner -// -@mixin hero-banner { - @include padding($site-margins null); - - background-image: url("#{$image-path}/hero-banner.png"); - background-position: center; - background-size: cover; - - .decanter-button { - color: $color-white; - } - - .decanter-hero-banner__callout { - background-color: $color-white; - - @include padding(3rem); - - @include media($small-screen) { - max-width: 30rem; - } - - - > *:first-child { - @include margin(0 null $site-margins null); - } - - .decanter-button { - @include margin(3rem null null); - width: 100%; - } - } -} diff --git a/scss/utilities/mixins/banners/index.scss b/scss/utilities/mixins/banners/index.scss deleted file mode 100644 index ee768baad..000000000 --- a/scss/utilities/mixins/banners/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -/// -/// ROLL UP -/// - -@import - 'hero-banner'; diff --git a/scss/utilities/mixins/buttons/_button-big.scss b/scss/utilities/mixins/buttons/_button-big.scss index 656e9767b..8307f11c9 100644 --- a/scss/utilities/mixins/buttons/_button-big.scss +++ b/scss/utilities/mixins/buttons/_button-big.scss @@ -3,7 +3,9 @@ // // @button-big // -// Styleguide: Mixins.Buttons.button-big +// Big button styling. +// +// Style guide: Mixins.Buttons.button-big // @mixin button-big { @include font-smoothing; diff --git a/scss/utilities/mixins/buttons/_button-primary.scss b/scss/utilities/mixins/buttons/_button-primary.scss index 7fe9d6cb4..f25d98a20 100644 --- a/scss/utilities/mixins/buttons/_button-primary.scss +++ b/scss/utilities/mixins/buttons/_button-primary.scss @@ -3,7 +3,9 @@ // // @button-primary // -// Styleguide: Mixins.Buttons.button-primary +// Primary (default) button styling. +// +// Style guide: Mixins.Buttons.button-primary // @mixin button-primary { @include font-smoothing; diff --git a/scss/utilities/mixins/buttons/_button-secondary.scss b/scss/utilities/mixins/buttons/_button-secondary.scss index 9d89e1a7e..5386692f3 100644 --- a/scss/utilities/mixins/buttons/_button-secondary.scss +++ b/scss/utilities/mixins/buttons/_button-secondary.scss @@ -3,7 +3,9 @@ // // @button-secondary // -// Styleguide: Mixins.Buttons.button-secondary +// Secondary button styling. +// +// Style guide: Mixins.Buttons.button-secondary // @mixin button-secondary { @include font-smoothing; diff --git a/scss/utilities/mixins/buttons/_button-unstyled.scss b/scss/utilities/mixins/buttons/_button-unstyled.scss index 50f8b6bb4..f6f3dedd4 100644 --- a/scss/utilities/mixins/buttons/_button-unstyled.scss +++ b/scss/utilities/mixins/buttons/_button-unstyled.scss @@ -3,7 +3,9 @@ // // @button-unstyled // -// Styleguide: Mixins.Buttons.button-unstyled +// Removes styling from a button. +// +// Style guide: Mixins.Buttons.button-unstyled // @mixin button-unstyled { background-color: transparent; diff --git a/scss/utilities/mixins/buttons/index.scss b/scss/utilities/mixins/buttons/index.scss index 7a0d865db..d925bf4f6 100644 --- a/scss/utilities/mixins/buttons/index.scss +++ b/scss/utilities/mixins/buttons/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Buttons +// +// Mixins for Buttons +// +// Style guide: Mixins.Buttons +// @import 'button-big', diff --git a/scss/utilities/mixins/display/_display-icon.scss b/scss/utilities/mixins/display/_display-icon.scss index 9c338d561..3f23cbd39 100644 --- a/scss/utilities/mixins/display/_display-icon.scss +++ b/scss/utilities/mixins/display/_display-icon.scss @@ -3,8 +3,9 @@ // // @display-icon($icon, $direction, $size, $margin, $hover) // -// TODO: Description -// +// @TODO Needs to be documented. Should this be reworked for asset +// management purposes? +// // Usage: `@include display-icon($icon, $direction, $size, $margin, $hover);` // // $icon - todo @@ -13,7 +14,7 @@ // $margin - todo // $hover - todo // -// Styleguide: Mixins.Display.display-icon +// Style guide: Mixins.Display.display-icon // @mixin display-icon($icon, $direction, $size, $margin, $hover) { &::#{$direction} { diff --git a/scss/utilities/mixins/display/_embed-container.scss b/scss/utilities/mixins/display/_embed-container.scss index 759bb3abe..925a37161 100644 --- a/scss/utilities/mixins/display/_embed-container.scss +++ b/scss/utilities/mixins/display/_embed-container.scss @@ -3,12 +3,13 @@ // // @embed-container($height, $width) // -// TODO: Description +// Responsive embed container to ensure that contents scale to the +// width of parent element while retaining an aspect ratio of 16:9. // // $height - height in pixel integers // $width - width in pixel integers // -// Styleguide: Mixins.Display.embed-container +// Style guide: Mixins.Display.embed-container // @mixin embed-container($height, $width) { @include padding(null null percentage($height / $width)); diff --git a/scss/utilities/mixins/display/_media-block-img.scss b/scss/utilities/mixins/display/_media-block-img.scss index 30ad30012..91f3a8f52 100644 --- a/scss/utilities/mixins/display/_media-block-img.scss +++ b/scss/utilities/mixins/display/_media-block-img.scss @@ -3,11 +3,12 @@ // // @media-block-img($margin-right) // -// TODO: Description +// Floats an image to the left and provides a specified margin right. To be used +// when floating images alongside other content. // // $margin-right - Pixel integers // -// Styleguide: Mixins.Display.media-block-img +// Style guide: Mixins.Display.media-block-img // @mixin media-block-img($margin-right: 1rem) { float: left; diff --git a/scss/utilities/mixins/display/_overflow.scss b/scss/utilities/mixins/display/_overflow.scss new file mode 100644 index 000000000..a3a4fff93 --- /dev/null +++ b/scss/utilities/mixins/display/_overflow.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +// +// @overflow($property) +// +// Specifies what should happen if content overflows an element's box. +// +// $property - visible (web default), scroll, hidden (mixin default), auto +// +// Style guide: Mixins.Display.overflow +// +@mixin overflow($property: hidden) { + overflow: $property; +} diff --git a/scss/utilities/mixins/display/index.scss b/scss/utilities/mixins/display/index.scss index 23c2e06b9..e84e657f5 100644 --- a/scss/utilities/mixins/display/index.scss +++ b/scss/utilities/mixins/display/index.scss @@ -1,10 +1,15 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Display +// +// Mixins for Display +// +// Style guide: Mixins.Display +// @import 'display-icon', 'embed-container', - 'media-block-img'; + 'media-block-img', + 'overflow'; diff --git a/scss/utilities/mixins/grid/_allow-layout-classes.scss b/scss/utilities/mixins/grid/_allow-layout-classes.scss index 29ac0fabf..c54e58014 100644 --- a/scss/utilities/mixins/grid/_allow-layout-classes.scss +++ b/scss/utilities/mixins/grid/_allow-layout-classes.scss @@ -5,7 +5,7 @@ // // Allow Layout Classes. Content size helpers. // -// Styleguide: Mixins.Grid.allow-layout-classes +// Style guide: Mixins.Grid.allow-layout-classes // @mixin allow-layout-classes { @include margin(null auto); diff --git a/scss/utilities/mixins/grid/index.scss b/scss/utilities/mixins/grid/index.scss index ebdd9a3e7..9481568ce 100644 --- a/scss/utilities/mixins/grid/index.scss +++ b/scss/utilities/mixins/grid/index.scss @@ -3,9 +3,9 @@ // // Grid // -// Grid system mixins. +// Mixins for Grid // -// Styleguide: Mixins.Grid +// Style guide: Mixins.Grid // @import diff --git a/scss/utilities/mixins/icon-grid/_icon-grid.scss b/scss/utilities/mixins/icon-grid/_icon-grid.scss index 40e961d0f..31d88cc6d 100644 --- a/scss/utilities/mixins/icon-grid/_icon-grid.scss +++ b/scss/utilities/mixins/icon-grid/_icon-grid.scss @@ -1,11 +1,11 @@ @charset "UTF-8"; // -// Icon Grid +// @icon-grid // -// Todo: Description. +// Grid of icons (or images) with text. // -// Styleguide: Mixins.icon-grid +// Style guide: Mixins.icon-grid // @mixin icon-grid { .decanter-icon-grid__row { diff --git a/scss/utilities/mixins/index.scss b/scss/utilities/mixins/index.scss index f11dce135..39b45e4a0 100644 --- a/scss/utilities/mixins/index.scss +++ b/scss/utilities/mixins/index.scss @@ -8,7 +8,6 @@ 'accessibility/index', 'accordions/index', 'alerts/index', - 'banners/index', 'buttons/index', 'display/index', 'grid/index', diff --git a/scss/utilities/mixins/links/_external-link.scss b/scss/utilities/mixins/links/_external-link.scss index 614272d65..622749bc1 100644 --- a/scss/utilities/mixins/links/_external-link.scss +++ b/scss/utilities/mixins/links/_external-link.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// External Link +// @external-link($external-link, $external-link-hover) +// +// Default external link styling, with external icon. +// +// Style guide: Mixins.Links.external-link // - @mixin external-link($external-link, $external-link-hover) { &::after { background: url("#{$image-path}/#{$external-link}.png") no-repeat 0 0; diff --git a/scss/utilities/mixins/links/_link.scss b/scss/utilities/mixins/links/_link.scss index ded3e175f..8108bf5bf 100644 --- a/scss/utilities/mixins/links/_link.scss +++ b/scss/utilities/mixins/links/_link.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Link +// @link +// +// Default link styling. +// +// Style guide: Mixins.Links.link // - @mixin link { color: $color-bright-red; text-decoration: underline; diff --git a/scss/utilities/mixins/links/_more-link.scss b/scss/utilities/mixins/links/_more-link.scss index 2ac187b4c..b78a22f79 100644 --- a/scss/utilities/mixins/links/_more-link.scss +++ b/scss/utilities/mixins/links/_more-link.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// More Link +// @more-link($more-link, $more-link-hover) +// +// Default more link styling, with raquo. +// +// Style guide: Mixins.Links.more-link // - @mixin more-link($more-link, $more-link-hover) { &::after { color: $color-bright-red; diff --git a/scss/utilities/mixins/links/index.scss b/scss/utilities/mixins/links/index.scss index d4bcc83fd..ce7e4e5d0 100644 --- a/scss/utilities/mixins/links/index.scss +++ b/scss/utilities/mixins/links/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Links +// +// Mixins for Links +// +// Style guide: Mixins.Links +// @import 'external-link', diff --git a/scss/utilities/mixins/lists/_list-unstyled.scss b/scss/utilities/mixins/lists/_list-unstyled.scss index ec949715e..74507242b 100644 --- a/scss/utilities/mixins/lists/_list-unstyled.scss +++ b/scss/utilities/mixins/lists/_list-unstyled.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// List Unstyled +// @list-unstyled +// +// Removes styles from a list. +// +// Style guide: Mixins.Lists.list-unstyled // - @mixin list-unstyled { @include margin(0 null); @include padding(null null null 0); diff --git a/scss/utilities/mixins/lists/index.scss b/scss/utilities/mixins/lists/index.scss index 54894e0ef..c3f7758ba 100644 --- a/scss/utilities/mixins/lists/index.scss +++ b/scss/utilities/mixins/lists/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Lists +// +// Mixins for Lists +// +// Style guide: Mixins.Lists +// @import 'list-unstyled'; diff --git a/scss/utilities/mixins/menus/_main-menu.scss b/scss/utilities/mixins/menus/_main-menu.scss index 3037357f6..a810c0ddb 100644 --- a/scss/utilities/mixins/menus/_main-menu.scss +++ b/scss/utilities/mixins/menus/_main-menu.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Main Menu +// @main-menu +// +// For use with main navigation that does or does not support drop downs. +// +// Style guide: Mixins.Menus.main-menu // - @mixin main-menu { width: 100%; z-index: $z-index-main-menu; diff --git a/scss/utilities/mixins/menus/_megamenu.scss b/scss/utilities/mixins/menus/_megamenu.scss index b1c3a0b5c..6e1759bb6 100644 --- a/scss/utilities/mixins/menus/_megamenu.scss +++ b/scss/utilities/mixins/menus/_megamenu.scss @@ -1,9 +1,14 @@ @charset "UTF-8"; // -// Mega Menu +// @megamenu +// +// An expandable menu in which choices are displayed in a two-dimensional +// dropdown layout. Excellent design choice for accommodating a large number of +// options or for revealing lower-level site pages at a glance. +// +// Style guide: Mixins.Menus.megamenu // - @mixin megamenu { @include media($nav-width) { @include padding(3.15rem null); diff --git a/scss/utilities/mixins/menus/_outer-megamenu.scss b/scss/utilities/mixins/menus/_outer-megamenu.scss index 8eec5ec61..bf1419e1d 100644 --- a/scss/utilities/mixins/menus/_outer-megamenu.scss +++ b/scss/utilities/mixins/menus/_outer-megamenu.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Outter Mega Menu +// @outer-megamenu +// +// @TODO Needs to be documented. +// +// Style guide: Mixins.Menus.outter-megamenu // - @mixin outer-megamenu { background-color: $color-bright-red; content: ''; diff --git a/scss/utilities/mixins/menus/_sidenav-list.scss b/scss/utilities/mixins/menus/_sidenav-list.scss index 85723c51e..65d2ba935 100644 --- a/scss/utilities/mixins/menus/_sidenav-list.scss +++ b/scss/utilities/mixins/menus/_sidenav-list.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Sidenav List +// @sidenav-list +// +// Default styling for a side navigation list. +// +// Style guide: Mixins.Menus.subnav-list // - @mixin sidenav-list { @include list-unstyled; diff --git a/scss/utilities/mixins/menus/_sidenav-sublist.scss b/scss/utilities/mixins/menus/_sidenav-sublist.scss index 07c7bc846..57fb57e01 100644 --- a/scss/utilities/mixins/menus/_sidenav-sublist.scss +++ b/scss/utilities/mixins/menus/_sidenav-sublist.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Sidenav Sublist +// @sidenav-sublist +// +// For styling a sublist of a side navaition menu. +// +// Style guide: Mixins.Menus.sidenav-sublist // - @mixin sidenav-sublist { @include list-unstyled; @include margin(0); diff --git a/scss/utilities/mixins/menus/index.scss b/scss/utilities/mixins/menus/index.scss index 92ab74649..632f32837 100644 --- a/scss/utilities/mixins/menus/index.scss +++ b/scss/utilities/mixins/menus/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Menus +// +// Mixins for Menus +// +// Style guide: Mixins.Menus +// @import 'main-menu', diff --git a/scss/utilities/mixins/navigation/_nav-border.scss b/scss/utilities/mixins/navigation/_nav-border.scss index ad274f541..d877aaac4 100644 --- a/scss/utilities/mixins/navigation/_nav-border.scss +++ b/scss/utilities/mixins/navigation/_nav-border.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Navigation Border +// @nav-border +// +// For applying a border to navigation. +// +// Style guide: Mixins.Navigation.nav-border // - @mixin nav-border { border-bottom: 0.2rem solid $color-black; diff --git a/scss/utilities/mixins/navigation/_nav-close.scss b/scss/utilities/mixins/navigation/_nav-close.scss index 644f66499..fee03142b 100644 --- a/scss/utilities/mixins/navigation/_nav-close.scss +++ b/scss/utilities/mixins/navigation/_nav-close.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Navigation Close Button +// @nav-close +// +// Close button for mobile navigation. +// +// Style guide: Mixins.Navigation.nav-close // - @mixin nav-close { @include button-unstyled; @include margin((-1.2rem) -1.5rem 2.4rem auto); diff --git a/scss/utilities/mixins/navigation/_nav-overlay.scss b/scss/utilities/mixins/navigation/_nav-overlay.scss index de3c0d5ef..402850687 100644 --- a/scss/utilities/mixins/navigation/_nav-overlay.scss +++ b/scss/utilities/mixins/navigation/_nav-overlay.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Navigation Overlay +// @nav-overlay +// +// Screen overlay for when mobile nav is exposed. +// +// Style guide: Mixins.Navigation.nav-overlay // - @mixin nav-overlay { @include position(fixed, 0); diff --git a/scss/utilities/mixins/navigation/index.scss b/scss/utilities/mixins/navigation/index.scss index e1b216083..1179cc312 100644 --- a/scss/utilities/mixins/navigation/index.scss +++ b/scss/utilities/mixins/navigation/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Navigation +// +// Mixins for Navigation +// +// Style guide: Mixins.Navigation +// @import 'nav-border', diff --git a/scss/utilities/mixins/tables/_table-borderless.scss b/scss/utilities/mixins/tables/_table-borderless.scss index da16799ca..065b82637 100644 --- a/scss/utilities/mixins/tables/_table-borderless.scss +++ b/scss/utilities/mixins/tables/_table-borderless.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Table Borderless +// @table-borderless +// +// Tables without borders styling. +// +// Style guide: Mixins.Tables.table-borderless // - @mixin table-borderless { thead { tr { diff --git a/scss/utilities/mixins/tables/_tables.scss b/scss/utilities/mixins/tables/_tables.scss index 69a4d9a82..cd8c2a0b2 100644 --- a/scss/utilities/mixins/tables/_tables.scss +++ b/scss/utilities/mixins/tables/_tables.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Tables +// @tables +// +// Default table styling. +// +// Style guide: Mixins.Tables.tables // - @mixin tables { border-spacing: 0; min-width: 100%; diff --git a/scss/utilities/mixins/tables/index.scss b/scss/utilities/mixins/tables/index.scss index eb926cdf3..de573f407 100644 --- a/scss/utilities/mixins/tables/index.scss +++ b/scss/utilities/mixins/tables/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Tables +// +// Mixins for Tables +// +// Style guide: Mixins.Tables +// @import 'table-borderless', diff --git a/scss/utilities/mixins/typography/_caption.scss b/scss/utilities/mixins/typography/_caption.scss index 5af0aa3ac..7fe3f17bc 100644 --- a/scss/utilities/mixins/typography/_caption.scss +++ b/scss/utilities/mixins/typography/_caption.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Caption +// @caption +// +// To be used for describing the content of an image. +// +// Style guide: Mixins.Typography.caption // - @mixin caption { color: $color-cool-grey; font-size: $small-font-size; diff --git a/scss/utilities/mixins/typography/_credits.scss b/scss/utilities/mixins/typography/_credits.scss index 517537878..b5169b788 100644 --- a/scss/utilities/mixins/typography/_credits.scss +++ b/scss/utilities/mixins/typography/_credits.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Credits +// @credits +// +// To be used for crediting a source or photographer. +// +// Style guide: Mixins.Typography.credits // - @mixin credits { color: $color-cool-grey; font-size: $small-font-size; diff --git a/scss/utilities/mixins/typography/_font-lead.scss b/scss/utilities/mixins/typography/_font-lead.scss index 0c8f36394..38bf9ebd5 100644 --- a/scss/utilities/mixins/typography/_font-lead.scss +++ b/scss/utilities/mixins/typography/_font-lead.scss @@ -1,9 +1,13 @@ @charset "UTF-8"; // -// Font Lead +// @font-lead +// +// For leading a page of text, summarizing a main point, and/or highlighting a +// paragraph or quote. +// +// Style guide: Mixins.Typography.font-lead // - @mixin font-lead { font-family: $font-sans; font-size: $lead-font-size; diff --git a/scss/utilities/mixins/typography/_font-smoothing.scss b/scss/utilities/mixins/typography/_font-smoothing.scss index 53939ab1c..d37ef02f5 100644 --- a/scss/utilities/mixins/typography/_font-smoothing.scss +++ b/scss/utilities/mixins/typography/_font-smoothing.scss @@ -1,11 +1,12 @@ @charset "UTF-8"; // -// Font Smoothing +// @font-smoothing // - // To be used for light text on a dark background only. - +// +// Style guide: Mixins.Typography.font-smoothing +// @mixin font-smoothing { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; diff --git a/scss/utilities/mixins/typography/_font-splash.scss b/scss/utilities/mixins/typography/_font-splash.scss index c1b4e5789..4bd170a62 100644 --- a/scss/utilities/mixins/typography/_font-splash.scss +++ b/scss/utilities/mixins/typography/_font-splash.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Font Splash +// @font-splash +// +// For text on a page that should stand out and draw more attention. +// +// Style guide: Mixins.Typography.font-splash // - @mixin font-splash { @include h3; @include margin(null null 0); @@ -13,6 +16,7 @@ } @include media($medium-screen) { - @include title; + font-size: $splash-font-size; + font-weight: $font-bold; } } diff --git a/scss/utilities/mixins/typography/_h1.scss b/scss/utilities/mixins/typography/_h1.scss index 448362d58..54f21e69c 100644 --- a/scss/utilities/mixins/typography/_h1.scss +++ b/scss/utilities/mixins/typography/_h1.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 1 +// @h1 +// +// Default heading 1 styling. +// +// Style guide: Mixins.Typography.h1 // - @mixin h1 { font-size: $h1-font-size; font-weight: $font-bold; diff --git a/scss/utilities/mixins/typography/_h2.scss b/scss/utilities/mixins/typography/_h2.scss index 17d76292e..7442d753f 100644 --- a/scss/utilities/mixins/typography/_h2.scss +++ b/scss/utilities/mixins/typography/_h2.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 2 +// @h2 +// +// Default heading 2 styling. +// +// Style guide: Mixins.Typography.h2 // - @mixin h2 { font-size: $h2-font-size; font-weight: $font-bold; diff --git a/scss/utilities/mixins/typography/_h3.scss b/scss/utilities/mixins/typography/_h3.scss index 39b37738d..99905a39a 100644 --- a/scss/utilities/mixins/typography/_h3.scss +++ b/scss/utilities/mixins/typography/_h3.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 3 +// @h3 +// +// Default heading 3 styling. +// +// Style guide: Mixins.Typography.h3 // - @mixin h3 { font-size: $h3-font-size; font-weight: $font-bold; diff --git a/scss/utilities/mixins/typography/_h4.scss b/scss/utilities/mixins/typography/_h4.scss index da78bb46c..394c1cb90 100644 --- a/scss/utilities/mixins/typography/_h4.scss +++ b/scss/utilities/mixins/typography/_h4.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 4 +// @h4 +// +// Default heading 4 styling. +// +// Style guide: Mixins.Typography.h4 // - @mixin h4 { font-size: $h4-font-size; font-weight: $font-bold; diff --git a/scss/utilities/mixins/typography/_h5.scss b/scss/utilities/mixins/typography/_h5.scss index a70514a60..3ecaa5e41 100644 --- a/scss/utilities/mixins/typography/_h5.scss +++ b/scss/utilities/mixins/typography/_h5.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 5 +// @h5 +// +// Default heading 5 styling. +// +// Style guide: Mixins.Typography.h5 // - @mixin h5 { font-size: $h5-font-size; font-weight: $font-bold; diff --git a/scss/utilities/mixins/typography/_h6.scss b/scss/utilities/mixins/typography/_h6.scss index e47f995c1..aee5bf9bc 100644 --- a/scss/utilities/mixins/typography/_h6.scss +++ b/scss/utilities/mixins/typography/_h6.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Heading 6 +// @h6 +// +// Default heading 6 styling. +// +// Style guide: Mixins.Typography.h6 // - @mixin h6 { font-family: $font-sans; font-size: $h6-font-size; diff --git a/scss/utilities/mixins/typography/_headings.scss b/scss/utilities/mixins/typography/_headings.scss index 397a559ae..70621b105 100644 --- a/scss/utilities/mixins/typography/_headings.scss +++ b/scss/utilities/mixins/typography/_headings.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Headings +// @headings +// +// Default heading shared styling. +// +// Style guide: Mixins.Typography.headings // - @mixin headings { clear: both; font-family: $font-sans; diff --git a/scss/utilities/mixins/typography/_sans.scss b/scss/utilities/mixins/typography/_sans.scss index 0d8593820..df24773d4 100644 --- a/scss/utilities/mixins/typography/_sans.scss +++ b/scss/utilities/mixins/typography/_sans.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Sans Serif Font +// @sans +// +// Sans Serfif font styling. +// +// Style guide: Mixins.Typography.sans // - @mixin sans { p, a, diff --git a/scss/utilities/mixins/typography/_serif.scss b/scss/utilities/mixins/typography/_serif.scss index 8b475e3e4..b465e93ee 100644 --- a/scss/utilities/mixins/typography/_serif.scss +++ b/scss/utilities/mixins/typography/_serif.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Serif Font +// @serif +// +// Serif font styling. +// +// Style guide: Mixins.Typography.serif // - @mixin serif { p, a, diff --git a/scss/utilities/mixins/typography/_short-line-length.scss b/scss/utilities/mixins/typography/_short-line-length.scss index 90eb66f3a..103c32cb9 100644 --- a/scss/utilities/mixins/typography/_short-line-length.scss +++ b/scss/utilities/mixins/typography/_short-line-length.scss @@ -1,9 +1,13 @@ @charset "UTF-8"; // -// Short Line Length +// @short-line-length +// +// For reducing the length of lines in a paragraph, no matter the width of its +// container. +// +// Style guide: Mixins.Typography.short-line-length // - @mixin short-line-length { max-width: $text-max-width; } diff --git a/scss/utilities/mixins/typography/_slab.scss b/scss/utilities/mixins/typography/_slab.scss index a32a4f37b..0bc5bd382 100644 --- a/scss/utilities/mixins/typography/_slab.scss +++ b/scss/utilities/mixins/typography/_slab.scss @@ -1,9 +1,12 @@ @charset "UTF-8"; // -// Slab Font +// @slab +// +// Slab font styling. +// +// Style guide: Mixins.Typography.slab // - @mixin slab { p, a, diff --git a/scss/utilities/mixins/typography/_title.scss b/scss/utilities/mixins/typography/_title.scss deleted file mode 100644 index 0ac842700..000000000 --- a/scss/utilities/mixins/typography/_title.scss +++ /dev/null @@ -1,10 +0,0 @@ -@charset "UTF-8"; - -// -// Title -// - -@mixin title { - font-size: $title-font-size; - font-weight: $font-bold; -} diff --git a/scss/utilities/mixins/typography/index.scss b/scss/utilities/mixins/typography/index.scss index 6500229a5..5f76f0b3c 100644 --- a/scss/utilities/mixins/typography/index.scss +++ b/scss/utilities/mixins/typography/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Typography +// +// Mixins for Typography +// +// Style guide: Mixins.Typography +// @import 'caption', @@ -20,5 +24,4 @@ 'sans', 'serif', 'short-line-length', - 'slab', - 'title'; + 'slab'; diff --git a/scss/variables/components/_accordions.scss b/scss/variables/components/_accordions.scss index b7254e7f0..bf8f3836f 100644 --- a/scss/variables/components/_accordions.scss +++ b/scss/variables/components/_accordions.scss @@ -3,13 +3,7 @@ // // Accordions // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Accordions +// Style guide: Variables.Components.Accordions // // @@ -19,6 +13,6 @@ // // Markup: $accordion-border: 1px solid $color-driftwood !default; // -// Styleguide: Variables.Accordions.accordion-border +// Styleguide: Variables.Components.Accordions.accordion-border // $accordion-border: 1px solid $color-driftwood !default; diff --git a/scss/variables/components/_alerts.scss b/scss/variables/components/_alerts.scss index 03a332b63..9f062f623 100644 --- a/scss/variables/components/_alerts.scss +++ b/scss/variables/components/_alerts.scss @@ -3,23 +3,17 @@ // // Alerts // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Alerts +// Style guide: Variables.Components.Alerts // // // $decanter-custom-alerts // -// TODO: Joe to document this. +// Color map for custom alert components. // // Markup: $decanter-custom-alerts: () !default; // -// Styleguide: Variables.Alerts.decanter-custom-alerts +// Styleguide: Variables.Components.Alerts.decanter-custom-alerts // $decanter-custom-alerts: () !default; @@ -29,28 +23,31 @@ $decanter-custom-alerts: () !default; // Color map for alert components. // // Markup: $decanter-alerts: ( -// success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity -// warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity -// error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity -// info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity +// success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity +// warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity +// error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity +// info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity // ); // -// Styleguide: Variables.Alerts.decanter-alerts +// Styleguide: Variables.Components.Alerts.decanter-alerts // $decanter-alerts: ( - success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity - warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity - error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity - info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity + success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity + warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity + error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity + info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity ); // // $alerts // -// TODO: Joe to document this. +// Merges $decanter-alerts and $decanter-custom-alerts maps into a new, single +// map. +// Keys in $decanter-custom-alerts will take precedence over keys in +// $decanter-alerts. This is the best way to add new values to a map. // // Markup: $alerts: map-merge($decanter-alerts, $decanter-custom-alerts); // -// Styleguide: Variables.Alerts.alerts +// Styleguide: Variables.Components.Alerts.alerts // $alerts: map-merge($decanter-alerts, $decanter-custom-alerts); diff --git a/scss/variables/components/_navigation.scss b/scss/variables/components/_navigation.scss index 5f4a3132c..56c640c99 100644 --- a/scss/variables/components/_navigation.scss +++ b/scss/variables/components/_navigation.scss @@ -3,13 +3,7 @@ // // Navigation // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Navigation +// Style guide: Variables.Components.Navigation // // @@ -19,39 +13,39 @@ // // Markup: $z-index-nav: 9000 !default; // -// Styleguide: Variables.Navigation.z-index-nav +// Styleguide: Variables.Components.Navigation.z-index-nav // $z-index-nav: 9000 !default; // // $sliding-panel-width // -// TODO: Joe to document. +// Width of panel that slides open upon the mobile menu being expanded. // // Markup: $z-index-nav: 9000 !default; // -// Styleguide: Variables.Navigation.sliding-panel-width +// Styleguide: Variables.Components.Navigation.sliding-panel-width // $sliding-panel-width: 26rem !default; // // $z-index-main-menu // -// TODO: Joe to document. +// z-index of the main menu. // // Markup: $z-index-main-menu: 7000 !default; // -// Styleguide: Variables.Navigation.z-index-main-menu +// Styleguide: Variables.Components.Navigation.z-index-main-menu // $z-index-main-menu: 7000 !default; // // $z-index-overlay // -// TODO: Joe to document. +// z-index of the main menu overlay in mobile. // // Markup: $z-index-overlay: 8000 !default; // -// Styleguide: Variables.Navigation.z-index-overlay +// Styleguide: Variables.Components.Navigation.z-index-overlay // $z-index-overlay: 8000 !default; diff --git a/scss/variables/components/index.scss b/scss/variables/components/index.scss index af1c3dff5..c7a478d29 100644 --- a/scss/variables/components/index.scss +++ b/scss/variables/components/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Components +// +// Variables for components. +// +// Style guide: Variables.Components +// @import 'accordions', diff --git a/scss/variables/core/_asset-pipeline.scss b/scss/variables/core/_asset-pipeline.scss index 92655c711..3e93bd525 100644 --- a/scss/variables/core/_asset-pipeline.scss +++ b/scss/variables/core/_asset-pipeline.scss @@ -3,15 +3,8 @@ // // Rails // -// Every variable is declared as !default so that it can be -// overridden by a previous import. +// Style guide: Variables.Core.Rails // -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Rails -// - // // $asset-pipeline @@ -20,6 +13,6 @@ // // Markup: $asset-pipeline: false !default; // -// Styleguide: Variables.Rails.asset-pipeline +// Styleguide: Variables.Core.Rails.asset-pipeline // $asset-pipeline: false !default; diff --git a/scss/variables/core/_breakpoints.scss b/scss/variables/core/_breakpoints.scss index b7a10dc59..398f0b2f6 100644 --- a/scss/variables/core/_breakpoints.scss +++ b/scss/variables/core/_breakpoints.scss @@ -3,13 +3,7 @@ // // Breakpoints // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Breakpoints +// Style guide: Variables.Core.Breakpoints // // @@ -17,16 +11,16 @@ // // Markup: $small-screen: 481px !default; // -// Styleguide: Variables.Breakpoints.small-screen +// Styleguide: Variables.Core.Breakpoints.small-screen // -$small-screen: 481px !default; +$small-screen: 481px !default; // // $medium-screen // // Markup: $medium-screen: 600px !default; // -// Styleguide: Variables.Breakpoints.medium-screen +// Styleguide: Variables.Core.Breakpoints.medium-screen // $medium-screen: 600px !default; @@ -35,9 +29,9 @@ $medium-screen: 600px !default; // // Markup: $large-screen: 1201px !default; // -// Styleguide: Variables.Breakpoints.large-screen +// Styleguide: Variables.Core.Breakpoints.large-screen // -$large-screen: 1201px !default; +$large-screen: 1201px !default; // // $grid-columns-small @@ -46,9 +40,9 @@ $large-screen: 1201px !default; // // Markup: $grid-columns-small: 1 !default; // -// Styleguide: Variables.Breakpoints.grid-columns-small +// Styleguide: Variables.Core.Breakpoints.grid-columns-small // -$grid-columns-small: 1 !default; +$grid-columns-small: 1 !default; // // $grid-columns-medium @@ -57,7 +51,7 @@ $grid-columns-small: 1 !default; // // Markup: $grid-columns-medium: 6 !default; // -// Styleguide: Variables.Breakpoints.grid-columns-medium +// Styleguide: Variables.Core.Breakpoints.grid-columns-medium // $grid-columns-medium: 6 !default; @@ -68,9 +62,9 @@ $grid-columns-medium: 6 !default; // // Markup: $grid-columns-large: 12 !default; // -// Styleguide: Variables.Breakpoints.grid-columns-large +// Styleguide: Variables.Core.Breakpoints.grid-columns-large // -$grid-columns-large: 12 !default; +$grid-columns-large: 12 !default; // // $small @@ -79,7 +73,7 @@ $grid-columns-large: 12 !default; // // Markup: $small: new-breakpoint(min-width $small-screen $grid-columns-small) !default; // -// Styleguide: Variables.Breakpoints.small +// Styleguide: Variables.Core.Breakpoints.small // $small: new-breakpoint(min-width $small-screen $grid-columns-small) !default; @@ -90,7 +84,7 @@ $small: new-breakpoint(min-width $small-screen $grid-columns-small) !default; // // Markup: $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default; // -// Styleguide: Variables.Breakpoints.medium +// Styleguide: Variables.Core.Breakpoints.medium // $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default; @@ -101,6 +95,6 @@ $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default; // // Markup: $large: new-breakpoint(min-width $large-screen $grid-columns-large) !default; // -// Styleguide: Variables.Breakpoints.large +// Styleguide: Variables.Core.Breakpoints.large // $large: new-breakpoint(min-width $large-screen $grid-columns-large) !default; diff --git a/scss/variables/core/_colors.scss b/scss/variables/core/_colors.scss index 16613deaf..8477213e2 100644 --- a/scss/variables/core/_colors.scss +++ b/scss/variables/core/_colors.scss @@ -3,16 +3,12 @@ // // Colors // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// +// Default color palette. Primary colors include Cardinal Red, White, Cool Grey, +// and Black. All other colors are supporting colors. // See complete color palette at // http://identity.stanford.edu/color.html#digital-color. // -// Styleguide: Variables.Colors +// Style guide: Variables.Core.Colors // // @@ -20,277 +16,276 @@ // // Markup: $color-black: #2e2d29 !default; // -// Styleguide: Variables.Colors.black +// Styleguide: Variables.Core.Colors.black // -$color-black: #2e2d29 !default; +$color-black: #2e2d29 !default; // // $color-cardinal-red // -// Markup: $color-cardinal-red: #8c1515 !default; +// Markup: $color-cardinal-red: #8c1515 !default; // -// Styleguide: Variables.Colors.color-cardinal-red +// Styleguide: Variables.Core.Colors.color-cardinal-red // -$color-cardinal-red: #8c1515 !default; +$color-cardinal-red: #8c1515 !default; // // $color-cool-grey // -// Markup: $color-cool-grey: #4d4f53 !default; +// Markup: $color-cool-grey: #4d4f53 !default; // -// Styleguide: Variables.Colors.color-cool-grey +// Styleguide: Variables.Core.Colors.color-cool-grey // -$color-cool-grey: #4d4f53 !default; +$color-cool-grey: #4d4f53 !default; // // $color-white // -// Markup: $color-white: #ffffff !default; +// Markup: $color-white: #ffffff !default; // -// Styleguide: Variables.Colors.color-white +// Styleguide: Variables.Core.Colors.color-white // -$color-white: #ffffff !default; - +$color-white: #ffffff !default; // // $color-beige // -// Markup: $color-beige: #9d9573 !default; +// Markup: $color-beige: #9d9573 !default; // -// Styleguide: Variables.Colors.color-beige +// Styleguide: Variables.Core.Colors.color-beige // -$color-beige: #9d9573 !default; +$color-beige: #9d9573 !default; // // $color-blue // -// Markup: $color-blue: #00548f !default; +// Markup: $color-blue: #00548f !default; // -// Styleguide: Variables.Colors.color-blue +// Styleguide: Variables.Core.Colors.color-blue // -$color-blue: #00548f !default; +$color-blue: #00548f !default; // // $color-bright-blue // -// Markup: $color-bright-blue: #006cb8 !default; +// Markup: $color-bright-blue: #006cb8 !default; // -// Styleguide: Variables.Colors.color-bright-blue +// Styleguide: Variables.Core.Colors.color-bright-blue // -$color-bright-blue: #006cb8 !default; +$color-bright-blue: #006cb8 !default; // // $color-bright-red // -// Markup: $color-bright-red: #b1040e !default; +// Markup: $color-bright-red: #b1040e !default; // -// Styleguide: Variables.Colors.color-bright-red +// Styleguide: Variables.Core.Colors.color-bright-red // -$color-bright-red: #b1040e !default; +$color-bright-red: #b1040e !default; // // $color-brown // -// Markup: $color-brown: #5e3032 !default; +// Markup: $color-brown: #5e3032 !default; // -// Styleguide: Variables.Colors.color-brown +// Styleguide: Variables.Core.Colors.color-brown // -$color-brown: #5e3032 !default; +$color-brown: #5e3032 !default; // // $color-chocolate // -// Markup: $color-chocolate: #2f2424 !default; +// Markup: $color-chocolate: #2f2424 !default; // -// Styleguide: Variables.Colors.color-chocolate +// Styleguide: Variables.Core.Colors.color-chocolate // -$color-chocolate: #2f2424 !default; +$color-chocolate: #2f2424 !default; // // $color-clay // -// Markup: $color-clay: #5f574f !default; +// Markup: $color-clay: #5f574f !default; // -// Styleguide: Variables.Colors.color-clay +// Styleguide: Variables.Core.Colors.color-clay // -$color-clay: #5f574f !default; +$color-clay: #5f574f !default; // // $color-cloud // -// Markup: $color-cloud: #dad7cb !default; +// Markup: $color-cloud: #dad7cb !default; // -// Styleguide: Variables.Colors.color-cloud +// Styleguide: Variables.Core.Colors.color-cloud // -$color-cloud: #dad7cb !default; +$color-cloud: #dad7cb !default; // // $color-dark-red // -// Markup: $color-dark-red: #820000 !default; +// Markup: $color-dark-red: #820000 !default; // -// Styleguide: Variables.Colors.color-dark-red +// Styleguide: Variables.Core.Colors.color-dark-red // -$color-dark-red: #820000 !default; +$color-dark-red: #820000 !default; // // $color-driftwood // -// Markup: $color-driftwood: #b6b1a9 !default; +// Markup: $color-driftwood: #b6b1a9 !default; // -// Styleguide: Variables.Colors.color-driftwood +// Styleguide: Variables.Core.Colors.color-driftwood // -$color-driftwood: #b6b1a9 !default; +$color-driftwood: #b6b1a9 !default; // // $color-fog // -// Markup: $color-fog: #f4f4f4 !default; +// Markup: $color-fog: #f4f4f4 !default; // -// Styleguide: Variables.Colors.color-fog +// Styleguide: Variables.Core.Colors.color-fog // -$color-fog: #f4f4f4 !default; +$color-fog: #f4f4f4 !default; // // $color-gold // -// Markup: $color-gold: #b26f16 !default; +// Markup: $color-gold: #b26f16 !default; // -// Styleguide: Variables.Colors.color-gold +// Styleguide: Variables.Core.Colors.color-gold // -$color-gold: #b26f16 !default; +$color-gold: #b26f16 !default; // // $color-lagunita // -// Markup: $color-lagunita: #007c92 !default; +// Markup: $color-lagunita: #007c92 !default; // -// Styleguide: Variables.Colors.color-lagunita +// Styleguide: Variables.Core.Colors.color-lagunita // -$color-lagunita: #007c92 !default; +$color-lagunita: #007c92 !default; // // $color-light-sage // -// Markup: $color-light-sage: #c7d1c5 !default; +// Markup: $color-light-sage: #c7d1c5 !default; // -// Styleguide: Variables.Colors.color-light-sage +// Styleguide: Variables.Core.Colors.color-light-sage // -$color-light-sage: #c7d1c5 !default; +$color-light-sage: #c7d1c5 !default; // // $color-light-sandstone // -// Markup: $color-light-sandstone: #f9f6ef !default; +// Markup: $color-light-sandstone: #f9f6ef !default; // -// Styleguide: Variables.Colors.color-light-sandstone +// Styleguide: Variables.Core.Colors.color-light-sandstone // -$color-light-sandstone: #f9f6ef !default; +$color-light-sandstone: #f9f6ef !default; // // $color-mint // -// Markup: $color-mint: #009b76 !default; +// Markup: $color-mint: #009b76 !default; // -// Styleguide: Variables.Colors.color-mint +// Styleguide: Variables.Core.Colors.color-mint // -$color-mint: #009b76 !default; +$color-mint: #009b76 !default; // // $color-poppy // -// Markup: $color-poppy: #e98300 !default; +// Markup: $color-poppy: #e98300 !default; // -// Styleguide: Variables.Colors.color-poppy +// Styleguide: Variables.Core.Colors.color-poppy // -$color-poppy: #e98300 !default; +$color-poppy: #e98300 !default; // // $color-palo-alto // -// Markup: $color-palo-alto: #175e54 !default; +// Markup: $color-palo-alto: #175e54 !default; // -// Styleguide: Variables.Colors.color-palo-alto +// Styleguide: Variables.Core.Colors.color-palo-alto // -$color-palo-alto: #175e54 !default; +$color-palo-alto: #175e54 !default; // // $color-purple // -// Markup: $color-purple: #53284f !default; +// Markup: $color-purple: #53284f !default; // -// Styleguide: Variables.Colors.color-purple +// Styleguide: Variables.Core.Colors.color-purple // -$color-purple: #53284f !default; +$color-purple: #53284f !default; // // $color-redwood // -// Markup: $color-redwood: #8d3c1e !default; +// Markup: $color-redwood: #8d3c1e !default; // -// Styleguide: Variables.Colors.color-redwood +// Styleguide: Variables.Core.Colors.color-redwood // -$color-redwood: #8d3c1e !default; +$color-redwood: #8d3c1e !default; // // $color-sandhill // -// Markup: $color-sandhill: #b3995d !default; +// Markup: $color-sandhill: #b3995d !default; // -// Styleguide: Variables.Colors.color-sandhill +// Styleguide: Variables.Core.Colors.color-sandhill // -$color-sandhill: #b3995d !default; +$color-sandhill: #b3995d !default; // // $color-sandstone // -// Markup: $color-sandstone: #d2c295 !default; +// Markup: $color-sandstone: #d2c295 !default; // -// Styleguide: Variables.Colors.color-sandstone +// Styleguide: Variables.Core.Colors.color-sandstone // -$color-sandstone: #d2c295 !default; +$color-sandstone: #d2c295 !default; // // $color-sky // -// Markup: $color-sky: #0098db !default; +// Markup: $color-sky: #0098db !default; // -// Styleguide: Variables.Colors.color-sky +// Styleguide: Variables.Core.Colors.color-sky // -$color-sky: #0098db !default; +$color-sky: #0098db !default; // // $color-stone // -// Markup: $color-stone: #544948 !default; +// Markup: $color-stone: #544948 !default; // -// Styleguide: Variables.Colors.color-stone +// Styleguide: Variables.Core.Colors.color-stone // -$color-stone: #544948 !default; +$color-stone: #544948 !default; // // $color-sun // -// Markup: $color-sun: #eaab00 !default; +// Markup: $color-sun: #eaab00 !default; // -// Styleguide: Variables.Colors.color-sun +// Styleguide: Variables.Core.Colors.color-sun // -$color-sun: #eaab00 !default; +$color-sun: #eaab00 !default; // // $color-teal // -// Markup: $color-teal: #00505c !default; +// Markup: $color-teal: #00505c !default; // -// Styleguide: Variables.Colors.color-teal +// Styleguide: Variables.Core.Colors.color-teal // -$color-teal: #00505c !default; +$color-teal: #00505c !default; // // $color-warm-grey // -// Markup: $color-warm-grey: #3f3c30 !default; +// Markup: $color-warm-grey: #3f3c30 !default; // -// Styleguide: Variables.Colors.color-warm-grey +// Styleguide: Variables.Core.Colors.color-warm-grey // -$color-warm-grey: #3f3c30 !default; +$color-warm-grey: #3f3c30 !default; diff --git a/scss/variables/core/_file-paths.scss b/scss/variables/core/_file-paths.scss index c2fa73afc..11c2634dc 100644 --- a/scss/variables/core/_file-paths.scss +++ b/scss/variables/core/_file-paths.scss @@ -3,13 +3,7 @@ // // File Paths // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Paths +// Style guide: Variables.Core.Paths // // @@ -19,9 +13,9 @@ // // Markup: $font-path: '../fonts' !default; // -// Styleguide: Variables.Paths.font +// Styleguide: Variables.Core.Paths.font // -$font-path: '../fonts' !default; +$font-path: '../fonts' !default; // // $image-path @@ -30,6 +24,6 @@ $font-path: '../fonts' !default; // // Markup: $image-path: '../img' !default; // -// Styleguide: Variables.Paths.image +// Styleguide: Variables.Core.Paths.image // -$image-path: '../img' !default; +$image-path: '../img' !default; diff --git a/scss/variables/core/_magic-numbers.scss b/scss/variables/core/_magic-numbers.scss index 7c614a88e..46060596f 100644 --- a/scss/variables/core/_magic-numbers.scss +++ b/scss/variables/core/_magic-numbers.scss @@ -3,145 +3,128 @@ // // Magic Numbers // -// Every variable is declared as !default so that it can be -// overridden by a previous import. +// Unique and resuable values with multiple occurrences. // -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. +// Style guide: Variables.Core.Magic // -// Styleguide: Variables.Magic -// - // // $text-max-width // -// TODO: Joe to document. +// For setting a max-width to a portion of text. // -// Markup: $text-max-width: 70rem !default; +// Markup: $text-max-width: 70rem !default; // -// Styleguide: Variables.Magic.text-max-width +// Styleguide: Variables.Core.Magic.text-max-width // -$text-max-width: 70rem !default; +$text-max-width: 70rem !default; // // $lead-max-width // -// TODO: Joe to document. +// For setting the max-width for the lead font style. // -// Markup: $lead-max-width: 85rem !default; +// Markup: $lead-max-width: 85rem !default; // -// Styleguide: Variables.Magic.lead-max-width +// Styleguide: Variables.Core.Magic.lead-max-width // -$lead-max-width: 85rem !default; +$lead-max-width: 85rem !default; // // $site-max-width // -// TODO: Joe to document. +// For setting the max-width of the project's grid system. // -// Markup: $site-max-width: 1220px !default; +// Markup: $site-max-width: 1220px !default; // -// Styleguide: Variables.Magic.site-max-width +// Styleguide: Variables.Core.Magic.site-max-width // -$site-max-width: 1220px !default; +$site-max-width: 1220px !default; // // $site-margins // -// TODO: Joe to document. +// For setting the margins of the project's grid system. // -// Markup: $site-margins: 3rem !default; +// Markup: $site-margins: 3rem !default; // -// Styleguide: Variables.Magic.site-margins +// Styleguide: Variables.Core.Magic.site-margins // $site-margins: 3rem !default; // // $site-margins-mobile // -// TODO: Joe to document. +// For setting the margins of the project's grid system in mobile. // // Markup: $site-margins-mobile: 1.5rem !default; // -// Styleguide: Variables.Magic.site-margins-mobile +// Styleguide: Variables.Core.Magic.site-margins-mobile // $site-margins-mobile: 1.5rem !default; -// -// $article-max-width -// -// TODO: Joe to document. -// -// Markup: $article-max-width: 600px !default; -// -// Styleguide: Variables.Magic.article-max-width -// -$article-max-width: 600px !default; - // // $input-max-width // -// TODO: Joe to document. +// For setting the max-width of input fields. // -// Markup: $input-max-width: 46rem !default; +// Markup: $input-max-width: 46rem !default; // -// Styleguide: Variables.Magic.input-max-width +// Styleguide: Variables.Core.Magic.input-max-width // -$input-max-width: 46rem !default; +$input-max-width: 46rem !default; // // $border-radius // -// TODO: Joe to document. +// For setting the default border-radius. // -// Markup: $border-radius: 3px !default; +// Markup: $border-radius: 3px !default; // -// Styleguide: Variables.Magic.border-radius +// Styleguide: Variables.Core.Magic.border-radius // -$border-radius: 3px !default; +$border-radius: 3px !default; // // $box-shadow // -// TODO: Joe to document. +// For settings the default box-shadow. // -// Markup: $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default; +// Markup: $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default; // -// Styleguide: Variables.Magic.box-shadow +// Styleguide: Variables.Core.Magic.box-shadow // -$box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default; +$box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default; // // $focus-shadow // -// TODO: Joe to document. +// For settings the default focus to be applied to items in their focus state. // -// Markup: $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; +// Markup: $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; // -// Styleguide: Variables.Magic.focus-shadow +// Styleguide: Variables.Core.Magic.focus-shadow // -$focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; +$focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; // // $nav-width // -// TODO: Joe to document. +// For setting the width of the navigation. // -// Markup: $nav-width: 951px !default; +// Markup: $nav-width: 951px !default; // -// Styleguide: Variables.Magic.nav-width +// Styleguide: Variables.Core.Magic.nav-width // -$nav-width: 951px !default; +$nav-width: 951px !default; // // $hit-area // -// 44 x 44 pixels hit target following Apple iOS Human Interface -// Guidelines. +// 44 x 44 pixels hit target following Apple iOS Human Interface Guidelines. // // Markup: $hit-area: 4.4rem !default; // -// Styleguide: Variables.Magic.hit-area +// Styleguide: Variables.Core.Magic.hit-area // $hit-area: 4.4rem !default; diff --git a/scss/variables/core/_typography.scss b/scss/variables/core/_typography.scss index ee04a947a..d4b731c57 100644 --- a/scss/variables/core/_typography.scss +++ b/scss/variables/core/_typography.scss @@ -3,139 +3,131 @@ // // Typography // -// Every variable is declared as !default so that it can be -// overridden by a previous import. +// Style guide: Variables.Core.Typography // -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Removing the !default from $em-base so we are not inheriting that -// value from Bourbon. -// -// Styleguide: Variables.Typography -// - // // $em-base // // Font size. +// Removing the !default from $em-base so we are not inheriting that +// value from Bourbon. // -// Markup: $em-base: 10px; +// Markup: $em-base: 10px; // -// Styleguide: Variables.Typography.em-base +// Style guide: Variables.Core.Typography.em-base // -$em-base: 10px; +$em-base: 10px; // // $base-font-size // // Font size. // -// Markup: $base-font-size: 2rem !default; +// Markup: $base-font-size: 2rem !default; // -// Styleguide: Variables.Typography.base-font-size +// Style guide: Variables.Core.Typography.base-font-size // -$base-font-size: 2rem !default; +$base-font-size: 2rem !default; // // $small-font-size // // Font size. // -// Markup: $small-font-size: 1.7rem !default; +// Markup: $small-font-size: 1.7rem !default; // -// Styleguide: Variables.Typography.small-font-size +// Style guide: Variables.Core.Typography.small-font-size // -$small-font-size: 1.7rem !default; +$small-font-size: 1.7rem !default; // // $lead-font-size // // Font size. // -// Markup: $lead-font-size: 2.3rem !default; +// Markup: $lead-font-size: 2.3rem !default; // -// Styleguide: Variables.Typography.lead-font-size +// Style guide: Variables.Core.Typography.lead-font-size // -$lead-font-size: 2.3rem !default; +$lead-font-size: 2.3rem !default; // -// $title-font-size +// $splash-font-size // // Font size. // -// Markup: $title-font-size: 5.5rem !default; +// Markup: $splash-font-size: 5.5rem !default; // -// Styleguide: Variables.Typography.title-font-size +// Style guide: Variables.Core.Typography.splash-font-size // -$title-font-size: 5.5rem !default; +$splash-font-size: 5.5rem !default; // // $h1-font-size // // Font size. // -// Markup: $h1-font-size: 4.3rem !default; +// Markup: $h1-font-size: 4.3rem !default; // -// Styleguide: Variables.Typography.h1-font-size +// Style guide: Variables.Core.Typography.h1-font-size // -$h1-font-size: 4.3rem !default; +$h1-font-size: 4.3rem !default; // // $h2-font-size // // Font size. // -// Markup: $h2-font-size: 3.3rem !default; +// Markup: $h2-font-size: 3.3rem !default; // -// Styleguide: Variables.Typography.h2-font-size +// Style guide: Variables.Core.Typography.h2-font-size // -$h2-font-size: 3.3rem !default; +$h2-font-size: 3.3rem !default; // // $h3-font-size // // Font size. // -// Markup: $h3-font-size: 2.3rem !default; +// Markup: $h3-font-size: 2.3rem !default; // -// Styleguide: Variables.Typography.h3-font-size +// Style guide: Variables.Core.Typography.h3-font-size // -$h3-font-size: 2.3rem !default; +$h3-font-size: 2.3rem !default; // // $h4-font-size // // Font size. // -// Markup: $h4-font-size: 2rem !default; +// Markup: $h4-font-size: 2rem !default; // -// Styleguide: Variables.Typography.h4-font-size +// Style guide: Variables.Core.Typography.h4-font-size // -$h4-font-size: 2rem !default; +$h4-font-size: 2rem !default; // // $h5-font-size // // Font size. // -// Markup: $h5-font-size: 1.8rem !default; +// Markup: $h5-font-size: 1.8rem !default; // -// Styleguide: Variables.Typography.h5-font-size +// Style guide: Variables.Core.Typography.h5-font-size // -$h5-font-size: 1.8rem !default; +$h5-font-size: 1.8rem !default; // // $h6-font-size // // Font size. // -// Markup: $h6-font-size: 1.6rem !default; +// Markup: $h6-font-size: 1.6rem !default; // -// Styleguide: Variables.Typography.h6-font-size +// Style guide: Variables.Core.Typography.h6-font-size // -$h6-font-size: 1.6rem !default; +$h6-font-size: 1.6rem !default; // @@ -143,11 +135,11 @@ $h6-font-size: 1.6rem !default; // // Default line height. // -// Markup: $base-line-height: 1.4 !default; +// Markup: $base-line-height: 1.4 !default; // -// Styleguide: Variables.Typography.base-line-height +// Style guide: Variables.Core.Typography.base-line-height // -$base-line-height: 1.4 !default; +$base-line-height: 1.4 !default; // // $heading-line-height @@ -156,7 +148,7 @@ $base-line-height: 1.4 !default; // // Markup: $heading-line-height: 1.2 !default; // -// Styleguide: Variables.Typography.heading-line-height +// Style guide: Variables.Core.Typography.heading-line-height // $heading-line-height: 1.2 !default; @@ -165,11 +157,11 @@ $heading-line-height: 1.2 !default; // // Default line height. // -// Markup: $lead-line-height: 1.5 !default; +// Markup: $lead-line-height: 1.5 !default; // -// Styleguide: Variables.Typography.lead-line-height +// Style guide: Variables.Core.Typography.lead-line-height // -$lead-line-height: 1.5 !default; +$lead-line-height: 1.5 !default; // @@ -177,33 +169,33 @@ $lead-line-height: 1.5 !default; // // font-sans Font family. // -// Markup: $font-sans: 'Source Sans Pro', $helvetica !default; +// Markup: $font-sans: 'Source Sans Pro', $helvetica !default; // -// Styleguide: Variables.Typography.font-sans +// Style guide: Variables.Core.Typography.font-sans // -$font-sans: 'Source Sans Pro', $helvetica !default; +$font-sans: 'Source Sans Pro', $helvetica !default; // // $font-serif // // font-serif Font family. // -// Markup: $font-serif: 'Crimson Text', $georgia !default; +// Markup: $font-serif: 'Crimson Text', $georgia !default; // -// Styleguide: Variables.Typography.font-serif +// Style guide: Variables.Core.Typography.font-serif // -$font-serif: 'Crimson Text', $georgia !default; +$font-serif: 'Crimson Text', $georgia !default; // // $font-slab // // font-slab Font family. // -// Markup: $font-slab: 'Roboto Slab', $georgia !default; +// Markup: $font-slab: 'Roboto Slab', $georgia !default; // -// Styleguide: Variables.Typography.font-slab +// Style guide: Variables.Core.Typography.font-slab // -$font-slab: 'Roboto Slab', $georgia !default; +$font-slab: 'Roboto Slab', $georgia !default; // @@ -211,52 +203,52 @@ $font-slab: 'Roboto Slab', $georgia !default; // // font-x-light Font weight. // -// Markup: $font-x-light: 100 !default; +// Markup: $font-x-light: 100 !default; // -// Styleguide: Variables.Typography.font-x-light +// Style guide: Variables.Core.Typography.font-x-light // -$font-x-light: 100 !default; +$font-x-light: 100 !default; // // $font-light // // font-light Font weight. // -// Markup: $font-light: 200 !default; +// Markup: $font-light: 200 !default; // -// Styleguide: Variables.Typography.font-light +// Style guide: Variables.Core.Typography.font-light // -$font-light: 200 !default; +$font-light: 200 !default; // // $font-normal // // font-normal Font weight. // -// Markup: $font-normal: 400 !default; +// Markup: $font-normal: 400 !default; // -// Styleguide: Variables.Typography.font-normal +// Style guide: Variables.Core.Typography.font-normal // -$font-normal: 400 !default; +$font-normal: 400 !default; // // $font-bold // // font-bold Font weight. // -// Markup: $font-bold: 600 !default; +// Markup: $font-bold: 600 !default; // -// Styleguide: Variables.Typography.font-bold +// Style guide: Variables.Core.Typography.font-bold // -$font-bold: 600 !default; +$font-bold: 600 !default; // // $font-x-bold // // font-x-bold Font weight. // -// Markup: $font-x-bold: 700 !default; +// Markup: $font-x-bold: 700 !default; // -// Styleguide: Variables.Typography.font-x-bold +// Style guide: Variables.Core.Typography.font-x-bold // -$font-x-bold: 700 !default; +$font-x-bold: 700 !default; diff --git a/scss/variables/core/index.scss b/scss/variables/core/index.scss index 8d3ffd60b..d9a155d08 100644 --- a/scss/variables/core/index.scss +++ b/scss/variables/core/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Core +// +// Variables for core settings. +// +// Style guide: Variables.Core +// @import 'asset-pipeline', diff --git a/scss/variables/elements/_buttons.scss b/scss/variables/elements/_buttons.scss index 6ec76f735..bc3592fda 100644 --- a/scss/variables/elements/_buttons.scss +++ b/scss/variables/elements/_buttons.scss @@ -3,15 +3,8 @@ // // Buttons // -// Every variable is declared as !default so that it can be -// overridden by a previous import. +// Style guide: Variables.Elements.Buttons // -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Buttons -// - // // $button-stroke @@ -20,6 +13,6 @@ // // Markup: $button-stroke: inset 0 0 0 2px !default; // -// Styleguide: Variables.Buttons.Stroke +// Styleguide: Variables.Elements.Buttons.Stroke // $button-stroke: inset 0 0 0 2px !default; diff --git a/scss/variables/elements/_embed.scss b/scss/variables/elements/_embed.scss index 6ca3806bb..017d876e6 100644 --- a/scss/variables/elements/_embed.scss +++ b/scss/variables/elements/_embed.scss @@ -3,34 +3,27 @@ // // Embed // -// Every variable is declared as !default so that it can be -// overridden by a previous import. +// Style guide: Variables.Elements.Embed // -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Embed -// - // // $aspect-height // -// Default Aspect Height Setting. +// Default aspect height setting. // // Markup: $aspect-height: 9; // -// Styleguide: Variables.Embed.Aspect-Height +// Styleguide: Variables.Elements.Embed.Aspect-Height // $aspect-height: 9 !default; // // $aspect-width // -// Default Aspect Width Setting. +// Default aspect width setting. // // Markup: $aspect-width: 16; // -// Styleguide: Variables.Embed.Aspect-Width +// Styleguide: Variables.Elements.Embed.Aspect-Width // $aspect-width: 16 !default; diff --git a/scss/variables/elements/_inputs.scss b/scss/variables/elements/_inputs.scss index 425a7c114..5ad4988fe 100644 --- a/scss/variables/elements/_inputs.scss +++ b/scss/variables/elements/_inputs.scss @@ -3,13 +3,7 @@ // // Inputs // -// Every variable is declared as !default so that it can be -// overridden by a previous import. -// -// If you want to override a variable, set that variable in one of your -// own partials, then @import '{path/to/}core/variables'. -// -// Styleguide: Variables.Inputs +// Style guide: Variables.Elements.Inputs // // @@ -19,9 +13,9 @@ // // Markup: $input-line-height: 1.3; // -// Styleguide: Variables.Inputs.line-height +// Styleguide: Variables.Elements.Inputs.line-height // -$input-line-height: 1.3; +$input-line-height: 1.3; // // $input-border-width @@ -30,7 +24,7 @@ $input-line-height: 1.3; // // Markup: $input-border-width: 0.1rem; // -// Styleguide: Variables.Inputs.border-width +// Styleguide: Variables.Elements.Inputs.border-width // $input-border-width: 0.1rem; @@ -42,7 +36,7 @@ $input-border-width: 0.1rem; // // Markup: $input-padding-vertical: 1rem; // -// Styleguide: Variables.Inputs.padding-vertical +// Styleguide: Variables.Elements.Inputs.padding-vertical // $input-padding-vertical: 1rem; @@ -54,7 +48,7 @@ $input-padding-vertical: 1rem; // // Markup: $input-height-exact: $base-font-size * $input-line-height + $input-padding-vertical * 2 + $input-border-width * 2; // -// Styleguide: Variables.Inputs.height-exact +// Styleguide: Variables.Elements.Inputs.height-exact // $input-height-exact: $base-font-size * $input-line-height + $input-padding-vertical * 2 + $input-border-width * 2; @@ -66,6 +60,6 @@ $input-height-exact: $base-font-size * $input-line-height + $input-padding-verti // // Markup: $input-height: floor($input-height-exact * 10) / 10; // -// Styleguide: Variables.Inputs.input-height +// Styleguide: Variables.Elements.Inputs.input-height // $input-height: floor($input-height-exact * 10) / 10; diff --git a/scss/variables/elements/index.scss b/scss/variables/elements/index.scss index ec0aea885..db50024cc 100644 --- a/scss/variables/elements/index.scss +++ b/scss/variables/elements/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Elements +// +// Variables for core elements. +// +// Style guide: Variables.Elements +// @import 'buttons', diff --git a/scss/variables/index.scss b/scss/variables/index.scss index af379e958..1a4382e13 100644 --- a/scss/variables/index.scss +++ b/scss/variables/index.scss @@ -3,6 +3,14 @@ // // Variables // +// Variables are a way to store information that will be reused throughout a +// project. They store things like colors and fonts, or any CSS value that'll be +// reused. +// Every variable is declared as !default so that it can be +// overridden by a previous import. +// If you want to override a variable, set that variable in one of your +// own partials, then @import '{path/to/}core/variables'. +// // Style guide: Variables // Load order convention exception diff --git a/scss/variables/pre-vendor/index.scss b/scss/variables/pre-vendor/index.scss index e37d4cbd8..5aa6ff8a7 100644 --- a/scss/variables/pre-vendor/index.scss +++ b/scss/variables/pre-vendor/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Pre Vendor +// +// Variables that need to be set before including vendor files. +// +// Style guide: Variables.Vendor +// // Any settings that need to be defined BEFORE including // vendor dependencies. diff --git a/styleguide/index.html b/styleguide/index.html index ee1596c51..2f49e8abb 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -27,33 +27,48 @@

Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • diff --git a/styleguide/item-components-atoms-buttons.html b/styleguide/item-components-atoms-buttons.html new file mode 100644 index 000000000..4336f84ab --- /dev/null +++ b/styleguide/item-components-atoms-buttons.html @@ -0,0 +1,212 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 1.1.1 + + Components.Atoms.Buttons + + + Buttons + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Simple button element to aid in creating interactive design.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    + Button Title + +
    +
    + +
    + .decanter-button--secondary +
    +
    + Secondary button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--big +
    +
    + Big button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--unstyled +
    +
    + Unstyled button +
    +
    + Button Title + +
    +
    +
    +
    + + Markup: ../templates/components/atoms/buttons/buttons.html.twig + + 
    <a href="#" class="decanter-button [modifier class]">Button Title</a>
+
    +
    + +
    + Source: components/atoms/_buttons.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-components-atoms-mediablockbody.html b/styleguide/item-components-atoms-mediablockbody.html index 505fefdb6..0f4fb7833 100644 --- a/styleguide/item-components-atoms-mediablockbody.html +++ b/styleguide/item-components-atoms-mediablockbody.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins + +
    • +
  • + + 7Molecules
  • - - 5Templates + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 1.1.1 + 2.1.1 Components.Atoms.MediaBlockBody @@ -108,7 +123,8 @@

    -

    TODO: Describe what this does. Does this really need to exist?

    +

    Allows for text that is next to a floated media block image to flow within +the grid without dropping to a new line prematurely.

    @@ -139,7 +155,7 @@

    Lorem ipsum dolor sit

    - Source: components/atoms/_media-block.scss, line 17 + Source: components/atoms/_media-block.scss, line 18
    diff --git a/styleguide/item-components-atoms-mediablockimg.html b/styleguide/item-components-atoms-mediablockimg.html index 7042eed07..259e3012e 100644 --- a/styleguide/item-components-atoms-mediablockimg.html +++ b/styleguide/item-components-atoms-mediablockimg.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library
  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 1.1.2 + 1.1.3 Components.Atoms.MediaBlockImg @@ -108,7 +108,8 @@

    -

    TODO: Describe what this does.

    +

    Floats an image to the left and provides a specified margin right. To be used +when floating images alongside other content.

    diff --git a/styleguide/item-components-atoms-skipnav.html b/styleguide/item-components-atoms-skipnav.html index 455aa8b06..c884d0b21 100644 --- a/styleguide/item-components-atoms-skipnav.html +++ b/styleguide/item-components-atoms-skipnav.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library

  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 1.1.3 + 1.1.4 Components.Atoms.Skipnav diff --git a/styleguide/item-components-atoms.html b/styleguide/item-components-atoms.html index 65d704a92..8d4f2c8e5 100644 --- a/styleguide/item-components-atoms.html +++ b/styleguide/item-components-atoms.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins + +
    • +
  • + + 7Molecules
  • - - 5Templates + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 1.1 + 2.1 Components.Atoms diff --git a/styleguide/item-components-molecules-alerts.html b/styleguide/item-components-molecules-alerts.html index de0c1e9ce..9a8eed944 100644 --- a/styleguide/item-components-molecules-alerts.html +++ b/styleguide/item-components-molecules-alerts.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library
  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • diff --git a/styleguide/item-components-molecules-icongrid.html b/styleguide/item-components-molecules-icongrid.html index ed4f729d6..b307b3d42 100644 --- a/styleguide/item-components-molecules-icongrid.html +++ b/styleguide/item-components-molecules-icongrid.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library

  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • diff --git a/styleguide/item-components-molecules-mainmenu.html b/styleguide/item-components-molecules-mainmenu.html index 9e809d0b9..af51a8b4f 100644 --- a/styleguide/item-components-molecules-mainmenu.html +++ b/styleguide/item-components-molecules-mainmenu.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library

  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • diff --git a/styleguide/item-components-molecules-mega-menu.html b/styleguide/item-components-molecules-mega-menu.html index c9b391989..bdef38e85 100644 --- a/styleguide/item-components-molecules-mega-menu.html +++ b/styleguide/item-components-molecules-mega-menu.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library

  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • @@ -108,7 +108,9 @@

    -

    This is a mega menu.

    +

    An expandable menu in which choices are displayed in a two-dimensional +dropdown layout. Excellent design choice for accommodating a large number of +options or for revealing lower-level site pages at a glance.

    diff --git a/styleguide/item-components-molecules-sidenav.html b/styleguide/item-components-molecules-sidenav.html new file mode 100644 index 000000000..a8707ba1d --- /dev/null +++ b/styleguide/item-components-molecules-sidenav.html @@ -0,0 +1,252 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 1.2.5 + + Components.Molecules.Sidenav + + + Sidenav + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    A side navigation component.

    + +
    + +
    + +
    +
    + Example
    + + +
    +

    Single Level

    + + +

    Two Levels

    + + +

    Three Levels

    + + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/sidenav/sidenav.html.twig + + 
    <h3>Single Level</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Two Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Three Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+          <ul class="decanter-sidenav__sublist">
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a class='decanter-nav__current' href=''#'>Active grandchild link</a></li>
+          </ul>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
    +
    + +
    + Source: components/molecules/_sidenav.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-components-molecules.html b/styleguide/item-components-molecules.html index 4765081fa..5e6db0dc4 100644 --- a/styleguide/item-components-molecules.html +++ b/styleguide/item-components-molecules.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins + +
    • +
  • + + 7Molecules
  • - - 5Templates + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 1.2 + 2.2 Components.Molecules diff --git a/styleguide/item-components-organisims-accordion.html b/styleguide/item-components-organisims-accordion.html index 6fae9a43a..a043b24fb 100644 --- a/styleguide/item-components-organisims-accordion.html +++ b/styleguide/item-components-organisims-accordion.html @@ -37,18 +37,18 @@

    Decanter Style Guide and Pattern Library
  • - - 3Functions + + 3Elements
  • - - 4Mixins + + 4Functions
  • - - 5Templates + + 5Mixins
  • diff --git a/styleguide/item-components-organisims.html b/styleguide/item-components-organisims.html index 5f393af31..d66512d16 100644 --- a/styleguide/item-components-organisims.html +++ b/styleguide/item-components-organisims.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins + +
    • +
  • + + 7Molecules
  • - - 5Templates + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 1.3 + 2.3 Components.Organisims diff --git a/styleguide/item-mixins-banners.html b/styleguide/item-components-organisms.html similarity index 93% rename from styleguide/item-mixins-banners.html rename to styleguide/item-components-organisms.html index 2eab466b1..4cdbfaa6c 100644 --- a/styleguide/item-mixins-banners.html +++ b/styleguide/item-components-organisms.html @@ -62,17 +62,17 @@

    Decanter Style Guide and Pattern Library

    -
    +

    - + - 4.4 + 1.4 - Mixins.Banners + Components.Organisms - Mixins.Banners + Components.Organisms

    diff --git a/styleguide/item-components-templates.html b/styleguide/item-components-templates.html new file mode 100644 index 000000000..84d74459a --- /dev/null +++ b/styleguide/item-components-templates.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-components.html b/styleguide/item-components.html index 963f3e7c9..e8804f09a 100644 --- a/styleguide/item-components.html +++ b/styleguide/item-components.html @@ -27,101 +27,74 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins + +
    • +
  • + + 7Molecules
  • - - 5Templates + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -135,7 +108,7 @@

    Decanter Style Guide and Pattern Library

    - 1 + 2 Components diff --git a/styleguide/item-core-colors.html b/styleguide/item-core-colors.html index 365e68617..1a56b223e 100644 --- a/styleguide/item-core-colors.html +++ b/styleguide/item-core-colors.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 2.1 + 5.1 Core.Colors @@ -76,13 +91,308 @@

    +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    - +
    +
    + Example
    + + +
    +
    +
    Black
    +
    #2e2d29
    +
    +
    +
    Cardinal Red
    +
    #8c1515
    +
    +
    +
    Cool Grey
    +
    #4d4f53
    +
    +
    +
    White
    +
    #ffffff
    +
    +
    +
    Beige
    +
    #9d9573
    +
    +
    +
    Blue
    +
    #00548f
    +
    +
    +
    Bright Blue
    +
    #006cb8
    +
    +
    +
    Bright Red
    +
    #b1040e
    +
    +
    +
    Brown
    +
    #5e3032
    +
    +
    +
    Chocolate
    +
    #2f2424
    +
    +
    +
    Clay
    +
    #5f574f
    +
    +
    +
    Cloud
    +
    #dad7cb
    +
    +
    +
    Dark Red
    +
    #820000
    +
    +
    +
    Driftwood
    +
    #b6b1a9
    +
    +
    +
    Fog
    +
    #f4f4f4
    +
    +
    +
    Gold
    +
    #b26f16
    +
    +
    +
    Lagunita
    +
    #007c92
    +
    +
    +
    Light Sage
    +
    #c7d1c5
    +
    +
    +
    Light Sandstone
    +
    #f9f6ef
    +
    +
    +
    Mint
    +
    #009b76
    +
    +
    +
    Poppy
    +
    #e98300
    +
    +
    +
    Palo Alto
    +
    #175e54
    +
    +
    +
    Purple
    +
    #53284f
    +
    +
    +
    Redwood
    +
    #8d3c1e
    +
    +
    +
    Sandhill
    +
    #b3995d
    +
    +
    +
    Sandstone
    +
    #d2c295
    +
    +
    +
    Sky
    +
    #0098db
    +
    +
    +
    Stone
    +
    #544948
    +
    +
    +
    Sun
    +
    #eaab00
    +
    +
    +
    Teal
    +
    #00505c
    +
    +
    +
    Warm Grey
    +
    #3f3c30
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/core/colors/colors.html.twig + + 
    <div class="decanter-width-one-sixth" style="background: #2e2d29; color: #ffffff;">
+  <div>Black</div>
+  <div>#2e2d29</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #8c1515; color: #ffffff;">
+  <div>Cardinal Red</div>
+  <div>#8c1515</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #4d4f53; color: #ffffff;">
+  <div>Cool Grey</div>
+  <div>#4d4f53</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #ffffff;">
+  <div>White</div>
+  <div>#ffffff</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #9d9573;">
+  <div>Beige</div>
+  <div>#9d9573</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #00548f;">
+  <div>Blue</div>
+  <div>#00548f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #006cb8;">
+  <div>Bright Blue</div>
+  <div>#006cb8</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b1040e; color: #ffffff;">
+  <div>Bright Red</div>
+  <div>#b1040e</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #5e3032; color: #ffffff;">
+  <div>Brown</div>
+  <div>#5e3032</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #2f2424; color: #ffffff;">
+  <div>Chocolate</div>
+  <div>#2f2424</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #5f574f; color: #ffffff;">
+  <div>Clay</div>
+  <div>#5f574f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #dad7cb;">
+  <div>Cloud</div>
+  <div>#dad7cb</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #820000;">
+  <div>Dark Red</div>
+  <div>#820000</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b6b1a9;">
+  <div>Driftwood</div>
+  <div>#b6b1a9</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #f4f4f4;">
+  <div>Fog</div>
+  <div>#f4f4f4</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b26f16;">
+  <div>Gold</div>
+  <div>#b26f16</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #007c92; color: #ffffff;">
+  <div>Lagunita</div>
+  <div>#007c92</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #c7d1c5;">
+  <div>Light Sage</div>
+  <div>#c7d1c5</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #f9f6ef;">
+  <div>Light Sandstone</div>
+  <div>#f9f6ef</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #009b76;">
+  <div>Mint</div>
+  <div>#009b76</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #e98300;">
+  <div>Poppy</div>
+  <div>#e98300</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #175e54; color: #ffffff;">
+  <div>Palo Alto</div>
+  <div>#175e54</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #53284f; color: #ffffff;">
+  <div>Purple</div>
+  <div>#53284f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #8d3c1e; color: #ffffff;">
+  <div>Redwood</div>
+  <div>#8d3c1e</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b3995d;">
+  <div>Sandhill</div>
+  <div>#b3995d</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #d2c295;">
+  <div>Sandstone</div>
+  <div>#d2c295</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #0098db;">
+  <div>Sky</div>
+  <div>#0098db</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #544948; color: #ffffff;">
+  <div>Stone</div>
+  <div>#544948</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #eaab00;">
+  <div>Sun</div>
+  <div>#eaab00</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #00505c; color: #ffffff;">
+  <div>Teal</div>
+  <div>#00505c</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #3f3c30; color: #ffffff;">
+  <div>Warm Grey</div>
+  <div>#3f3c30</div>
+</div>
+
    +
    +
    - Source: core/index.scss, line 16 + Source: core/index.scss, line 20
    diff --git a/styleguide/item-core-elements-buttons.html b/styleguide/item-core-elements-buttons.html index 9962213c8..c7826a84f 100644 --- a/styleguide/item-core-elements-buttons.html +++ b/styleguide/item-core-elements-buttons.html @@ -37,23 +37,28 @@

    Decanter Style Guide and Pattern Library

  • + + 3Elements + +
    • +
  • - 3Functions + 4Functions
  • - 4Mixins + 5Mixins
  • - 5Templates + 6Templates
  • - 6Variables + 7Variables
    • diff --git a/styleguide/item-core-elements.html b/styleguide/item-core-elements.html index e0495df77..5e07ac4f6 100644 --- a/styleguide/item-core-elements.html +++ b/styleguide/item-core-elements.html @@ -37,23 +37,28 @@

    Decanter Style Guide and Pattern Library

  • + + 3Elements + +
    • +
  • - 3Functions + 4Functions
  • - 4Mixins + 5Mixins
  • - 5Templates + 6Templates
  • - 6Variables + 7Variables
    • diff --git a/styleguide/item-core-fonts.html b/styleguide/item-core-fonts.html index 26de3851e..2d9766821 100644 --- a/styleguide/item-core-fonts.html +++ b/styleguide/item-core-fonts.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 2.3 + 5.2 Core.Fonts @@ -76,11 +91,130 @@

    +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    - +
    +
    + Example
    + + +
    +
    +

    Source Sans Pro

    +

    Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +

    Crimson Text

    +

    Crimson Text ("Crimson") is a free and open-source text type family. The font is designed in the tradition of beautiful oldstyle type. It features six cuts characters for a wide range of European languages.

    +

    Heading1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +

    Roboto Slab

    +

    Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, + allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +
    + +
    +
    + + Markup: ../templates/core/fonts/fonts.html.twig + + 
      <div class="decanter-sans">
+    <h2>Source Sans Pro</h2>
+    <p class="decanter-font-lead">Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.</p>
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+    <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
+  <div class="decanter-serif">
+    <h2>Crimson Text</h2>
+    <p class="decanter-font-lead">Crimson Text ("Crimson") is a free and open-source text type family. The font is designed in the tradition of beautiful oldstyle type. It features six cuts characters for a wide range of European languages.</p>
+    <h1>Heading1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+    <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
+  <div class="decanter-slab">
+    <h2>Roboto Slab</h2>
+    <p class="decanter-font-lead">Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise,
+        allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</p>
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+        <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
    +
    +
    Source: core/index.scss, line 8
    diff --git a/styleguide/item-core-grid.html b/styleguide/item-core-grid.html index 63d4d1250..6edf1694b 100644 --- a/styleguide/item-core-grid.html +++ b/styleguide/item-core-grid.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 2.4 + 5.3 Core.Grid @@ -76,13 +91,100 @@

    +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    - +
    +
    + Example
    + + +
    + +

    .decanter-width-one-fourth

    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    +
    +
    5
    +
    6
    +
    7
    +
    8
    +
    +
    +
    9
    +
    10
    +
    11
    +
    12
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/core/grid/grid.html.twig + + 
    
+<h3>.decanter-width-one-fourth</h3>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">1</div>
+            <div class="decanter-width-one-fourth">2</div>
+            <div class="decanter-width-one-fourth">3</div>
+            <div class="decanter-width-one-fourth">4</div>
+    </div>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">5</div>
+            <div class="decanter-width-one-fourth">6</div>
+            <div class="decanter-width-one-fourth">7</div>
+            <div class="decanter-width-one-fourth">8</div>
+    </div>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">9</div>
+            <div class="decanter-width-one-fourth">10</div>
+            <div class="decanter-width-one-fourth">11</div>
+            <div class="decanter-width-one-fourth">12</div>
+    </div>
+
    +
    +
    - Source: core/index.scss, line 12 + Source: core/index.scss, line 14
    diff --git a/styleguide/item-core.html b/styleguide/item-core.html index 7e45181fa..574fa4c4d 100644 --- a/styleguide/item-core.html +++ b/styleguide/item-core.html @@ -27,65 +27,68 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -99,7 +102,7 @@

    Decanter Style Guide and Pattern Library

    - 2 + 5 Core diff --git a/styleguide/item-elements-buttons.html b/styleguide/item-elements-buttons.html new file mode 100644 index 000000000..e0c1bbcc0 --- /dev/null +++ b/styleguide/item-elements-buttons.html @@ -0,0 +1,228 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    +     +
    +
    + + +
    +
    +

    + + + 3.1 + + Elements.Buttons + + + Buttons + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Simple button element to aid in creating interactive design.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    + Button Title + +
    +
    + +
    + .decanter-button +
    +
    + Primary (default) button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--secondary +
    +
    + Secondary button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--big +
    +
    + Big button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--unstyled +
    +
    + Unstyled button +
    +
    + Button Title + +
    +
    +
    +
    + + Markup: ../templates/elements/buttons/buttons.html.twig + + 
    <a class="[modifier class]">Button Title</a>
+
    +
    + +
    + Source: elements/_buttons.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-embedcontainer.html b/styleguide/item-elements-embedcontainer.html new file mode 100644 index 000000000..7c51902b1 --- /dev/null +++ b/styleguide/item-elements-embedcontainer.html @@ -0,0 +1,196 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6.1 + + Elements.EmbedContainer + + + Embed + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Responsive embed container to ensure that contents scale to the +width of parent element while retaining an aspect ratio of 16:9.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/embed/embed.html.twig + + 
    <div class="decanter-embed-container" aria-label="16:9">
+  <iframe width="315" height="560" src="https://www.youtube.com/embed/_Nq4Z5i7lcs" frameborder="0" allowfullscreen></iframe>
+</div>
+
    +
    + +
    + Source: elements/_embed.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-helpers-screenreader.html b/styleguide/item-elements-helpers-screenreader.html new file mode 100644 index 000000000..f7792983d --- /dev/null +++ b/styleguide/item-elements-helpers-screenreader.html @@ -0,0 +1,133 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-helpers-sr-only.html b/styleguide/item-elements-helpers-sr-only.html new file mode 100644 index 000000000..1f8cd7eaa --- /dev/null +++ b/styleguide/item-elements-helpers-sr-only.html @@ -0,0 +1,143 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-helpers.html b/styleguide/item-elements-helpers.html new file mode 100644 index 000000000..a4d30a222 --- /dev/null +++ b/styleguide/item-elements-helpers.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-links.html b/styleguide/item-elements-links.html new file mode 100644 index 000000000..71dec6fbb --- /dev/null +++ b/styleguide/item-elements-links.html @@ -0,0 +1,216 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6.3 + + Elements.Links + + + Links + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default link styling, as well as special link treatment styling.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +

    This is a Link

    + +
    +
    + +
    + .decanter-external-link +
    +
    + External Link +
    +
    +

    This is a Link

    + +
    +
    +
    + .decanter-more-link +
    +
    + More Link +
    +
    +

    This is a Link

    + +
    +
    +
    +
    + + Markup: ../templates/elements/links/links.html.twig + + 
    <p>This is a <a class="[modifier class]" href="#">Link</a></p>
+
    +
    + +
    + Source: elements/_links.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-lists.html b/styleguide/item-elements-lists.html new file mode 100644 index 000000000..338c1a897 --- /dev/null +++ b/styleguide/item-elements-lists.html @@ -0,0 +1,271 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6.4 + + Elements.Lists + + + Lists + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for lists, including ordered and unordered lists.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
      +
    1. List Item
      2. +
    2. List Item
      3. +
    3. List Item +
        +
      1. List Item
        2. +
      2. List Item
        3. +
      3. List Item +
          +
        1. List Item
          2. +
        2. List Item
          3. +
        3. List Item
          4. +
        +
        4. +
      +
      4. +
    + +
      +
    • List Item
      • +
    • List Item +
        +
      • List Item
        • +
      • List Item
        • +
      • List Item +
          + +
        • List Item
          • +
        • List Item
          • +
        • List Item
          • +
        +
        • +
      +
      • +
    • List Item
      • +
    + +
    +
    Description List Title
    +
    This is a description list division.
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/lists/lists.html.twig + + 
    <ol>
+  <li>List Item</li>
+  <li>List Item</li>
+  <li>List Item
+    <ol type="a">
+      <li>List Item</li>
+      <li>List Item</li>
+      <li>List Item
+        <ol type="i">
+          <li>List Item</li>
+          <li>List Item</li>
+          <li>List Item</li>
+        </ol>
+      </li>
+    </ol>
+  </li>
+</ol>
+
+<ul>
+  <li>List Item</li>
+  <li>List Item
+    <ul>
+      <li>List Item</li>
+      <li>List Item</li>
+      <li>List Item
+        <ul>
+
+          <li>List Item</li>
+          <li>List Item</li>
+          <li>List Item</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li>List Item</li>
+</ul>
+
+<dl>
+  <dt>Description List Title</dt>
+  <dd>This is a description list division.</dd>
+</dl>
+
    +
    + +
    + Source: elements/_list.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-tables.html b/styleguide/item-elements-tables.html new file mode 100644 index 000000000..1c1e54fdf --- /dev/null +++ b/styleguide/item-elements-tables.html @@ -0,0 +1,270 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6.5 + + Elements.Tables + + + Tables + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for tables. For displaying tabular data that best lends +itself to being layed out in columns and rows. +Modifier class available to remove tables borders.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    + + + + + + + + + + + + + + + + + + + + + +
    Table HeaderTable HeaderTable Header
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    + +
    +
    + +
    + .decanter-table--borderless +
    +
    + Borderless Table +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Table HeaderTable HeaderTable Header
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    + +
    +
    +
    +
    + + Markup: ../templates/elements/tables/tables.html.twig + + 
    <table class="[modifier class]" cellspacing="0" cellpadding="0">
+  <tr>
+    <th>Table Header</th>
+    <th>Table Header</th>
+    <th>Table Header</th>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+</table>
+
    +
    + +
    + Source: elements/_table.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-typography.html b/styleguide/item-elements-typography.html new file mode 100644 index 000000000..47c24fd83 --- /dev/null +++ b/styleguide/item-elements-typography.html @@ -0,0 +1,251 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6.6 + + Elements.Typography + + + Typography + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default typography styling for base HTML typography elements, including +paragraphs and headings. Also includes special type treatment classes such as +splash font and lead font.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    + +
    + .decanter-font-lead +
    +
    + Lead Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-font-splash +
    +
    + Splash Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-short-line-length +
    +
    + Short Line Length +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-caption +
    +
    + Caption Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-credits +
    +
    + Credits Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    +
    + + Markup: ../templates/elements/font-styles/font-styles.html.twig + + 
    <p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
    +
    + +
    + Source: elements/_typography.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements.html b/styleguide/item-elements.html new file mode 100644 index 000000000..b26a458de --- /dev/null +++ b/styleguide/item-elements.html @@ -0,0 +1,186 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-functions.html b/styleguide/item-functions.html index be600128a..59fb2f2da 100644 --- a/styleguide/item-functions.html +++ b/styleguide/item-functions.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 3 + 7 Functions @@ -77,6 +92,11 @@

    +
    +

    Programmatic procedure or routine to help making writing code or declaring +something easier and more seamlesss.

    + +
    diff --git a/styleguide/item-mixins-accessibility-hidden.html b/styleguide/item-mixins-accessibility-hidden.html index 03cfe7237..ac976043b 100644 --- a/styleguide/item-mixins-accessibility-hidden.html +++ b/styleguide/item-mixins-accessibility-hidden.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.1.1 + 8.1.1 Mixins.Accessibility.hidden diff --git a/styleguide/item-mixins-accessibility-skipnav.html b/styleguide/item-mixins-accessibility-skipnav.html index ed3236663..b7a87d775 100644 --- a/styleguide/item-mixins-accessibility-skipnav.html +++ b/styleguide/item-mixins-accessibility-skipnav.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.1.2 + 8.1.2 Mixins.Accessibility.skipnav diff --git a/styleguide/item-mixins-accessibility-sr-only.html b/styleguide/item-mixins-accessibility-sr-only.html index 5e5dbe1a1..dfdbe9007 100644 --- a/styleguide/item-mixins-accessibility-sr-only.html +++ b/styleguide/item-mixins-accessibility-sr-only.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.1.3 + 8.1.3 Mixins.Accessibility.sr-only diff --git a/styleguide/item-mixins-accessibility.html b/styleguide/item-mixins-accessibility.html index 30ee8b890..faa8a4659 100644 --- a/styleguide/item-mixins-accessibility.html +++ b/styleguide/item-mixins-accessibility.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.1 + 8.1 Mixins.Accessibility @@ -77,6 +92,10 @@

    +
    +

    Mixins for Accessibility

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-bordered.html b/styleguide/item-mixins-accordions-accordion-bordered.html index e0eedd3af..5b50ae66d 100644 --- a/styleguide/item-mixins-accordions-accordion-bordered.html +++ b/styleguide/item-mixins-accordions-accordion-bordered.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.1 + 8.2.1 Mixins.Accordions.accordion-bordered @@ -77,6 +92,10 @@

    +
    +

    Adds a border to the accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-button-unopened.html b/styleguide/item-mixins-accordions-accordion-button-unopened.html index bf69ef553..40282d8e9 100644 --- a/styleguide/item-mixins-accordions-accordion-button-unopened.html +++ b/styleguide/item-mixins-accordions-accordion-button-unopened.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.3 + 8.2.3 Mixins.Accordions.accordion-button-unopened @@ -77,6 +92,10 @@

    +
    +

    Adds the closed icon (plus) to the accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-button.html b/styleguide/item-mixins-accordions-accordion-button.html index 6c25baed1..25653f4d3 100644 --- a/styleguide/item-mixins-accordions-accordion-button.html +++ b/styleguide/item-mixins-accordions-accordion-button.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.2 + 8.2.2 Mixins.Accordions.accordion-button @@ -77,6 +92,10 @@

    +
    +

    Default styling for the clickable button of an accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-content.html b/styleguide/item-mixins-accordions-accordion-content.html index 4b822e8bf..295232fe9 100644 --- a/styleguide/item-mixins-accordions-accordion-content.html +++ b/styleguide/item-mixins-accordions-accordion-content.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.4 + 8.2.4 Mixins.Accordions.accordion-content @@ -77,6 +92,10 @@

    +
    +

    Default styling for the content within the expanded accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-list-item.html b/styleguide/item-mixins-accordions-accordion-list-item.html index a3faa94d8..4b4fd05a9 100644 --- a/styleguide/item-mixins-accordions-accordion-list-item.html +++ b/styleguide/item-mixins-accordions-accordion-list-item.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.6 + 8.2.6 Mixins.Accordions.accordion-list-item @@ -77,6 +92,10 @@

    +
    +

    Default styling for list items that appear within an expanded accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-list.html b/styleguide/item-mixins-accordions-accordion-list.html index 74c07c168..da4fb2ad3 100644 --- a/styleguide/item-mixins-accordions-accordion-list.html +++ b/styleguide/item-mixins-accordions-accordion-list.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.5 + 8.2.5 Mixins.Accordions.accordion-list @@ -77,6 +92,10 @@

    +
    +

    Default styling for an expanded accordion that includes a list.

    + +
    diff --git a/styleguide/item-mixins-accordions-accordion-nested-list.html b/styleguide/item-mixins-accordions-accordion-nested-list.html index 490d44d3f..4bc69d66e 100644 --- a/styleguide/item-mixins-accordions-accordion-nested-list.html +++ b/styleguide/item-mixins-accordions-accordion-nested-list.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.2.7 + 8.2.7 Mixins.Accordions.accordion-nested-list @@ -77,6 +92,10 @@

    +
    +

    Default styling for nested lists within an expanded accordion.

    + +
    diff --git a/styleguide/item-mixins-accordions.html b/styleguide/item-mixins-accordions.html index 172e85c95..e9df3602b 100644 --- a/styleguide/item-mixins-accordions.html +++ b/styleguide/item-mixins-accordions.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,20 +82,27 @@

    Decanter Style Guide and Pattern Library

    - 4.2 + 8.2 Mixins.Accordions - Mixins.Accordions + Accordions

    +
    +

    Mixins for Accordions

    + +
    +
    + Source: utilities/mixins/accordions/index.scss, line 3 +
    diff --git a/styleguide/item-mixins-alerts-alerts-icons-colors.html b/styleguide/item-mixins-alerts-alerts-icons-colors.html index fb2f7872d..fd1fb32f8 100644 --- a/styleguide/item-mixins-alerts-alerts-icons-colors.html +++ b/styleguide/item-mixins-alerts-alerts-icons-colors.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.3.2 + 8.3.2 Mixins.Alerts.alerts-icons-colors @@ -77,6 +92,10 @@

    +
    +

    Loops through color option settings for Alets component.

    + +
    diff --git a/styleguide/item-mixins-alerts-alerts.html b/styleguide/item-mixins-alerts-alerts.html index d3cb389c2..328502348 100644 --- a/styleguide/item-mixins-alerts-alerts.html +++ b/styleguide/item-mixins-alerts-alerts.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.3.1 + 8.3.1 Mixins.Alerts.alerts @@ -77,6 +92,12 @@

    +
    +

    For displaying a notification that keeps people informed +of a status, or for displaying a validation message that +alerts someone of an important piece of information.

    + +
    diff --git a/styleguide/item-mixins-alerts.html b/styleguide/item-mixins-alerts.html index 2c1c86051..a007c983d 100644 --- a/styleguide/item-mixins-alerts.html +++ b/styleguide/item-mixins-alerts.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,20 +82,27 @@

    Decanter Style Guide and Pattern Library

    - 4.3 + 8.3 Mixins.Alerts - Mixins.Alerts + Alerts

    +
    +

    Mixins for Alerts

    + +
    +
    + Source: utilities/mixins/alerts/index.scss, line 3 +
    diff --git a/styleguide/item-mixins-buttons-button-big.html b/styleguide/item-mixins-buttons-button-big.html index d4a142276..f7d1a12f1 100644 --- a/styleguide/item-mixins-buttons-button-big.html +++ b/styleguide/item-mixins-buttons-button-big.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.5.1 + 8.4.1 Mixins.Buttons.button-big @@ -77,6 +92,10 @@

    +
    +

    Big button styling.

    + +
    diff --git a/styleguide/item-mixins-buttons-button-primary.html b/styleguide/item-mixins-buttons-button-primary.html index 88b1b2432..9d209fc3d 100644 --- a/styleguide/item-mixins-buttons-button-primary.html +++ b/styleguide/item-mixins-buttons-button-primary.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.5.2 + 8.4.2 Mixins.Buttons.button-primary @@ -77,6 +92,10 @@

    +
    +

    Primary (default) button styling.

    + +
    diff --git a/styleguide/item-mixins-buttons-button-secondary.html b/styleguide/item-mixins-buttons-button-secondary.html index 91c1ba105..8d30c6e31 100644 --- a/styleguide/item-mixins-buttons-button-secondary.html +++ b/styleguide/item-mixins-buttons-button-secondary.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.5.3 + 8.4.3 Mixins.Buttons.button-secondary @@ -77,6 +92,10 @@

    +
    +

    Secondary button styling.

    + +
    diff --git a/styleguide/item-mixins-buttons-button-unstyled.html b/styleguide/item-mixins-buttons-button-unstyled.html index 40ffddd30..4f55ad237 100644 --- a/styleguide/item-mixins-buttons-button-unstyled.html +++ b/styleguide/item-mixins-buttons-button-unstyled.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.5.4 + 8.4.4 Mixins.Buttons.button-unstyled @@ -77,6 +92,10 @@

    +
    +

    Removes styling from a button.

    + +
    diff --git a/styleguide/item-mixins-buttons.html b/styleguide/item-mixins-buttons.html index 5510510d6..c9dec76de 100644 --- a/styleguide/item-mixins-buttons.html +++ b/styleguide/item-mixins-buttons.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,20 +82,27 @@

    Decanter Style Guide and Pattern Library

    - 4.5 + 8.4 Mixins.Buttons - Mixins.Buttons + Buttons

    +
    +

    Mixins for Buttons

    + +
    +
    + Source: utilities/mixins/buttons/index.scss, line 3 +
    diff --git a/styleguide/item-mixins-display-display-icon.html b/styleguide/item-mixins-display-display-icon.html index f95522473..086a369bd 100644 --- a/styleguide/item-mixins-display-display-icon.html +++ b/styleguide/item-mixins-display-display-icon.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.6.1 + 8.5.1 Mixins.Display.display-icon @@ -78,7 +93,8 @@

    -

    TODO: Description

    +

    @TODO Needs to be documented. Should this be reworked for asset +management purposes?

    Usage: @include display-icon($icon, $direction, $size, $margin, $hover);

    diff --git a/styleguide/item-mixins-display-embed-container.html b/styleguide/item-mixins-display-embed-container.html index 6ccca8921..bb283668c 100644 --- a/styleguide/item-mixins-display-embed-container.html +++ b/styleguide/item-mixins-display-embed-container.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.6.2 + 8.5.2 Mixins.Display.embed-container @@ -78,7 +93,8 @@

    -

    TODO: Description

    +

    Responsive embed container to ensure that contents scale to the +width of parent element while retaining an aspect ratio of 16:9.

    diff --git a/styleguide/item-mixins-display-media-block-img.html b/styleguide/item-mixins-display-media-block-img.html index 2b54af20a..ac9fdf826 100644 --- a/styleguide/item-mixins-display-media-block-img.html +++ b/styleguide/item-mixins-display-media-block-img.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.6.3 + 8.5.3 Mixins.Display.media-block-img @@ -78,7 +93,8 @@

    -

    TODO: Description

    +

    Floats an image to the left and provides a specified margin right. To be used +when floating images alongside other content.

    diff --git a/styleguide/item-mixins-display-overflow.html b/styleguide/item-mixins-display-overflow.html new file mode 100644 index 000000000..daacb86c9 --- /dev/null +++ b/styleguide/item-mixins-display-overflow.html @@ -0,0 +1,151 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    +     +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-display.html b/styleguide/item-mixins-display.html index 27c282c0c..cc9dbfcb0 100644 --- a/styleguide/item-mixins-display.html +++ b/styleguide/item-mixins-display.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,20 +82,27 @@

    Decanter Style Guide and Pattern Library

    - 4.6 + 8.5 Mixins.Display - Mixins.Display + Display

    +
    +

    Mixins for Display

    + +
    +
    + Source: utilities/mixins/display/index.scss, line 3 +
    diff --git a/styleguide/item-mixins-grid-allow-layout-classes.html b/styleguide/item-mixins-grid-allow-layout-classes.html index 32b8d006e..ac48ded6c 100644 --- a/styleguide/item-mixins-grid-allow-layout-classes.html +++ b/styleguide/item-mixins-grid-allow-layout-classes.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.7.1 + 8.6.1 Mixins.Grid.allow-layout-classes diff --git a/styleguide/item-mixins-grid.html b/styleguide/item-mixins-grid.html index 15226ac20..9d0c62e20 100644 --- a/styleguide/item-mixins-grid.html +++ b/styleguide/item-mixins-grid.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 4.7 + 8.6 Mixins.Grid @@ -78,7 +93,7 @@

    -

    Grid system mixins.

    +

    Mixins for Grid

    diff --git a/styleguide/item-mixins-icon-grid.html b/styleguide/item-mixins-icon-grid.html index e827db3c7..9821fdeaa 100644 --- a/styleguide/item-mixins-icon-grid.html +++ b/styleguide/item-mixins-icon-grid.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,18 +82,18 @@

    Decanter Style Guide and Pattern Library

    - 4.8 + 8.7 Mixins.icon-grid - Icon Grid + @icon-grid

    -

    Todo: Description.

    +

    Grid of icons (or images) with text.

    diff --git a/styleguide/item-mixins-links-external-link.html b/styleguide/item-mixins-links-external-link.html new file mode 100644 index 000000000..984c718cd --- /dev/null +++ b/styleguide/item-mixins-links-external-link.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.8.1 + + Mixins.Links.external-link + + + @external-link($external-link, $external-link-hover) + +

    + + +
    +

    Default external link styling, with external icon.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_external-link.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-links-link.html b/styleguide/item-mixins-links-link.html new file mode 100644 index 000000000..68bc86cd5 --- /dev/null +++ b/styleguide/item-mixins-links-link.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.8.2 + + Mixins.Links.link + + + @link + +

    + + +
    +

    Default link styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_link.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-links-more-link.html b/styleguide/item-mixins-links-more-link.html new file mode 100644 index 000000000..818576fb7 --- /dev/null +++ b/styleguide/item-mixins-links-more-link.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.8.3 + + Mixins.Links.more-link + + + @more-link($more-link, $more-link-hover) + +

    + + +
    +

    Default more link styling, with raquo.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_more-link.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-links.html b/styleguide/item-mixins-links.html new file mode 100644 index 000000000..ca39a81ce --- /dev/null +++ b/styleguide/item-mixins-links.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.8 + + Mixins.Links + + + Links + +

    + + +
    +

    Mixins for Links

    + +
    + +
    + + +
    + Source: utilities/mixins/links/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-lists-list-unstyled.html b/styleguide/item-mixins-lists-list-unstyled.html new file mode 100644 index 000000000..09a342db7 --- /dev/null +++ b/styleguide/item-mixins-lists-list-unstyled.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.9.1 + + Mixins.Lists.list-unstyled + + + @list-unstyled + +

    + + +
    +

    Removes styles from a list.

    + +
    + +
    + + +
    + Source: utilities/mixins/lists/_list-unstyled.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-lists.html b/styleguide/item-mixins-lists.html new file mode 100644 index 000000000..9e9529d95 --- /dev/null +++ b/styleguide/item-mixins-lists.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.9 + + Mixins.Lists + + + Lists + +

    + + +
    +

    Mixins for Lists

    + +
    + +
    + + +
    + Source: utilities/mixins/lists/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus-main-menu.html b/styleguide/item-mixins-menus-main-menu.html new file mode 100644 index 000000000..5e1ae6a41 --- /dev/null +++ b/styleguide/item-mixins-menus-main-menu.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10.1 + + Mixins.Menus.main-menu + + + @main-menu + +

    + + +
    +

    For use with main navigation that does or does not support drop downs.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_main-menu.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus-megamenu.html b/styleguide/item-mixins-menus-megamenu.html new file mode 100644 index 000000000..268f625a5 --- /dev/null +++ b/styleguide/item-mixins-menus-megamenu.html @@ -0,0 +1,144 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10.2 + + Mixins.Menus.megamenu + + + @megamenu + +

    + + +
    +

    An expandable menu in which choices are displayed in a two-dimensional +dropdown layout. Excellent design choice for accommodating a large number of +options or for revealing lower-level site pages at a glance.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_megamenu.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus-outter-megamenu.html b/styleguide/item-mixins-menus-outter-megamenu.html new file mode 100644 index 000000000..044efc4f5 --- /dev/null +++ b/styleguide/item-mixins-menus-outter-megamenu.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10.3 + + Mixins.Menus.outter-megamenu + + + @outer-megamenu + +

    + + +
    +

    @TODO Needs to be documented.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_outer-megamenu.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus-sidenav-sublist.html b/styleguide/item-mixins-menus-sidenav-sublist.html new file mode 100644 index 000000000..6c2c07516 --- /dev/null +++ b/styleguide/item-mixins-menus-sidenav-sublist.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10.4 + + Mixins.Menus.sidenav-sublist + + + @sidenav-sublist + +

    + + +
    +

    For styling a sublist of a side navaition menu.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_sidenav-sublist.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus-subnav-list.html b/styleguide/item-mixins-menus-subnav-list.html new file mode 100644 index 000000000..f886ae19e --- /dev/null +++ b/styleguide/item-mixins-menus-subnav-list.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10.5 + + Mixins.Menus.subnav-list + + + @sidenav-list + +

    + + +
    +

    Default styling for a side navigation list.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_sidenav-list.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-menus.html b/styleguide/item-mixins-menus.html new file mode 100644 index 000000000..2757b7add --- /dev/null +++ b/styleguide/item-mixins-menus.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.10 + + Mixins.Menus + + + Menus + +

    + + +
    +

    Mixins for Menus

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-navigation-nav-border.html b/styleguide/item-mixins-navigation-nav-border.html new file mode 100644 index 000000000..fd0e9e87b --- /dev/null +++ b/styleguide/item-mixins-navigation-nav-border.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.11.1 + + Mixins.Navigation.nav-border + + + @nav-border + +

    + + +
    +

    For applying a border to navigation.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-border.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-navigation-nav-close.html b/styleguide/item-mixins-navigation-nav-close.html new file mode 100644 index 000000000..f3ae7a0a5 --- /dev/null +++ b/styleguide/item-mixins-navigation-nav-close.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.11.2 + + Mixins.Navigation.nav-close + + + @nav-close + +

    + + +
    +

    Close button for mobile navigation.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-close.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-navigation-nav-overlay.html b/styleguide/item-mixins-navigation-nav-overlay.html new file mode 100644 index 000000000..2fc28a5a1 --- /dev/null +++ b/styleguide/item-mixins-navigation-nav-overlay.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.11.3 + + Mixins.Navigation.nav-overlay + + + @nav-overlay + +

    + + +
    +

    Screen overlay for when mobile nav is exposed.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-overlay.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-navigation.html b/styleguide/item-mixins-navigation.html new file mode 100644 index 000000000..287468f0b --- /dev/null +++ b/styleguide/item-mixins-navigation.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.11 + + Mixins.Navigation + + + Navigation + +

    + + +
    +

    Mixins for Navigation

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-tables-table-borderless.html b/styleguide/item-mixins-tables-table-borderless.html new file mode 100644 index 000000000..b20fe4383 --- /dev/null +++ b/styleguide/item-mixins-tables-table-borderless.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.12.1 + + Mixins.Tables.table-borderless + + + @table-borderless + +

    + + +
    +

    Tables without borders styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/_table-borderless.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-tables-tables.html b/styleguide/item-mixins-tables-tables.html new file mode 100644 index 000000000..e375c887c --- /dev/null +++ b/styleguide/item-mixins-tables-tables.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.12.2 + + Mixins.Tables.tables + + + @tables + +

    + + +
    +

    Default table styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/_tables.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-tables.html b/styleguide/item-mixins-tables.html new file mode 100644 index 000000000..43248d7cb --- /dev/null +++ b/styleguide/item-mixins-tables.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.12 + + Mixins.Tables + + + Tables + +

    + + +
    +

    Mixins for Tables

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-caption.html b/styleguide/item-mixins-typography-caption.html new file mode 100644 index 000000000..50758cf02 --- /dev/null +++ b/styleguide/item-mixins-typography-caption.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.1 + + Mixins.Typography.caption + + + @caption + +

    + + +
    +

    To be used for describing the content of an image.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_caption.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-credits.html b/styleguide/item-mixins-typography-credits.html new file mode 100644 index 000000000..71663fcd9 --- /dev/null +++ b/styleguide/item-mixins-typography-credits.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.2 + + Mixins.Typography.credits + + + @credits + +

    + + +
    +

    To be used for crediting a source or photographer.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_credits.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-font-lead.html b/styleguide/item-mixins-typography-font-lead.html new file mode 100644 index 000000000..0d21ec76e --- /dev/null +++ b/styleguide/item-mixins-typography-font-lead.html @@ -0,0 +1,143 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.3 + + Mixins.Typography.font-lead + + + @font-lead + +

    + + +
    +

    For leading a page of text, summarizing a main point, and/or highlighting a +paragraph or quote.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-lead.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-font-smoothing.html b/styleguide/item-mixins-typography-font-smoothing.html new file mode 100644 index 000000000..7fb744567 --- /dev/null +++ b/styleguide/item-mixins-typography-font-smoothing.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.4 + + Mixins.Typography.font-smoothing + + + @font-smoothing + +

    + + +
    +

    To be used for light text on a dark background only.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-smoothing.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-font-splash.html b/styleguide/item-mixins-typography-font-splash.html new file mode 100644 index 000000000..f8c75fa0a --- /dev/null +++ b/styleguide/item-mixins-typography-font-splash.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.5 + + Mixins.Typography.font-splash + + + @font-splash + +

    + + +
    +

    For text on a page that should stand out and draw more attention.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-splash.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h1.html b/styleguide/item-mixins-typography-h1.html new file mode 100644 index 000000000..466e3a531 --- /dev/null +++ b/styleguide/item-mixins-typography-h1.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.6 + + Mixins.Typography.h1 + + + @h1 + +

    + + +
    +

    Default heading 1 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h1.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h2.html b/styleguide/item-mixins-typography-h2.html new file mode 100644 index 000000000..61de0da90 --- /dev/null +++ b/styleguide/item-mixins-typography-h2.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.7 + + Mixins.Typography.h2 + + + @h2 + +

    + + +
    +

    Default heading 2 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h2.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h3.html b/styleguide/item-mixins-typography-h3.html new file mode 100644 index 000000000..2ee6880c9 --- /dev/null +++ b/styleguide/item-mixins-typography-h3.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.8 + + Mixins.Typography.h3 + + + @h3 + +

    + + +
    +

    Default heading 3 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h3.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h4.html b/styleguide/item-mixins-typography-h4.html new file mode 100644 index 000000000..3ec07786b --- /dev/null +++ b/styleguide/item-mixins-typography-h4.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.9 + + Mixins.Typography.h4 + + + @h4 + +

    + + +
    +

    Default heading 4 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h4.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h5.html b/styleguide/item-mixins-typography-h5.html new file mode 100644 index 000000000..8b3fedf30 --- /dev/null +++ b/styleguide/item-mixins-typography-h5.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.10 + + Mixins.Typography.h5 + + + @h5 + +

    + + +
    +

    Default heading 5 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h5.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-h6.html b/styleguide/item-mixins-typography-h6.html new file mode 100644 index 000000000..e51d4e02e --- /dev/null +++ b/styleguide/item-mixins-typography-h6.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.11 + + Mixins.Typography.h6 + + + @h6 + +

    + + +
    +

    Default heading 6 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h6.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-headings.html b/styleguide/item-mixins-typography-headings.html new file mode 100644 index 000000000..005324ba9 --- /dev/null +++ b/styleguide/item-mixins-typography-headings.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.12 + + Mixins.Typography.headings + + + @headings + +

    + + +
    +

    Default heading shared styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_headings.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-sans.html b/styleguide/item-mixins-typography-sans.html new file mode 100644 index 000000000..b5dfbebb4 --- /dev/null +++ b/styleguide/item-mixins-typography-sans.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.13 + + Mixins.Typography.sans + + + @sans + +

    + + +
    +

    Sans Serfif font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_sans.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-serif.html b/styleguide/item-mixins-typography-serif.html new file mode 100644 index 000000000..915d5952e --- /dev/null +++ b/styleguide/item-mixins-typography-serif.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.14 + + Mixins.Typography.serif + + + @serif + +

    + + +
    +

    Serif font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_serif.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-short-line-length.html b/styleguide/item-mixins-typography-short-line-length.html new file mode 100644 index 000000000..212927aa5 --- /dev/null +++ b/styleguide/item-mixins-typography-short-line-length.html @@ -0,0 +1,143 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.15 + + Mixins.Typography.short-line-length + + + @short-line-length + +

    + + +
    +

    For reducing the length of lines in a paragraph, no matter the width of its +container.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_short-line-length.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-slab.html b/styleguide/item-mixins-typography-slab.html new file mode 100644 index 000000000..81133416c --- /dev/null +++ b/styleguide/item-mixins-typography-slab.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13.16 + + Mixins.Typography.slab + + + @slab + +

    + + +
    +

    Slab font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_slab.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography-title.html b/styleguide/item-mixins-typography-title.html new file mode 100644 index 000000000..95a888552 --- /dev/null +++ b/styleguide/item-mixins-typography-title.html @@ -0,0 +1,132 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 5.14.17 + + Mixins.Typography.title + + + Title + +

    + + +
    +

    TODO: Joe to document.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_title.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-typography.html b/styleguide/item-mixins-typography.html new file mode 100644 index 000000000..e197911d5 --- /dev/null +++ b/styleguide/item-mixins-typography.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 8.13 + + Mixins.Typography + + + Typography + +

    + + +
    +

    Mixins for Typography

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/index.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins.html b/styleguide/item-mixins.html index 78f4ab0ea..eb68eb162 100644 --- a/styleguide/item-mixins.html +++ b/styleguide/item-mixins.html @@ -27,209 +27,434 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core + +
    • +
  • + + 6Elements
  • - 3Functions + 7Functions
  • - 4Mixins + 8Mixins
  • - - 5Templates - -
    • -
  • - 6Variables + 9Variables
    • @@ -243,7 +468,7 @@

    Decanter Style Guide and Pattern Library

    - 4 + 8 Mixins @@ -253,12 +478,19 @@

    +
    +

    Mixins help with things that are a bit tedious to write in CSS (e.g., +vendor prefixes that exist). Mixins allow for making groups of CSS +declarations for reuse throughout a project. Mixins can even pass in values +to make things more flexible.

    + +
    - Source: utilities/index.scss, line 8 + Source: utilities/index.scss, line 11
    diff --git a/styleguide/item-templates.html b/styleguide/item-templates.html index e35dc8576..daaf83e24 100644 --- a/styleguide/item-templates.html +++ b/styleguide/item-templates.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 5 + 4 Templates @@ -82,7 +97,7 @@

    - Source: components/templates/index.scss, line 1 + Source: components/index.scss, line 54
    diff --git a/styleguide/item-variables-accordions-components-accordion-border.html b/styleguide/item-variables-accordions-components-accordion-border.html new file mode 100644 index 000000000..b34b99843 --- /dev/null +++ b/styleguide/item-variables-accordions-components-accordion-border.html @@ -0,0 +1,174 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    +     +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-banners-hero-banner.html b/styleguide/item-variables-accordions-components.html similarity index 89% rename from styleguide/item-mixins-banners-hero-banner.html rename to styleguide/item-variables-accordions-components.html index 0674fd2dd..4b87e75be 100644 --- a/styleguide/item-mixins-banners-hero-banner.html +++ b/styleguide/item-variables-accordions-components.html @@ -62,17 +62,17 @@

    Decanter Style Guide and Pattern Library

    diff --git a/styleguide/item-variables-accordions.html b/styleguide/item-variables-accordions.html index 30dd9b75d..9242b9171 100644 --- a/styleguide/item-variables-accordions.html +++ b/styleguide/item-variables-accordions.html @@ -72,25 +72,15 @@

    Variables.Accordions - Accordions + Variables.Accordions

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/components/_accordions.scss, line 3 -
    diff --git a/styleguide/item-variables-alerts-alerts.html b/styleguide/item-variables-alerts-alerts.html index 51784a00b..827d019f3 100644 --- a/styleguide/item-variables-alerts-alerts.html +++ b/styleguide/item-variables-alerts-alerts.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.2.1 + 6.1.1 Variables.Alerts.alerts diff --git a/styleguide/item-variables-alerts-decanter-alerts.html b/styleguide/item-variables-alerts-decanter-alerts.html index 566efd14c..4ea9e71ea 100644 --- a/styleguide/item-variables-alerts-decanter-alerts.html +++ b/styleguide/item-variables-alerts-decanter-alerts.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.2.2 + 6.1.2 Variables.Alerts.decanter-alerts @@ -121,10 +121,10 @@

    $decanter-alerts: ( - success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity - warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity - error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity - info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity + success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity + warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity + error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity + info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity );
    @@ -135,10 +135,10 @@

    Markup 
    $decanter-alerts: (
-  success: rgba(23, 94, 84, 0.6),   // $color-palo-alto at 60% opacity
-  warning: rgba(234, 171, 0, 0.6),  // $color-sun at 60% opacity
-  error:   rgba(177, 4, 14, 0.5),   // $color-bright-red at 50% opacity
-  info:    rgba(0, 152, 219, 0.6),  // $color-sky at 60% opacity
+  success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity
+  warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity
+  error:   rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity
+  info:    rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity
 );
    diff --git a/styleguide/item-variables-alerts-decanter-custom-alerts.html b/styleguide/item-variables-alerts-decanter-custom-alerts.html index f1d99405b..fa1e66dc8 100644 --- a/styleguide/item-variables-alerts-decanter-custom-alerts.html +++ b/styleguide/item-variables-alerts-decanter-custom-alerts.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.2.3 + 6.1.3 Variables.Alerts.decanter-custom-alerts diff --git a/styleguide/item-variables-alerts.html b/styleguide/item-variables-alerts.html index 3d5a7d97e..0df119a0f 100644 --- a/styleguide/item-variables-alerts.html +++ b/styleguide/item-variables-alerts.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.2 + 6.1 Variables.Alerts - Alerts + Variables.Alerts

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/components/_alerts.scss, line 3 -
    diff --git a/styleguide/item-variables-breakpoints-grid-columns-large.html b/styleguide/item-variables-breakpoints-grid-columns-large.html index 875a81865..ad806abaf 100644 --- a/styleguide/item-variables-breakpoints-grid-columns-large.html +++ b/styleguide/item-variables-breakpoints-grid-columns-large.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.1 + 6.1.1 Variables.Breakpoints.grid-columns-large diff --git a/styleguide/item-variables-breakpoints-grid-columns-medium.html b/styleguide/item-variables-breakpoints-grid-columns-medium.html index 309ac1c5e..7734687ce 100644 --- a/styleguide/item-variables-breakpoints-grid-columns-medium.html +++ b/styleguide/item-variables-breakpoints-grid-columns-medium.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.2 + 6.1.2 Variables.Breakpoints.grid-columns-medium diff --git a/styleguide/item-variables-breakpoints-grid-columns-small.html b/styleguide/item-variables-breakpoints-grid-columns-small.html index 5b5452e6d..7dc4e9c57 100644 --- a/styleguide/item-variables-breakpoints-grid-columns-small.html +++ b/styleguide/item-variables-breakpoints-grid-columns-small.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.3 + 6.1.3 Variables.Breakpoints.grid-columns-small diff --git a/styleguide/item-variables-breakpoints-large-screen.html b/styleguide/item-variables-breakpoints-large-screen.html index f401e630e..befa8ddc8 100644 --- a/styleguide/item-variables-breakpoints-large-screen.html +++ b/styleguide/item-variables-breakpoints-large-screen.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.5 + 6.1.5 Variables.Breakpoints.large-screen diff --git a/styleguide/item-variables-breakpoints-large.html b/styleguide/item-variables-breakpoints-large.html index 3398ac60c..7dd081e6b 100644 --- a/styleguide/item-variables-breakpoints-large.html +++ b/styleguide/item-variables-breakpoints-large.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.4 + 6.1.4 Variables.Breakpoints.large diff --git a/styleguide/item-variables-breakpoints-medium-screen.html b/styleguide/item-variables-breakpoints-medium-screen.html index a49ba34a2..c3488ba12 100644 --- a/styleguide/item-variables-breakpoints-medium-screen.html +++ b/styleguide/item-variables-breakpoints-medium-screen.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.7 + 6.1.7 Variables.Breakpoints.medium-screen diff --git a/styleguide/item-variables-breakpoints-medium.html b/styleguide/item-variables-breakpoints-medium.html index 16bee351e..5d9204f50 100644 --- a/styleguide/item-variables-breakpoints-medium.html +++ b/styleguide/item-variables-breakpoints-medium.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.6 + 6.1.6 Variables.Breakpoints.medium diff --git a/styleguide/item-variables-breakpoints-small-screen.html b/styleguide/item-variables-breakpoints-small-screen.html index 7c69339a0..806230922 100644 --- a/styleguide/item-variables-breakpoints-small-screen.html +++ b/styleguide/item-variables-breakpoints-small-screen.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.9 + 6.1.9 Variables.Breakpoints.small-screen diff --git a/styleguide/item-variables-breakpoints-small.html b/styleguide/item-variables-breakpoints-small.html index 34a04ad89..3efb597a8 100644 --- a/styleguide/item-variables-breakpoints-small.html +++ b/styleguide/item-variables-breakpoints-small.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.3.8 + 6.1.8 Variables.Breakpoints.small diff --git a/styleguide/item-variables-breakpoints.html b/styleguide/item-variables-breakpoints.html index 60290cf8b..9b217bab8 100644 --- a/styleguide/item-variables-breakpoints.html +++ b/styleguide/item-variables-breakpoints.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.3 + 6.1 Variables.Breakpoints - Breakpoints + Variables.Breakpoints

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/core/_breakpoints.scss, line 3 -
    diff --git a/styleguide/item-variables-buttons-stroke.html b/styleguide/item-variables-buttons-stroke.html index 478b47045..80a1719dd 100644 --- a/styleguide/item-variables-buttons-stroke.html +++ b/styleguide/item-variables-buttons-stroke.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.4.1 + 6.2.1 Variables.Buttons.Stroke @@ -133,7 +133,7 @@

    - Source: variables/elements/_buttons.scss, line 16 + Source: variables/elements/_buttons.scss, line 15
    diff --git a/styleguide/item-variables-buttons.html b/styleguide/item-variables-buttons.html index cfdf9a10e..1bedb9a34 100644 --- a/styleguide/item-variables-buttons.html +++ b/styleguide/item-variables-buttons.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.4 + 6.2 Variables.Buttons - Buttons + Variables.Buttons

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/elements/_buttons.scss, line 3 -
    diff --git a/styleguide/item-variables-colors-black.html b/styleguide/item-variables-colors-black.html index f6e4219c8..8e1b7b65f 100644 --- a/styleguide/item-variables-colors-black.html +++ b/styleguide/item-variables-colors-black.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.1 + 6.3.1 Variables.Colors.black diff --git a/styleguide/item-variables-colors-color-beige.html b/styleguide/item-variables-colors-color-beige.html index 84f4f1b17..351e147f5 100644 --- a/styleguide/item-variables-colors-color-beige.html +++ b/styleguide/item-variables-colors-color-beige.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.2 + 6.3.2 Variables.Colors.color-beige @@ -116,7 +116,7 @@

    - $color-beige: #9d9573 !default; + $color-beige: #9d9573 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-beige:                #9d9573 !default;
    + 
    $color-beige: #9d9573 !default;
    - Source: variables/core/_colors.scss, line 55 + Source: variables/core/_colors.scss, line 54
    diff --git a/styleguide/item-variables-colors-color-blue.html b/styleguide/item-variables-colors-color-blue.html index 18e74178c..76d136699 100644 --- a/styleguide/item-variables-colors-color-blue.html +++ b/styleguide/item-variables-colors-color-blue.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.3 + 6.3.3 Variables.Colors.color-blue @@ -116,7 +116,7 @@

    - $color-blue: #00548f !default; + $color-blue: #00548f !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-blue:                 #00548f !default;
    + 
    $color-blue: #00548f !default;
    - Source: variables/core/_colors.scss, line 64 + Source: variables/core/_colors.scss, line 63
    diff --git a/styleguide/item-variables-colors-color-bright-blue.html b/styleguide/item-variables-colors-color-bright-blue.html index a1262bec2..d115bb8d0 100644 --- a/styleguide/item-variables-colors-color-bright-blue.html +++ b/styleguide/item-variables-colors-color-bright-blue.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.4 + 6.3.4 Variables.Colors.color-bright-blue @@ -116,7 +116,7 @@

    - $color-bright-blue: #006cb8 !default; + $color-bright-blue: #006cb8 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-bright-blue:          #006cb8 !default;
    + 
    $color-bright-blue: #006cb8 !default;
    - Source: variables/core/_colors.scss, line 73 + Source: variables/core/_colors.scss, line 72
    diff --git a/styleguide/item-variables-colors-color-bright-red.html b/styleguide/item-variables-colors-color-bright-red.html index 42995cb65..ba92ca54c 100644 --- a/styleguide/item-variables-colors-color-bright-red.html +++ b/styleguide/item-variables-colors-color-bright-red.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.5 + 6.3.5 Variables.Colors.color-bright-red @@ -116,7 +116,7 @@

    - $color-bright-red: #b1040e !default; + $color-bright-red: #b1040e !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-bright-red:           #b1040e !default;
    + 
    $color-bright-red: #b1040e !default;
    - Source: variables/core/_colors.scss, line 82 + Source: variables/core/_colors.scss, line 81
    diff --git a/styleguide/item-variables-colors-color-brown.html b/styleguide/item-variables-colors-color-brown.html index 52ec6b4b5..e739ce85b 100644 --- a/styleguide/item-variables-colors-color-brown.html +++ b/styleguide/item-variables-colors-color-brown.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.6 + 6.3.6 Variables.Colors.color-brown @@ -116,7 +116,7 @@

    - $color-brown: #5e3032 !default; + $color-brown: #5e3032 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-brown:                #5e3032 !default;
    + 
    $color-brown: #5e3032 !default;
    - Source: variables/core/_colors.scss, line 91 + Source: variables/core/_colors.scss, line 90
    diff --git a/styleguide/item-variables-colors-color-cardinal-red.html b/styleguide/item-variables-colors-color-cardinal-red.html index 522754e29..1d3140de0 100644 --- a/styleguide/item-variables-colors-color-cardinal-red.html +++ b/styleguide/item-variables-colors-color-cardinal-red.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.7 + 6.3.7 Variables.Colors.color-cardinal-red @@ -116,7 +116,7 @@

    - $color-cardinal-red: #8c1515 !default; + $color-cardinal-red: #8c1515 !default;
    @@ -125,7 +125,7 @@

    Markup - 
    $color-cardinal-red:         #8c1515 !default;
    + 
    $color-cardinal-red: #8c1515 !default;
    diff --git a/styleguide/item-variables-colors-color-chocolate.html b/styleguide/item-variables-colors-color-chocolate.html index 140500f2b..29b59976d 100644 --- a/styleguide/item-variables-colors-color-chocolate.html +++ b/styleguide/item-variables-colors-color-chocolate.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.8 + 6.3.8 Variables.Colors.color-chocolate @@ -116,7 +116,7 @@

    - $color-chocolate: #2f2424 !default; + $color-chocolate: #2f2424 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-chocolate:            #2f2424 !default;
    + 
    $color-chocolate: #2f2424 !default;
    - Source: variables/core/_colors.scss, line 100 + Source: variables/core/_colors.scss, line 99

    diff --git a/styleguide/item-variables-colors-color-clay.html b/styleguide/item-variables-colors-color-clay.html index 974a40d5f..7e7c47fd2 100644 --- a/styleguide/item-variables-colors-color-clay.html +++ b/styleguide/item-variables-colors-color-clay.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.9 + 6.3.9 Variables.Colors.color-clay @@ -116,7 +116,7 @@

    - $color-clay: #5f574f !default; + $color-clay: #5f574f !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-clay:                 #5f574f !default;
    + 
    $color-clay: #5f574f !default;
    - Source: variables/core/_colors.scss, line 109 + Source: variables/core/_colors.scss, line 108
    diff --git a/styleguide/item-variables-colors-color-cloud.html b/styleguide/item-variables-colors-color-cloud.html index 675ec282d..7cd3f9bf9 100644 --- a/styleguide/item-variables-colors-color-cloud.html +++ b/styleguide/item-variables-colors-color-cloud.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.10 + 6.3.10 Variables.Colors.color-cloud @@ -116,7 +116,7 @@

    - $color-cloud: #dad7cb !default; + $color-cloud: #dad7cb !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-cloud:                #dad7cb !default;
    + 
    $color-cloud: #dad7cb !default;
    - Source: variables/core/_colors.scss, line 118 + Source: variables/core/_colors.scss, line 117
    diff --git a/styleguide/item-variables-colors-color-cool-grey.html b/styleguide/item-variables-colors-color-cool-grey.html index c2e4d7061..12500f1ce 100644 --- a/styleguide/item-variables-colors-color-cool-grey.html +++ b/styleguide/item-variables-colors-color-cool-grey.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.11 + 6.3.11 Variables.Colors.color-cool-grey @@ -116,7 +116,7 @@

    - $color-cool-grey: #4d4f53 !default; + $color-cool-grey: #4d4f53 !default;
    @@ -125,7 +125,7 @@

    Markup - 
    $color-cool-grey:            #4d4f53 !default;
    + 
    $color-cool-grey: #4d4f53 !default;
    diff --git a/styleguide/item-variables-colors-color-dark-red.html b/styleguide/item-variables-colors-color-dark-red.html index cf05e5b8d..93b4fd250 100644 --- a/styleguide/item-variables-colors-color-dark-red.html +++ b/styleguide/item-variables-colors-color-dark-red.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.12 + 6.3.12 Variables.Colors.color-dark-red @@ -116,7 +116,7 @@

    - $color-dark-red: #820000 !default; + $color-dark-red: #820000 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-dark-red:             #820000 !default;
    + 
    $color-dark-red: #820000 !default;
    - Source: variables/core/_colors.scss, line 127 + Source: variables/core/_colors.scss, line 126

    diff --git a/styleguide/item-variables-colors-color-driftwood.html b/styleguide/item-variables-colors-color-driftwood.html index 515ee881b..e879a6a24 100644 --- a/styleguide/item-variables-colors-color-driftwood.html +++ b/styleguide/item-variables-colors-color-driftwood.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.13 + 6.3.13 Variables.Colors.color-driftwood @@ -116,7 +116,7 @@

    - $color-driftwood: #b6b1a9 !default; + $color-driftwood: #b6b1a9 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-driftwood:            #b6b1a9 !default;
    + 
    $color-driftwood: #b6b1a9 !default;
    - Source: variables/core/_colors.scss, line 136 + Source: variables/core/_colors.scss, line 135
    diff --git a/styleguide/item-variables-colors-color-fog.html b/styleguide/item-variables-colors-color-fog.html index 971c34b15..1f6b3bfaf 100644 --- a/styleguide/item-variables-colors-color-fog.html +++ b/styleguide/item-variables-colors-color-fog.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.14 + 6.3.14 Variables.Colors.color-fog @@ -116,7 +116,7 @@

    - $color-fog: #f4f4f4 !default; + $color-fog: #f4f4f4 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-fog:                  #f4f4f4 !default;
    + 
    $color-fog: #f4f4f4 !default;
    - Source: variables/core/_colors.scss, line 145 + Source: variables/core/_colors.scss, line 144
    diff --git a/styleguide/item-variables-colors-color-gold.html b/styleguide/item-variables-colors-color-gold.html index 6f26931bc..f1379496e 100644 --- a/styleguide/item-variables-colors-color-gold.html +++ b/styleguide/item-variables-colors-color-gold.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.15 + 6.3.15 Variables.Colors.color-gold @@ -116,7 +116,7 @@

    - $color-gold: #b26f16 !default; + $color-gold: #b26f16 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-gold:                 #b26f16 !default;
    + 
    $color-gold: #b26f16 !default;
    - Source: variables/core/_colors.scss, line 154 + Source: variables/core/_colors.scss, line 153
    diff --git a/styleguide/item-variables-colors-color-lagunita.html b/styleguide/item-variables-colors-color-lagunita.html index bab77f943..4088adb03 100644 --- a/styleguide/item-variables-colors-color-lagunita.html +++ b/styleguide/item-variables-colors-color-lagunita.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.16 + 6.3.16 Variables.Colors.color-lagunita @@ -116,7 +116,7 @@

    - $color-lagunita: #007c92 !default; + $color-lagunita: #007c92 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-lagunita:             #007c92 !default;
    + 
    $color-lagunita: #007c92 !default;
    - Source: variables/core/_colors.scss, line 163 + Source: variables/core/_colors.scss, line 162
    diff --git a/styleguide/item-variables-colors-color-light-sage.html b/styleguide/item-variables-colors-color-light-sage.html index fae2d44a7..452c6b859 100644 --- a/styleguide/item-variables-colors-color-light-sage.html +++ b/styleguide/item-variables-colors-color-light-sage.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.17 + 6.3.17 Variables.Colors.color-light-sage @@ -116,7 +116,7 @@

    - $color-light-sage: #c7d1c5 !default; + $color-light-sage: #c7d1c5 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-light-sage:           #c7d1c5 !default;
    + 
    $color-light-sage: #c7d1c5 !default;
    - Source: variables/core/_colors.scss, line 172 + Source: variables/core/_colors.scss, line 171
    diff --git a/styleguide/item-variables-colors-color-light-sandstone.html b/styleguide/item-variables-colors-color-light-sandstone.html index d124501c4..521378853 100644 --- a/styleguide/item-variables-colors-color-light-sandstone.html +++ b/styleguide/item-variables-colors-color-light-sandstone.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.18 + 6.3.18 Variables.Colors.color-light-sandstone @@ -116,7 +116,7 @@

    - $color-light-sandstone: #f9f6ef !default; + $color-light-sandstone: #f9f6ef !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-light-sandstone:      #f9f6ef !default;
    + 
    $color-light-sandstone: #f9f6ef !default;
    - Source: variables/core/_colors.scss, line 181 + Source: variables/core/_colors.scss, line 180
    diff --git a/styleguide/item-variables-colors-color-mint.html b/styleguide/item-variables-colors-color-mint.html index f36566df8..63e5b3450 100644 --- a/styleguide/item-variables-colors-color-mint.html +++ b/styleguide/item-variables-colors-color-mint.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.19 + 6.3.19 Variables.Colors.color-mint @@ -116,7 +116,7 @@

    - $color-mint: #009b76 !default; + $color-mint: #009b76 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-mint:                 #009b76 !default;
    + 
    $color-mint: #009b76 !default;
    - Source: variables/core/_colors.scss, line 190 + Source: variables/core/_colors.scss, line 189
    diff --git a/styleguide/item-variables-colors-color-palo-alto.html b/styleguide/item-variables-colors-color-palo-alto.html index e066a0e6c..289933416 100644 --- a/styleguide/item-variables-colors-color-palo-alto.html +++ b/styleguide/item-variables-colors-color-palo-alto.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.20 + 6.3.20 Variables.Colors.color-palo-alto @@ -116,7 +116,7 @@

    - $color-palo-alto: #175e54 !default; + $color-palo-alto: #175e54 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-palo-alto:            #175e54 !default;
    + 
    $color-palo-alto: #175e54 !default;
    - Source: variables/core/_colors.scss, line 208 + Source: variables/core/_colors.scss, line 207
    diff --git a/styleguide/item-variables-colors-color-poppy.html b/styleguide/item-variables-colors-color-poppy.html index 6ff33c324..2e201a19a 100644 --- a/styleguide/item-variables-colors-color-poppy.html +++ b/styleguide/item-variables-colors-color-poppy.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.21 + 6.3.21 Variables.Colors.color-poppy @@ -116,7 +116,7 @@

    - $color-poppy: #e98300 !default; + $color-poppy: #e98300 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-poppy:                #e98300 !default;
    + 
    $color-poppy: #e98300 !default;
    - Source: variables/core/_colors.scss, line 199 + Source: variables/core/_colors.scss, line 198
    diff --git a/styleguide/item-variables-colors-color-purple.html b/styleguide/item-variables-colors-color-purple.html index f879cfac7..eec8d367f 100644 --- a/styleguide/item-variables-colors-color-purple.html +++ b/styleguide/item-variables-colors-color-purple.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.22 + 6.3.22 Variables.Colors.color-purple @@ -116,7 +116,7 @@

    - $color-purple: #53284f !default; + $color-purple: #53284f !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-purple:               #53284f !default;
    + 
    $color-purple: #53284f !default;
    - Source: variables/core/_colors.scss, line 217 + Source: variables/core/_colors.scss, line 216
    diff --git a/styleguide/item-variables-colors-color-redwood.html b/styleguide/item-variables-colors-color-redwood.html index 0670b04c7..c250bf112 100644 --- a/styleguide/item-variables-colors-color-redwood.html +++ b/styleguide/item-variables-colors-color-redwood.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.23 + 6.3.23 Variables.Colors.color-redwood @@ -116,7 +116,7 @@

    - $color-redwood: #8d3c1e !default; + $color-redwood: #8d3c1e !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-redwood:              #8d3c1e !default;
    + 
    $color-redwood: #8d3c1e !default;
    - Source: variables/core/_colors.scss, line 226 + Source: variables/core/_colors.scss, line 225
    diff --git a/styleguide/item-variables-colors-color-sandhill.html b/styleguide/item-variables-colors-color-sandhill.html index 1c41f5ee5..fd501c558 100644 --- a/styleguide/item-variables-colors-color-sandhill.html +++ b/styleguide/item-variables-colors-color-sandhill.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.24 + 6.3.24 Variables.Colors.color-sandhill @@ -116,7 +116,7 @@

    - $color-sandhill: #b3995d !default; + $color-sandhill: #b3995d !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-sandhill:             #b3995d !default;
    + 
    $color-sandhill: #b3995d !default;
    - Source: variables/core/_colors.scss, line 235 + Source: variables/core/_colors.scss, line 234
    diff --git a/styleguide/item-variables-colors-color-sandstone.html b/styleguide/item-variables-colors-color-sandstone.html index 2871384c7..52ece7534 100644 --- a/styleguide/item-variables-colors-color-sandstone.html +++ b/styleguide/item-variables-colors-color-sandstone.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.25 + 6.3.25 Variables.Colors.color-sandstone @@ -116,7 +116,7 @@

    - $color-sandstone: #d2c295 !default; + $color-sandstone: #d2c295 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-sandstone:            #d2c295 !default;
    + 
    $color-sandstone: #d2c295 !default;
    - Source: variables/core/_colors.scss, line 244 + Source: variables/core/_colors.scss, line 243
    diff --git a/styleguide/item-variables-colors-color-sky.html b/styleguide/item-variables-colors-color-sky.html index 9934c02ac..e424f825c 100644 --- a/styleguide/item-variables-colors-color-sky.html +++ b/styleguide/item-variables-colors-color-sky.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.26 + 6.3.26 Variables.Colors.color-sky @@ -116,7 +116,7 @@

    - $color-sky: #0098db !default; + $color-sky: #0098db !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-sky:                  #0098db !default;
    + 
    $color-sky: #0098db !default;
    - Source: variables/core/_colors.scss, line 253 + Source: variables/core/_colors.scss, line 252
    diff --git a/styleguide/item-variables-colors-color-stone.html b/styleguide/item-variables-colors-color-stone.html index 0004767e7..e2212cb61 100644 --- a/styleguide/item-variables-colors-color-stone.html +++ b/styleguide/item-variables-colors-color-stone.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.27 + 6.3.27 Variables.Colors.color-stone @@ -116,7 +116,7 @@

    - $color-stone: #544948 !default; + $color-stone: #544948 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-stone:                #544948 !default;
    + 
    $color-stone: #544948 !default;
    - Source: variables/core/_colors.scss, line 262 + Source: variables/core/_colors.scss, line 261
    diff --git a/styleguide/item-variables-colors-color-sun.html b/styleguide/item-variables-colors-color-sun.html index 2621da6ef..16207e8c2 100644 --- a/styleguide/item-variables-colors-color-sun.html +++ b/styleguide/item-variables-colors-color-sun.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.28 + 6.3.28 Variables.Colors.color-sun @@ -116,7 +116,7 @@

    - $color-sun: #eaab00 !default; + $color-sun: #eaab00 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-sun:                  #eaab00 !default;
    + 
    $color-sun: #eaab00 !default;
    - Source: variables/core/_colors.scss, line 271 + Source: variables/core/_colors.scss, line 270
    diff --git a/styleguide/item-variables-colors-color-teal.html b/styleguide/item-variables-colors-color-teal.html index a0724adab..5bbaf1a20 100644 --- a/styleguide/item-variables-colors-color-teal.html +++ b/styleguide/item-variables-colors-color-teal.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.29 + 6.3.29 Variables.Colors.color-teal @@ -116,7 +116,7 @@

    - $color-teal: #00505c !default; + $color-teal: #00505c !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-teal:                 #00505c !default;
    + 
    $color-teal: #00505c !default;
    - Source: variables/core/_colors.scss, line 280 + Source: variables/core/_colors.scss, line 279
    diff --git a/styleguide/item-variables-colors-color-warm-grey.html b/styleguide/item-variables-colors-color-warm-grey.html index 8759be842..9160bf1a3 100644 --- a/styleguide/item-variables-colors-color-warm-grey.html +++ b/styleguide/item-variables-colors-color-warm-grey.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.30 + 6.3.30 Variables.Colors.color-warm-grey @@ -116,7 +116,7 @@

    - $color-warm-grey: #3f3c30 !default; + $color-warm-grey: #3f3c30 !default;
    @@ -125,11 +125,11 @@

    Markup - 
    $color-warm-grey:            #3f3c30 !default;
    + 
    $color-warm-grey: #3f3c30 !default;
    - Source: variables/core/_colors.scss, line 289 + Source: variables/core/_colors.scss, line 288
    diff --git a/styleguide/item-variables-colors-color-white.html b/styleguide/item-variables-colors-color-white.html index 9694f3ae2..8249c29d9 100644 --- a/styleguide/item-variables-colors-color-white.html +++ b/styleguide/item-variables-colors-color-white.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5.31 + 6.3.31 Variables.Colors.color-white @@ -116,7 +116,7 @@

    - $color-white: #ffffff !default; + $color-white: #ffffff !default;
    @@ -125,7 +125,7 @@

    Markup - 
    $color-white:                #ffffff !default;
    + 
    $color-white: #ffffff !default;
    diff --git a/styleguide/item-variables-colors.html b/styleguide/item-variables-colors.html index 7a6e6fe7a..40ea93c8f 100644 --- a/styleguide/item-variables-colors.html +++ b/styleguide/item-variables-colors.html @@ -67,32 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.5 + 6.3 Variables.Colors - Colors + Variables.Colors

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    -

    See complete color palette at -http://identity.stanford.edu/color.html#digital-color.

    - -
    -
    - Source: variables/core/_colors.scss, line 3 -
    diff --git a/styleguide/item-variables-components-accordions-accordion-border.html b/styleguide/item-variables-components-accordions-accordion-border.html new file mode 100644 index 000000000..51699b577 --- /dev/null +++ b/styleguide/item-variables-components-accordions-accordion-border.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-accordions.html b/styleguide/item-variables-components-accordions.html new file mode 100644 index 000000000..38c364dd5 --- /dev/null +++ b/styleguide/item-variables-components-accordions.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-alerts-alerts.html b/styleguide/item-variables-components-alerts-alerts.html new file mode 100644 index 000000000..feea8d0fe --- /dev/null +++ b/styleguide/item-variables-components-alerts-alerts.html @@ -0,0 +1,192 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 9.1.2.1 + + Variables.Components.Alerts.alerts + + + $alerts + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Merges $decanter-alerts and $decanter-custom-alerts maps into a new, single +map. +Keys in $decanter-custom-alerts will take precedence over keys in +$decanter-alerts. This is the best way to add new values to a map.

    + +
    + +
    + +
    +
    + Example
    + + +
    + $alerts: map-merge($decanter-alerts, $decanter-custom-alerts); +
    +
    + +
    +
    + + Markup + + 
    $alerts: map-merge($decanter-alerts, $decanter-custom-alerts);
    +
    + +
    + Source: variables/components/_alerts.scss, line 41 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-alerts-decanter-alerts.html b/styleguide/item-variables-components-alerts-decanter-alerts.html new file mode 100644 index 000000000..ccbfbc0c9 --- /dev/null +++ b/styleguide/item-variables-components-alerts-decanter-alerts.html @@ -0,0 +1,199 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 9.1.2.2 + + Variables.Components.Alerts.decanter-alerts + + + $decanter-alerts + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Color map for alert components.

    + +
    + +
    + +
    +
    + Example
    + + +
    + $decanter-alerts: ( + success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity + warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity + error: rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity + info: rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity +); +
    +
    + +
    +
    + + Markup + + 
    $decanter-alerts: (
+  success: rgba(23, 94, 84, 0.6), // $color-palo-alto at 60% opacity
+  warning: rgba(234, 171, 0, 0.6), // $color-sun at 60% opacity
+  error:   rgba(177, 4, 14, 0.5), // $color-bright-red at 50% opacity
+  info:    rgba(0, 152, 219, 0.6), // $color-sky at 60% opacity
+);
    +
    + +
    + Source: variables/components/_alerts.scss, line 20 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-alerts-decanter-custom-alerts.html b/styleguide/item-variables-components-alerts-decanter-custom-alerts.html new file mode 100644 index 000000000..82980f046 --- /dev/null +++ b/styleguide/item-variables-components-alerts-decanter-custom-alerts.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-alerts.html b/styleguide/item-variables-components-alerts.html new file mode 100644 index 000000000..16dcb8e3b --- /dev/null +++ b/styleguide/item-variables-components-alerts.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-navigation-sliding-panel-width.html b/styleguide/item-variables-components-navigation-sliding-panel-width.html new file mode 100644 index 000000000..e6ba8e312 --- /dev/null +++ b/styleguide/item-variables-components-navigation-sliding-panel-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-navigation-z-index-main-menu.html b/styleguide/item-variables-components-navigation-z-index-main-menu.html new file mode 100644 index 000000000..bd8625b5d --- /dev/null +++ b/styleguide/item-variables-components-navigation-z-index-main-menu.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-navigation-z-index-nav.html b/styleguide/item-variables-components-navigation-z-index-nav.html new file mode 100644 index 000000000..ef859b9a8 --- /dev/null +++ b/styleguide/item-variables-components-navigation-z-index-nav.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-navigation-z-index-overlay.html b/styleguide/item-variables-components-navigation-z-index-overlay.html new file mode 100644 index 000000000..d1ea148f9 --- /dev/null +++ b/styleguide/item-variables-components-navigation-z-index-overlay.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components-navigation.html b/styleguide/item-variables-components-navigation.html new file mode 100644 index 000000000..5621dfd05 --- /dev/null +++ b/styleguide/item-variables-components-navigation.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-components.html b/styleguide/item-variables-components.html new file mode 100644 index 000000000..8f9d79070 --- /dev/null +++ b/styleguide/item-variables-components.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-grid-columns-large.html b/styleguide/item-variables-core-breakpoints-grid-columns-large.html new file mode 100644 index 000000000..b4b26cb78 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-grid-columns-large.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-grid-columns-medium.html b/styleguide/item-variables-core-breakpoints-grid-columns-medium.html new file mode 100644 index 000000000..64fbec78d --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-grid-columns-medium.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-grid-columns-small.html b/styleguide/item-variables-core-breakpoints-grid-columns-small.html new file mode 100644 index 000000000..6591fe6d0 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-grid-columns-small.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-large-screen.html b/styleguide/item-variables-core-breakpoints-large-screen.html new file mode 100644 index 000000000..fe5c4601b --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-large-screen.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-large.html b/styleguide/item-variables-core-breakpoints-large.html new file mode 100644 index 000000000..ef958ffb3 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-large.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-medium-screen.html b/styleguide/item-variables-core-breakpoints-medium-screen.html new file mode 100644 index 000000000..b96b99e20 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-medium-screen.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-medium.html b/styleguide/item-variables-core-breakpoints-medium.html new file mode 100644 index 000000000..e7bba741c --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-medium.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 9.2.1.6 + + Variables.Core.Breakpoints.medium + + + $medium + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    @media mixin keyword helper

    + +
    + +
    + +
    +
    + Example
    + + +
    + $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default; +
    +
    + +
    +
    + + Markup + + 
    $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default;
    +
    + +
    + Source: variables/core/_breakpoints.scss, line 80 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-small-screen.html b/styleguide/item-variables-core-breakpoints-small-screen.html new file mode 100644 index 000000000..96041bc8e --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-small-screen.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints-small.html b/styleguide/item-variables-core-breakpoints-small.html new file mode 100644 index 000000000..e615887d8 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints-small.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-breakpoints.html b/styleguide/item-variables-core-breakpoints.html new file mode 100644 index 000000000..88f520be4 --- /dev/null +++ b/styleguide/item-variables-core-breakpoints.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-black.html b/styleguide/item-variables-core-colors-black.html new file mode 100644 index 000000000..d29b3af7f --- /dev/null +++ b/styleguide/item-variables-core-colors-black.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-beige.html b/styleguide/item-variables-core-colors-color-beige.html new file mode 100644 index 000000000..8543121eb --- /dev/null +++ b/styleguide/item-variables-core-colors-color-beige.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-blue.html b/styleguide/item-variables-core-colors-color-blue.html new file mode 100644 index 000000000..118ad8e04 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-blue.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-bright-blue.html b/styleguide/item-variables-core-colors-color-bright-blue.html new file mode 100644 index 000000000..7ef5c558f --- /dev/null +++ b/styleguide/item-variables-core-colors-color-bright-blue.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-bright-red.html b/styleguide/item-variables-core-colors-color-bright-red.html new file mode 100644 index 000000000..5f80797ea --- /dev/null +++ b/styleguide/item-variables-core-colors-color-bright-red.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-brown.html b/styleguide/item-variables-core-colors-color-brown.html new file mode 100644 index 000000000..5a0d566d9 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-brown.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-cardinal-red.html b/styleguide/item-variables-core-colors-color-cardinal-red.html new file mode 100644 index 000000000..6f024949f --- /dev/null +++ b/styleguide/item-variables-core-colors-color-cardinal-red.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-chocolate.html b/styleguide/item-variables-core-colors-color-chocolate.html new file mode 100644 index 000000000..ab8eeaa46 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-chocolate.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-clay.html b/styleguide/item-variables-core-colors-color-clay.html new file mode 100644 index 000000000..12ba72fe0 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-clay.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-cloud.html b/styleguide/item-variables-core-colors-color-cloud.html new file mode 100644 index 000000000..8055818de --- /dev/null +++ b/styleguide/item-variables-core-colors-color-cloud.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-cool-grey.html b/styleguide/item-variables-core-colors-color-cool-grey.html new file mode 100644 index 000000000..38fc347b5 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-cool-grey.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-dark-red.html b/styleguide/item-variables-core-colors-color-dark-red.html new file mode 100644 index 000000000..02d8fd5db --- /dev/null +++ b/styleguide/item-variables-core-colors-color-dark-red.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-driftwood.html b/styleguide/item-variables-core-colors-color-driftwood.html new file mode 100644 index 000000000..1f7d43c0f --- /dev/null +++ b/styleguide/item-variables-core-colors-color-driftwood.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-fog.html b/styleguide/item-variables-core-colors-color-fog.html new file mode 100644 index 000000000..000008986 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-fog.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-gold.html b/styleguide/item-variables-core-colors-color-gold.html new file mode 100644 index 000000000..0e716b606 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-gold.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-lagunita.html b/styleguide/item-variables-core-colors-color-lagunita.html new file mode 100644 index 000000000..252c66703 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-lagunita.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-light-sage.html b/styleguide/item-variables-core-colors-color-light-sage.html new file mode 100644 index 000000000..0188528eb --- /dev/null +++ b/styleguide/item-variables-core-colors-color-light-sage.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-light-sandstone.html b/styleguide/item-variables-core-colors-color-light-sandstone.html new file mode 100644 index 000000000..bd5fd98dc --- /dev/null +++ b/styleguide/item-variables-core-colors-color-light-sandstone.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-mint.html b/styleguide/item-variables-core-colors-color-mint.html new file mode 100644 index 000000000..600a15316 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-mint.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-palo-alto.html b/styleguide/item-variables-core-colors-color-palo-alto.html new file mode 100644 index 000000000..4e83aeb25 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-palo-alto.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-poppy.html b/styleguide/item-variables-core-colors-color-poppy.html new file mode 100644 index 000000000..9928dfe43 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-poppy.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-purple.html b/styleguide/item-variables-core-colors-color-purple.html new file mode 100644 index 000000000..86d21c6b9 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-purple.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-redwood.html b/styleguide/item-variables-core-colors-color-redwood.html new file mode 100644 index 000000000..59704a544 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-redwood.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-sandhill.html b/styleguide/item-variables-core-colors-color-sandhill.html new file mode 100644 index 000000000..1b37758d3 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-sandhill.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-sandstone.html b/styleguide/item-variables-core-colors-color-sandstone.html new file mode 100644 index 000000000..abab3523c --- /dev/null +++ b/styleguide/item-variables-core-colors-color-sandstone.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-sky.html b/styleguide/item-variables-core-colors-color-sky.html new file mode 100644 index 000000000..05638c7cd --- /dev/null +++ b/styleguide/item-variables-core-colors-color-sky.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-stone.html b/styleguide/item-variables-core-colors-color-stone.html new file mode 100644 index 000000000..794e00339 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-stone.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-sun.html b/styleguide/item-variables-core-colors-color-sun.html new file mode 100644 index 000000000..f7ba0e8f7 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-sun.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-teal.html b/styleguide/item-variables-core-colors-color-teal.html new file mode 100644 index 000000000..66117587d --- /dev/null +++ b/styleguide/item-variables-core-colors-color-teal.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-warm-grey.html b/styleguide/item-variables-core-colors-color-warm-grey.html new file mode 100644 index 000000000..9f5fb2f5f --- /dev/null +++ b/styleguide/item-variables-core-colors-color-warm-grey.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors-color-white.html b/styleguide/item-variables-core-colors-color-white.html new file mode 100644 index 000000000..328da6504 --- /dev/null +++ b/styleguide/item-variables-core-colors-color-white.html @@ -0,0 +1,185 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-colors.html b/styleguide/item-variables-core-colors.html new file mode 100644 index 000000000..2925748b1 --- /dev/null +++ b/styleguide/item-variables-core-colors.html @@ -0,0 +1,145 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-article-max-width.html b/styleguide/item-variables-core-magic-article-max-width.html new file mode 100644 index 000000000..2599b7460 --- /dev/null +++ b/styleguide/item-variables-core-magic-article-max-width.html @@ -0,0 +1,179 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-border-radius.html b/styleguide/item-variables-core-magic-border-radius.html new file mode 100644 index 000000000..727292064 --- /dev/null +++ b/styleguide/item-variables-core-magic-border-radius.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-box-shadow.html b/styleguide/item-variables-core-magic-box-shadow.html new file mode 100644 index 000000000..35532e56a --- /dev/null +++ b/styleguide/item-variables-core-magic-box-shadow.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-focus-shadow.html b/styleguide/item-variables-core-magic-focus-shadow.html new file mode 100644 index 000000000..f3ca60ab0 --- /dev/null +++ b/styleguide/item-variables-core-magic-focus-shadow.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 9.2.3.3 + + Variables.Core.Magic.focus-shadow + + + $focus-shadow + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For settings the default focus to be applied to items in their focus state.

    + +
    + +
    + +
    +
    + Example
    + + +
    + $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; +
    +
    + +
    +
    + + Markup + + 
    $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default;
    +
    + +
    + Source: variables/core/_magic-numbers.scss, line 99 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-hit-area.html b/styleguide/item-variables-core-magic-hit-area.html new file mode 100644 index 000000000..52e1c83c7 --- /dev/null +++ b/styleguide/item-variables-core-magic-hit-area.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-input-max-width.html b/styleguide/item-variables-core-magic-input-max-width.html new file mode 100644 index 000000000..109f846df --- /dev/null +++ b/styleguide/item-variables-core-magic-input-max-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-lead-max-width.html b/styleguide/item-variables-core-magic-lead-max-width.html new file mode 100644 index 000000000..2652ff2bf --- /dev/null +++ b/styleguide/item-variables-core-magic-lead-max-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-nav-width.html b/styleguide/item-variables-core-magic-nav-width.html new file mode 100644 index 000000000..9bfe6ecb6 --- /dev/null +++ b/styleguide/item-variables-core-magic-nav-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-site-margins-mobile.html b/styleguide/item-variables-core-magic-site-margins-mobile.html new file mode 100644 index 000000000..ba0a7bb0d --- /dev/null +++ b/styleguide/item-variables-core-magic-site-margins-mobile.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-site-margins.html b/styleguide/item-variables-core-magic-site-margins.html new file mode 100644 index 000000000..b55cc3f65 --- /dev/null +++ b/styleguide/item-variables-core-magic-site-margins.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-site-max-width.html b/styleguide/item-variables-core-magic-site-max-width.html new file mode 100644 index 000000000..ae525ea16 --- /dev/null +++ b/styleguide/item-variables-core-magic-site-max-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic-text-max-width.html b/styleguide/item-variables-core-magic-text-max-width.html new file mode 100644 index 000000000..3ba63ea00 --- /dev/null +++ b/styleguide/item-variables-core-magic-text-max-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-magic.html b/styleguide/item-variables-core-magic.html new file mode 100644 index 000000000..47c9565f6 --- /dev/null +++ b/styleguide/item-variables-core-magic.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-paths-font.html b/styleguide/item-variables-core-paths-font.html new file mode 100644 index 000000000..f1d285a0e --- /dev/null +++ b/styleguide/item-variables-core-paths-font.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-paths-image.html b/styleguide/item-variables-core-paths-image.html new file mode 100644 index 000000000..9bf67b169 --- /dev/null +++ b/styleguide/item-variables-core-paths-image.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-paths.html b/styleguide/item-variables-core-paths.html new file mode 100644 index 000000000..8aaeaba63 --- /dev/null +++ b/styleguide/item-variables-core-paths.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-rails-asset-pipeline.html b/styleguide/item-variables-core-rails-asset-pipeline.html new file mode 100644 index 000000000..50c6dc467 --- /dev/null +++ b/styleguide/item-variables-core-rails-asset-pipeline.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-rails.html b/styleguide/item-variables-core-rails.html new file mode 100644 index 000000000..4777659ff --- /dev/null +++ b/styleguide/item-variables-core-rails.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-base-font-size.html b/styleguide/item-variables-core-typography-base-font-size.html new file mode 100644 index 000000000..754083689 --- /dev/null +++ b/styleguide/item-variables-core-typography-base-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-base-line-height.html b/styleguide/item-variables-core-typography-base-line-height.html new file mode 100644 index 000000000..41e2cc585 --- /dev/null +++ b/styleguide/item-variables-core-typography-base-line-height.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-em-base.html b/styleguide/item-variables-core-typography-em-base.html new file mode 100644 index 000000000..56edcf2a9 --- /dev/null +++ b/styleguide/item-variables-core-typography-em-base.html @@ -0,0 +1,191 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-bold.html b/styleguide/item-variables-core-typography-font-bold.html new file mode 100644 index 000000000..6fa65552f --- /dev/null +++ b/styleguide/item-variables-core-typography-font-bold.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-light.html b/styleguide/item-variables-core-typography-font-light.html new file mode 100644 index 000000000..caa21b3f9 --- /dev/null +++ b/styleguide/item-variables-core-typography-font-light.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-normal.html b/styleguide/item-variables-core-typography-font-normal.html new file mode 100644 index 000000000..ba2e9f32d --- /dev/null +++ b/styleguide/item-variables-core-typography-font-normal.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-sans.html b/styleguide/item-variables-core-typography-font-sans.html new file mode 100644 index 000000000..164930ddc --- /dev/null +++ b/styleguide/item-variables-core-typography-font-sans.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-serif.html b/styleguide/item-variables-core-typography-font-serif.html new file mode 100644 index 000000000..5232e45c3 --- /dev/null +++ b/styleguide/item-variables-core-typography-font-serif.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-slab.html b/styleguide/item-variables-core-typography-font-slab.html new file mode 100644 index 000000000..f58e60107 --- /dev/null +++ b/styleguide/item-variables-core-typography-font-slab.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-x-bold.html b/styleguide/item-variables-core-typography-font-x-bold.html new file mode 100644 index 000000000..2ee4c36d2 --- /dev/null +++ b/styleguide/item-variables-core-typography-font-x-bold.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-font-x-light.html b/styleguide/item-variables-core-typography-font-x-light.html new file mode 100644 index 000000000..dd3d63e53 --- /dev/null +++ b/styleguide/item-variables-core-typography-font-x-light.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h1-font-size.html b/styleguide/item-variables-core-typography-h1-font-size.html new file mode 100644 index 000000000..e668d204a --- /dev/null +++ b/styleguide/item-variables-core-typography-h1-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h2-font-size.html b/styleguide/item-variables-core-typography-h2-font-size.html new file mode 100644 index 000000000..a3361e8b3 --- /dev/null +++ b/styleguide/item-variables-core-typography-h2-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h3-font-size.html b/styleguide/item-variables-core-typography-h3-font-size.html new file mode 100644 index 000000000..70bc987f7 --- /dev/null +++ b/styleguide/item-variables-core-typography-h3-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h4-font-size.html b/styleguide/item-variables-core-typography-h4-font-size.html new file mode 100644 index 000000000..beab0f4c3 --- /dev/null +++ b/styleguide/item-variables-core-typography-h4-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h5-font-size.html b/styleguide/item-variables-core-typography-h5-font-size.html new file mode 100644 index 000000000..bd70a7654 --- /dev/null +++ b/styleguide/item-variables-core-typography-h5-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-h6-font-size.html b/styleguide/item-variables-core-typography-h6-font-size.html new file mode 100644 index 000000000..3774b2d4b --- /dev/null +++ b/styleguide/item-variables-core-typography-h6-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-heading-line-height.html b/styleguide/item-variables-core-typography-heading-line-height.html new file mode 100644 index 000000000..aa083796b --- /dev/null +++ b/styleguide/item-variables-core-typography-heading-line-height.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-lead-font-size.html b/styleguide/item-variables-core-typography-lead-font-size.html new file mode 100644 index 000000000..167cbf814 --- /dev/null +++ b/styleguide/item-variables-core-typography-lead-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-lead-line-height.html b/styleguide/item-variables-core-typography-lead-line-height.html new file mode 100644 index 000000000..7ba1465ea --- /dev/null +++ b/styleguide/item-variables-core-typography-lead-line-height.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-small-font-size.html b/styleguide/item-variables-core-typography-small-font-size.html new file mode 100644 index 000000000..b82114320 --- /dev/null +++ b/styleguide/item-variables-core-typography-small-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-splash-font-size.html b/styleguide/item-variables-core-typography-splash-font-size.html new file mode 100644 index 000000000..c8f4b1e70 --- /dev/null +++ b/styleguide/item-variables-core-typography-splash-font-size.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography-title-font-size.html b/styleguide/item-variables-core-typography-title-font-size.html new file mode 100644 index 000000000..470b2871d --- /dev/null +++ b/styleguide/item-variables-core-typography-title-font-size.html @@ -0,0 +1,179 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core-typography.html b/styleguide/item-variables-core-typography.html new file mode 100644 index 000000000..aeb14519c --- /dev/null +++ b/styleguide/item-variables-core-typography.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-core.html b/styleguide/item-variables-core.html new file mode 100644 index 000000000..aebff4db1 --- /dev/null +++ b/styleguide/item-variables-core.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-buttons-stroke.html b/styleguide/item-variables-elements-buttons-stroke.html new file mode 100644 index 000000000..02c21e2fa --- /dev/null +++ b/styleguide/item-variables-elements-buttons-stroke.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-buttons.html b/styleguide/item-variables-elements-buttons.html new file mode 100644 index 000000000..a4c7a2117 --- /dev/null +++ b/styleguide/item-variables-elements-buttons.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-embed-aspect-height.html b/styleguide/item-variables-elements-embed-aspect-height.html new file mode 100644 index 000000000..c3d8f2790 --- /dev/null +++ b/styleguide/item-variables-elements-embed-aspect-height.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-embed-aspect-width.html b/styleguide/item-variables-elements-embed-aspect-width.html new file mode 100644 index 000000000..6642dcb9f --- /dev/null +++ b/styleguide/item-variables-elements-embed-aspect-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-embed.html b/styleguide/item-variables-elements-embed.html new file mode 100644 index 000000000..c3a0cd42d --- /dev/null +++ b/styleguide/item-variables-elements-embed.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs-border-width.html b/styleguide/item-variables-elements-inputs-border-width.html new file mode 100644 index 000000000..c521ebf63 --- /dev/null +++ b/styleguide/item-variables-elements-inputs-border-width.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs-height-exact.html b/styleguide/item-variables-elements-inputs-height-exact.html new file mode 100644 index 000000000..6c1dc4c25 --- /dev/null +++ b/styleguide/item-variables-elements-inputs-height-exact.html @@ -0,0 +1,190 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 9.3.3.2 + + Variables.Elements.Inputs.height-exact + + + $input-height-exact + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Input heights will vary by browser and type +if height not explicitly set.

    + +
    + +
    + +
    +
    + Example
    + + +
    + $input-height-exact: $base-font-size * $input-line-height + $input-padding-vertical * 2 + $input-border-width * 2; +
    +
    + +
    +
    + + Markup + + 
    $input-height-exact: $base-font-size * $input-line-height + $input-padding-vertical * 2 + $input-border-width * 2;
    +
    + +
    + Source: variables/elements/_inputs.scss, line 43 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs-input-height.html b/styleguide/item-variables-elements-inputs-input-height.html new file mode 100644 index 000000000..d30edfafa --- /dev/null +++ b/styleguide/item-variables-elements-inputs-input-height.html @@ -0,0 +1,190 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs-line-height.html b/styleguide/item-variables-elements-inputs-line-height.html new file mode 100644 index 000000000..8475c6b10 --- /dev/null +++ b/styleguide/item-variables-elements-inputs-line-height.html @@ -0,0 +1,189 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs-padding-vertical.html b/styleguide/item-variables-elements-inputs-padding-vertical.html new file mode 100644 index 000000000..29957a3d7 --- /dev/null +++ b/styleguide/item-variables-elements-inputs-padding-vertical.html @@ -0,0 +1,190 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements-inputs.html b/styleguide/item-variables-elements-inputs.html new file mode 100644 index 000000000..6e10e0f2a --- /dev/null +++ b/styleguide/item-variables-elements-inputs.html @@ -0,0 +1,138 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-elements.html b/styleguide/item-variables-elements.html new file mode 100644 index 000000000..44cb566f6 --- /dev/null +++ b/styleguide/item-variables-elements.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-embed-aspect-height.html b/styleguide/item-variables-embed-aspect-height.html index 7814525bf..bd0408090 100644 --- a/styleguide/item-variables-embed-aspect-height.html +++ b/styleguide/item-variables-embed-aspect-height.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.6.1 + 6.7.1 Variables.Embed.Aspect-Height @@ -108,7 +108,7 @@

    -

    Default Aspect Height Setting.

    +

    Default aspect height setting.

    @@ -133,7 +133,7 @@

    - Source: variables/elements/_embed.scss, line 16 + Source: variables/elements/_embed.scss, line 15
    diff --git a/styleguide/item-variables-embed-aspect-width.html b/styleguide/item-variables-embed-aspect-width.html index 816e5c123..60c627679 100644 --- a/styleguide/item-variables-embed-aspect-width.html +++ b/styleguide/item-variables-embed-aspect-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.6.2 + 6.7.2 Variables.Embed.Aspect-Width @@ -108,7 +108,7 @@

    -

    Default Aspect Width Setting.

    +

    Default aspect width setting.

    @@ -133,7 +133,7 @@

    - Source: variables/elements/_embed.scss, line 27 + Source: variables/elements/_embed.scss, line 26
    diff --git a/styleguide/item-variables-embed.html b/styleguide/item-variables-embed.html index b6df1f511..71119253c 100644 --- a/styleguide/item-variables-embed.html +++ b/styleguide/item-variables-embed.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.6 + 6.7 Variables.Embed - Embed + Variables.Embed

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/elements/_embed.scss, line 3 -
    diff --git a/styleguide/item-variables-inputs-border-width.html b/styleguide/item-variables-inputs-border-width.html index af1614b45..53eef3157 100644 --- a/styleguide/item-variables-inputs-border-width.html +++ b/styleguide/item-variables-inputs-border-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.7.1 + 6.8.1 Variables.Inputs.border-width diff --git a/styleguide/item-variables-inputs-height-exact.html b/styleguide/item-variables-inputs-height-exact.html index d137a583b..0193be37a 100644 --- a/styleguide/item-variables-inputs-height-exact.html +++ b/styleguide/item-variables-inputs-height-exact.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.7.2 + 6.8.2 Variables.Inputs.height-exact diff --git a/styleguide/item-variables-inputs-input-height.html b/styleguide/item-variables-inputs-input-height.html index 893e2b0bb..34af3383e 100644 --- a/styleguide/item-variables-inputs-input-height.html +++ b/styleguide/item-variables-inputs-input-height.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.7.3 + 6.8.3 Variables.Inputs.input-height diff --git a/styleguide/item-variables-inputs-line-height.html b/styleguide/item-variables-inputs-line-height.html index 4045fef17..8ae167ae2 100644 --- a/styleguide/item-variables-inputs-line-height.html +++ b/styleguide/item-variables-inputs-line-height.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.7.4 + 6.8.4 Variables.Inputs.line-height diff --git a/styleguide/item-variables-inputs-padding-vertical.html b/styleguide/item-variables-inputs-padding-vertical.html index 119479d09..c7dbf68d7 100644 --- a/styleguide/item-variables-inputs-padding-vertical.html +++ b/styleguide/item-variables-inputs-padding-vertical.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.7.5 + 6.8.5 Variables.Inputs.padding-vertical diff --git a/styleguide/item-variables-inputs.html b/styleguide/item-variables-inputs.html index 8cae38a60..d5356c021 100644 --- a/styleguide/item-variables-inputs.html +++ b/styleguide/item-variables-inputs.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.7 + 6.8 Variables.Inputs - Inputs + Variables.Inputs

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/elements/_inputs.scss, line 3 -
    diff --git a/styleguide/item-variables-magic-article-max-width.html b/styleguide/item-variables-magic-article-max-width.html index a24103182..170bd2c28 100644 --- a/styleguide/item-variables-magic-article-max-width.html +++ b/styleguide/item-variables-magic-article-max-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.1 + 6.9.1 Variables.Magic.article-max-width @@ -120,7 +120,7 @@

    - $article-max-width: 600px !default; + $article-max-width: 600px !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $article-max-width:   600px !default;
    + 
    $article-max-width: 600px !default;
    - Source: variables/core/_magic-numbers.scss, line 71 + Source: variables/core/_magic-numbers.scss, line 70
    diff --git a/styleguide/item-variables-magic-border-radius.html b/styleguide/item-variables-magic-border-radius.html index a3e30cad7..e17232d29 100644 --- a/styleguide/item-variables-magic-border-radius.html +++ b/styleguide/item-variables-magic-border-radius.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.2 + 6.9.2 Variables.Magic.border-radius @@ -120,7 +120,7 @@

    - $border-radius: 3px !default; + $border-radius: 3px !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $border-radius:       3px !default;
    + 
    $border-radius: 3px !default;
    - Source: variables/core/_magic-numbers.scss, line 93 + Source: variables/core/_magic-numbers.scss, line 92
    diff --git a/styleguide/item-variables-magic-box-shadow.html b/styleguide/item-variables-magic-box-shadow.html index 4d66eff68..a93da0262 100644 --- a/styleguide/item-variables-magic-box-shadow.html +++ b/styleguide/item-variables-magic-box-shadow.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.3 + 6.9.3 Variables.Magic.box-shadow @@ -120,7 +120,7 @@

    - $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default; + $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $box-shadow:          0 2px 2px 0 rgba(0,0,0,0.2) !default;
    + 
    $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) !default;
    - Source: variables/core/_magic-numbers.scss, line 104 + Source: variables/core/_magic-numbers.scss, line 103
    diff --git a/styleguide/item-variables-magic-focus-shadow.html b/styleguide/item-variables-magic-focus-shadow.html index 146477fde..a60d782cc 100644 --- a/styleguide/item-variables-magic-focus-shadow.html +++ b/styleguide/item-variables-magic-focus-shadow.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.4 + 6.9.4 Variables.Magic.focus-shadow @@ -120,7 +120,7 @@

    - $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; + $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $focus-shadow:        0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default;
    + 
    $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default;
    - Source: variables/core/_magic-numbers.scss, line 115 + Source: variables/core/_magic-numbers.scss, line 114
    diff --git a/styleguide/item-variables-magic-hit-area.html b/styleguide/item-variables-magic-hit-area.html index efc77dec7..dc03bebf3 100644 --- a/styleguide/item-variables-magic-hit-area.html +++ b/styleguide/item-variables-magic-hit-area.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.5 + 6.9.5 Variables.Magic.hit-area @@ -134,7 +134,7 @@

    - Source: variables/core/_magic-numbers.scss, line 137 + Source: variables/core/_magic-numbers.scss, line 136
    diff --git a/styleguide/item-variables-magic-input-max-width.html b/styleguide/item-variables-magic-input-max-width.html index 46b5c617f..3dcdfddec 100644 --- a/styleguide/item-variables-magic-input-max-width.html +++ b/styleguide/item-variables-magic-input-max-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.6 + 6.9.6 Variables.Magic.input-max-width @@ -120,7 +120,7 @@

    - $input-max-width: 46rem !default; + $input-max-width: 46rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $input-max-width:     46rem !default;
    + 
    $input-max-width: 46rem !default;
    - Source: variables/core/_magic-numbers.scss, line 82 + Source: variables/core/_magic-numbers.scss, line 81
    diff --git a/styleguide/item-variables-magic-lead-max-width.html b/styleguide/item-variables-magic-lead-max-width.html index 4eca18ad2..95cdc63da 100644 --- a/styleguide/item-variables-magic-lead-max-width.html +++ b/styleguide/item-variables-magic-lead-max-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.7 + 6.9.7 Variables.Magic.lead-max-width @@ -120,7 +120,7 @@

    - $lead-max-width: 85rem !default; + $lead-max-width: 85rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $lead-max-width:      85rem !default;
    + 
    $lead-max-width: 85rem !default;
    - Source: variables/core/_magic-numbers.scss, line 27 + Source: variables/core/_magic-numbers.scss, line 26
    diff --git a/styleguide/item-variables-magic-nav-width.html b/styleguide/item-variables-magic-nav-width.html index c30c7b9f7..c151e5c88 100644 --- a/styleguide/item-variables-magic-nav-width.html +++ b/styleguide/item-variables-magic-nav-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.8 + 6.9.8 Variables.Magic.nav-width @@ -120,7 +120,7 @@

    - $nav-width: 951px !default; + $nav-width: 951px !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $nav-width:           951px !default;
    + 
    $nav-width: 951px !default;
    - Source: variables/core/_magic-numbers.scss, line 126 + Source: variables/core/_magic-numbers.scss, line 125
    diff --git a/styleguide/item-variables-magic-site-margins-mobile.html b/styleguide/item-variables-magic-site-margins-mobile.html index c714fb5ae..c77d8afeb 100644 --- a/styleguide/item-variables-magic-site-margins-mobile.html +++ b/styleguide/item-variables-magic-site-margins-mobile.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.10 + 6.9.10 Variables.Magic.site-margins-mobile @@ -133,7 +133,7 @@

    - Source: variables/core/_magic-numbers.scss, line 60 + Source: variables/core/_magic-numbers.scss, line 59
    diff --git a/styleguide/item-variables-magic-site-margins.html b/styleguide/item-variables-magic-site-margins.html index ff7831e3c..5d1650f12 100644 --- a/styleguide/item-variables-magic-site-margins.html +++ b/styleguide/item-variables-magic-site-margins.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.9 + 6.9.9 Variables.Magic.site-margins @@ -120,7 +120,7 @@

    - $site-margins: 3rem !default; + $site-margins: 3rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $site-margins:        3rem !default;
    + 
    $site-margins: 3rem !default;
    - Source: variables/core/_magic-numbers.scss, line 49 + Source: variables/core/_magic-numbers.scss, line 48
    diff --git a/styleguide/item-variables-magic-site-max-width.html b/styleguide/item-variables-magic-site-max-width.html index a22675e88..4a9ac62fc 100644 --- a/styleguide/item-variables-magic-site-max-width.html +++ b/styleguide/item-variables-magic-site-max-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.11 + 6.9.11 Variables.Magic.site-max-width @@ -120,7 +120,7 @@

    - $site-max-width: 1220px !default; + $site-max-width: 1220px !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $site-max-width:      1220px !default;
    + 
    $site-max-width: 1220px !default;
    - Source: variables/core/_magic-numbers.scss, line 38 + Source: variables/core/_magic-numbers.scss, line 37
    diff --git a/styleguide/item-variables-magic-text-max-width.html b/styleguide/item-variables-magic-text-max-width.html index 2c59844f4..96a108917 100644 --- a/styleguide/item-variables-magic-text-max-width.html +++ b/styleguide/item-variables-magic-text-max-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.8.12 + 6.9.12 Variables.Magic.text-max-width @@ -120,7 +120,7 @@

    - $text-max-width: 70rem !default; + $text-max-width: 70rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $text-max-width:      70rem !default;
    + 
    $text-max-width: 70rem !default;
    - Source: variables/core/_magic-numbers.scss, line 16 + Source: variables/core/_magic-numbers.scss, line 15
    diff --git a/styleguide/item-variables-magic.html b/styleguide/item-variables-magic.html index 53b971dfb..04ffd7cc6 100644 --- a/styleguide/item-variables-magic.html +++ b/styleguide/item-variables-magic.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.8 + 6.9 Variables.Magic - Magic Numbers + Variables.Magic

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/core/_magic-numbers.scss, line 3 -
    diff --git a/styleguide/item-variables-navigation-sliding-panel-width.html b/styleguide/item-variables-navigation-sliding-panel-width.html index 33c0102c5..ba5e77e03 100644 --- a/styleguide/item-variables-navigation-sliding-panel-width.html +++ b/styleguide/item-variables-navigation-sliding-panel-width.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.9.1 + 6.11.1 Variables.Navigation.sliding-panel-width diff --git a/styleguide/item-variables-navigation-z-index-main-menu.html b/styleguide/item-variables-navigation-z-index-main-menu.html index c080cd98c..6f44a5ab2 100644 --- a/styleguide/item-variables-navigation-z-index-main-menu.html +++ b/styleguide/item-variables-navigation-z-index-main-menu.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.9.2 + 6.11.2 Variables.Navigation.z-index-main-menu diff --git a/styleguide/item-variables-navigation-z-index-nav.html b/styleguide/item-variables-navigation-z-index-nav.html index e0477e5ee..ab68cb45d 100644 --- a/styleguide/item-variables-navigation-z-index-nav.html +++ b/styleguide/item-variables-navigation-z-index-nav.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.9.3 + 6.11.3 Variables.Navigation.z-index-nav diff --git a/styleguide/item-variables-navigation-z-index-overlay.html b/styleguide/item-variables-navigation-z-index-overlay.html index 523125ef1..cfeb5241a 100644 --- a/styleguide/item-variables-navigation-z-index-overlay.html +++ b/styleguide/item-variables-navigation-z-index-overlay.html @@ -67,7 +67,7 @@

    Decanter Style Guide and Pattern Library

    - 6.9.4 + 6.11.4 Variables.Navigation.z-index-overlay diff --git a/styleguide/item-variables-navigation.html b/styleguide/item-variables-navigation.html index 878674675..6e68e81f0 100644 --- a/styleguide/item-variables-navigation.html +++ b/styleguide/item-variables-navigation.html @@ -67,30 +67,20 @@

    Decanter Style Guide and Pattern Library

    - 6.9 + 6.11 Variables.Navigation - Navigation + Variables.Navigation

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/components/_navigation.scss, line 3 -
    diff --git a/styleguide/item-variables-paths.html b/styleguide/item-variables-paths.html index 2513ada53..f215f27b9 100644 --- a/styleguide/item-variables-paths.html +++ b/styleguide/item-variables-paths.html @@ -72,25 +72,15 @@

    Variables.Paths - File Paths + Variables.Paths

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/core/_file-paths.scss, line 3 -
    diff --git a/styleguide/item-variables-rails-asset-pipeline.html b/styleguide/item-variables-rails-asset-pipeline.html index eb560c3ea..7ada898f8 100644 --- a/styleguide/item-variables-rails-asset-pipeline.html +++ b/styleguide/item-variables-rails-asset-pipeline.html @@ -133,7 +133,7 @@

    - Source: variables/core/_asset-pipeline.scss, line 16 + Source: variables/core/_asset-pipeline.scss, line 15
    diff --git a/styleguide/item-variables-rails.html b/styleguide/item-variables-rails.html index 247599a2b..77dc537b6 100644 --- a/styleguide/item-variables-rails.html +++ b/styleguide/item-variables-rails.html @@ -72,25 +72,15 @@

    Variables.Rails - Rails + Variables.Rails

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    - -
    -
    - Source: variables/core/_asset-pipeline.scss, line 3 -
    diff --git a/styleguide/item-variables-typography-base-font-size.html b/styleguide/item-variables-typography-base-font-size.html index 67a8698d5..2514093b4 100644 --- a/styleguide/item-variables-typography-base-font-size.html +++ b/styleguide/item-variables-typography-base-font-size.html @@ -120,7 +120,7 @@

    - $base-font-size: 2rem !default; + $base-font-size: 2rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $base-font-size:      2rem !default;
    + 
    $base-font-size: 2rem !default;
    - Source: variables/core/_typography.scss, line 30 + Source: variables/core/_typography.scss, line 29
    diff --git a/styleguide/item-variables-typography-base-line-height.html b/styleguide/item-variables-typography-base-line-height.html index 88043ef09..8077a5b33 100644 --- a/styleguide/item-variables-typography-base-line-height.html +++ b/styleguide/item-variables-typography-base-line-height.html @@ -120,7 +120,7 @@

    - $base-line-height: 1.4 !default; + $base-line-height: 1.4 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $base-line-height:    1.4 !default;
    + 
    $base-line-height: 1.4 !default;
    - Source: variables/core/_typography.scss, line 141 + Source: variables/core/_typography.scss, line 140
    diff --git a/styleguide/item-variables-typography-em-base.html b/styleguide/item-variables-typography-em-base.html index 006410605..6522257ff 100644 --- a/styleguide/item-variables-typography-em-base.html +++ b/styleguide/item-variables-typography-em-base.html @@ -120,7 +120,7 @@

    - $em-base: 10px; + $em-base: 10px;
    @@ -129,11 +129,11 @@

    Markup - 
    $em-base:             10px;
    + 
    $em-base: 10px;
    - Source: variables/core/_typography.scss, line 19 + Source: variables/core/_typography.scss, line 18
    diff --git a/styleguide/item-variables-typography-font-bold.html b/styleguide/item-variables-typography-font-bold.html index 56263a444..b5e872c7a 100644 --- a/styleguide/item-variables-typography-font-bold.html +++ b/styleguide/item-variables-typography-font-bold.html @@ -120,7 +120,7 @@

    - $font-bold: 600 !default; + $font-bold: 600 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-bold:           600 !default;
    + 
    $font-bold: 600 !default;
    - Source: variables/core/_typography.scss, line 242 + Source: variables/core/_typography.scss, line 241
    diff --git a/styleguide/item-variables-typography-font-light.html b/styleguide/item-variables-typography-font-light.html index c3b3adc42..e96c72d3e 100644 --- a/styleguide/item-variables-typography-font-light.html +++ b/styleguide/item-variables-typography-font-light.html @@ -120,7 +120,7 @@

    - $font-light: 200 !default; + $font-light: 200 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-light:          200 !default;
    + 
    $font-light: 200 !default;
    - Source: variables/core/_typography.scss, line 220 + Source: variables/core/_typography.scss, line 219
    diff --git a/styleguide/item-variables-typography-font-normal.html b/styleguide/item-variables-typography-font-normal.html index 583641972..455927149 100644 --- a/styleguide/item-variables-typography-font-normal.html +++ b/styleguide/item-variables-typography-font-normal.html @@ -120,7 +120,7 @@

    - $font-normal: 400 !default; + $font-normal: 400 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-normal:         400 !default;
    + 
    $font-normal: 400 !default;
    - Source: variables/core/_typography.scss, line 231 + Source: variables/core/_typography.scss, line 230
    diff --git a/styleguide/item-variables-typography-font-sans.html b/styleguide/item-variables-typography-font-sans.html index 780c979b8..651bd2222 100644 --- a/styleguide/item-variables-typography-font-sans.html +++ b/styleguide/item-variables-typography-font-sans.html @@ -120,7 +120,7 @@

    - $font-sans: 'Source Sans Pro', $helvetica !default; + $font-sans: 'Source Sans Pro', $helvetica !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-sans:           'Source Sans Pro', $helvetica !default;
    + 
    $font-sans: 'Source Sans Pro', $helvetica !default;
    - Source: variables/core/_typography.scss, line 175 + Source: variables/core/_typography.scss, line 174
    diff --git a/styleguide/item-variables-typography-font-serif.html b/styleguide/item-variables-typography-font-serif.html index 255416d39..9b9052c5e 100644 --- a/styleguide/item-variables-typography-font-serif.html +++ b/styleguide/item-variables-typography-font-serif.html @@ -120,7 +120,7 @@

    - $font-serif: 'Crimson Text', $georgia !default; + $font-serif: 'Crimson Text', $georgia !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-serif:          'Crimson Text', $georgia !default;
    + 
    $font-serif: 'Crimson Text', $georgia !default;
    - Source: variables/core/_typography.scss, line 186 + Source: variables/core/_typography.scss, line 185
    diff --git a/styleguide/item-variables-typography-font-slab.html b/styleguide/item-variables-typography-font-slab.html index 93f9dfe3d..e35dfb432 100644 --- a/styleguide/item-variables-typography-font-slab.html +++ b/styleguide/item-variables-typography-font-slab.html @@ -120,7 +120,7 @@

    - $font-slab: 'Roboto Slab', $georgia !default; + $font-slab: 'Roboto Slab', $georgia !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-slab:           'Roboto Slab', $georgia !default;
    + 
    $font-slab: 'Roboto Slab', $georgia !default;
    - Source: variables/core/_typography.scss, line 197 + Source: variables/core/_typography.scss, line 196
    diff --git a/styleguide/item-variables-typography-font-x-bold.html b/styleguide/item-variables-typography-font-x-bold.html index 2d34d7b3a..cf9c170bc 100644 --- a/styleguide/item-variables-typography-font-x-bold.html +++ b/styleguide/item-variables-typography-font-x-bold.html @@ -120,7 +120,7 @@

    - $font-x-bold: 700 !default; + $font-x-bold: 700 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-x-bold:         700 !default;
    + 
    $font-x-bold: 700 !default;
    - Source: variables/core/_typography.scss, line 253 + Source: variables/core/_typography.scss, line 252
    diff --git a/styleguide/item-variables-typography-font-x-light.html b/styleguide/item-variables-typography-font-x-light.html index 118005601..f441b7310 100644 --- a/styleguide/item-variables-typography-font-x-light.html +++ b/styleguide/item-variables-typography-font-x-light.html @@ -120,7 +120,7 @@

    - $font-x-light: 100 !default; + $font-x-light: 100 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $font-x-light:        100 !default;
    + 
    $font-x-light: 100 !default;
    - Source: variables/core/_typography.scss, line 209 + Source: variables/core/_typography.scss, line 208
    diff --git a/styleguide/item-variables-typography-h1-font-size.html b/styleguide/item-variables-typography-h1-font-size.html index 35feea29e..ae641ad53 100644 --- a/styleguide/item-variables-typography-h1-font-size.html +++ b/styleguide/item-variables-typography-h1-font-size.html @@ -120,7 +120,7 @@

    - $h1-font-size: 4.3rem !default; + $h1-font-size: 4.3rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h1-font-size:        4.3rem !default;
    + 
    $h1-font-size: 4.3rem !default;
    - Source: variables/core/_typography.scss, line 74 + Source: variables/core/_typography.scss, line 73
    diff --git a/styleguide/item-variables-typography-h2-font-size.html b/styleguide/item-variables-typography-h2-font-size.html index 0b250d959..e4e6d6f87 100644 --- a/styleguide/item-variables-typography-h2-font-size.html +++ b/styleguide/item-variables-typography-h2-font-size.html @@ -120,7 +120,7 @@

    - $h2-font-size: 3.3rem !default; + $h2-font-size: 3.3rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h2-font-size:        3.3rem !default;
    + 
    $h2-font-size: 3.3rem !default;
    - Source: variables/core/_typography.scss, line 85 + Source: variables/core/_typography.scss, line 84
    diff --git a/styleguide/item-variables-typography-h3-font-size.html b/styleguide/item-variables-typography-h3-font-size.html index e507d5540..b6a870a63 100644 --- a/styleguide/item-variables-typography-h3-font-size.html +++ b/styleguide/item-variables-typography-h3-font-size.html @@ -120,7 +120,7 @@

    - $h3-font-size: 2.3rem !default; + $h3-font-size: 2.3rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h3-font-size:        2.3rem !default;
    + 
    $h3-font-size: 2.3rem !default;
    - Source: variables/core/_typography.scss, line 96 + Source: variables/core/_typography.scss, line 95
    diff --git a/styleguide/item-variables-typography-h4-font-size.html b/styleguide/item-variables-typography-h4-font-size.html index ec90cabe1..7a619f2d4 100644 --- a/styleguide/item-variables-typography-h4-font-size.html +++ b/styleguide/item-variables-typography-h4-font-size.html @@ -120,7 +120,7 @@

    - $h4-font-size: 2rem !default; + $h4-font-size: 2rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h4-font-size:        2rem !default;
    + 
    $h4-font-size: 2rem !default;
    - Source: variables/core/_typography.scss, line 107 + Source: variables/core/_typography.scss, line 106
    diff --git a/styleguide/item-variables-typography-h5-font-size.html b/styleguide/item-variables-typography-h5-font-size.html index 3b0a07593..54f084963 100644 --- a/styleguide/item-variables-typography-h5-font-size.html +++ b/styleguide/item-variables-typography-h5-font-size.html @@ -120,7 +120,7 @@

    - $h5-font-size: 1.8rem !default; + $h5-font-size: 1.8rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h5-font-size:        1.8rem !default;
    + 
    $h5-font-size: 1.8rem !default;
    - Source: variables/core/_typography.scss, line 118 + Source: variables/core/_typography.scss, line 117
    diff --git a/styleguide/item-variables-typography-h6-font-size.html b/styleguide/item-variables-typography-h6-font-size.html index 8a25207a5..9fb916ac3 100644 --- a/styleguide/item-variables-typography-h6-font-size.html +++ b/styleguide/item-variables-typography-h6-font-size.html @@ -120,7 +120,7 @@

    - $h6-font-size: 1.6rem !default; + $h6-font-size: 1.6rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $h6-font-size:        1.6rem !default;
    + 
    $h6-font-size: 1.6rem !default;
    - Source: variables/core/_typography.scss, line 129 + Source: variables/core/_typography.scss, line 128
    diff --git a/styleguide/item-variables-typography-heading-line-height.html b/styleguide/item-variables-typography-heading-line-height.html index d608c2ab2..0e9b2363c 100644 --- a/styleguide/item-variables-typography-heading-line-height.html +++ b/styleguide/item-variables-typography-heading-line-height.html @@ -133,7 +133,7 @@

    - Source: variables/core/_typography.scss, line 152 + Source: variables/core/_typography.scss, line 151
    diff --git a/styleguide/item-variables-typography-lead-font-size.html b/styleguide/item-variables-typography-lead-font-size.html index c8055610a..8cd0ff7d0 100644 --- a/styleguide/item-variables-typography-lead-font-size.html +++ b/styleguide/item-variables-typography-lead-font-size.html @@ -120,7 +120,7 @@

    - $lead-font-size: 2.3rem !default; + $lead-font-size: 2.3rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $lead-font-size:      2.3rem !default;
    + 
    $lead-font-size: 2.3rem !default;
    - Source: variables/core/_typography.scss, line 52 + Source: variables/core/_typography.scss, line 51
    diff --git a/styleguide/item-variables-typography-lead-line-height.html b/styleguide/item-variables-typography-lead-line-height.html index cf3d2b6fc..4138c9a5a 100644 --- a/styleguide/item-variables-typography-lead-line-height.html +++ b/styleguide/item-variables-typography-lead-line-height.html @@ -120,7 +120,7 @@

    - $lead-line-height: 1.5 !default; + $lead-line-height: 1.5 !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $lead-line-height:    1.5 !default;
    + 
    $lead-line-height: 1.5 !default;
    - Source: variables/core/_typography.scss, line 163 + Source: variables/core/_typography.scss, line 162
    diff --git a/styleguide/item-variables-typography-small-font-size.html b/styleguide/item-variables-typography-small-font-size.html index b4770b912..f7524dd78 100644 --- a/styleguide/item-variables-typography-small-font-size.html +++ b/styleguide/item-variables-typography-small-font-size.html @@ -120,7 +120,7 @@

    - $small-font-size: 1.7rem !default; + $small-font-size: 1.7rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $small-font-size:     1.7rem !default;
    + 
    $small-font-size: 1.7rem !default;
    - Source: variables/core/_typography.scss, line 41 + Source: variables/core/_typography.scss, line 40
    diff --git a/styleguide/item-variables-typography-title-font-size.html b/styleguide/item-variables-typography-title-font-size.html index 793b709a1..14f851994 100644 --- a/styleguide/item-variables-typography-title-font-size.html +++ b/styleguide/item-variables-typography-title-font-size.html @@ -120,7 +120,7 @@

    - $title-font-size: 5.5rem !default; + $title-font-size: 5.5rem !default;
    @@ -129,11 +129,11 @@

    Markup - 
    $title-font-size:     5.5rem !default;
    + 
    $title-font-size: 5.5rem !default;
    - Source: variables/core/_typography.scss, line 63 + Source: variables/core/_typography.scss, line 62
    diff --git a/styleguide/item-variables-typography.html b/styleguide/item-variables-typography.html index c898aefc8..4cb6ac67b 100644 --- a/styleguide/item-variables-typography.html +++ b/styleguide/item-variables-typography.html @@ -72,27 +72,15 @@

    Variables.Typography - Typography + Variables.Typography

    -
    -

    Every variable is declared as !default so that it can be -overridden by a previous import.

    -

    If you want to override a variable, set that variable in one of your -own partials, then @import '{path/to/}core/variables'.

    -

    Removing the !default from $em-base so we are not inheriting that -value from Bourbon.

    - -
    -
    - Source: variables/core/_typography.scss, line 3 -
    diff --git a/styleguide/item-variables.html b/styleguide/item-variables.html index 97fad9374..c027871c1 100644 --- a/styleguide/item-variables.html +++ b/styleguide/item-variables.html @@ -27,663 +27,144 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables @@ -699,7 +180,7 @@

    Decanter Style Guide and Pattern Library

    - 6 + 9 Variables @@ -709,6 +190,16 @@

    +
    +

    Variables are a way to store information that will be reused throughout a +project. They store things like colors and fonts, or any CSS value that'll be +reused. +Every variable is declared as !default so that it can be +overridden by a previous import. +If you want to override a variable, set that variable in one of your +own partials, then @import '{path/to/}core/variables'.

    + +
    diff --git a/styleguide/section-components.html b/styleguide/section-components.html index 91bf1ff7c..82494fbdd 100644 --- a/styleguide/section-components.html +++ b/styleguide/section-components.html @@ -27,101 +27,74 @@

    Decanter Style Guide and Pattern Library

  • + + 1Atoms + +
    • +
  • - 1Components + 2Components
  • - 2Core + 3Core + +
    • +
  • + + 4Elements
  • - 3Functions + 5Functions
  • - 4Mixins + 6Mixins
  • - - 5Templates + + 7Molecules + +
    • +
  • + + 8Organisims
  • - 6Variables + 9Variables
    • @@ -135,7 +108,7 @@

    Decanter Style Guide and Pattern Library

    - 1 + 2 Components @@ -158,7 +131,7 @@

    - 1.1 + 2.1 Components.Atoms @@ -184,298 +157,6 @@

    Source: components/index.scss, line 8 -
    - -
    -
    -

    - - - 1.1.1 - - Components.Atoms.MediaBlockBody - - - Media Block Body - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    TODO: Describe what this does. Does this really need to exist?

    - -
    - -
    - -
    -
    - Example
    - - -
    -
    -

    Lorem ipsum dolor sit

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -
    -
    -
    - -
    -
    - - Markup - - 
    <div class="decanter-media-block__body">
- <h2>Lorem ipsum dolor sit</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</div>
    -
    - -
    - Source: components/atoms/_media-block.scss, line 17 -
    -
    -
    -
    -

    - - - 1.1.2 - - Components.Atoms.MediaBlockImg - - - Media Block Image - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    TODO: Describe what this does.

    - -
    - -
    - -
    -
    - Example
    - - -
    - Alt text -
    -
    - -
    -
    - - Markup - - 
    <img class="decanter-media-block__img" src="../../../img/circle.png" alt="Alt text">
    -
    - -
    - Source: components/atoms/_media-block.scss, line 3 -
    -
    -
    -
    -

    - - - 1.1.3 - - Components.Atoms.Skipnav - - - Skipnav - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    For providing a link at the top of the page which jumps -the user down to an anchor or target at the beginning -of the main content. Learn more at https://webaim.org/techniques/skipnav.

    - -
    - -
    - -
    -
    - Example
    - - -
    - Skip to main navigation - -
    -
    - -
    -
    - - Markup: ../templates/components/atoms/skipnav/skipnav.html.twig - - 
    <a href="#main-menu" class="decanter-skipnav">Skip to main navigation</a>
-
    -
    - -
    - Source: components/atoms/_skipnav.scss, line 3
    @@ -483,7 +164,7 @@

    - 1.2 + 2.2 Components.Molecules @@ -509,641 +190,6 @@

    Source: components/index.scss, line 20 -
    -

    -
    -
    -

    - - - 1.2.1 - - Components.Molecules.Alerts - - - Alerts - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    For displaying a notification that keeps people informed -of a status, or for displaying a validation message that -alerts someone of an important piece of information.

    - -
    - -
    - -
    -
    - Examples
    - -
    - Default styling -
    - -
    -
    -
    -

    Alert Heading

    -

    This is the details of the alert message.

    -
    -
    - -
    -
    - -
    - .decanter-alert-success -
    -
    - Successful Transaction Message -
    -
    -
    -
    -

    Alert Heading

    -

    This is the details of the alert message.

    -
    -
    - -
    -
    -
    - .decanter-alert-warning -
    -
    - Warning Message -
    -
    -
    -
    -

    Alert Heading

    -

    This is the details of the alert message.

    -
    -
    - -
    -
    -
    - .decanter-alert-error -
    -
    - Error Message -
    -
    -
    -
    -

    Alert Heading

    -

    This is the details of the alert message.

    -
    -
    - -
    -
    -
    - .decanter-alert-info -
    -
    - Informative Message -
    -
    -
    -
    -

    Alert Heading

    -

    This is the details of the alert message.

    -
    -
    - -
    -
    -
    -
    - - Markup: ../templates/components/molecules/alerts/alerts.html.twig - - 
    <div class="decanter-alert [modifier class]">
-  <div class="decanter-alert__body">
-    <h3 class="decanter-alert__heading">Alert Heading</h3>
-    <p class="decanter-alert__text">This is the details of the alert message.</p>
-  </div>
-</div>
-
    -
    - -
    - Source: components/molecules/_alerts.scss, line 3 -
    -
    -
    -
    -

    - - - 1.2.2 - - Components.Molecules.IconGrid - - - Icon Grid - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    Grid of icons (or images) with text.

    - -
    - -
    - -
    -
    - Example
    - - -
    -
    - -
    - - - -
    - Please provide alt text -
    -

    Item One

    -

    Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    -
    -
    -
    - Please provide alt text -
    -

    Item Two

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    -
    -
    - -
    -
    - - - -
    - Please provide alt text -
    -

    Item Three

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -
    -
    -
    - Please provide alt text -
    -

    Item Four

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - - Markup: ../templates/components/molecules/icon-grid/icon-grid.html.twig - - 
    <div class="decanter-icon-grid ">
-  
-              <div class="decanter-icon-grid__row ">
-
-      
-  
-            <div class="decanter-media_block decanter-width-one-half">
-  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
-  <div class="decanter-media-block__body ">
-  <h2>Item One</h2>
-  <p>Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
-</div>
-</div>
-          <div class="decanter-media_block decanter-width-one-half">
-  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
-  <div class="decanter-media-block__body ">
-  <h2>Item Two</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
-</div>
-</div>
-      
-</div>
-          <div class="decanter-icon-grid__row ">
-
-      
-  
-            <div class="decanter-media_block decanter-width-one-half">
-  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
-  <div class="decanter-media-block__body ">
-  <h2>Item Three</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</div>
-</div>
-          <div class="decanter-media_block decanter-width-one-half">
-  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
-  <div class="decanter-media-block__body ">
-  <h2>Item Four</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</div>
-</div>
-      
-</div>
-      </div>
-
    -
    - -
    - Source: components/molecules/_icon-grid.scss, line 3 -
    -
    -
    -
    -

    - - - 1.2.3 - - Components.Molecules.MainMenu - - - Main Menu - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    A main navigation component with drop downs.

    - -
    - -
    - -
    -
    - Example
    - - -
    -
    -
    - - -
    -
    -
    - -
    -
    - -
    -
    - - Markup: ../templates/components/molecules/main-menu/main-menu.html.twig - - 
    <div class="decanter-main-menu">
-  <div class="decanter-nav__container">
-    <button class="decanter-main-menu__btn">Menu</button>
-    <nav role="navigation" class="decanter-nav">
-      <button class="decanter-nav__close">
-        <img src="../../../img/close.svg" alt="close">
-      </button>
-      <ul class="decanter-nav-primary decanter-accordion">
-        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-one">
-      Parent link
-    </button>
-          <ul id="basic-nav-section-one" class="decanter-nav-submenu">
-            <li>
-              <a href="#">Child link</a>
-            </li>
-            <li>
-              <a href="#">Child link</a>
-            </li>
-            <li>
-              <a href="#">Child link</a>
-            </li>
-          </ul>
-        </li>
-        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two">
-      Parent link
-    </button>
-          <ul id="basic-nav-section-two" class="decanter-nav-submenu">
-            <li>
-              <a href="#">Child link</a>
-            </li>
-            <li>
-              <a href="#">Child link</a>
-            </li>
-            <li>
-              <a href="#">Child link</a>
-            </li>
-          </ul>
-        </li>
-        <li><a class="decanter-nav__link" href="#">
-      Parent link
-    </a></li>
-      </ul>
-    </nav>
-  </div>
-</div>
-<div class="decanter-nav__overlay"></div>
-
    -
    - -
    - Source: components/molecules/_main-menu.scss, line 3 -
    -
    -
    -
    -

    - - - 1.2.4 - - Components.Molecules.Mega Menu - - - Mega Menu - -

    - -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    - -
    -

    This is a mega menu.

    - -
    - -
    - -
    -
    - Example
    - - -
    -

    Hello

    -
    -
    - -
    -
    - - Markup - - 
    <h2>Hello</h2>
    -
    - -
    - Source: components/molecules/_mega-menu.scss, line 3
    @@ -1151,7 +197,7 @@

    Hello

    - 1.3 + 2.3 Components.Organisims @@ -1188,254 +234,27 @@

    Source: components/index.scss, line 32

    -
    +
    -

    - +

    + - 1.3.1 + 2.4 - Components.Organisims.Accordion + Components.Templates - Accordion + Templates -

    +

    -

    - - Toggle full screen - - - - - - - - - Open in new window - - - - - - - - - - - Toggle example guides - - - - - - - - - - - - - - - - - - - - - Toggle HTML markup - - - - - -

    -
    -

    For use when a user only needs a few specific pieces of -content within a page, or for when information needs to -be displayed in a small space.

    - -
    -
    -
    - Examples
    - -
    - Default styling -
    - -
    -
      -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    - -
    -
    - -
    - .decanter-accordion--bordered -
    -
    - Bordered Version -
    -
    -
      -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    • - -
      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
      -
      • -
    - -
    -
    -
    -
    - - Markup: ../templates/components/organisms/accordions/accordions.html.twig - - 
    <ul class="decanter-accordion  [modifier class]">
-  <li>
-    <button class="decanter-accordion__button" aria-expanded="true" aria-controls="b-a1">
-      First Item
-    </button>
-    <div id="b-a1" class="decanter-accordion__content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-  <li>
-    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a2">
-      Second Item
-    </button>
-    <div id="b-a2" class="decanter-accordion__content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-  <li>
-    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a3">
-      Third Item
-    </button>
-    <div id="b-a3" class="decanter-accordion__content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-  <li>
-    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a4">
-      Fourth Item
-    </button>
-    <div id="b-a4" class="decanter-accordion__content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-  <li>
-    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a5">
-      Fifth Item
-    </button>
-    <div id="b-a5" class="decanter-accordion__content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-</ul>
-
    -
    - +
    - Source: components/organisms/_accordions.scss, line 3 + Source: components/index.scss, line 53
    diff --git a/styleguide/section-core.html b/styleguide/section-core.html index 864be5d4b..9921b4987 100644 --- a/styleguide/section-core.html +++ b/styleguide/section-core.html @@ -27,65 +27,68 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -99,7 +102,7 @@

    Decanter Style Guide and Pattern Library

    - 2 + 5 Core @@ -122,7 +125,7 @@

    - 2.1 + 5.1 Core.Colors @@ -131,54 +134,8 @@

    - - - - - -
    - Source: core/index.scss, line 16 -
    -

    -
    -
    -

    - - - 2.2 - - Core.Elements - - - Elements - -

    - - - -
    - - -
    - Source: elements/index.scss, line 3 -
    -
    -
    -
    -

    - - - 2.2.1 - - Core.Elements.Buttons - - - Buttons - -

    -

    - + Toggle full screen @@ -187,7 +144,7 @@

    - + Open in new window @@ -198,7 +155,7 @@

    - + Toggle example guides @@ -219,7 +176,7 @@

    - + Toggle HTML markup @@ -228,10 +185,6 @@

    -
    -

    Simple button element to aid in creating interactive design.

    - -

    @@ -241,9 +194,130 @@

    - Primary Button -Secondary Button -Big Button +
    +
    Black
    +
    #2e2d29
    +
    +
    +
    Cardinal Red
    +
    #8c1515
    +
    +
    +
    Cool Grey
    +
    #4d4f53
    +
    +
    +
    White
    +
    #ffffff
    +
    +
    +
    Beige
    +
    #9d9573
    +
    +
    +
    Blue
    +
    #00548f
    +
    +
    +
    Bright Blue
    +
    #006cb8
    +
    +
    +
    Bright Red
    +
    #b1040e
    +
    +
    +
    Brown
    +
    #5e3032
    +
    +
    +
    Chocolate
    +
    #2f2424
    +
    +
    +
    Clay
    +
    #5f574f
    +
    +
    +
    Cloud
    +
    #dad7cb
    +
    +
    +
    Dark Red
    +
    #820000
    +
    +
    +
    Driftwood
    +
    #b6b1a9
    +
    +
    +
    Fog
    +
    #f4f4f4
    +
    +
    +
    Gold
    +
    #b26f16
    +
    +
    +
    Lagunita
    +
    #007c92
    +
    +
    +
    Light Sage
    +
    #c7d1c5
    +
    +
    +
    Light Sandstone
    +
    #f9f6ef
    +
    +
    +
    Mint
    +
    #009b76
    +
    +
    +
    Poppy
    +
    #e98300
    +
    +
    +
    Palo Alto
    +
    #175e54
    +
    +
    +
    Purple
    +
    #53284f
    +
    +
    +
    Redwood
    +
    #8d3c1e
    +
    +
    +
    Sandhill
    +
    #b3995d
    +
    +
    +
    Sandstone
    +
    #d2c295
    +
    +
    +
    Sky
    +
    #0098db
    +
    +
    +
    Stone
    +
    #544948
    +
    +
    +
    Sun
    +
    #eaab00
    +
    +
    +
    Teal
    +
    #00505c
    +
    +
    +
    Warm Grey
    +
    #3f3c30
    +
    @@ -251,16 +325,137 @@

    - Markup: ../templates/elements/buttons/buttons.html.twig + Markup: ../templates/core/colors/colors.html.twig - 
    <a class="decanter-button">Primary Button</a>
-<a class="decanter-button--secondary">Secondary Button</a>
-<a class="decanter-button--big">Big Button</a>
+            
    <div class="decanter-width-one-sixth" style="background: #2e2d29; color: #ffffff;">
+  <div>Black</div>
+  <div>#2e2d29</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #8c1515; color: #ffffff;">
+  <div>Cardinal Red</div>
+  <div>#8c1515</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #4d4f53; color: #ffffff;">
+  <div>Cool Grey</div>
+  <div>#4d4f53</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #ffffff;">
+  <div>White</div>
+  <div>#ffffff</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #9d9573;">
+  <div>Beige</div>
+  <div>#9d9573</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #00548f;">
+  <div>Blue</div>
+  <div>#00548f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #006cb8;">
+  <div>Bright Blue</div>
+  <div>#006cb8</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b1040e; color: #ffffff;">
+  <div>Bright Red</div>
+  <div>#b1040e</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #5e3032; color: #ffffff;">
+  <div>Brown</div>
+  <div>#5e3032</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #2f2424; color: #ffffff;">
+  <div>Chocolate</div>
+  <div>#2f2424</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #5f574f; color: #ffffff;">
+  <div>Clay</div>
+  <div>#5f574f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #dad7cb;">
+  <div>Cloud</div>
+  <div>#dad7cb</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #820000;">
+  <div>Dark Red</div>
+  <div>#820000</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b6b1a9;">
+  <div>Driftwood</div>
+  <div>#b6b1a9</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #f4f4f4;">
+  <div>Fog</div>
+  <div>#f4f4f4</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b26f16;">
+  <div>Gold</div>
+  <div>#b26f16</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #007c92; color: #ffffff;">
+  <div>Lagunita</div>
+  <div>#007c92</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #c7d1c5;">
+  <div>Light Sage</div>
+  <div>#c7d1c5</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #f9f6ef;">
+  <div>Light Sandstone</div>
+  <div>#f9f6ef</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #009b76;">
+  <div>Mint</div>
+  <div>#009b76</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #e98300;">
+  <div>Poppy</div>
+  <div>#e98300</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #175e54; color: #ffffff;">
+  <div>Palo Alto</div>
+  <div>#175e54</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #53284f; color: #ffffff;">
+  <div>Purple</div>
+  <div>#53284f</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #8d3c1e; color: #ffffff;">
+  <div>Redwood</div>
+  <div>#8d3c1e</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #b3995d;">
+  <div>Sandhill</div>
+  <div>#b3995d</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #d2c295;">
+  <div>Sandstone</div>
+  <div>#d2c295</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #0098db;">
+  <div>Sky</div>
+  <div>#0098db</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #544948; color: #ffffff;">
+  <div>Stone</div>
+  <div>#544948</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #eaab00;">
+  <div>Sun</div>
+  <div>#eaab00</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #00505c; color: #ffffff;">
+  <div>Teal</div>
+  <div>#00505c</div>
+</div>
+<div class="decanter-width-one-sixth" style="background: #3f3c30; color: #ffffff;">
+  <div>Warm Grey</div>
+  <div>#3f3c30</div>
+</div>
    - Source: elements/_buttons.scss, line 3 + Source: core/index.scss, line 20

    @@ -268,7 +463,7 @@

    - 2.3 + 5.2 Core.Fonts @@ -277,11 +472,150 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    - +
    +
    + Example
    + + +
    +
    +

    Source Sans Pro

    +

    Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +

    Crimson Text

    +

    Crimson Text ("Crimson") is a free and open-source text type family. The font is designed in the tradition of beautiful oldstyle type. It features six cuts characters for a wide range of European languages.

    +

    Heading1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +

    Roboto Slab

    +

    Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, + allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    +
    + +
    +
    + +
    +
    + + Markup: ../templates/core/fonts/fonts.html.twig + + 
      <div class="decanter-sans">
+    <h2>Source Sans Pro</h2>
+    <p class="decanter-font-lead">Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.</p>
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+    <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
+  <div class="decanter-serif">
+    <h2>Crimson Text</h2>
+    <p class="decanter-font-lead">Crimson Text ("Crimson") is a free and open-source text type family. The font is designed in the tradition of beautiful oldstyle type. It features six cuts characters for a wide range of European languages.</p>
+    <h1>Heading1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+    <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
+  <div class="decanter-slab">
+    <h2>Roboto Slab</h2>
+    <p class="decanter-font-lead">Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise,
+        allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</p>
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+        <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+
    +
    +
    Source: core/index.scss, line 8
    @@ -291,7 +625,7 @@

    - 2.4 + 5.3 Core.Grid @@ -300,13 +634,120 @@

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    - +
    +
    + Example
    + + +
    + +

    .decanter-width-one-fourth

    +
    +
    1
    +
    2
    +
    3
    +
    4
    +
    +
    +
    5
    +
    6
    +
    7
    +
    8
    +
    +
    +
    9
    +
    10
    +
    11
    +
    12
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/core/grid/grid.html.twig + + 
    
+<h3>.decanter-width-one-fourth</h3>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">1</div>
+            <div class="decanter-width-one-fourth">2</div>
+            <div class="decanter-width-one-fourth">3</div>
+            <div class="decanter-width-one-fourth">4</div>
+    </div>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">5</div>
+            <div class="decanter-width-one-fourth">6</div>
+            <div class="decanter-width-one-fourth">7</div>
+            <div class="decanter-width-one-fourth">8</div>
+    </div>
+<div class="decanter-grid">
+            <div class="decanter-width-one-fourth">9</div>
+            <div class="decanter-width-one-fourth">10</div>
+            <div class="decanter-width-one-fourth">11</div>
+            <div class="decanter-width-one-fourth">12</div>
+    </div>
+
    +
    +
    - Source: core/index.scss, line 12 + Source: core/index.scss, line 14

    diff --git a/styleguide/section-elements.html b/styleguide/section-elements.html new file mode 100644 index 000000000..eebd429f9 --- /dev/null +++ b/styleguide/section-elements.html @@ -0,0 +1,970 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 6 + + Elements + + + Elements + +

    + + +
    +

    Elements are individual units of an HTML document or web page.

    + +
    + +
    + + +
    + Source: elements/index.scss, line 3 +
    +
    +
    +
    +

    + + + 6.1 + + Elements.EmbedContainer + + + Embed + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Responsive embed container to ensure that contents scale to the +width of parent element while retaining an aspect ratio of 16:9.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/embed/embed.html.twig + + 
    <div class="decanter-embed-container" aria-label="16:9">
+  <iframe width="315" height="560" src="https://www.youtube.com/embed/_Nq4Z5i7lcs" frameborder="0" allowfullscreen></iframe>
+</div>
+
    +
    + +
    + Source: elements/_embed.scss, line 3 +
    +
    +
    +
    +

    + + + 6.2 + + Elements.Helpers + + + Helpers + +

    + + +
    +

    Helper partials for element css.

    + +
    + +
    + + +
    + Source: elements/helpers/index.scss, line 3 +
    +
    +
    +
    +

    + + + 6.2.1 + + Elements.Helpers.sr-only + + + @sr-only + +

    + + +
    +

    Hides piece of content from the screen but keeps in the DOM for screen +readers.

    + +
    + +
    + + +
    + Source: elements/helpers/_sr-only.scss, line 5 +
    +
    +
    +
    +

    + + + 6.3 + + Elements.Links + + + Links + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default link styling, as well as special link treatment styling.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +

    This is a Link

    + +
    +
    + +
    + .decanter-external-link +
    +
    + External Link +
    +
    +

    This is a Link

    + +
    +
    +
    + .decanter-more-link +
    +
    + More Link +
    +
    +

    This is a Link

    + +
    +
    +
    +
    + + Markup: ../templates/elements/links/links.html.twig + + 
    <p>This is a <a class="[modifier class]" href="#">Link</a></p>
+
    +
    + +
    + Source: elements/_links.scss, line 3 +
    +
    +
    +
    +

    + + + 6.4 + + Elements.Lists + + + Lists + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for lists, including ordered and unordered lists.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
      +
    1. List Item
      2. +
    2. List Item
      3. +
    3. List Item +
        +
      1. List Item
        2. +
      2. List Item
        3. +
      3. List Item +
          +
        1. List Item
          2. +
        2. List Item
          3. +
        3. List Item
          4. +
        +
        4. +
      +
      4. +
    + +
      +
    • List Item
      • +
    • List Item +
        +
      • List Item
        • +
      • List Item
        • +
      • List Item +
          + +
        • List Item
          • +
        • List Item
          • +
        • List Item
          • +
        +
        • +
      +
      • +
    • List Item
      • +
    + +
    +
    Description List Title
    +
    This is a description list division.
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/lists/lists.html.twig + + 
    <ol>
+  <li>List Item</li>
+  <li>List Item</li>
+  <li>List Item
+    <ol type="a">
+      <li>List Item</li>
+      <li>List Item</li>
+      <li>List Item
+        <ol type="i">
+          <li>List Item</li>
+          <li>List Item</li>
+          <li>List Item</li>
+        </ol>
+      </li>
+    </ol>
+  </li>
+</ol>
+
+<ul>
+  <li>List Item</li>
+  <li>List Item
+    <ul>
+      <li>List Item</li>
+      <li>List Item</li>
+      <li>List Item
+        <ul>
+
+          <li>List Item</li>
+          <li>List Item</li>
+          <li>List Item</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li>List Item</li>
+</ul>
+
+<dl>
+  <dt>Description List Title</dt>
+  <dd>This is a description list division.</dd>
+</dl>
+
    +
    + +
    + Source: elements/_list.scss, line 3 +
    +
    +
    +
    +

    + + + 6.5 + + Elements.Tables + + + Tables + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for tables. For displaying tabular data that best lends +itself to being layed out in columns and rows. +Modifier class available to remove tables borders.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    + + + + + + + + + + + + + + + + + + + + + +
    Table HeaderTable HeaderTable Header
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    + +
    +
    + +
    + .decanter-table--borderless +
    +
    + Borderless Table +
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Table HeaderTable HeaderTable Header
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    Table CellTable CellTable Cell
    + +
    +
    +
    +
    + + Markup: ../templates/elements/tables/tables.html.twig + + 
    <table class="[modifier class]" cellspacing="0" cellpadding="0">
+  <tr>
+    <th>Table Header</th>
+    <th>Table Header</th>
+    <th>Table Header</th>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+  <tr>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+    <td>Table Cell</td>
+  </tr>
+</table>
+
    +
    + +
    + Source: elements/_table.scss, line 3 +
    +
    +
    +
    +

    + + + 6.6 + + Elements.Typography + + + Typography + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default typography styling for base HTML typography elements, including +paragraphs and headings. Also includes special type treatment classes such as +splash font and lead font.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    + +
    + .decanter-font-lead +
    +
    + Lead Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-font-splash +
    +
    + Splash Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-short-line-length +
    +
    + Short Line Length +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-caption +
    +
    + Caption Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    + .decanter-credits +
    +
    + Credits Font +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + +
    +
    +
    +
    + + Markup: ../templates/elements/font-styles/font-styles.html.twig + + 
    <p class="[modifier class]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
    +
    + +
    + Source: elements/_typography.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/section-functions.html b/styleguide/section-functions.html index d5008e2fd..5830803ab 100644 --- a/styleguide/section-functions.html +++ b/styleguide/section-functions.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 3 + 7 Functions @@ -77,6 +92,11 @@

    +
    +

    Programmatic procedure or routine to help making writing code or declaring +something easier and more seamlesss.

    + +
    diff --git a/styleguide/section-mixins.html b/styleguide/section-mixins.html index 11989e108..971c55a0d 100644 --- a/styleguide/section-mixins.html +++ b/styleguide/section-mixins.html @@ -27,209 +27,434 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core + +
    • +
  • + + 6Elements
  • - 3Functions + 7Functions
  • - 4Mixins + 8Mixins
  • - - 5Templates - -
    • -
  • - 6Variables + 9Variables
    • @@ -243,7 +468,7 @@

    Decanter Style Guide and Pattern Library

    - 4 + 8 Mixins @@ -253,12 +478,19 @@

    +
    +

    Mixins help with things that are a bit tedious to write in CSS (e.g., +vendor prefixes that exist). Mixins allow for making groups of CSS +declarations for reuse throughout a project. Mixins can even pass in values +to make things more flexible.

    + +
    - Source: utilities/index.scss, line 8 + Source: utilities/index.scss, line 11
    @@ -266,7 +498,7 @@

    - 4.1 + 8.1 Mixins.Accessibility @@ -276,6 +508,10 @@

    +
    +

    Mixins for Accessibility

    + +
    @@ -289,7 +525,7 @@

    - 4.1.1 + 8.1.1 Mixins.Accessibility.hidden @@ -316,7 +552,7 @@

    - 4.1.2 + 8.1.2 Mixins.Accessibility.skipnav @@ -343,7 +579,7 @@

    - 4.1.3 + 8.1.3 Mixins.Accessibility.sr-only @@ -370,27 +606,34 @@

    - 4.2 + 8.2 Mixins.Accordions - Mixins.Accordions + Accordions

    +
    +

    Mixins for Accordions

    + +
    +
    + Source: utilities/mixins/accordions/index.scss, line 3 +

    - 4.2.1 + 8.2.1 Mixins.Accordions.accordion-bordered @@ -400,6 +643,10 @@

    +
    +

    Adds a border to the accordion.

    + +

    @@ -413,7 +660,7 @@

    - 4.2.2 + 8.2.2 Mixins.Accordions.accordion-button @@ -423,6 +670,10 @@

    +
    +

    Default styling for the clickable button of an accordion.

    + +
    @@ -436,7 +687,7 @@

    - 4.2.3 + 8.2.3 Mixins.Accordions.accordion-button-unopened @@ -446,6 +697,10 @@

    +
    +

    Adds the closed icon (plus) to the accordion.

    + +
    @@ -459,7 +714,7 @@

    - 4.2.4 + 8.2.4 Mixins.Accordions.accordion-content @@ -469,6 +724,10 @@

    +
    +

    Default styling for the content within the expanded accordion.

    + +
    @@ -482,7 +741,7 @@

    - 4.2.5 + 8.2.5 Mixins.Accordions.accordion-list @@ -492,6 +751,10 @@

    +
    +

    Default styling for an expanded accordion that includes a list.

    + +
    @@ -505,7 +768,7 @@

    - 4.2.6 + 8.2.6 Mixins.Accordions.accordion-list-item @@ -515,6 +778,10 @@

    +
    +

    Default styling for list items that appear within an expanded accordion.

    + +
    @@ -528,7 +795,7 @@

    - 4.2.7 + 8.2.7 Mixins.Accordions.accordion-nested-list @@ -538,6 +805,10 @@

    +
    +

    Default styling for nested lists within an expanded accordion.

    + +
    @@ -551,27 +822,34 @@

    - 4.3 + 8.3 Mixins.Alerts - Mixins.Alerts + Alerts

    +
    +

    Mixins for Alerts

    + +
    +
    + Source: utilities/mixins/alerts/index.scss, line 3 +

    - 4.3.1 + 8.3.1 Mixins.Alerts.alerts @@ -581,6 +859,12 @@

    +
    +

    For displaying a notification that keeps people informed +of a status, or for displaying a validation message that +alerts someone of an important piece of information.

    + +

    @@ -594,7 +878,7 @@

    - 4.3.2 + 8.3.2 Mixins.Alerts.alerts-icons-colors @@ -604,55 +888,16 @@

    - - - - -
    - Source: utilities/mixins/alerts/_alerts-icons-colors.scss, line 3 -
    -

    -
    -
    -

    - - - 4.4 - - Mixins.Banners - - - Mixins.Banners - -

    - - - -
    - - -
    -
    -
    -

    - - - 4.4.1 - - Mixins.Banners.hero-banner - - - @hero-banner - -

    +
    +

    Loops through color option settings for Alets component.

    - +
    - Source: utilities/mixins/banners/_hero-banner.scss, line 3 + Source: utilities/mixins/alerts/_alerts-icons-colors.scss, line 3
    @@ -660,27 +905,34 @@

    - 4.5 + 8.4 Mixins.Buttons - Mixins.Buttons + Buttons

    +
    +

    Mixins for Buttons

    + +
    +
    + Source: utilities/mixins/buttons/index.scss, line 3 +

    - 4.5.1 + 8.4.1 Mixins.Buttons.button-big @@ -690,6 +942,10 @@

    +
    +

    Big button styling.

    + +

    @@ -703,7 +959,7 @@

    - 4.5.2 + 8.4.2 Mixins.Buttons.button-primary @@ -713,6 +969,10 @@

    +
    +

    Primary (default) button styling.

    + +
    @@ -726,7 +986,7 @@

    - 4.5.3 + 8.4.3 Mixins.Buttons.button-secondary @@ -736,6 +996,10 @@

    +
    +

    Secondary button styling.

    + +
    @@ -749,7 +1013,7 @@

    - 4.5.4 + 8.4.4 Mixins.Buttons.button-unstyled @@ -759,6 +1023,10 @@

    +
    +

    Removes styling from a button.

    + +
    @@ -772,27 +1040,34 @@

    - 4.6 + 8.5 Mixins.Display - Mixins.Display + Display

    +
    +

    Mixins for Display

    + +
    +
    + Source: utilities/mixins/display/index.scss, line 3 +

    - 4.6.1 + 8.5.1 Mixins.Display.display-icon @@ -803,7 +1078,8 @@

    -

    TODO: Description

    +

    @TODO Needs to be documented. Should this be reworked for asset +management purposes?

    Usage: @include display-icon($icon, $direction, $size, $margin, $hover);

    @@ -853,7 +1129,7 @@

    - 4.6.2 + 8.5.2 Mixins.Display.embed-container @@ -864,7 +1140,8 @@

    -

    TODO: Description

    +

    Responsive embed container to ensure that contents scale to the +width of parent element while retaining an aspect ratio of 16:9.

    @@ -895,7 +1172,7 @@

    - 4.6.3 + 8.5.3 Mixins.Display.media-block-img @@ -906,7 +1183,8 @@

    -

    TODO: Description

    +

    Floats an image to the left and provides a specified margin right. To be used +when floating images alongside other content.

    @@ -926,41 +1204,77 @@

    Source: utilities/mixins/display/_media-block-img.scss, line 3

    -
    +
    -

    - +

    + - 4.7 + 8.5.4 - Mixins.Grid + Mixins.Display.overflow - Grid + @overflow($property) -

    +

    -

    Grid system mixins.

    +

    Specifies what should happen if content overflows an element's box.

    -
    +
    Parameters:
    +
      +
    • +
      $property
      +
      + visible (web default), scroll, hidden (mixin default), auto +
      +
      • +
    +
    - Source: utilities/mixins/grid/index.scss, line 3 + Source: utilities/mixins/display/_overflow.scss, line 3
    -
    +
    -

    - +

    + - 4.7.1 + 8.6 - Mixins.Grid.allow-layout-classes + Mixins.Grid + + + Grid + +

    + + +
    +

    Mixins for Grid

    + +
    + +

    + + +
    + Source: utilities/mixins/grid/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.6.1 + + Mixins.Grid.allow-layout-classes @allow-layout-classes @@ -985,18 +1299,18 @@

    - 4.8 + 8.7 Mixins.icon-grid - Icon Grid + @icon-grid

    -

    Todo: Description.

    +

    Grid of icons (or images) with text.

    @@ -1007,6 +1321,982 @@

    Source: utilities/mixins/icon-grid/_icon-grid.scss, line 3

    +
    +
    +

    + + + 8.8 + + Mixins.Links + + + Links + +

    + + +
    +

    Mixins for Links

    + +
    + +
    + + +
    + Source: utilities/mixins/links/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.8.1 + + Mixins.Links.external-link + + + @external-link($external-link, $external-link-hover) + +

    + + +
    +

    Default external link styling, with external icon.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_external-link.scss, line 3 +
    +
    +
    +
    +

    + + + 8.8.2 + + Mixins.Links.link + + + @link + +

    + + +
    +

    Default link styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_link.scss, line 3 +
    +
    +
    +
    +

    + + + 8.8.3 + + Mixins.Links.more-link + + + @more-link($more-link, $more-link-hover) + +

    + + +
    +

    Default more link styling, with raquo.

    + +
    + +
    + + +
    + Source: utilities/mixins/links/_more-link.scss, line 3 +
    +
    +
    +
    +

    + + + 8.9 + + Mixins.Lists + + + Lists + +

    + + +
    +

    Mixins for Lists

    + +
    + +
    + + +
    + Source: utilities/mixins/lists/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.9.1 + + Mixins.Lists.list-unstyled + + + @list-unstyled + +

    + + +
    +

    Removes styles from a list.

    + +
    + +
    + + +
    + Source: utilities/mixins/lists/_list-unstyled.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10 + + Mixins.Menus + + + Menus + +

    + + +
    +

    Mixins for Menus

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10.1 + + Mixins.Menus.main-menu + + + @main-menu + +

    + + +
    +

    For use with main navigation that does or does not support drop downs.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_main-menu.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10.2 + + Mixins.Menus.megamenu + + + @megamenu + +

    + + +
    +

    An expandable menu in which choices are displayed in a two-dimensional +dropdown layout. Excellent design choice for accommodating a large number of +options or for revealing lower-level site pages at a glance.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_megamenu.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10.3 + + Mixins.Menus.outter-megamenu + + + @outer-megamenu + +

    + + +
    +

    @TODO Needs to be documented.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_outer-megamenu.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10.4 + + Mixins.Menus.sidenav-sublist + + + @sidenav-sublist + +

    + + +
    +

    For styling a sublist of a side navaition menu.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_sidenav-sublist.scss, line 3 +
    +
    +
    +
    +

    + + + 8.10.5 + + Mixins.Menus.subnav-list + + + @sidenav-list + +

    + + +
    +

    Default styling for a side navigation list.

    + +
    + +
    + + +
    + Source: utilities/mixins/menus/_sidenav-list.scss, line 3 +
    +
    +
    +
    +

    + + + 8.11 + + Mixins.Navigation + + + Navigation + +

    + + +
    +

    Mixins for Navigation

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.11.1 + + Mixins.Navigation.nav-border + + + @nav-border + +

    + + +
    +

    For applying a border to navigation.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-border.scss, line 3 +
    +
    +
    +
    +

    + + + 8.11.2 + + Mixins.Navigation.nav-close + + + @nav-close + +

    + + +
    +

    Close button for mobile navigation.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-close.scss, line 3 +
    +
    +
    +
    +

    + + + 8.11.3 + + Mixins.Navigation.nav-overlay + + + @nav-overlay + +

    + + +
    +

    Screen overlay for when mobile nav is exposed.

    + +
    + +
    + + +
    + Source: utilities/mixins/navigation/_nav-overlay.scss, line 3 +
    +
    +
    +
    +

    + + + 8.12 + + Mixins.Tables + + + Tables + +

    + + +
    +

    Mixins for Tables

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.12.1 + + Mixins.Tables.table-borderless + + + @table-borderless + +

    + + +
    +

    Tables without borders styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/_table-borderless.scss, line 3 +
    +
    +
    +
    +

    + + + 8.12.2 + + Mixins.Tables.tables + + + @tables + +

    + + +
    +

    Default table styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/tables/_tables.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13 + + Mixins.Typography + + + Typography + +

    + + +
    +

    Mixins for Typography

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.1 + + Mixins.Typography.caption + + + @caption + +

    + + +
    +

    To be used for describing the content of an image.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_caption.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.2 + + Mixins.Typography.credits + + + @credits + +

    + + +
    +

    To be used for crediting a source or photographer.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_credits.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.3 + + Mixins.Typography.font-lead + + + @font-lead + +

    + + +
    +

    For leading a page of text, summarizing a main point, and/or highlighting a +paragraph or quote.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-lead.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.4 + + Mixins.Typography.font-smoothing + + + @font-smoothing + +

    + + +
    +

    To be used for light text on a dark background only.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-smoothing.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.5 + + Mixins.Typography.font-splash + + + @font-splash + +

    + + +
    +

    For text on a page that should stand out and draw more attention.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_font-splash.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.6 + + Mixins.Typography.h1 + + + @h1 + +

    + + +
    +

    Default heading 1 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h1.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.7 + + Mixins.Typography.h2 + + + @h2 + +

    + + +
    +

    Default heading 2 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h2.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.8 + + Mixins.Typography.h3 + + + @h3 + +

    + + +
    +

    Default heading 3 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h3.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.9 + + Mixins.Typography.h4 + + + @h4 + +

    + + +
    +

    Default heading 4 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h4.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.10 + + Mixins.Typography.h5 + + + @h5 + +

    + + +
    +

    Default heading 5 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h5.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.11 + + Mixins.Typography.h6 + + + @h6 + +

    + + +
    +

    Default heading 6 styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_h6.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.12 + + Mixins.Typography.headings + + + @headings + +

    + + +
    +

    Default heading shared styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_headings.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.13 + + Mixins.Typography.sans + + + @sans + +

    + + +
    +

    Sans Serfif font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_sans.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.14 + + Mixins.Typography.serif + + + @serif + +

    + + +
    +

    Serif font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_serif.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.15 + + Mixins.Typography.short-line-length + + + @short-line-length + +

    + + +
    +

    For reducing the length of lines in a paragraph, no matter the width of its +container.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_short-line-length.scss, line 3 +
    +
    +
    +
    +

    + + + 8.13.16 + + Mixins.Typography.slab + + + @slab + +

    + + +
    +

    Slab font styling.

    + +
    + +
    + + +
    + Source: utilities/mixins/typography/_slab.scss, line 3 +
    +
    diff --git a/styleguide/section-templates.html b/styleguide/section-templates.html index 2135ad0e7..8680dbe59 100644 --- a/styleguide/section-templates.html +++ b/styleguide/section-templates.html @@ -27,33 +27,48 @@

    Decanter Style Guide and Pattern Library

  • - - 1Components + + 1Atoms + +
    • +
  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates
  • - 2Core + 5Core
  • - - 3Functions + + 6Elements
  • - - 4Mixins + + 7Functions
  • - - 5Templates + + 8Mixins
  • - 6Variables + 9Variables
    • @@ -67,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 5 + 4 Templates @@ -82,7 +97,7 @@

    - Source: components/templates/index.scss, line 1 + Source: components/index.scss, line 54
    diff --git a/styleguide/section-variables.html b/styleguide/section-variables.html index d6c5aba8c..4fb84cce2 100644 --- a/styleguide/section-variables.html +++ b/styleguide/section-variables.html @@ -27,663 +27,144 @@

    Decanter Style Guide and Pattern Library
  • - - 1Components + + 1Atoms
  • - - 2Core - -
    • -
  • - - 3Functions + + 2Molecules
  • - - 4Mixins - -
    • -
  • - - 5Templates + + 3Organisims
  • - - 6Variables - -