diff --git a/packages/development-edition-engine-handlebars/source/_annotations/annotations.js b/packages/development-edition-engine-handlebars/source/_annotations/annotations.js new file mode 100644 index 000000000..ecc9b7e36 --- /dev/null +++ b/packages/development-edition-engine-handlebars/source/_annotations/annotations.js @@ -0,0 +1,3 @@ +var comments = { + "comments": [] +}; diff --git a/packages/development-edition-engine-handlebars/source/_annotations/annotations.json b/packages/development-edition-engine-handlebars/source/_annotations/annotations.json deleted file mode 100644 index a0d0268f8..000000000 --- a/packages/development-edition-engine-handlebars/source/_annotations/annotations.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "comments": [] -} diff --git a/packages/starterkit-handlebars-demo/dist/_annotations/annotations.js b/packages/starterkit-handlebars-demo/dist/_annotations/annotations.js new file mode 100644 index 000000000..0812c089d --- /dev/null +++ b/packages/starterkit-handlebars-demo/dist/_annotations/annotations.js @@ -0,0 +1,14 @@ +var comments = { + "comments" : [ + { + "el": ".c-header", + "title" : "Masthead", + "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content." + }, + { + "el": ".c-logo", + "title": "Logo", + "comment": "The logo isn't an image but regular text, which ensures that the logo displays crisply even on high resolution displays." + } + ] +}; diff --git a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css index a2bfd7189..ce8c29d4d 100644 --- a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css +++ b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css @@ -4,110 +4,106 @@ * These styles will not be your production CSS. */ #sg-patterns { - -webkit-box-sizing: border-box !important; - box-sizing: border-box !important; - max-width: 100%; - padding: 0 1rem; + -webkit-box-sizing: border-box !important; + box-sizing: border-box !important; + max-width: 100%; + padding: 0 1rem; } .demo-animate { - background: #ddd; - padding: 1em; - margin-bottom: 1em; - text-align: center; - border-radius: 8px; - cursor: pointer; + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; + border-radius: 8px; + cursor: pointer; } .sg-colors { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - list-style: none !important; - padding: 0 !important; - margin: 0 !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; } @supports (display: grid) { - .sg-colors { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat( - auto-fill, - minmax(180px, 1fr) - ); - } + .sg-colors { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } } - .sg-colors li { - -webkit-box-flex: 1; - -ms-flex: auto; - flex: auto; - padding: 0.3em; - margin: 0 0.5em 0.5em 0; - min-width: 5em; - max-width: 14em; - border: 1px solid #ddd; - border-radius: 8px; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + padding: 0.3em; + margin: 0 0.5em 0.5em 0; + min-width: 5em; + max-width: 14em; + border: 1px solid #ddd; + border-radius: 8px; } .sg-swatch { - display: block; - height: 4em; - margin-bottom: 0.3em; - border-radius: 5px; + display: block; + height: 4em; + margin-bottom: 0.3em; + border-radius: 5px; } .sg-label { - font-size: 90%; - line-height: 1; + font-size: 90%; + line-height: 1; } /** * Icon grid */ .icon-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } /** * Icon grid item */ .icon-grid__item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 5.5rem; - height: 5.5rem; - background: #f5f5f5; - border: 1px solid #cccccd; - border-radius: 8px; - padding: 0.5rem; - margin: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 5.5rem; + height: 5.5rem; + background: #f5f5f5; + border: 1px solid #cccccd; + border-radius: 8px; + padding: 0.5rem; + margin: 0.5rem; } /** * Icon grid item title */ .icon-grid__item h3 { - font-size: 0.6rem; - margin-top: 1rem; + font-size: 0.6rem; + margin-top: 1rem; } /** * Icon grid item svg */ .icon-grid__item svg { - height: 16px; - width: 16px; + height: 16px; + width: 16px; } .sg-pattern-example > footer > p { - display: none; + display: none; } /** @@ -115,55 +111,53 @@ * 1) Used for placeholder blocks for layouts */ .fpo { - padding: 1rem; - background: #f5f5f5; - text-align: center; - font-weight: bold; - margin-bottom: 0.5rem; + padding: 1rem; + background: #f5f5f5; + text-align: center; + font-weight: bold; + margin-bottom: 0.5rem; } /** * Dark for placeholder only block */ .fpo-block--dark { - background: #808080; + background: #808080; } .sg-pattern-example small { - font-size: 10px; - display: block; - margin-top: 0.5rem; + font-size: 10px; + display: block; + margin-top: 0.5rem; } .sg-pattern-example small code { - font-size: inherit; - padding: 0.2em; + font-size: inherit; + padding: 0.2em; } /** * Add height and overflow to two column fixed layout to show functionality only in style-guide example. */ .sg-pattern-example .l-page-layout--two-column-fixed { - height: 10rem; - overflow: auto; + height: 10rem; + overflow: auto; } /** * Add min-height of 0 to two column fixed to help with showing functionality only in style-guide example. */ .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { - min-height: 0; + min-height: 0; } /** * FPO block within two column fixed layout within secondary section * 1) Width expands entire container at small screens */ -.sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 100%; /* 1 */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 100%; + /* 1 */ } /** @@ -172,24 +166,22 @@ * 2) Set width = width of vertical header */ @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 20rem; /* 1 */ - height: 100vh; /* 2 */ - margin-bottom: 0; - } + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 20rem; + /* 1 */ + height: 100vh; + /* 2 */ + margin-bottom: 0; + } } - /** * Two column fixed layout within pattern example * 1) Set height to height of placeholder content secondary section * 2) Set overflow to auto so the secondary section stays fixed while the main section scrolls */ .sg-pattern-example .l-page-layout--two-column-fixed { - height: 18.3rem; - overflow: auto; + height: 18.3rem; + overflow: auto; } /** @@ -198,26 +190,23 @@ * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page * 3) Float this left to get layout sections side by side within PL "View All" section */ - @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary { - position: absolute; /* 1 */ - height: inherit; /* 2 */ - float: left; /* 3 */ - } + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { + position: absolute; + /* 1 */ + height: inherit; + /* 2 */ + float: left; + /* 3 */ + } } - /** * Fpo block within pattern example, two column fixed, and secondary section * 1) Make fpo block width of the container on small screens */ -.sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 100%; /* 1 */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 100%; + /* 1 */ } /** @@ -226,50 +215,103 @@ * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page */ @media all and (min-width: 70em) { - .sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__secondary - .fpo-block { - width: 20rem; /* 1 */ - height: inherit; /* 2 */ - } + .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary .fpo-block { + width: 20rem; + /* 1 */ + height: inherit; + /* 2 */ + } } - /** * Add height of main to get appearance of side bar staying fixed while main window scrolls. */ .sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main { - height: 30rem; + height: 30rem; } /** * Add height of fpo block to equal height of main to help with scrolling main window/fixed sidebar effect. */ -.sg-pattern-example - .l-page-layout--two-column-fixed - .l-page-layout__main - .fpo-block { - height: 30rem; - margin-bottom: 0; +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main .fpo-block { + height: 30rem; + margin-bottom: 0; } /** * Vertical header in pattern example at large screens */ @media all and (min-width: 70em) { - .sg-pattern-example .c-header--vertical { - max-width: 20rem; - } + .sg-pattern-example .c-header--vertical { + max-width: 20rem; + } } - #molecules-footer-nav .sg-pattern-example { - background: #041544; + background: #041544; } .sg-pattern .c-hero { - margin: 0; + margin: 0; } .sg-pattern .c-promo-block { - margin: 0; + margin: 0; +} + +/*------------------------------------*\ + #VARIABLES +\*------------------------------------*/ +/** +* These variables are specific to the Pattern Lab shell and exist +* indepenedently of any project-specific styles +*/ +/*------------------------------------*\ + #ANNOTATIONS +\*------------------------------------*/ +/** + * Annotated elements styles + * 1) Annotation styles that appear inside the iframe + * 2) For elements in the DOM that have an annotation, we want to + * provide styles that help the user understand that annotations are available. + * We do this with some cursor helpers and a + */ +.pl-has-annotation { + cursor: help !important; + outline: 1px dotted #808080; + outline-offset: -4px; + transition: box-shadow 0.1s ease; +} +.pl-has-annotation a, +.pl-has-annotation input { + cursor: help !important; +} +.pl-has-annotation:hover { + box-shadow: 0 0 3px #808080; +} +.pl-has-annotation.active { + box-shadow: inset 0 0 6px #4d4c4c; + outline: 1px dotted #808080; + outline-offset: -1px; } + +/** + * Annotation tooltip + * 1) Appears inside the iframe over any element that has an + * annotation attached to it. + */ +.pl-c-annotation-tip { + display: flex; + align-items: center; + justify-content: center; + width: 24px !important; + height: 24px !important; + margin-top: 6px !important; + margin-left: 6px !important; + border-radius: 50% !important; + background-color: #222 !important; + color: #fff !important; + font-size: 16px !important; + position: absolute; + z-index: 100; +} + +/*# sourceMappingURL=pattern-scaffolding.css.map */ diff --git a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css.map b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css.map new file mode 100644 index 000000000..d6b0cc61b --- /dev/null +++ b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["pattern-scaffolding.scss","../../../uikit-workshop/src/sass/scss/01-abstracts/_variables.scss","../../../uikit-workshop/src/sass/scss/04-components/_annotations.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;IACC;IACA;IACA;;;AAOF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAIC;AAAa;;;AAGd;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;IAIC;AAAc;IACd;AAAe;IACf;;;AAIF;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACC;IAGC;AAAoB;IACpB;AAAiB;IACjB;AAAa;;;AAIf;AAAA;AAAA;AAAA;AAIA;EAIC;AAAa;;;AAGd;AAAA;AAAA;AAAA;AAAA;AAKA;EACC;IAIC;AAAc;IACd;AAAiB;;;AAInB;AAAA;AAAA;AAGA;EACC;;;AAGD;AAAA;AAAA;AAGA;EAIC;EACA;;;AAGD;AAAA;AAAA;AAGA;EACC;IACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACjRD;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;ACFA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;;AAEA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"pattern-scaffolding.css"} \ No newline at end of file diff --git a/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss new file mode 100644 index 000000000..54ba44764 --- /dev/null +++ b/packages/starterkit-handlebars-demo/dist/css/pattern-scaffolding.scss @@ -0,0 +1,279 @@ +/** + * This stylesheet is for styles you want to include only when displaying demo + * styles for grids, animations, color swatches, etc. + * These styles will not be your production CSS. + */ +#sg-patterns { + -webkit-box-sizing: border-box !important; + box-sizing: border-box !important; + max-width: 100%; + padding: 0 1rem; +} + +.demo-animate { + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; + border-radius: 8px; + cursor: pointer; +} + +.sg-colors { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; +} + +@supports (display: grid) { + .sg-colors { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat( + auto-fill, + minmax(180px, 1fr) + ); + } +} + +.sg-colors li { + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + padding: 0.3em; + margin: 0 0.5em 0.5em 0; + min-width: 5em; + max-width: 14em; + border: 1px solid #ddd; + border-radius: 8px; +} + +.sg-swatch { + display: block; + height: 4em; + margin-bottom: 0.3em; + border-radius: 5px; +} + +.sg-label { + font-size: 90%; + line-height: 1; +} + +/** + * Icon grid + */ +.icon-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); +} + +/** + * Icon grid item + */ +.icon-grid__item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 5.5rem; + height: 5.5rem; + background: #f5f5f5; + border: 1px solid #cccccd; + border-radius: 8px; + padding: 0.5rem; + margin: 0.5rem; +} + +/** + * Icon grid item title + */ +.icon-grid__item h3 { + font-size: 0.6rem; + margin-top: 1rem; +} + +/** +* Icon grid item svg +*/ +.icon-grid__item svg { + height: 16px; + width: 16px; +} + +.sg-pattern-example > footer > p { + display: none; +} + +/** +* For placeholder only block +* 1) Used for placeholder blocks for layouts +*/ +.fpo { + padding: 1rem; + background: #f5f5f5; + text-align: center; + font-weight: bold; + margin-bottom: 0.5rem; +} + +/** +* Dark for placeholder only block +*/ +.fpo-block--dark { + background: #808080; +} + +.sg-pattern-example small { + font-size: 10px; + display: block; + margin-top: 0.5rem; +} + +.sg-pattern-example small code { + font-size: inherit; + padding: 0.2em; +} + +/** + * Add height and overflow to two column fixed layout to show functionality only in style-guide example. + */ +.sg-pattern-example .l-page-layout--two-column-fixed { + height: 10rem; + overflow: auto; +} + +/** + * Add min-height of 0 to two column fixed to help with showing functionality only in style-guide example. + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__secondary { + min-height: 0; +} + +/** + * FPO block within two column fixed layout within secondary section + * 1) Width expands entire container at small screens + */ +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 100%; /* 1 */ +} + +/** + * FPO block within two column fixed layout within secondary section larger screens + * 1) Set height to 100% of viewport height + * 2) Set width = width of vertical header + */ +@media all and (min-width: 70em) { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 20rem; /* 1 */ + height: 100vh; /* 2 */ + margin-bottom: 0; + } +} + +/** + * Two column fixed layout within pattern example + * 1) Set height to height of placeholder content secondary section + * 2) Set overflow to auto so the secondary section stays fixed while the main section scrolls + */ +.sg-pattern-example .l-page-layout--two-column-fixed { + height: 18.3rem; + overflow: auto; +} + +/** + * Secondary section within pattern example and two-column fixed at larger screens + * 1) Position absolute to make this pattern similar to fixed vertical header + * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page + * 3) Float this left to get layout sections side by side within PL "View All" section + */ + +@media all and (min-width: 70em) { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary { + position: absolute; /* 1 */ + height: inherit; /* 2 */ + float: left; /* 3 */ + } +} + +/** + * Fpo block within pattern example, two column fixed, and secondary section + * 1) Make fpo block width of the container on small screens + */ +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 100%; /* 1 */ +} + +/** + * FPO Block Within pattern example, two column fixed, and secondary layout larger screens + * 1) Added width similar to style guide vertical header + * 2) Height inherits so it doesn't span longer than the pattern window on "All" PL page + */ +@media all and (min-width: 70em) { + .sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__secondary + .fpo-block { + width: 20rem; /* 1 */ + height: inherit; /* 2 */ + } +} + +/** + * Add height of main to get appearance of side bar staying fixed while main window scrolls. + */ +.sg-pattern-example .l-page-layout--two-column-fixed .l-page-layout__main { + height: 30rem; +} + +/** + * Add height of fpo block to equal height of main to help with scrolling main window/fixed sidebar effect. + */ +.sg-pattern-example + .l-page-layout--two-column-fixed + .l-page-layout__main + .fpo-block { + height: 30rem; + margin-bottom: 0; +} + +/** + * Vertical header in pattern example at large screens + */ +@media all and (min-width: 70em) { + .sg-pattern-example .c-header--vertical { + max-width: 20rem; + } +} + +#molecules-footer-nav .sg-pattern-example { + background: #041544; +} + +.sg-pattern .c-hero { + margin: 0; +} + +.sg-pattern .c-promo-block { + margin: 0; +} + +// Annotations +@import "../../../uikit-workshop/src/sass/scss/01-abstracts/variables"; +@import "../../../uikit-workshop/src/sass/scss/04-components/annotations"; diff --git a/packages/starterkit-handlebars-demo/dist/css/style.css b/packages/starterkit-handlebars-demo/dist/css/style.css index 25687f425..ff0faa8f2 100644 --- a/packages/starterkit-handlebars-demo/dist/css/style.css +++ b/packages/starterkit-handlebars-demo/dist/css/style.css @@ -45,8 +45,8 @@ * Breakpoints................Global breakpoint definitions */ /*------------------------------------*\ - #COLORS - \*------------------------------------*/ + #COLORS +\*------------------------------------*/ /** * Brand Colors * 1) Brand=specific colors @@ -161,10 +161,10 @@ #FORMS \*------------------------------------*/ /*------------------------------------*\ - #BREAKPOINTS + #TYPOGRAPHY \*------------------------------------*/ /** - * In this file, we take the literal colors from our palette and define them + * In this file, we take the literal font sizes from our scale and define them * against variables that we can utilise anywhere throughout the project. */ /*------------------------------------*\ @@ -177,20 +177,23 @@ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */ * { - box-sizing: border-box; } + box-sizing: border-box; +} /** * 1) Zero out margins and padding for elements */ html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { margin: 0; - padding: 0; } + padding: 0; +} /** * 1) Set HTML5 elements to display: block */ header, footer, nav, section, article, figure { - display: block; } + display: block; +} /*------------------------------------*\ #BODY @@ -202,7 +205,8 @@ header, footer, nav, section, article, figure { */ html { min-height: 100vh; - /* 1 */ } + /* 1 */ +} /** * Body base styles @@ -218,7 +222,8 @@ body { -webkit-text-size-adjust: 100%; /* 1 */ background-color: #fff; - color: #131313; } + color: #131313; +} /*------------------------------------*\ #LINKS @@ -230,11 +235,14 @@ a { color: #444; text-decoration: none; outline: 0; - transition: color 0.15s ease-out; } - a:hover, a:focus { - color: #ba6333; } - a:active { - color: #131313; } + transition: color 0.15s ease-out; +} +a:hover, a:focus { + color: #ba6333; +} +a:active { + color: #131313; +} /*------------------------------------*\ #LISTS @@ -243,17 +251,19 @@ a { * 1) List base styles */ /** - * Remove list styles from unordered and ordered lists - */ + * Remove list styles from unordered and ordered lists + */ ol, ul { - list-style: none; } + list-style: none; +} /*------------------------------------*\ #HEADINGS \*------------------------------------*/ h1, h2, h3, h4 { font-family: "Abel", serif; - text-transform: uppercase; } + text-transform: uppercase; +} /** * Heading 1 base styles @@ -261,10 +271,13 @@ h1, h2, h3, h4 { h1 { font-size: 3rem; font-weight: normal; - line-height: 1.2; } - @media all and (min-width: 47em) { - h1 { - font-size: 4rem; } } + line-height: 1.2; +} +@media all and (min-width: 47em) { + h1 { + font-size: 4rem; + } +} /** * Heading 2 base styles @@ -272,7 +285,8 @@ h1 { h2 { font-size: 1.2rem; font-weight: normal; - line-height: 1.2; } + line-height: 1.2; +} /** * Heading 3 base styles @@ -280,7 +294,8 @@ h2 { h3 { font-size: 1.2rem; font-weight: normal; - line-height: 1.2; } + line-height: 1.2; +} /** * Heading 4 base styles @@ -288,7 +303,8 @@ h3 { h4 { font-size: 1rem; font-weight: normal; - line-height: 1.2; } + line-height: 1.2; +} /*------------------------------------*\ #FORMS @@ -300,13 +316,16 @@ h4 { * Input placeholder text base styles */ ::-webkit-input-placeholder { - color: #808080; } + color: #808080; +} ::-moz-placeholder { - color: #808080; } + color: #808080; +} :-ms-input-placeholder { - color: #808080; } + color: #808080; +} /** * Fieldset base styles @@ -314,13 +333,15 @@ h4 { fieldset { border: 0; padding: 0; - margin: 0; } + margin: 0; +} /** * Legend base styles */ legend { - margin-bottom: 0.25rem; } + margin-bottom: 0.25rem; +} /** * Label base styles @@ -328,7 +349,8 @@ legend { label { display: block; padding-bottom: 0.25rem; - color: #131313; } + color: #131313; +} /** * Add font size 100% of form element and margin 0 to these elements @@ -336,13 +358,15 @@ label { button, input, select, textarea { font-family: inherit; font-size: 1rem; - margin: 0; } + margin: 0; +} /** * Text area base styles */ textarea { - resize: none; } + resize: none; +} /** * Input and text area base styles @@ -351,35 +375,41 @@ input, textarea { width: 100%; padding: 0.5rem; border: 1px solid #444; - background: #fff; } - input:focus, textarea:focus { - border-color: #131313; } - input:disabled, textarea:disabled { - border-color: #eee; - background: #eee; - color: #808080; } + background: #fff; +} +input:focus, textarea:focus { + border-color: #131313; +} +input:disabled, textarea:disabled { + border-color: #eee; + background: #eee; + color: #808080; +} /** * Remove webkit appearance styles from these elements */ -input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea { - -webkit-appearance: none; } +input[type=text], input[type=search], input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=url], input[type=number], textarea { + -webkit-appearance: none; +} /** * Checkbox and radio button base styles */ -input[type="checkbox"], -input[type="radio"] { +input[type=checkbox], +input[type=radio] { width: auto; margin-right: 0.3rem; - border-color: #444; } + border-color: #444; +} /** * Search input base styles */ -input[type="search"] { +input[type=search] { -webkit-appearance: none; - border-radius: 0; } + border-radius: 0; +} /** * Select @@ -394,9 +424,11 @@ select { padding: 0.5rem; height: 2rem; background: #fff; - color: #131313; } - select:focus { - border-color: #131313; } + color: #131313; +} +select:focus { + border-color: #131313; +} /*------------------------------------*\ #BUTTONS @@ -406,7 +438,8 @@ select { * 1) These should be styled using c-btn */ button { - cursor: pointer; } + cursor: pointer; +} /*------------------------------------*\ #MAIN ELEMENT @@ -416,7 +449,8 @@ button { */ [role=main] { display: block; - flex: 1 0 auto; } + flex: 1 0 auto; +} /*------------------------------------*\ #MEDIA @@ -427,7 +461,8 @@ button { */ img { max-width: 100%; - height: auto; } + height: auto; +} /*------------------------------------*\ #TEXT @@ -436,7 +471,8 @@ img { * Paragraph base styles */ p { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} /** * Blockquote base styles @@ -446,7 +482,8 @@ blockquote { border-left: 1px solid #808080; color: #808080; padding-left: 1rem; - margin-bottom: 1rem; } + margin-bottom: 1rem; +} /** * Horizontal rule base styles @@ -455,7 +492,8 @@ hr { border: 0; height: 1px; background: #ddd; - margin: 1rem 0; } + margin: 1rem 0; +} /** * Selection styles @@ -463,12 +501,14 @@ hr { ::-moz-selection { color: #131313; background: #ddd; - /* Gecko Browsers */ } + /* Gecko Browsers */ +} ::selection { color: #131313; background: #ddd; - /* WebKit/Blink Browsers */ } + /* WebKit/Blink Browsers */ +} /** * Code base styles @@ -477,9 +517,10 @@ code { display: inline-block; background: #f9f9f9; border: 1px solid #ddd; - padding: .2rem .5rem; + padding: 0.2rem 0.5rem; line-height: 1.2; - font-size: .85rem; } + font-size: 0.85rem; +} /** * Preformatted text base styles @@ -491,18 +532,21 @@ pre { padding: 1rem; overflow-x: auto; /** - * Remove border from code within preformatted text block - */ } - pre code { - border: 0; } + * Remove border from code within preformatted text block + */ +} +pre code { + border: 0; +} /** * Code with languages associated with them * 1) Override Prism sysles for code blocks with language */ -code[class*="language-"], -pre[class*="language-"] { - font-family: monospace !important; } +code[class*=language-], +pre[class*=language-] { + font-family: monospace !important; +} /*------------------------------------*\ #TABLES @@ -513,19 +557,22 @@ pre[class*="language-"] { table { border-collapse: collapse; border-spacing: 0; - width: 100%; } + width: 100%; +} /** * Table header cell */ th { - text-align: left; } + text-align: left; +} /** * Table row */ tr { - vertical-align: top; } + vertical-align: top; +} /*------------------------------------*\ #LAYOUT @@ -541,13 +588,17 @@ tr { .l-container { max-width: 80rem; padding: 0 1rem; - margin: 0 auto; } - @media all and (min-width: 60em) { - .l-container { - padding: 0 2rem; } } + margin: 0 auto; +} +@media all and (min-width: 60em) { + .l-container { + padding: 0 2rem; + } +} .l-container--narrow { - max-width: 45rem; } + max-width: 45rem; +} /** * @@ -555,26 +606,33 @@ tr { * to achieve a comfortable line length */ .l-linelength-container { - max-width: 36rem; } + max-width: 36rem; +} .l-band { background: #f9f9f9; - padding: 2rem 1rem; } + padding: 2rem 1rem; +} /** * 2 column layout */ .l-page-layout--two-column { display: flex; - flex-direction: column; } - @media all and (min-width: 60em) { - .l-page-layout--two-column { - flex-direction: row; } } + flex-direction: column; +} +@media all and (min-width: 60em) { + .l-page-layout--two-column { + flex-direction: row; + } +} @media all and (min-width: 60em) { .l-page-layout--two-column .l-page-layout__main { width: 70%; - padding-right: 1rem; } } + padding-right: 1rem; + } +} /** * Sidebar @@ -582,14 +640,18 @@ tr { @media all and (min-width: 60em) { .l-page-layout--two-column .l-page-layout__secondary { width: 30%; - margin-left: 2rem; } } - + margin-left: 2rem; + } +} .l-page-layout--reversed .l-page-layout__secondary { - margin-bottom: 2rem; } - @media all and (min-width: 60em) { - .l-page-layout--reversed .l-page-layout__secondary { - order: 1; - margin-bottom: 0; } } + margin-bottom: 2rem; +} +@media all and (min-width: 60em) { + .l-page-layout--reversed .l-page-layout__secondary { + order: 1; + margin-bottom: 0; + } +} /*------------------------------------*\ #GRID @@ -599,19 +661,23 @@ tr { */ .l-grid { display: flex; - flex-wrap: wrap; } - @supports (display: grid) { - .l-grid { - display: grid; - grid-gap: 2rem; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - margin: 0; } } + flex-wrap: wrap; +} +@supports (display: grid) { + .l-grid { + display: grid; + grid-gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + margin: 0; + } +} /** * Grid Item */ .l-grid__item { - display: flex; } + display: flex; +} /*------------------------------------*\ #COMPONENTS @@ -633,19 +699,23 @@ tr { border: 0; text-transform: uppercase; text-align: center; - transition: all 0.15s ease-out; } - .c-btn:hover, .c-btn:focus { - color: #fff; - background: #041544; } + transition: all 0.15s ease-out; +} +.c-btn:hover, .c-btn:focus { + color: #fff; + background: #041544; +} .c-btn--bare { background: none; color: #114689; - border: 1px solid transparent; } - .c-btn--bare:hover, .c-btn--bare:focus { - background: none; - color: #114689; - border-color: #114689; } + border: 1px solid transparent; +} +.c-btn--bare:hover, .c-btn--bare:focus { + background: none; + color: #114689; + border-color: #114689; +} /* * Inner container wrapper @@ -656,7 +726,8 @@ tr { .c-btn__inner { display: flex; align-items: center; - justify-content: center; } + justify-content: center; +} /* * Button icon @@ -665,7 +736,8 @@ tr { width: 1rem; height: 1rem; fill: #fff; - transition: fill 0.15s ease-out; } + transition: fill 0.15s ease-out; +} /*------------------------------------*\ #DEFINITION LIST @@ -674,16 +746,20 @@ tr { * 1) Definition list (`dl`) that contains a definition term (`dt`) and a definition description (`dd`) */ .c-definition-list { - margin: 0 0 1rem; } + margin: 0 0 1rem; +} /** * Definition list item */ .c-definition-list__item { - display: flex; } - @media all and (min-width: 60em) { - .c-definition-list__item { - justify-content: space-between; } } + display: flex; +} +@media all and (min-width: 60em) { + .c-definition-list__item { + justify-content: space-between; + } +} /** * Definition list term @@ -691,10 +767,13 @@ tr { .c-definition-list__term { font-weight: bold; margin-bottom: 0.25rem; - width: 5rem; } - @media all and (min-width: 60em) { - .c-definition-list__term { - width: auto; } } + width: 5rem; +} +@media all and (min-width: 60em) { + .c-definition-list__term { + width: auto; + } +} /** * Definition list description @@ -710,7 +789,8 @@ tr { */ .c-definition-list-list--lined .c-definition-list-list__item { margin-bottom: 1rem; - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid #ddd; +} /*------------------------------------*\ #HERO BLOCK @@ -724,7 +804,8 @@ tr { display: block; position: relative; margin: -2rem 0 2rem; - /* 1 */ } + /* 1 */ +} /** * Hero Image @@ -735,26 +816,30 @@ tr { width: 100%; object-fit: cover; max-height: 70vh; - overflow: hidden; } + overflow: hidden; +} .c-hero__body { background: #ba6333; - padding: 1rem; } - @media all and (min-width: 35em) { - .c-hero__body { - padding: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); } } + padding: 1rem; +} +@media all and (min-width: 35em) { + .c-hero__body { + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); + } +} /** * Hero Headline @@ -765,11 +850,14 @@ tr { font-size: 3rem; background-color: #ba6333; color: #fff; - transition: all 0.15s ease-out; } - @media all and (min-width: 35em) { - .c-hero__headline { - padding: 0 0.4rem; - font-size: 4rem; } } + transition: all 0.15s ease-out; +} +@media all and (min-width: 35em) { + .c-hero__headline { + padding: 0 0.4rem; + font-size: 4rem; + } +} /*------------------------------------*\ #TOUT BLOCK @@ -781,13 +869,15 @@ tr { display: block; position: relative; overflow: hidden; - max-width: 1024px; } + max-width: 1024px; +} /** * Tout image */ .c-tout__img { - display: block; } + display: block; +} /** * Tout headline @@ -802,10 +892,12 @@ tr { color: #fff; padding: 0.5rem; font-size: 1.4rem; - transition: all 0.15s ease-out; } - .c-tout:hover .c-tout__headline, .c-tout:focus .c-tout__headline { - padding-bottom: 2rem; - background: #114689; } + transition: all 0.15s ease-out; +} +.c-tout:hover .c-tout__headline, .c-tout:focus .c-tout__headline { + padding-bottom: 2rem; + background: #114689; +} /*------------------------------------*\ #SECTION HEADER @@ -817,17 +909,20 @@ tr { display: flex; align-items: center; position: relative; - margin-bottom: 1rem; } - .c-section__header:after { - content: ''; - display: block; - flex: 1; - height: 2px; - margin-left: 1rem; - background: #ba6333; } + margin-bottom: 1rem; +} +.c-section__header:after { + content: ""; + display: block; + flex: 1; + height: 2px; + margin-left: 1rem; + background: #ba6333; +} .c-section__title { - font-size: 2rem; } + font-size: 2rem; +} /*------------------------------------*\ #STACKED BLOCK @@ -843,33 +938,41 @@ tr { position: relative; max-width: 600px; /* 2 */ - transition: transform 0.15s ease-out; } - .c-stacked-block:hover, .c-stacked-block:focus { - transform: scale(1.03); } + transition: transform 0.15s ease-out; +} +.c-stacked-block:hover, .c-stacked-block:focus { + transform: scale(1.03); +} .c-stacked-block__body { - flex: 1; } + flex: 1; +} .c-stacked-block__title { text-transform: uppercase; letter-spacing: 1px; color: #114689; - transition: color 0.15s ease-out; } - .c-stacked-block:hover .c-stacked-block__title, .c-stacked-block:focus .c-stacked-block__title { - color: #ba6333; } + transition: color 0.15s ease-out; +} +.c-stacked-block:hover .c-stacked-block__title, .c-stacked-block:focus .c-stacked-block__title { + color: #ba6333; +} .c-stacked-block__excerpt { margin-bottom: 0; - color: #444; } + color: #444; +} .c-stacked-block__meta { color: #114689; font-size: 1.2rem; font-family: "Abel", serif; margin-bottom: 0; - transition: color 0.15s ease-out; } - .c-stacked-block:hover .c-stacked-block__meta, .c-stacked-block:focus .c-stacked-block__meta { - color: #ba6333; } + transition: color 0.15s ease-out; +} +.c-stacked-block:hover .c-stacked-block__meta, .c-stacked-block:focus .c-stacked-block__meta { + color: #ba6333; +} .c-stacked-block__badge { display: block; @@ -880,14 +983,16 @@ tr { font-family: "Abel", serif; text-transform: uppercase; color: #fff; - background: #ba6333; } + background: #ba6333; +} .c-stacked-block__optional { margin-left: 0.5rem; color: #808080; font-family: "Abel", serif; font-size: 0.85rem; - text-decoration: line-through; } + text-decoration: line-through; +} /*------------------------------------*\ #STRIPE @@ -896,49 +1001,66 @@ tr { * 1) Block that contains a right and left column of text and other possible components */ .c-stripe { - padding: 2rem 0; } - @media all and (min-width: 35em) { - .c-stripe { - display: flex; } } - .c-stripe-list--condensed .c-stripe { - padding: 1rem 0; } + padding: 2rem 0; +} +@media all and (min-width: 35em) { + .c-stripe { + display: flex; + } +} +.c-stripe-list--condensed .c-stripe { + padding: 1rem 0; +} /** * Stripe lef container * 1) Contains elements that display on the left side of the stripe */ .c-stripe__left-container { - margin-right: 2rem; } - @media all and (min-width: 35em) { - .c-stripe__left-container { - width: 20%; } } - .c-stripe-list--condensed .c-stripe__left-container { - display: none; } + margin-right: 2rem; +} +@media all and (min-width: 35em) { + .c-stripe__left-container { + width: 20%; + } +} +.c-stripe-list--condensed .c-stripe__left-container { + display: none; +} .c-stripe__link { - display: block; } - @media all and (min-width: 35em) { - .c-stripe__link { - max-width: 10rem; } } + display: block; +} +@media all and (min-width: 35em) { + .c-stripe__link { + max-width: 10rem; + } +} /** * Stripe right container * 1) Contains elements that display on the right side of the stripe */ .c-stripe__right-container { - flex: 1; } - @media all and (min-width: 35em) { - .c-stripe__right-container { - display: flex; - align-items: center; } } + flex: 1; +} +@media all and (min-width: 35em) { + .c-stripe__right-container { + display: flex; + align-items: center; + } +} .c-stripe__title { - margin-bottom: 2rem; } - @media all and (min-width: 35em) { - .c-stripe__title { - margin-bottom: 0; - margin-right: 2rem; - width: 40%; } } + margin-bottom: 2rem; +} +@media all and (min-width: 35em) { + .c-stripe__title { + margin-bottom: 0; + margin-right: 2rem; + width: 40%; + } +} @media all and (min-width: 35em) { .c-stripe__meta { @@ -946,16 +1068,20 @@ tr { margin-bottom: 2.25rem; width: 20%; text-align: right; - flex: 1; } } + flex: 1; + } +} .c-stripe__meta-label { font-weight: bold; - margin-bottom: 0.75rem; } + margin-bottom: 0.75rem; +} .c-stripe__meta-span { font-family: "Abel", serif; color: #114689; - font-size: 1.2rem; } + font-size: 1.2rem; +} /*------------------------------------*\ #STRIPE LIST @@ -964,7 +1090,8 @@ tr { * 1) Block that contains a right and left column of text and other possible components */ .c-stripe-list__item { - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid #ddd; +} /*------------------------------------*\ $FOOTER @@ -975,25 +1102,33 @@ tr { .c-footer { padding: 2rem 0; margin-top: 2rem; - background: #041544; } + background: #041544; +} @media all and (min-width: 47em) { .c-footer__inner { - display: flex; } } + display: flex; + } +} @media all and (min-width: 47em) { .c-footer__bottom { - margin-left: auto; } } + margin-left: auto; + } +} .c-footer__credit, .c-footer__copyright { color: #fff; text-transform: uppercase; font-family: "Abel", serif; - font-size: 0.85rem; } - .c-footer__credit a, .c-footer__copyright a { - color: #ba6333; } - .c-footer__credit a:hover, .c-footer__credit a:focus, .c-footer__copyright a:hover, .c-footer__copyright a:focus { - color: #808080; } + font-size: 0.85rem; +} +.c-footer__credit a, .c-footer__copyright a { + color: #ba6333; +} +.c-footer__credit a:hover, .c-footer__credit a:focus, .c-footer__copyright a:hover, .c-footer__copyright a:focus { + color: #808080; +} /*------------------------------------*\ #FOOTER NAV @@ -1002,23 +1137,30 @@ tr { * 1) Global block at the bottom of each page that contains a navigation and other information */ .c-footer-nav { - margin-bottom: 2rem; } - @media all and (min-width: 47em) { - .c-footer-nav { - display: flex; - margin-bottom: 0; } } + margin-bottom: 2rem; +} +@media all and (min-width: 47em) { + .c-footer-nav { + display: flex; + margin-bottom: 0; + } +} @media all and (min-width: 47em) { .c-footer-nav__item { - margin-right: 2rem; } - .c-footer-nav__item:last-child { - margin-right: 0; } } + margin-right: 2rem; + } + .c-footer-nav__item:last-child { + margin-right: 0; + } +} .c-footer-nav__link { color: #fff; font-family: "Abel", serif; text-transform: uppercase; - font-size: 1.2rem; } + font-size: 1.2rem; +} /*------------------------------------*\ #HEADER @@ -1029,28 +1171,35 @@ tr { .c-header { position: relative; margin-bottom: 2rem; - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid #ddd; +} /** * Header inner */ .c-header__inner { padding-top: 1rem; - padding-bottom: 1rem; } - @media all and (min-width: 35em) { - .c-header__inner { - display: flex; - align-items: center; } } + padding-bottom: 1rem; +} +@media all and (min-width: 35em) { + .c-header__inner { + display: flex; + align-items: center; + } +} /** * Header navigation button * 1) Button used to toggle the navigation on/off on small screens */ .c-header__nav-btn { - margin-left: auto; } - @media all and (min-width: 70em) { - .c-header__nav-btn { - display: none; } } + margin-left: auto; +} +@media all and (min-width: 70em) { + .c-header__nav-btn { + display: none; + } +} /** * Header navigation conntainer @@ -1059,15 +1208,20 @@ tr { .c-header__nav-container { display: none; /** - * Header navigation conntainer within vertical header - */ } - @media all and (min-width: 70em) { - .c-header__nav-container { - display: block; - margin-left: auto; } } - @media all and (min-width: 70em) { - .c-header--vertical .c-header__nav-container { - margin-left: 0; } } + * Header navigation conntainer within vertical header + */ +} +@media all and (min-width: 70em) { + .c-header__nav-container { + display: block; + margin-left: auto; + } +} +@media all and (min-width: 70em) { + .c-header--vertical .c-header__nav-container { + margin-left: 0; + } +} /** * Active header nav container @@ -1082,19 +1236,24 @@ tr { z-index: 5; padding: 1rem; /** - * Active header nav container within vertical header - */ } - @media all and (min-width: 70em) { - .c-header__nav-container.is-active { - display: block; - position: static; - padding: 0; - margin-left: auto; - width: inherit; } } - @media all and (min-width: 70em) { - .c-header--vertical .c-header__nav-container.is-active { - margin-left: 0; - width: 100%; } } + * Active header nav container within vertical header + */ +} +@media all and (min-width: 70em) { + .c-header__nav-container.is-active { + display: block; + position: static; + padding: 0; + margin-left: auto; + width: inherit; + } +} +@media all and (min-width: 70em) { + .c-header--vertical .c-header__nav-container.is-active { + margin-left: 0; + width: 100%; + } +} /*------------------------------------*\ #LOGO @@ -1103,32 +1262,41 @@ tr { * Branding image or text of the site */ .c-logo { - font-size: 2rem; } + font-size: 2rem; +} +.c-footer .c-logo { + margin-bottom: 2rem; +} +@media all and (min-width: 47em) { .c-footer .c-logo { - margin-bottom: 2rem; } - @media all and (min-width: 47em) { - .c-footer .c-logo { - margin-bottom: 0; } } + margin-bottom: 0; + } +} /** * Logo link */ .c-logo__link { - display: block; } + display: block; +} /** * Logo image */ .c-logo__img { - display: block; } + display: block; +} .c-logo__left { - color: #114689; } - .c-logo--light .c-logo__left { - color: #fff; } + color: #114689; +} +.c-logo--light .c-logo__left { + color: #fff; +} .c-logo__right { - color: #ba6333; } + color: #ba6333; +} /*------------------------------------*\ #ICON @@ -1138,7 +1306,8 @@ tr { */ .c-icon { height: 16px; - width: 16px; } + width: 16px; +} /*------------------------------------*\ #INPUT @@ -1147,7 +1316,8 @@ tr { * 1) Actual input of a field */ .c-stripe .c-input { - max-width: 3rem; } + max-width: 3rem; +} /*------------------------------------*\ #PAGE HEADER @@ -1160,13 +1330,15 @@ tr { */ .c-page-header { margin-top: 4rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; +} /** * Page description */ .c-page-header__desc { - margin-top: 1rem; } + margin-top: 1rem; +} /*------------------------------------*\ #PAGINATION @@ -1181,26 +1353,33 @@ tr { overflow: hidden; margin-bottom: 1rem; font-family: "Abel", serif; - text-transform: uppercase; } + text-transform: uppercase; +} .c-pagination__item { - border-right: 1px solid #ddd; } - .c-pagination__item:last-child { - border: 0; } + border-right: 1px solid #ddd; +} +.c-pagination__item:last-child { + border: 0; +} .c-pagination__link { padding: 1rem; - text-decoration: underline; } - .c-pagination__item:first-child .c-pagination__link { - padding-left: 0; } - .c-pagination__item.is-active .c-pagination__link { - font-weight: bold; - text-decoration: none; - pointer-events: none; } - .c-pagination__item.is-disabled .c-pagination__link { - color: #ddd; - pointer-events: none; - text-decoration: none; } + text-decoration: underline; +} +.c-pagination__item:first-child .c-pagination__link { + padding-left: 0; +} +.c-pagination__item.is-active .c-pagination__link { + font-weight: bold; + text-decoration: none; + pointer-events: none; +} +.c-pagination__item.is-disabled .c-pagination__link { + color: #ddd; + pointer-events: none; + text-decoration: none; +} /*------------------------------------*\ #PRIMARY NAVIGATION @@ -1210,22 +1389,27 @@ tr { */ @media all and (min-width: 32em) { .c-primary-nav { - margin-left: auto; } } + margin-left: auto; + } +} /** * Primary navigation list */ .c-primary-nav__list { display: flex; - align-items: center; } + align-items: center; +} /** * Primary navigation item */ .c-primary-nav__item { - margin-right: 2rem; } - .c-primary-nav__item:last-child { - margin-right: 0; } + margin-right: 2rem; +} +.c-primary-nav__item:last-child { + margin-right: 0; +} /** * Primary navigation link @@ -1237,14 +1421,17 @@ tr { font-size: 1.2rem; line-height: 1; text-transform: uppercase; - transition: background 0.15s ease-out; } - .c-primary-nav__link:hover, .c-primary-nav__link:focus { - color: #ba6333; } + transition: background 0.15s ease-out; +} +.c-primary-nav__link:hover, .c-primary-nav__link:focus { + color: #ba6333; +} .c-primary-nav__icon.c-icon { fill: #041544; height: 24px; - width: 24px; } + width: 24px; +} /*------------------------------------*\ #PROMO BLOCK @@ -1259,21 +1446,25 @@ tr { color: #fff; position: relative; margin-top: -2rem; - /* 1 */ } + /* 1 */ +} .c-promo-block__media { position: relative; - z-index: 0; } - .c-promo-block__media:before { - content: ""; - background: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40%, #000 100%); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } - .c-promo-block--right .c-promo-block__media:before { - background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); } + z-index: 0; +} +.c-promo-block__media:before { + content: ""; + background: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40%, #000 100%); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.c-promo-block--right .c-promo-block__media:before { + background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); +} .c-promo-block__body { position: absolute; @@ -1281,37 +1472,49 @@ tr { left: 4rem; z-index: 1; max-width: 400px; - transition: opacity 0.5s ease-out, transform 0.5s ease-out; } - .c-promo-block--right .c-promo-block__body { - left: auto; - right: 4rem; } - .c-promo-block__body.c-promo-block__body--initial { - opacity: 0; - transform: translateY(70px); } + transition: opacity 0.5s ease-out, transform 0.5s ease-out; +} +.c-promo-block--right .c-promo-block__body { + left: auto; + right: 4rem; +} +.c-promo-block__body.c-promo-block__body--initial { + opacity: 0; + transform: translateY(70px); +} .c-promo-block__img { display: block; - width: 100%; } + width: 100%; +} .c-promo-block__link { - color: #fff; } - .c-promo-block__link:hover, .c-promo-block__link:focus { - color: #ba6333; } + color: #fff; +} +.c-promo-block__link:hover, .c-promo-block__link:focus { + color: #ba6333; +} .c-promo-block__heading { display: inline; color: inherit; border-bottom: 2px solid #ba6333; - font-size: 2rem; } - @media all and (min-width: 60em) { - .c-promo-block__heading { - font-size: 3rem; } } + font-size: 2rem; +} +@media all and (min-width: 60em) { + .c-promo-block__heading { + font-size: 3rem; + } +} .c-promo-block__description { - margin-top: 1rem; } - @media all and (min-width: 60em) { - .c-promo-block__description { - font-size: 1.2rem; } } + margin-top: 1rem; +} +@media all and (min-width: 60em) { + .c-promo-block__description { + font-size: 1.2rem; + } +} /*------------------------------------*\ #PROGRESS TRACKER @@ -1326,7 +1529,8 @@ tr { /* 2 */ justify-content: center; flex-wrap: wrap; - /* 2 */ } + /* 2 */ +} /* Progress tracker iterm */ .c-progress-tracker__item { @@ -1334,49 +1538,62 @@ tr { text-align: center; font-size: 0.85rem; width: 5rem; - /* Don't display the horizontal line on the last item number */ } - .c-progress-tracker__item:last-child .c-progress-tracker__number:before { - display: none; } + /* Don't display the horizontal line on the last item number */ +} +.c-progress-tracker__item:last-child .c-progress-tracker__number:before { + display: none; +} .c-progress-tracker__number { - padding: .125rem; - margin-bottom: .5rem; + padding: 0.125rem; + margin-bottom: 0.5rem; color: #114689; border: 1px solid #114689; background-color: #fff; - position: relative; } - @media all and (min-width: 28em) { - .c-progress-tracker__number { - padding: .5rem; } } - .is-complete .c-progress-tracker__number { - background-color: #ddd; - border-color: #ddd; } - .is-current .c-progress-tracker__number { - color: #fff; - background-color: #114689; - font-weight: bold; } - .is-disabled .c-progress-tracker__number { - color: #041544; - border-color: #114689; } - .c-progress-tracker__number:before { - content: " "; - display: block; - width: 4rem; - height: 1px; - background-color: #ddd; - position: absolute; - top: 50%; - right: -4rem; - z-index: -1; } + position: relative; +} +@media all and (min-width: 28em) { + .c-progress-tracker__number { + padding: 0.5rem; + } +} +.is-complete .c-progress-tracker__number { + background-color: #ddd; + border-color: #ddd; +} +.is-current .c-progress-tracker__number { + color: #fff; + background-color: #114689; + font-weight: bold; +} +.is-disabled .c-progress-tracker__number { + color: #041544; + border-color: #114689; +} +.c-progress-tracker__number:before { + content: " "; + display: block; + width: 4rem; + height: 1px; + background-color: #ddd; + position: absolute; + top: 50%; + right: -4rem; + z-index: -1; +} .c-progress-tracker__label { display: none; - /* Do show it on larger screens */ } - @media all and (min-width: 35em) { - .c-progress-tracker__label { - display: inline; } } - .is-current .c-progress-tracker__label { - font-weight: bold; } + /* Do show it on larger screens */ +} +@media all and (min-width: 35em) { + .c-progress-tracker__label { + display: inline; + } +} +.is-current .c-progress-tracker__label { + font-weight: bold; +} /*------------------------------------*\ #TEXT PASSAGE @@ -1386,73 +1603,88 @@ tr { */ .c-text-passage { /** - * Link within the text passage - */ + * Link within the text passage + */ /** - * Blockquote within text passage - */ + * Blockquote within text passage + */ /** - * First-level heading within text passage - */ + * First-level heading within text passage + */ /** - * Second-level heading within text passage - */ + * Second-level heading within text passage + */ /** - * Third-level heading within text passage - */ + * Third-level heading within text passage + */ /** - * Fourth-level heading within text passage - */ + * Fourth-level heading within text passage + */ /** - * Fifth-level heading within text passage - */ + * Fifth-level heading within text passage + */ /** - * Sixth-level heading within text passage - */ + * Sixth-level heading within text passage + */ /** - * Unordered list within text passage - */ + * Unordered list within text passage + */ /** - * Ordered list within text passage - */ } - .c-text-passage p { - margin-bottom: 1rem; } - .c-text-passage a { - text-decoration: underline; } - .c-text-passage blockquote { - padding-left: 0.8rem; - border-left: 3px solid #444; - color: #808080; - font-size: 1rem; } - .c-text-passage h1 { - margin-bottom: 1rem; } - .c-text-passage h2 { - margin: 1rem 0 1rem; - color: #444; - font-weight: bold; } - .c-text-passage h3 { - margin: 1rem 0 1rem; } - .c-text-passage h4 { - margin: 1rem 0 1rem; } - .c-text-passage h5 { - margin: 1rem 0 1rem; } - .c-text-passage h6 { - margin: 1rem 0 1rem; } - .c-text-passage ul { - list-style: disc; - margin-left: 1rem; - margin-bottom: 1rem; } - .c-text-passage ul li:last-child { - margin-bottom: 0; } - .c-text-passage ol { - list-style: decimal; - margin-left: 1rem; - margin-bottom: 1rem; } - .c-text-passage ol li:last-child { - margin-bottom: 0; } - .c-text-passage li { - margin-bottom: 0.5rem; - line-height: 1.6; } + * Ordered list within text passage + */ +} +.c-text-passage p { + margin-bottom: 1rem; +} +.c-text-passage a { + text-decoration: underline; +} +.c-text-passage blockquote { + padding-left: 0.8rem; + border-left: 3px solid #444; + color: #808080; + font-size: 1rem; +} +.c-text-passage h1 { + margin-bottom: 1rem; +} +.c-text-passage h2 { + margin: 1rem 0 1rem; + color: #444; + font-weight: bold; +} +.c-text-passage h3 { + margin: 1rem 0 1rem; +} +.c-text-passage h4 { + margin: 1rem 0 1rem; +} +.c-text-passage h5 { + margin: 1rem 0 1rem; +} +.c-text-passage h6 { + margin: 1rem 0 1rem; +} +.c-text-passage ul { + list-style: disc; + margin-left: 1rem; + margin-bottom: 1rem; +} +.c-text-passage ul li:last-child { + margin-bottom: 0; +} +.c-text-passage ol { + list-style: decimal; + margin-left: 1rem; + margin-bottom: 1rem; +} +.c-text-passage ol li:last-child { + margin-bottom: 0; +} +.c-text-passage li { + margin-bottom: 0.5rem; + line-height: 1.6; +} /*------------------------------------*\ #FIELDS @@ -1461,7 +1693,8 @@ tr { * 1) Consists of a label, form control, and an optional note about the field. */ .c-field { - margin-bottom: 2rem; } + margin-bottom: 2rem; +} /** * Field label @@ -1469,13 +1702,15 @@ tr { .c-field__label { margin-bottom: 0.5rem; font-size: 1rem; - font-weight: bold; } + font-weight: bold; +} /** * Field body */ .c-field__body { - position: relative; } + position: relative; +} /** * Field note @@ -1483,7 +1718,8 @@ tr { .c-field__note { display: inline-block; font-size: 0.75rem; - color: #808080; } + color: #808080; +} /*------------------------------------*\ #SEARCH FORM @@ -1495,11 +1731,13 @@ tr { * Page header title */ .c-search-form__body { - display: flex; } + display: flex; +} .c-stacked-block-list { max-width: 80rem; - margin-bottom: 2rem; } + margin-bottom: 2rem; +} /*------------------------------------*\ #TOTAL CONTAINER @@ -1508,43 +1746,60 @@ tr { * 1) */ .c-total-container { - margin-top: 1rem; } - @media all and (min-width: 35em) { - .c-total-container { - text-align: right; } } + margin-top: 1rem; +} +@media all and (min-width: 35em) { + .c-total-container { + text-align: right; + } +} .c-total { display: flex; - align-items: center; } - @media all and (min-width: 35em) { - .c-total { - justify-content: flex-end; } } + align-items: center; +} +@media all and (min-width: 35em) { + .c-total { + justify-content: flex-end; + } +} .c-total--no-break { - justify-content: flex-start; } - @media all and (min-width: 60em) { - .c-total--no-break { - justify-content: flex-end; } } + justify-content: flex-start; +} +@media all and (min-width: 60em) { + .c-total--no-break { + justify-content: flex-end; + } +} .c-total__label { font-weight: bold; margin-right: 0.5rem; - padding-bottom: 0; } + padding-bottom: 0; +} +.c-total--no-break .c-total__label { + width: 5rem; +} +@media all and (min-width: 60em) { .c-total--no-break .c-total__label { - width: 5rem; } - @media all and (min-width: 60em) { - .c-total--no-break .c-total__label { - width: auto; } } + width: auto; + } +} .c-total__span { font-family: "Abel", serif; font-size: 1.2rem; - color: #114689; } + color: #114689; +} +.c-total--no-break .c-total__span { + margin-left: 2rem; +} +@media all and (min-width: 60em) { .c-total--no-break .c-total__span { - margin-left: 2rem; } - @media all and (min-width: 60em) { - .c-total--no-break .c-total__span { - margin-left: 0; } } + margin-left: 0; + } +} /*------------------------------------*\ #UTILITIES @@ -1558,7 +1813,8 @@ tr { */ .u-is-hidden { display: none !important; - visibility: hidden !important; } + visibility: hidden !important; +} /** * Is Visibly Hidden @@ -1571,7 +1827,8 @@ tr { height: 1px; padding: 0; border: 0; - clip: rect(1px, 1px, 1px, 1px); } + clip: rect(1px, 1px, 1px, 1px); +} /*------------------------------------*\ #SPACING @@ -1581,244 +1838,287 @@ tr { * 1) Force margin bottom of 0 */ .u-margin-bottom-none { - margin-bottom: 0 !important; } + margin-bottom: 0 !important; +} /** * Margin bottom small * 1) Force margin bottom of $spacing-small variable */ .u-margin-bottom-small { - margin-bottom: 1rem !important; } + margin-bottom: 1rem !important; +} /** * Margin bottom * 1) Force margin bottom of $spacing variable */ .u-margin-bottom { - margin-bottom: 1rem !important; } + margin-bottom: 1rem !important; +} /** * Margin bottom large * 1) Force margin bottom of $spacing-large variable */ .u-margin-bottom-large { - margin-bottom: 2rem !important; } + margin-bottom: 2rem !important; +} .u-margin-bottom-large-to-xxl { - margin-bottom: 2rem !important; } - @media all and (min-width: 60em) { - .u-margin-bottom-large-to-xxl { - margin-bottom: 8rem !important; } } + margin-bottom: 2rem !important; +} +@media all and (min-width: 60em) { + .u-margin-bottom-large-to-xxl { + margin-bottom: 8rem !important; + } +} /** * Margin top none * 1) Force margin top of 0 */ .u-margin-top-none { - margin-top: 0 !important; } + margin-top: 0 !important; +} /** * Margin top small * 1) Force margin top of $spacing-small variable */ .u-margin-top-small { - margin-top: 1rem !important; } + margin-top: 1rem !important; +} /** * Margin top * 1) Force margin top of $spacing variable */ .u-margin-top { - margin-top: 1rem !important; } + margin-top: 1rem !important; +} /** * Margin top large * 1) Force margin top of $spacing-large variable */ .u-margin-top-large { - margin-top: 2rem !important; } + margin-top: 2rem !important; +} .u-margin-top-booking { - margin-top: 28rem !important; } + margin-top: 28rem !important; +} /** * Margin right none * 1) Force margin right of 0 */ .u-margin-right-none { - margin-right: 0 !important; } + margin-right: 0 !important; +} /** * Margin right small * 1) Force margin right of $spacing-small variable */ .u-margin-right-small { - margin-right: 1rem !important; } + margin-right: 1rem !important; +} /** * Margin right * 1) Force margin right of $spacing variable */ .u-margin-right { - margin-right: 1rem !important; } + margin-right: 1rem !important; +} /** * Margin right large * 1) Force margin right of $spacing-large variable */ .u-margin-right-large { - margin-right: 2rem !important; } + margin-right: 2rem !important; +} /** * Margin left none * 1) Force margin left of 0 */ .u-margin-left-none { - margin-left: 0 !important; } + margin-left: 0 !important; +} /** * Margin left small * 1) Force margin left of $spacing-small variable */ .u-margin-left-small { - margin-left: 1rem !important; } + margin-left: 1rem !important; +} /** * Margin left * 1) Force margin left of $spacing variable */ .u-margin-left { - margin-left: 1rem !important; } + margin-left: 1rem !important; +} /** * Margin left large * 1) Force margin left of $spacing-large variable */ .u-margin-left-large { - margin-left: 2rem !important; } + margin-left: 2rem !important; +} /** * Center display block contents */ .u-margin-center { - margin: 0 auto !important; } + margin: 0 auto !important; +} /** * Padding none */ .u-padding-none { - padding: 0 !important; } + padding: 0 !important; +} /** * Padding small */ .u-padding-small { - padding: 1rem !important; } + padding: 1rem !important; +} /** * Padding */ .u-padding { - padding: 1rem !important; } + padding: 1rem !important; +} /** * Padding large */ .u-padding-large { - padding: 2rem !important; } + padding: 2rem !important; +} /** * Padding top none */ .u-padding-top-none { - padding-top: 0 !important; } + padding-top: 0 !important; +} /** * Padding top small */ .u-padding-top-small { - padding-top: 1rem !important; } + padding-top: 1rem !important; +} /** * Padding top */ .u-padding-top { - padding-top: 1rem !important; } + padding-top: 1rem !important; +} /** * Padding top large */ .u-padding-top-large { - padding-top: 2rem !important; } + padding-top: 2rem !important; +} /** * Padding bottom none */ .u-padding-bottom-none { - padding-bottom: 0 !important; } + padding-bottom: 0 !important; +} /** * Padding bottom small */ .u-padding-bottom-small { - padding-bottom: 1rem !important; } + padding-bottom: 1rem !important; +} /** * Padding bottom */ .u-padding-bottom { - padding-bottom: 1rem !important; } + padding-bottom: 1rem !important; +} /** * Padding bottom large */ .u-padding-bottom-large { - padding-bottom: 2rem !important; } + padding-bottom: 2rem !important; +} /** * Padding right none */ .u-padding-right-none { - padding-right: 0 !important; } + padding-right: 0 !important; +} /** * Padding right small */ .u-padding-right-small { - padding-right: 1rem !important; } + padding-right: 1rem !important; +} /** * Padding right */ .u-padding-right { - padding-right: 1rem !important; } + padding-right: 1rem !important; +} /** * Padding right large */ .u-padding-right-large { - padding-right: 2rem !important; } + padding-right: 2rem !important; +} /** * Padding left none */ .u-padding-left-none { - padding-left: 0 !important; } + padding-left: 0 !important; +} /** * Padding left small */ .u-padding-left-small { - padding-left: 1rem !important; } + padding-left: 1rem !important; +} /** * Padding left */ .u-padding-left { - padding-left: 1rem !important; } + padding-left: 1rem !important; +} /** * Padding left large */ .u-padding-left-large { - padding-left: 2rem !important; } + padding-left: 2rem !important; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/packages/starterkit-handlebars-demo/dist/css/style.css.map b/packages/starterkit-handlebars-demo/dist/css/style.css.map new file mode 100644 index 000000000..b3aa41ba0 --- /dev/null +++ b/packages/starterkit-handlebars-demo/dist/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.scss","scss/abstracts/_variables.scss","scss/abstracts/_mixins.scss","scss/abstracts/_colors.scss","scss/abstracts/_typography.scss","scss/base/_reset.scss","scss/base/_body.scss","scss/base/_links.scss","scss/base/_lists.scss","scss/base/_headings.scss","scss/base/_forms.scss","scss/base/_buttons.scss","scss/base/_main.scss","scss/base/_media.scss","scss/base/_text.scss","scss/base/_table.scss","scss/layout/_layout.scss","scss/components/_buttons.scss","scss/components/_definition-list.scss","scss/components/_definition-list-list.scss","scss/components/_hero.scss","scss/components/_tout.scss","scss/components/_section.scss","scss/components/_stacked-block.scss","scss/components/_stripe.scss","scss/components/_footer.scss","scss/components/_footer-nav.scss","scss/components/_header.scss","scss/components/_logo.scss","scss/components/_icon.scss","scss/components/_input.scss","scss/components/_page-header.scss","scss/components/_pagination.scss","scss/components/_primary-nav.scss","scss/components/_promo-block.scss","scss/components/_progress-tracker.scss","scss/components/_text-passage.scss","scss/components/_field.scss","scss/components/_search-form.scss","scss/components/_stacked-block-list.scss","scss/components/_total.scss","scss/utilities/_visibility.scss","scss/utilities/_spacing.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/packages/starterkit-handlebars-demo/package.json b/packages/starterkit-handlebars-demo/package.json index 08c2a00ef..38b135ce8 100644 --- a/packages/starterkit-handlebars-demo/package.json +++ b/packages/starterkit-handlebars-demo/package.json @@ -23,7 +23,7 @@ "access": "public" }, "scripts": { - "build": "cd dist/css && sass style.scss style.css" + "build": "cd dist/css && sass style.scss:style.css pattern-scaffolding.scss:pattern-scaffolding.css" }, "engines": { "node": ">=12.13.1" diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss index e91e0dfe8..68d715269 100755 --- a/packages/uikit-workshop/src/sass/pattern-lab.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab.scss @@ -46,6 +46,7 @@ @import '../scripts/components/pl-nav/pl-nav.scss'; @import '../scripts/components/pl-search/pl-search.scss'; @import 'scss/04-components/annotations'; +@import 'scss/04-components/annotations-inside-modal'; @import 'scss/04-components/breadcrumbs'; @import 'scss/04-components/pattern-category'; @import 'scss/04-components/pattern-info'; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss new file mode 100644 index 000000000..3acf5dc2e --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +/*------------------------------------*\ + #ANNOTATIONS INSIDE MODAL +\*------------------------------------*/ + +/** + * Annotations area + * 1) Appears inside of modal + */ +.pl-c-annotations { + margin: 1rem 0; +} + +/** + * Annotations Title + * Says the word "Annotations" + */ +.pl-c-annotations__title { + font-size: 1.2rem !important; + margin: 0 0 0.5rem; +} + +/** + * Annotations list + * 1) Ordered list of annotations + * 2) Presented with parent selector to force styles + * over pl-c-text-passage + */ +.pl-c-annotations .pl-c-annotations__list { + counter-reset: the-count; + padding: 0; + margin: 0; + list-style: none; +} + +/** + * Annotations list item + * 1) Displays each item as a number + */ +.pl-c-annotations__item { + position: relative; + padding-left: 1.5rem; + margin-bottom: 1rem; + border-radius: $pl-border-radius-med; + transition: background-color $pl-animate-quick ease; + + &:before { + content: counter(the-count); + counter-increment: the-count; + font-size: 85%; + display: flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + border-radius: 50%; + padding: 2px; + text-align: center; + background-color: $pl-color-gray-50; + color: $pl-color-white; + position: absolute; + top: 4px; + left: 0; + } + + &.pl-is-active { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +.pl-c-annotations .pl-c-annotations__item-title { + margin-bottom: 0; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss index 57c32f781..2ff41dda6 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss @@ -36,12 +36,10 @@ /** * Annotation tooltip * 1) Appears inside the iframe over any element that has an - * anootation attached to it. - * 2) Annotation tip gets dynamically set to `display: none` via - * JavaScript + * annotation attached to it. */ .pl-c-annotation-tip { - display: flex; /* 2 */ + display: flex; align-items: center; justify-content: center; width: 24px !important; @@ -55,77 +53,3 @@ position: absolute; z-index: 100; } - -/*------------------------------------*\ - #ANNOTATIONS INSIDE MODAL -\*------------------------------------*/ - -/** - * Annotations area - * 1) Appears inside of modal - */ -.pl-c-annotations { - margin: 1rem 0; -} - -/** - * Annotations Title - * Says the word "Annotations" - */ -.pl-c-annotations__title { - font-size: 1.2rem !important; - margin: 0 0 0.5rem; -} - -/** - * Annotations list - * 1) Ordered list of annotations - * 2) Presented with parent selector to force styles - * over pl-c-text-passage - */ -.pl-c-annotations .pl-c-annotations__list { - counter-reset: the-count; - padding: 0; - margin: 0; - list-style: none; -} - -/** - * Annotations list item - * 1) Displays each item as a number - */ -.pl-c-annotations__item { - position: relative; - padding-left: 1.5rem; - margin-bottom: 1rem; - border-radius: $pl-border-radius-med; - transition: background-color $pl-animate-quick ease; - - &:before { - content: counter(the-count); - counter-increment: the-count; - font-size: 85%; - display: flex; - align-items: center; - justify-content: center; - width: 14px; - height: 14px; - border-radius: 50%; - padding: 2px; - text-align: center; - background-color: $pl-color-gray-50; - color: $pl-color-white; - position: absolute; - top: 4px; - left: 0; - } - - &.pl-is-active { - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -.pl-c-annotations .pl-c-annotations__item-title { - margin-bottom: 0; -} diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js index e3e0cdda8..665628c5f 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js +++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js @@ -168,7 +168,7 @@ export const modalStyleguide = { patternPartialSelector + '.pl-c-annotation-tip' ); for (let i = 0; i < elsToHide.length; i++) { - elsToHide[i].style.display = 'none'; + elsToHide[i].hidden = true; } }, @@ -242,7 +242,7 @@ export const modalStyleguide = { .getComputedStyle(elsToHighlight[j], null) .getPropertyValue('max-height') === '0px' ) { - span.style.display = 'none'; + span.hidden = true; } const annotationTip = document.querySelector( @@ -254,7 +254,7 @@ export const modalStyleguide = { elsToHighlight[j].firstChild ); } else { - annotationTip.style.display = 'inline-flex'; + annotationTip.hidden = false; } elsToHighlight[j].onclick = (function (el) {