/* Copyright (c) 2018 Stad Antwerpen Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The Antwep City brand logo is a registered trademark that can not be used without prior permission from the city administration. The font family 'Antwerpen' can only be used with permission from the city administration. Both can only be used in conformity with the branding guidelines and the visual identity of the city of Antwerp. Contact us via e-mail: branding@stad.antwerpen.be The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -- EULA / End User License Agreement THIS IS A LEGAL AGREEMENT. By downloading and/or installing Antwerpen font family software you agree to the following terms: 1. Installation, locations, portable devices This licence is only for the benefit of the users authorised under this licence. Authorised users are permitted to install and use the font software on one (1) portable device such as a notebook or laptop computer and on one (1) desktop or workstation type device that remains at a single location. For example 5 users are authorised to install and use the font software on their five (5) portable devices and their five (5) desktop or workstation type devices in a single location. These computers can be connected to any number of output devices, such as laser printers, ink jet printers, an image setter or a film recorder. The font software may be downloaded to the memory (hard disk or RAM) of the output devices that are customarily used by you for the purposes of having such font software remain resident in the output devices. If you need to install the Font Software on more than the authorized computers permitted by this licence, or if more users need to use the font software, you are required to upgrade to a multiple user licence. You further agree to treat the software as confidential information and exercise reasonable care to avoid unauthorised distribution of the Font Software. If you cannot or do not agree to the terms of this licence, return the software unused to Studio Type / Jo De Baerdemaeker, Gounodstraat 8/31, 2018 Antwerpen, Belgium. This means that the standard licence allows only a single user to use the fonts. If more users plan to use the fonts, you need to upgrade the licence to cover multiple users. 2. Service Bureau To reproduce a particular document at a commercial printer, or service bureau, you can supply non-editable artwork in a PDF format. If the printer or service bureau needs to install the fonts on their computers they will need to purchase a separate Service Bureau licence. This means that to output your documents you can either send non- editable PDF files, or your printer / service bureau / designer can get a separate licence at a significant discount. 3. Rights reserved The Font Software and the designs embodied therein are the exclusive property of Studio Type / Jo De Baerdemaeker. This non-exclusive, revocable licence grants you certain limited rights to use the font software only, no permanent or ownership rights are granted as a part of this contract herein. All right, title and interest in and to the font software, the designs of the fonts embodied therein together with the copyrights, trademarks, trade names and service marks associated with the font software are each the exclusive property of Studio Type / Jo De Baerdemaeker. This means that by buying the licence you only buy the right to use the fonts. The fonts themselves remain the exclusive property of Studio Type / Jo De Baerdemaeker. 4. Modifications, back-up copies Except as may be otherwise expressly permitted in this contract or by a separate written agreement, you may not modify, adapt, translate, reverse engineer, decompile, disassemble, alter or otherwise copy the Studio Type / Jo De Baerdemaeker font software or the designs embodied therein. If necessary, you are permitted to make only those reasonable number back-up copies suitable to your usage. The Studio Type / Jo De Baerdemaeker font software and its documentation, unless properly transferred, may not be sublicenced, sold, leased, rented, lent, or given away to another person or business. You may not modify the fonts in any way. 5. Returning and exchanging fonts The font software may be returned or exchanged only if defective and will be replaced only when accompanied by a valid sales receipt within four (4) weeks of purchase. This means that if the fonts donʼt work, we replace them. 6. Derivative work Any derivate works created by you which use or are based upon the font software and/or the designs of the fonts, including, but not limited to, software or other electronic works, are considered derivative works under the Law of the Netherlands. Any such derivative works are the exclusive property of Studio Type / Jo De Baerdemaeker and shall be subject to the terms and conditions of this licence. Derivative works may not be sublicensed, sold, leased, rented, loaned, or given away without the express written permission of Studio Type / Jo De Baerdemaeker. Studio Type / Jo De Baerdemaeker shall not be responsible for or required to support unauthorised, modified and/or regenerated software or derivative works. You are permitted to convert the Fonts to outline or bitmap images for the purposes of publishing electronic documents. This means that you canʼt create other fonts based on our fonts. You also cannot sell or rent modified versions of our fonts. 7. Third party use, broadcasting If you are an advertising agency, acting on behalf of an advertising agency or otherwise acting in a similar capacity or for the benefit of a third party. The font software or a copy thereof will be transmitted to the client or third party, the purchase of a licence for or by your client is required. Depending upon how the Font Software will be used, an additional licence upgrade and/or the purchase of a special licence may be required. A special OEM licence is required to use the Font Software on letter form goods for sale, electronic books, game playing devices, gaming or gambling devices irrespective of whether the font software itself is embedded into the device or whether it is merely the designs of the fonts that are displayed. If you are using the Font Software in exhibition or display in cinemas, motion pictures, on television or on cable television, or as a part of any works broadcast or transmitted on the Internet, a special broadcasting licence is required and an additional licence fee may be required. This means that you need a special licence if you plan to embed the fonts in hardware or software, or if you will use the fonts in movies. 8. Embedding The embedding of the Studio Type / Jo De Baerdemaeker fonts software in PDF documents, Flash documents, and other digital documents is allowed only in a secured, read-only mode, provided that the extraction of the Fonts is prohibited. Notwithstanding any other term of this licence, embedding of the font software in other software or devices or in any other form whatsoever requires the purchase of and shall be governed by a separate OEM licence agreement. This licence does not permit the transmitting of the Font Software over the Internet in font serving or for font replacement by means of technologies such as, but not limited to, EOT, Cufon, sIFR or other technologies that now exist or may be developed in the future. If you wish to use the font software for such purposes, a special web font licence and the purchase of a related service (“TWFS”) is required. This means that you can embed fonts into PDF and Flash files for free, but you must set embedding to prevent font extraction. You can buy a special licence if you plan to embed the fonts in hardware or software. For using fonts on websites, we offer a special licence. 9. Copyrights and Trademarks The Studio Type / Jo De Baerdemaeker font software is protected under domestic and international trademark, copyright and industrial design law. You may, but are not required to identify Studio Type / Jo De Baerdemaekere fonts and ownership in any design or production credits. This means that Studio Type / Jo De Baerdemaeker fonts are copyrighted and protected by trademark. 10. Termination of Agreement Any breach of the terms of this Agreement shall be cause for termination. In the event of termination, and without limitation of any remedies under law or equity, you agree to immediately return the Font Software to Studio Type / Jo De Baerdemaeker and certify that no copy remains in your possession or control. This means that if you violate these terms, this agreement will be cancelled. 11. Transferring the licence You may transfer the Font Software to another party provided that the new licensee agrees in writing to be bound by this licence, and you destroy all copies of the Font Software immediately upon transfer of the Font Software. The new licensee must transmit a copy of their Agreement to Studio Type / Jo De Baerdemaeker. This means that you may transfer the font licence to a third party if he agrees to the licensing conditions in writing and you destroy your copies of the fonts (and confirm this in writing too). 12. Warranties Studio Type / Jo De Baerdemaeker MAKES NO WARRANTIES, EXPRESS OR IMPLIED, AS TO MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR OTHERWISE. THE FONT SOFTWARE WAS NOT MANUFACTURED FOR USE IN MANUFACTURING CONTROL DEVICES OR NAVIGATION DEVICES OR IN CIRCUMSTANCES THAT COULD RESULT IN ENVIRONMENTAL DAMAGE OR PERSONAL INJURY. WITHOUT LIMITING THE FOREGOING, Studio Type / Jo De Baerdemaeker SHALL IN NO EVENT BE LIABLE TO THE LICENSED USER OR ANY OTHER THIRD PARTY FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL DAMAGES, INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION OR LOSS OF BUSINESS INFORMATION, ARISING OUT OF THE USE OR INABILITY TO USE THE PRODUCT EVEN IF NOTIFIED IN ADVANCE. UNDER NO CIRCUMSTANCES SHALL Studio Type / Jo De Baerdemaeker’S LIABILITY EXCEED THE REPLACEMENT COST OF THE SOFTWARE. Under no circumstances shall Studio Type / Jo De Baerdemaeker’s liability exceed the substitution or replacement cost of the font software, whichever is less, and at the sole discretion of Studio Type / Jo De Baerdemaeker. The terms of this licence Agreement are contractual in nature. The Studio Type / Jo De Baerdemaeker Font Software licence Agreement is subject to Belgian Law. By downloading and installing the Fonts, you acknowledge that you have read, understood, and agreed to be bound by the terms and conditions of this licence Agreement. This means that we canʼt guarantee that the fonts will be appropriate for your projects. 13. Thank You Jo De Baerdemaeker and Stad Antwerpen thank you for reading this far and taking the time to understand this Licence Agreement. Your support makes this foundry possible. */ @charset "UTF-8"; /** * CORE BRANDING STYLES * ------------------------------------------------------------------- */ /** * QUARKS * ------------------------------------------------------------------- */ /** * MIXINS * ------------------------------------------------------------------- * Collection of custom mixins */ /** * FONT FACE * ------------------------------------------------------------------- */ /** * INPUT PLACEHOLDER MIXIN * ------------------------------------------------------------------- * Change base styling for placeholder text on input fields * Note: Styling the placeholder text is not supported on older * browsers, use a html5-placeholder polyfill for that * * Background info: * - http://davidwalsh.name/html5-placeholder * - http://davidwalsh.name/placeholder-overflow * - http://jamesallardice.github.io/Placeholders.js */ /** * FOCUS * ------------------------------------------------------------------- */ /** * CLEARFIX * ------------------------------------------------------------------- */ /** * MEDIA QUERIES MIXIN * ------------------------------------------------------------------- */ /** * FUNCTIONS * ------------------------------------------------------------------- * Collection of custom functions */ /** * STRIP UNIT FROM VALUE * ------------------------------------------------------------------- */ /** * CONVERT PX TO REM * ------------------------------------------------------------------- */ /** * RAISE NUMBER TO CERTAIN POWER * ------------------------------------------------------------------- */ /** * HANDLING Z-INDEX LAYERS * ------------------------------------------------------------------- */ /** * COLORS * ------------------------------------------------------------------- * Collection of all available branding colors */ /** * COMPLETE COLOR PALETTE * ------------------------------------------------------------------- * Variable names generated by Name That Color * http://chir.ag/projects/name-that-color */ /** * GRAYSCALE COLOR PALETTE * ------------------------------------------------------------------- * Collection of grayscale colors */ /** * SOCIAL BRAND COLOR PALETTE * ------------------------------------------------------------------- * Collection of social branding colors * Also see https://mdigi.tools/darken-color/ */ /** * GLOBAL VARIABLES * ------------------------------------------------------------------- * Leave here for renderer */ /** * COLORS * ------------------------------------------------------------------- * Collection of all available branding colors */ /** * COMPLETE COLOR PALETTE * ------------------------------------------------------------------- * Variable names generated by Name That Color * http://chir.ag/projects/name-that-color */ /** * GRAYSCALE COLOR PALETTE * ------------------------------------------------------------------- * Collection of grayscale colors */ /** * SOCIAL BRAND COLOR PALETTE * ------------------------------------------------------------------- * Collection of social branding colors * Also see https://mdigi.tools/darken-color/ */ /** * FUNCTIONS * ------------------------------------------------------------------- * Collection of custom functions */ /** * STRIP UNIT FROM VALUE * ------------------------------------------------------------------- */ /** * CONVERT PX TO REM * ------------------------------------------------------------------- */ /** * RAISE NUMBER TO CERTAIN POWER * ------------------------------------------------------------------- */ /** * HANDLING Z-INDEX LAYERS * ------------------------------------------------------------------- */ /** * MIXINS * ------------------------------------------------------------------- * Collection of custom mixins */ /** * FONT FACE * ------------------------------------------------------------------- */ /** * INPUT PLACEHOLDER MIXIN * ------------------------------------------------------------------- * Change base styling for placeholder text on input fields * Note: Styling the placeholder text is not supported on older * browsers, use a html5-placeholder polyfill for that * * Background info: * - http://davidwalsh.name/html5-placeholder * - http://davidwalsh.name/placeholder-overflow * - http://jamesallardice.github.io/Placeholders.js */ /** * FOCUS * ------------------------------------------------------------------- */ /** * CLEARFIX * ------------------------------------------------------------------- */ /** * MEDIA QUERIES MIXIN * ------------------------------------------------------------------- */ /** * THEME COLORS * ------------------------------------------------------------------- */ /** * DEPRECATED THEME COLORS * ------------------------------------------------------------------- */ /** * OTHER THEME COLORS * ------------------------------------------------------------------- */ /** * SPACERS * ------------------------------------------------------------------- */ /** * BREAKPOINTS * ------------------------------------------------------------------- */ /** * $screen-xl = * max-width of u-container * + width of official logo * 2 * + space between logo and u-container * 2 */ /** * FONT SIZES * ------------------------------------------------------------------- */ /** * LINE HEIGHTS * ------------------------------------------------------------------- */ /** * OTHER TYPOGRAPHY * ------------------------------------------------------------------- */ /** * Z-INDEXES * ------------------------------------------------------------------- * http://www.sitepoint.com/better-solution-managing-z-index-sass/ * * Use like this: * z-index: layer('overlay'); * where overlay is a list item of the default list "$z-indexes" (see below) * * The list is also upgradeable in that nesting is permitted, e.g.: * z-indexes: ( * 'modal': ( * 'back': 50, * 'front': 60 * ), * 'navigation': 40, * ... * ) */ /** * ICON SIZES * ------------------------------------------------------------------- */ @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"); :root { /** * GLOBAL CSS PROPERTIES * ------------------------------------------------------------------- */ /** * THEME COLORS * ------------------------------------------------------------------- */ --THEME1-800: var(--theme1-800, #002855); --THEME1-700: var(--theme1-700, #003865); --THEME1-600: var(--theme1-600, #0057b7); --THEME1-500: var(--theme1-500, #009cde); --THEME1-400: var(--theme1-400, #41b6e6); --THEME1-300: var(--theme1-300, #99d6ea); --THEME1-200: var(--theme1-200, #96b5e4); --THEME1-100: var(--theme1-100, #e0ebf6); --THEME2-800: var(--theme2-800,); --THEME2-700: var(--theme2-700,); --THEME2-600: var(--theme2-600, #7c2629); --THEME2-500: var(--theme2-500, #862633); --THEME2-400: var(--theme2-400, #cf0039); --THEME2-300: var(--theme2-300, #df4661); --THEME2-200: var(--theme2-200, #ffb1bb); --THEME2-100: var(--theme2-100, #f5dadf); --INFO-800: var(--info-800, var(--THEME1-800)); --INFO-700: var(--info-700, var(--THEME1-700)); --INFO-600: var(--info-600, var(--THEME1-600)); --INFO-500: var(--info-500, var(--THEME1-500)); --INFO-400: var(--info-400, var(--THEME1-400)); --INFO-300: var(--info-300, var(--THEME1-300)); --INFO-200: var(--info-200, var(--THEME1-200)); --INFO-100: var(--info-100, var(--THEME1-100)); --SUCCESS-800: var(--success-800, #004721); --SUCCESS-700: var(--success-700, #006e33); --SUCCESS-600: var(--success-600, #4c8d2b); --SUCCESS-500: var(--success-500, #6cc24a); --SUCCESS-400: var(--success-400, #97d700); --SUCCESS-300: var(--success-300, #bce194); --SUCCESS-200: var(--success-200, #d0debb); --SUCCESS-100: var(--success-100, #edf8e9); --WARNING-800: var(--warning-800,); --WARNING-700: var(--warning-700,); --WARNING-600: var(--warning-600,); --WARNING-500: var(--warning-500, #8f3400); --WARNING-400: var(--warning-400, #ce4c00); --WARNING-300: var(--warning-300,); --WARNING-200: var(--warning-200,); --WARNING-100: var(--warning-100, #ffe4d6); --DANGER-800: var(--danger-800,); --DANGER-700: var(--danger-700, #7c2629); --DANGER-600: var(--danger-600, #af272f); --DANGER-500: var(--danger-500, #e03c31); --DANGER-400: var(--danger-400, #e56a54); --DANGER-300: var(--danger-300, #e6baa8); --DANGER-200: var(--danger-200, #f3cfb3); --DANGER-100: var(--danger-100, #fbe8e6); /** * UI COLORS * ------------------------------------------------------------------- */ --TEXT-COLOR: var(--text-color, #000); --TEXT-COLOR-LIGHT: var(--text-color-light, #6f6f6f); --TEXT-COLOR-INVERTED: var(--text-color-inverted, #fff); --TEXT-COLOR-XLIGHT: var(--text-color-xlight, var(--TEXT-COLOR-INVERTED)); --BG-COLOR: var(--bg-color, #f3f3f3); --BG-COLOR-LIGHT: var(--bg-color-light, #fff); --BG-COLOR-INVERTED: var(--bg-color-inverted, #424242); --BORDER-COLOR: var(--border-color, #949494); --BORDER-COLOR-LIGHT: var(--border-color-light, #d8d8d8); --OVERLAY-COLOR: var(--overlay-color, rgba(0, 0, 0, 0.75)); --BOX-SHADOW-COLOR: var(--box-shadow-color, rgba(20, 20, 20, 0.12)); --LINK-COLOR: var(--link-color, var(--THEME1-600)); --LINK-HOVER-COLOR: var(--link-hover-color, var(--THEME1-700)); --STATE-INFO: var(--state-info, var(--INFO-600)); --STATE-SUCCESS: var(--state-success, var(--SUCCESS-700)); --STATE-WARNING: var(--state-warning, var(--WARNING-400)); --STATE-DANGER: var(--state-danger, var(--DANGER-600)); --STATE-DISABLED: var(--state-disabled, #6f6f6f); /** * SPACERS * ------------------------------------------------------------------- */ --SPACER: var(--spacer, 1.5rem); --SPACER-3XL: var(--spacer-3xl, calc(var(--SPACER) * 4)); --SPACER-XXL: var(--spacer-xxl, calc(var(--SPACER) * 2.5)); --SPACER-XL: var(--spacer-xl, calc(var(--SPACER) * 2)); --SPACER-L: var(--spacer-l, calc(var(--SPACER) * 1.5)); --SPACER-S: var(--spacer-s, calc(var(--SPACER) / 1.5)); --SPACER-XS: var(--spacer-xs, calc(var(--SPACER) / 2)); --SPACER-XXS: var(--spacer-xxs, calc(var(--SPACER) / 3)); --SPACER-3XS: var(--spacer-3xs, calc(var(--SPACER) / 6)); /** * BREAKPOINTS * ------------------------------------------------------------------- */ --SCREEN-XS: var(--screen-xs, 30rem); --SCREEN-S: var(--screen-s, 45rem); --SCREEN-L: var(--screen-l, 62rem); --SCREEN-XL: var(--screen-xl, 75rem); /** * --SCREEN-XXL = * max-width of u-container * + width of official logo * 2 * + space between logo and u-container * 2 */ --SCREEN-XS-MAX: var(--screen-xs-max, 44.9375rem); --SCREEN-S-MAX: var(--screen-s-max, 61.9375rem); --SCREEN-L-MAX: var(--screen-l-max, 74.9375rem); --SCREEN-XL-MAX: var(--screen-xl-max, 89.9375rem); --SCREEN-XXL: var(--screen-xxl, calc(var(--SCREEN-XL) + calc(var(--SPACER-3XL) * 2) + calc(var(--SPACER) * 2))); /** * FONT FAMILIES * ------------------------------------------------------------------- */ --FONT-FAMILY-BASE: var(--font-family-base, "Sun Antwerpen", sans-serif); --FONT-FAMILY-HEADINGS: var(--font-family-headings, "Antwerpen Regular", sans-serif); --FONT-FAMILY-MONOSPACE: var(--font-family-monospace, "Menlo", "Monaco", "Consolas", "Courier New", monospace); /** * FONT WEIGHTS * ------------------------------------------------------------------- */ --FONT-WEIGHT-LIGHT: var(--font-weight-light, 300); --FONT-WEIGHT-NORMAL: var(--font-weight-normal, 500); --FONT-WEIGHT-BOLD: var(--font-weight-bold, 700); --FONT-WEIGHT-EXTRA-BOLD: var(--font-weight-extra-bold, 800); --FONT-WEIGHT-H1: var(--font-weight-h1, var(--FONT-WEIGHT-BOLD)); --FONT-WEIGHT-H2: var(--font-weight-h2, var(--FONT-WEIGHT-BOLD)); --FONT-WEIGHT-H3: var(--font-weight-h3, var(--FONT-WEIGHT-BOLD)); --FONT-WEIGHT-H4: var(--font-weight-h4, var(--FONT-WEIGHT-BOLD)); --FONT-WEIGHT-H5: var(--font-weight-h5, var(--FONT-WEIGHT-BOLD)); --FONT-WEIGHT-H6: var(--font-weight-h6, var(--FONT-WEIGHT-BOLD)); /** * FONT SiZES * ------------------------------------------------------------------- */ --FONT-SIZE-BASE: var(--font-size-base, 16px); --FONT-SIZE-SMALL: var(--font-size-small, 14px); --FONT-SIZE-LARGE: var(--font-size-large, 18px); --FONT-SIZE-H1: var(--font-size-h1, 36px); --FONT-SIZE-H2: var(--font-size-h2, 28px); --FONT-SIZE-H3: var(--font-size-h3, 23px); --FONT-SIZE-H4: var(--font-size-h4, 21px); --FONT-SIZE-H5: var(--font-size-h5, 19px); --FONT-SIZE-H6: var(--font-size-h6, 17px); /** * LINE-HEIGHT * ------------------------------------------------------------------- */ --LINE-HEIGHT-BASE: var(--line-height-base, 1); --LINE-HEIGHT-HEADING: var(--line-height-heading, 1.1); --LINE-HEIGHT-PARAGRAPH: var(--line-height-paragraph, 1.3); /** * BORDERS * ------------------------------------------------------------------- */ --BORDER-RADIUS: var(--border-radius, 0); --BORDER-WIDTH: var(--border-width, 1px); /** * ANIMATIONS * ------------------------------------------------------------------- */ --ANIMATION-DURATION: var(--animation-duration, 200ms); --ANIMATION-EASING: var(--animation-easing, ease-in-out); --ANIMATION-NORMAL: var(--animation-normal, var(--ANIMATION-DURATION) var(--ANIMATION-EASING)); /** * BOX SHADOWS * ------------------------------------------------------------------- */ --BOX-SHADOW-BOTTOM-LEFT: var(--box-shadow-bottom-left, calc(var(--SPACER) / -2) calc(var(--SPACER) / 2) 0 var(--BOX-SHADOW-COLOR)); --BOX-SHADOW-BOTTOM-RIGHT: var(--box-shadow-bottom-right, calc(var(--SPACER) / 2) calc(var(--SPACER) / 2) 0 var(--BOX-SHADOW-COLOR)); --BOX-SHADOW-TOP-LEFT: var(--box-shadow-top-left, calc(var(--SPACER) / -2) calc(var(--SPACER) / -2) 0 var(--BOX-SHADOW-COLOR)); --BOX-SHADOW-TOP-RIGHT: var(--box-shadow-top-right, calc(var(--SPACER) / 2) calc(var(--SPACER) / -2) 0 var(--BOX-SHADOW-COLOR)); --BOX-SHADOW: var(--box-shadow, var(--BOX-SHADOW-BOTTOM-RIGHT)); } :root { /** * SHARED CSS PROPERTIES * ------------------------------------------------------------------- */ --shared-avatar-size-s: var(--SPACER-L); --shared-avatar-size: var(--SPACER-XL); --shared-avatar-size-l: var(--SPACER-XXL); --shared-copyright-color: var(--TEXT-COLOR-INVERTED); --shared-copyright-height: var(--SPACER-L); --shared-header-height: var(--SPACER-XL); --shared-slideshow-footer-color-light: var(--TEXT-COLOR-INVERTED); } /** * NORMALIZE * ------------------------------------------------------------------- */ /** * BASE * ------------------------------------------------------------------- */ /** * FONTS * ------------------------------------------------------------------- */ /** * ANTWERPEN FONT * ------------------------------------------------------------------- * The 'double declarations' are there to fix faux-bold in some browsers: * https://alistapart.com/article/say-no-to-faux-bold/ */ @font-face { font-display: swap; font-family: "Antwerpen Small"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenSmallCaps-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenSmallCaps-Regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Antwerpen Small"; font-style: normal; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenSmallCaps-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenSmallCaps-Regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Antwerpen Regular"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/Antwerpen-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/Antwerpen-Regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Antwerpen Regular"; font-style: normal; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/Antwerpen-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/Antwerpen-Regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Antwerpen Tall"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenTall-Tall.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenTall-Tall.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Antwerpen Tall"; font-style: normal; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenTall-Tall.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/AntwerpenTall-Tall.woff2") format("woff2"); } /** * SUN ANTWERPEN FONT * ------------------------------------------------------------------- */ @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: normal; font-weight: 300; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_300.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_300.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: italic; font-weight: 300; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_300_italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_300_italic.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_500.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_500.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: italic; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_500_italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_500_italic.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: normal; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_700.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_700.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: italic; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_700_italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_700_italic.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: normal; font-weight: 800; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_800.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_800.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Sun Antwerpen"; font-style: italic; font-weight: 800; src: url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_800_italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/assets/fonts/SunAntwerpen_800_italic.woff2") format("woff2"); } /** * ICONS * ------------------------------------------------------------------- */ .ai { align-self: center; display: inline-flex; justify-content: center; line-height: 1; vertical-align: middle; } .ai svg { fill: none; height: 1em; position: relative; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6.25%; width: 1em; } .ai--thin svg { stroke-width: 4.6875%; } .ai--spin svg { animation: spin 1.6s linear infinite reverse; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /** * LAYOUT * ------------------------------------------------------------------- */ /** * HTML styling * ------------------------------------------------------------------- */ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } *, *:before, *:after { box-sizing: inherit; } /** * Remove inner padding and * border in Firefox 4+ */ ::-moz-focus-inner { border: none; padding: 0; } /** * Hide OS controls for Windows * http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx */ ::-ms-expand { display: none; } /** * Hide clear button in input fields for Windows * https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx */ ::-ms-clear { display: none; height: 0; width: 0; } /** * MEDIA * ------------------------------------------------------------------- */ /** * BASE STYLING * ------------------------------------------------------------------- */ img { vertical-align: middle; } figure { margin: 0; } figcaption { font-size: var(--FONT-SIZE-BASE); line-height: var(--LINE-HEIGHT-PARAGRAPH); padding: var(--SPACER-XS); } @media screen and (min-width: 45rem) { figcaption { padding: var(--SPACER-S) var(--SPACER-XS); } } /** * TYPOGRAPHY * ------------------------------------------------------------------- */ /** * BASE * ------------------------------------------------------------------- */ body { color: var(--TEXT-COLOR); font-family: var(--FONT-FAMILY-BASE); font-size: var(--FONT-SIZE-BASE); line-height: var(--LINE-HEIGHT-BASE); } ::-moz-selection { background-color: #ccddf1; } ::selection { background-color: #ccddf1; } /** * HEADERS * ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: var(--LINE-HEIGHT-HEADING); margin: 0; } h1, .h1 { font-family: var(--FONT-FAMILY-HEADINGS); font-size: var(--FONT-SIZE-H1); font-weight: var(--FONT-WEIGHT-H1); } h2, .h2 { font-family: var(--FONT-FAMILY-HEADINGS); font-size: var(--FONT-SIZE-H2); font-weight: var(--FONT-WEIGHT-H2); } h3, .h3 { font-family: var(--FONT-FAMILY-HEADINGS); font-size: var(--FONT-SIZE-H3); font-weight: var(--FONT-WEIGHT-H3); } h4, .h4 { font-family: var(--FONT-FAMILY-BASE); font-size: var(--FONT-SIZE-H4); font-weight: var(--FONT-WEIGHT-H4); } h5, .h5 { font-family: var(--FONT-FAMILY-BASE); font-size: var(--FONT-SIZE-H5); font-weight: var(--FONT-WEIGHT-H5); } h6, .h6 { font-family: var(--FONT-FAMILY-BASE); font-size: var(--FONT-SIZE-H6); font-weight: var(--FONT-WEIGHT-H6); } /** * PARAGRAPHS * ------------------------------------------------------------------- */ p, .paragraph { font-size: var(--FONT-SIZE-BASE); line-height: var(--LINE-HEIGHT-PARAGRAPH); margin: 0; } /** * PARAGRAPHS * ------------------------------------------------------------------- */ ul, ol, dl { font-size: var(--FONT-SIZE-BASE); line-height: var(--LINE-HEIGHT-PARAGRAPH); margin: 0; } /** * BLOCKQUOTES * ------------------------------------------------------------------- */ blockquote { border-left: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); margin: 0; padding: var(--SPACER-XS) 0 var(--SPACER-XS) var(--SPACER); } blockquote p { display: inline; font-family: var(--FONT-FAMILY-HEADINGS); } blockquote cite { color: var(--THEME2-400); display: inline-block; font-style: normal; line-height: var(--LINE-HEIGHT-HEADING); } blockquote cite:before { content: "— "; } /** * SMALL * ------------------------------------------------------------------- */ small, .small { color: var(--TEXT-COLOR-LIGHT); font-size: 0.875rem; } /** * MARK * ------------------------------------------------------------------- */ mark { background-color: var(--THEME1-600); color: var(--TEXT-COLOR-INVERTED); padding: 0 0.125rem; } /** * HORIZONTAL RULES * ------------------------------------------------------------------- */ hr { border: none; border-top: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); height: var(--BORDER-WIDTH); margin: var(--SPACER) 0; } /** * LINKS * ------------------------------------------------------------------- */ a { color: var(--LINK-COLOR); -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; transition: color var(--ANIMATION-NORMAL); } a:hover, a:active, a:focus { color: var(--LINK-HOVER-COLOR); text-decoration: none; } /** * UTILITIES * ------------------------------------------------------------------- */ /** * BACKGROUND COLOR CLASSES * ------------------------------------------------------------------- */ .u-bg { background-color: var(--BG-COLOR); } .u-bg-light { background-color: var(--BG-COLOR); } .u-bg-primary { background-color: var(--THEME1-600); } .u-bg-secondary { background-color: var(--THEME2-400); } .u-bg-success { background-color: var(--STATE-SUCCESS); } .u-bg-warning { background-color: var(--STATE-WARNING); } .u-bg-danger { background-color: var(--STATE-DANGER); } .u-bg-white { background-color: #fff; } .u-bg-black { background-color: #141414; } /** * LAYOUT HELPERS * ------------------------------------------------------------------- */ /** * LAYOUT CONTAINERS * ------------------------------------------------------------------- */ .u-container { margin: 0 auto; max-width: 75rem; padding: 0 var(--SPACER); width: 100%; } /** * VIEWPORT HELPERS * ------------------------------------------------------------------- */ .u-viewport-vertical { height: 100vh; overflow: hidden; position: relative; } /** * SCROLL HELPERS * ------------------------------------------------------------------- */ .u-horizontal-scroll { overflow-x: auto; overflow-y: hidden; } .u-vertical-scroll { overflow-x: hidden; overflow-y: auto; } .u-no-scroll { overflow: hidden; } /** * HORIZONTAL & VERTICAL CONTAINERS * ------------------------------------------------------------------- */ .u-container-horizontal, .u-container-vertical { display: flex; height: 100%; } .u-container-vertical { flex-direction: column; } .u-container--filled { flex: 1; overflow: hidden; position: relative; } /** * LAYOUT SCROLLING * ------------------------------------------------------------------- */ /** * LAYOUT CLEARANCE * ------------------------------------------------------------------- */ .u-clearfix:after { clear: both; content: ""; display: block; } /** * ACCESSIBILITY CLASSES * ------------------------------------------------------------------- */ .u-screen-reader-only { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } /** * LIST HELPERS * ------------------------------------------------------------------- */ /** * List without default padding and standard list styling. */ .o-tag-list, .o-menu__submenu-list, .m-upload__files, .m-step-indicator, .m-pagination, .m-nav-tabs ol, .m-nav-tabs ul, .m-nav-list ol, .m-nav-list ul, .m-button-list, .a-breadcrumb, .u-list-reset { line-height: 1; list-style: none; margin: 0; padding: 0; } .o-tag-list ul, .o-menu__submenu-list ul, .m-upload__files ul, .m-step-indicator ul, .m-pagination ul, .m-nav-tabs ol ul, .m-nav-tabs ul ul, .m-nav-list ol ul, .m-nav-list ul ul, .m-button-list ul, .a-breadcrumb ul, .u-list-reset ul, .o-tag-list ol, .o-menu__submenu-list ol, .m-upload__files ol, .m-step-indicator ol, .m-pagination ol, .m-nav-tabs ol ol, .m-nav-tabs ul ol, .m-nav-list ol ol, .m-nav-list ul ol, .m-button-list ol, .a-breadcrumb ol, .u-list-reset ol { list-style: none; padding: 0; } /** * List without standard list styling. */ .m-collapsible-list, .u-list-unstyled { list-style: none; padding: 0; } .m-collapsible-list ul, .u-list-unstyled ul, .m-collapsible-list ol, .u-list-unstyled ol { list-style: none; } /** * SPACING HELPERS * ------------------------------------------------------------------- * Helper classes for adding or removing space between elements */ /** * MARGIN * ------------------------------------------------------------------- */ .u-margin-3xl { margin: var(--SPACER-3XL) !important; } .u-margin-xl { margin: var(--SPACER-XL) !important; } .u-margin-l { margin: var(--SPACER-L) !important; } .u-margin { margin: var(--SPACER) !important; } .u-margin-s { margin: var(--SPACER-S) !important; } .u-margin-xs { margin: var(--SPACER-XS) !important; } .u-margin-xxs { margin: var(--SPACER-XXS) !important; } .u-no-margin { margin: 0 !important; } /** * MARGIN TOP * ------------------------------------------------------------------- */ .u-margin-top-3xl { margin-top: var(--SPACER-3XL) !important; } .u-margin-top-xl { margin-top: var(--SPACER-XL) !important; } .u-margin-top-l { margin-top: var(--SPACER-L) !important; } .u-margin-top { margin-top: var(--SPACER) !important; } .u-margin-top-s { margin-top: var(--SPACER-S) !important; } .u-margin-top-xs { margin-top: var(--SPACER-XS) !important; } .u-margin-top-xxs { margin-top: var(--SPACER-XXS) !important; } .u-no-margin-top { margin-top: 0 !important; } /** * MARGIN RIGHT * ------------------------------------------------------------------- */ .u-margin-right-3xl { margin-right: var(--SPACER-3XL) !important; } .u-margin-right-xl { margin-right: var(--SPACER-XL) !important; } .u-margin-right-l { margin-right: var(--SPACER-L) !important; } .u-margin-right { margin-right: var(--SPACER) !important; } .u-margin-right-s { margin-right: var(--SPACER-S) !important; } .u-margin-right-xs { margin-right: var(--SPACER-XS) !important; } .u-margin-right-xxs { margin-right: var(--SPACER-XXS) !important; } .u-no-margin-right { margin-right: 0 !important; } /** * MARGIN BOTTOM * ------------------------------------------------------------------- */ .u-margin-bottom-3xl { margin-bottom: var(--SPACER-3XL) !important; } .u-margin-bottom-xl { margin-bottom: var(--SPACER-XL) !important; } .u-margin-bottom-l { margin-bottom: var(--SPACER-L) !important; } .u-margin-bottom { margin-bottom: var(--SPACER) !important; } .u-margin-bottom-s { margin-bottom: var(--SPACER-S) !important; } .u-margin-bottom-xs { margin-bottom: var(--SPACER-XS) !important; } .u-margin-bottom-xxs { margin-bottom: var(--SPACER-XXS) !important; } .u-no-margin-bottom { margin-bottom: 0 !important; } /** * MARGIN LEFT * ------------------------------------------------------------------- */ .u-margin-left-3xl { margin-left: var(--SPACER-3XL) !important; } .u-margin-left-xl { margin-left: var(--SPACER-XL) !important; } .u-margin-left-l { margin-left: var(--SPACER-L) !important; } .u-margin-left { margin-left: var(--SPACER) !important; } .u-margin-left-s { margin-left: var(--SPACER-S) !important; } .u-margin-left-xs { margin-left: var(--SPACER-XS) !important; } .u-margin-left-xxs { margin-left: var(--SPACER-XXS) !important; } .u-no-margin-left { margin-left: 0 !important; } /** * TEXT HELPERS * ------------------------------------------------------------------- */ /** * TEXT STYLE CLASSES * ------------------------------------------------------------------- */ .u-text-bold { font-weight: var(--FONT-WEIGHT-BOLD); } .u-text-italic { font-style: italic; } .u-text-underline { text-decoration: underline; } /** * TEXT ALIGNMENT CLASSES * ------------------------------------------------------------------- */ .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-text-justify { text-align: justify; } /** * TEXT TRANSFORMATION CLASSES * ------------------------------------------------------------------- */ .u-text-lowercase { text-transform: lowercase; } .u-text-uppercase { text-transform: uppercase; } .u-text-capitalize { text-transform: capitalize; } /** * TEXT COLOR CLASSES * ------------------------------------------------------------------- */ .u-text-primary { color: var(--THEME1-600); } .u-text-secondary { color: var(--THEME2-400); } .u-text-success { color: var(--STATE-SUCCESS); } .u-text-warning { color: var(--STATE-WARNING); } .u-text-danger { color: var(--STATE-DANGER); } .u-text-light { color: var(--TEXT-COLOR-LIGHT); } .u-text-xlight, .u-text-inverted { color: var(--TEXT-COLOR-INVERTED); } /** * TEXT OVERFLOW CLASSES * ------------------------------------------------------------------- */ .m-tag__label, .u-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * TEXT ACCESSIBILITY CLASSES * ------------------------------------------------------------------- */ .u-text-readable { max-width: 45rem; } /** * ATOMS * ------------------------------------------------------------------- */ /** * AVATAR VARIABLES * ------------------------------------------------------------------- */ .a-avatar { --avatar-color: var(--TEXT-COLOR-LIGHT); --avatar-bg-color: var(--BG-COLOR-LIGHT); --avatar-hover-bg-color: var(--BG-COLOR); --avatar-primary-color: var(--THEME1-600); --avatar-primary-hover-color: var(--THEME1-700); --avatar-primary-bg-color: var(--THEME1-100); --avatar-primary-hover-bg-color: var(--THEME1-200); --avatar-size-s: var(--shared-avatar-size-s); --avatar-icon-size-s: 1rem; --avatar-size: var(--shared-avatar-size); --avatar-icon-size: 1.25rem; --avatar-size-l: var(--shared-avatar-size-l); --avatar-icon-size-l: 1.5rem; } /** * AVATARS * ------------------------------------------------------------------- */ .a-avatar { background-color: var(--avatar-bg-color); border-radius: var(--BORDER-RADIUS); color: var(--avatar-color); display: inline-block; font-family: var(--FONT-FAMILY-HEADINGS); font-size: var(--avatar-icon-size); height: var(--avatar-size); overflow: hidden; position: relative; text-align: center; text-decoration: none; transition: background-color var(--ANIMATION-NORMAL); width: var(--avatar-size); } .a-avatar img { display: block; max-width: 100%; transition: filter var(--ANIMATION-NORMAL); } .a-avatar__icon .ai, .a-avatar__letter { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } a:hover .a-avatar img, a:active .a-avatar img, a:focus .a-avatar img, .a-button:hover .a-avatar img, .a-button:active .a-avatar img, .a-button:focus .a-avatar img { filter: brightness(80%); } /** * AVATAR ELEMENTS * ------------------------------------------------------------------- */ .a-avatar__letter { text-transform: uppercase; } /** * AVATAR SIZES * ------------------------------------------------------------------- */ .a-avatar--s { font-size: var(--avatar-icon-size-s); height: var(--avatar-size-s); width: var(--avatar-size-s); } .a-avatar--l { font-size: var(--avatar-icon-size-l); height: var(--avatar-size-l); width: var(--avatar-size-l); } /** * AVATAR COLORS * ------------------------------------------------------------------- */ .a-avatar { background-color: var(--avatar-bg-color); color: var(--avatar-color); } .a-avatar.a-avatar--primary { background-color: var(--avatar-primary-bg-color); color: var(--avatar-primary-color); } a:hover .a-avatar, a:active .a-avatar, a:focus .a-avatar, .a-button:hover .a-avatar, .a-button:active .a-avatar, .a-button:focus .a-avatar { background-color: var(--avatar-hover-bg-color); } a:hover .a-avatar.a-avatar--primary, a:active .a-avatar.a-avatar--primary, a:focus .a-avatar.a-avatar--primary, .a-button:hover .a-avatar.a-avatar--primary, .a-button:active .a-avatar.a-avatar--primary, .a-button:focus .a-avatar.a-avatar--primary { color: var(--avatar-primary-hover-color); background-color: var(--avatar-primary-hover-bg-color); } /** * AVATAR SHAPES * ------------------------------------------------------------------- */ .a-avatar--rounded { -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 50%; } /** * BADGE VARIABLES * ------------------------------------------------------------------- */ .a-badge { --badge-font-size: 14px; --badge-font-weight: var(--FONT-WEIGHT-BOLD); --badge-size: var(--SPACER); --badge-padding: 0 var(--SPACER-3XS); --badge-color: var(--TEXT-COLOR-INVERTED); --badge-bg-color: var(--TEXT-COLOR-LIGHT); --badge-border-color: var(--TEXT-COLOR-LIGHT); } /** * BADGES * ------------------------------------------------------------------- */ .a-badge { align-items: center; border-radius: var(--badge-size); display: inline-flex; font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); justify-content: center; min-height: var(--badge-size); min-width: var(--badge-size); padding: var(--badge-padding); } /** * BADGES COLORS * ------------------------------------------------------------------- */ .a-badge { background-color: var(--badge-bg-color); border: var(--BORDER-WIDTH) solid var(--badge-border-color); color: var(--badge-color); } .a-badge.a-badge--outlined { --badge-color: var(--TEXT-COLOR-LIGHT); --badge-bg-color: var(--BG-COLOR-LIGHT); --badge-border-color: var(--BORDER-COLOR); } .a-badge.a-badge--transparent { --badge-color: var(--TEXT-COLOR-LIGHT); --badge-bg-color: var(--BG-COLOR); --badge-border-color: var(--BG-COLOR); } .a-badge.a-badge--primary { --badge-color: var(--TEXT-COLOR-INVERTED); --badge-bg-color: var(--THEME1-600); --badge-border-color: var(--THEME1-600); } .a-badge.a-badge--primary.a-badge--outlined { --badge-color: var(--THEME1-600); --badge-bg-color: var(--BG-COLOR-LIGHT); --badge-border-color: var(--THEME1-600); } .a-badge.a-badge--primary.a-badge--transparent { --badge-color: var(--THEME1-600); --badge-bg-color: var(--THEME1-100); --badge-border-color: var(--THEME1-100); } /** * BADGES DISABLED COLORS * ------------------------------------------------------------------- */ .is-disabled .a-badge, .is-disabled .a-badge.a-badge--primary { --badge-color: var(--TEXT-COLOR-INVERTED); --badge-bg-color: var(--TEXT-COLOR-LIGHT); --badge-border-color: var(--TEXT-COLOR-LIGHT); } .is-disabled .a-badge.a-badge--outlined, .is-disabled .a-badge.a-badge--transparent, .is-disabled .a-badge.a-badge--primary.a-badge--outlined, .is-disabled .a-badge.a-badge--primary.a-badge--transparent { --badge-color: var(--TEXT-COLOR-LIGHT); --badge-bg-color: transparent; --badge-border-color: var(--BORDER-COLOR); } /** * BREADCRUMB VARIABLES * ------------------------------------------------------------------- */ .a-breadcrumb { --breadcrumb-arrow-color: var(--BORDER-COLOR); } /** * BREADCRUMB * ------------------------------------------------------------------- */ .a-breadcrumb:after { clear: both; content: ""; display: block; } .a-breadcrumb li { display: block; float: left; line-height: 1.5; margin-bottom: 0; } .a-breadcrumb li:not(:last-child):after { background: var(--breadcrumb-arrow-color); content: ""; display: inline-block; height: 0.75rem; margin: 0 var(--SPACER-XS); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; vertical-align: middle; width: 0.75rem; } /** * BUTTON VARIABLES * ------------------------------------------------------------------- */ .a-button { --btn-border-radius: var(--BORDER-RADIUS); --btn-height: var(--SPACER-XL); --btn-padding: var(--SPACER-XS) var(--SPACER); --btn-font-weight: var(--FONT-WEIGHT-BOLD); --btn-font-size: 1rem; --btn-icon-size: 1.25rem; } .a-button { --btn-color: var(--TEXT-COLOR-INVERTED); --btn-hover-color: var(--btn-color); --btn-bg-color: var(--THEME1-600); --btn-hover-bg-color: var(--THEME1-700); --btn-border-color: var(--btn-bg-color); --btn-hover-border-color: var(--btn-hover-bg-color); --btn-neutral-color: var(--TEXT-COLOR-INVERTED); --btn-neutral-hover-color: var(--btn-neutral-color); --btn-neutral-bg-color: #6f6f6f; --btn-neutral-hover-bg-color: #424242; --btn-neutral-border-color: var(--btn-neutral-bg-color); --btn-neutral-hover-border-color: var(--btn-neutral-hover-bg-color); --btn-secondary-color: var(--TEXT-COLOR-INVERTED); --btn-secondary-hover-color: var(--btn-secondary-color); --btn-secondary-bg-color: var(--THEME2-400); --btn-secondary-hover-bg-color: var(--THEME2-500); --btn-secondary-border-color: var(--btn-secondary-bg-color); --btn-secondary-hover-border-color: var(--btn-secondary-hover-bg-color); --btn-success-color: var(--TEXT-COLOR-INVERTED); --btn-success-hover-color: var(--btn-success-color); --btn-success-bg-color: var(--SUCCESS-700); --btn-success-hover-bg-color: var(--SUCCESS-800); --btn-success-border-color: var(--btn-success-bg-color); --btn-success-hover-border-color: var(--btn-success-hover-bg-color); --btn-warning-color: var(--TEXT-COLOR-INVERTED); --btn-warning-hover-color: var(--btn-warning-color); --btn-warning-bg-color: var(--WARNING-400); --btn-warning-hover-bg-color: var(--WARNING-500); --btn-warning-border-color: var(--btn-warning-bg-color); --btn-warning-hover-border-color: var(--btn-warning-hover-bg-color); --btn-danger-color: var(--TEXT-COLOR-INVERTED); --btn-danger-hover-color: var(--btn-danger-color); --btn-danger-bg-color: var(--DANGER-600); --btn-danger-hover-bg-color: var(--DANGER-700); --btn-danger-border-color: var(--btn-danger-bg-color); --btn-danger-hover-border-color: var(--btn-danger-hover-bg-color); --btn-disabled-color: var(--STATE-DISABLED); --btn-disabled-hover-color: var(--btn-disabled-color); --btn-disabled-bg-color: var(--BG-COLOR); --btn-disabled-hover-bg-color: var(--btn-disabled-bg-color); --btn-disabled-border-color: var(--btn-disabled-bg-color); --btn-disabled-hover-border-color: var(--btn-disabled-bg-color); --btn-outlined-color: var(--THEME1-600); --btn-outlined-hover-color: var(--btn-outlined-color); --btn-outlined-bg-color: var(--BG-COLOR-LIGHT); --btn-outlined-hover-bg-color: var(--THEME1-100); --btn-outlined-border-color: var(--btn-outlined-color); --btn-outlined-hover-border-color: var(--btn-outlined-color); --btn-outlined-neutral-color: #6f6f6f; --btn-outlined-neutral-hover-color: var(--btn-outlined-neutral-color); --btn-outlined-neutral-bg-color: var(--BG-COLOR-LIGHT); --btn-outlined-neutral-hover-bg-color: var(--BG-COLOR); --btn-outlined-neutral-border-color: var(--btn-outlined-neutral-color); --btn-outlined-neutral-hover-border-color: var(--btn-outlined-neutral-color); --btn-outlined-success-color: var(--SUCCESS-700); --btn-outlined-success-hover-color: var(--btn-outlined-success-color); --btn-outlined-success-bg-color: var(--BG-COLOR-LIGHT); --btn-outlined-success-hover-bg-color: var(--SUCCESS-100); --btn-outlined-success-border-color: var(--btn-outlined-success-color); --btn-outlined-success-hover-border-color: var(--btn-outlined-success-color); --btn-outlined-warning-color: var(--WARNING-400); --btn-outlined-warning-hover-color: var(--btn-outlined-warning-color); --btn-outlined-warning-bg-color: var(--BG-COLOR-LIGHT); --btn-outlined-warning-hover-bg-color: var(--WARNING-100); --btn-outlined-warning-border-color: var(--btn-outlined-warning-color); --btn-outlined-warning-hover-border-color: var(--btn-outlined-warning-border-color); --btn-outlined-danger-color: var(--DANGER-600); --btn-outlined-danger-hover-color: var(--btn-outlined-danger-color); --btn-outlined-danger-bg-color: var(--BG-COLOR-LIGHT); --btn-outlined-danger-hover-bg-color: var(--DANGER-100); --btn-outlined-danger-border-color: var(--btn-outlined-danger-color); --btn-outlined-danger-hover-border-color: var(--btn-outlined-danger-color); --btn-outlined-disabled-color: var(--STATE-DISABLED); --btn-outlined-disabled-hover-color: var(--btn-outlined-disabled-color); --btn-outlined-disabled-bg-color: var(--BG-COLOR); --btn-outlined-disabled-hover-bg-color: var(--btn-outlined-disabled-bg-color); --btn-outlined-disabled-border-color: var(--BORDER-COLOR-LIGHT); --btn-outlined-disabled-hover-border-color: var(--btn-outlined-disabled-border-color); --btn-text-color: var(--THEME1-600); --btn-text-hover-color: var(--btn-text-color); --btn-text-bg-color: var(--BG-COLOR-LIGHT); --btn-text-hover-bg-color: var(--THEME1-100); --btn-text-border-color: transparent; --btn-text-hover-border-color: transparent; --btn-text-neutral-color: #6f6f6f; --btn-text-neutral-hover-color: var(--btn-text-neutral-color); --btn-text-neutral-bg-color: var(--BG-COLOR-LIGHT); --btn-text-neutral-hover-bg-color: var(--BG-COLOR); --btn-text-neutral-border-color: transparent; --btn-text-neutral-hover-border-color: transparent; --btn-text-success-color: var(--SUCCESS-700); --btn-text-success-hover-color: var(--btn-text-success-color); --btn-text-success-bg-color: var(--BG-COLOR-LIGHT); --btn-text-success-hover-bg-color: var(--SUCCESS-100); --btn-text-success-border-color: transparent; --btn-text-success-hover-border-color: transparent; --btn-text-warning-color: var(--WARNING-400); --btn-text-warning-hover-color: var(--btn-text-warning-color); --btn-text-warning-bg-color: var(--BG-COLOR-LIGHT); --btn-text-warning-hover-bg-color: var(--WARNING-100); --btn-text-warning-border-color: transparent; --btn-text-warning-hover-border-color: transparent; --btn-text-danger-color: var(--DANGER-600); --btn-text-danger-hover-color: var(--btn-text-danger-color); --btn-text-danger-bg-color: var(--BG-COLOR-LIGHT); --btn-text-danger-hover-bg-color: var(--DANGER-100); --btn-text-danger-border-color: transparent; --btn-text-danger-hover-border-color: transparent; --btn-text-disabled-color: var(--STATE-DISABLED); --btn-text-disabled-hover-color: var(--btn-text-disabled-color); --btn-text-disabled-bg-color: var(--BG-COLOR); --btn-text-disabled-hover-bg-color: var(--btn-text-disabled-bg-color); --btn-text-disabled-border-color: var(--btn-text-disabled-bg-color); --btn-text-disabled-hover-border-color: var(--btn-text-disabled-bg-color); --btn-twitter-color: var(--TEXT-COLOR-INVERTED); --btn-twitter-hover-color: var(--btn-twitter-color); --btn-twitter-bg-color: #00aced; --btn-twitter-hover-bg-color: #00aced; --btn-twitter-border-color: #00aced; --btn-twitter-hover-border-color: #00aced; --btn-x-color: var(--TEXT-COLOR-INVERTED); --btn-x-hover-color: var(--btn-x-color); --btn-x-bg-color: #000; --btn-x-hover-bg-color: #000; --btn-x-border-color: #000; --btn-x-hover-border-color: #000; --btn-linkedin-color: var(--TEXT-COLOR-INVERTED); --btn-linkedin-hover-color: var(--btn-linkedin-color); --btn-linkedin-bg-color: #0077b5; --btn-linkedin-hover-bg-color: #005988; --btn-linkedin-border-color: #0077b5; --btn-linkedin-hover-border-color: #005988; --btn-facebook-color: var(--TEXT-COLOR-INVERTED); --btn-facebook-hover-color: var(--btn-facebook-color); --btn-facebook-bg-color: #1877f2; --btn-facebook-hover-bg-color: #0b58bd; --btn-facebook-border-color: #1877f2; --btn-facebook-hover-border-color: #0b58bd; --btn-instagram-color: var(--TEXT-COLOR-INVERTED); --btn-instagram-hover-color: var(--btn-instagram-color); --btn-instagram-bg-color: #ff0069; --btn-instagram-hover-bg-color: #bf004f; --btn-instagram-border-color: #ff0069; --btn-instagram-hover-border-color: #bf004f; --btn-snapchat-color: var(--TEXT-COLOR); --btn-snapchat-hover-color: var(--btn-snapchat-color); --btn-snapchat-bg-color: #fffc00; --btn-snapchat-hover-bg-color: #bfbd00; --btn-snapchat-border-color: #fffc00; --btn-snapchat-hover-border-color: #bfbd00; --btn-tiktok-color: var(--TEXT-COLOR); --btn-tiktok-hover-color: var(--btn-tiktok-color); --btn-tiktok-bg-color: #25f4ee; --btn-tiktok-hover-bg-color: #0ac9c3; --btn-tiktok-border-color: #25f4ee; --btn-tiktok-hover-border-color: #0ac9c3; --btn-youtube-color: var(--TEXT-COLOR-INVERTED); --btn-youtube-hover-color: var(--btn-youtube-color); --btn-youtube-bg-color: #f00; --btn-youtube-hover-bg-color: #bf0000; --btn-youtube-border-color: #f00; --btn-youtube-hover-border-color: #bf0000; --btn-social-color: var(--TEXT-COLOR); --btn-social-hover-color: var(--THEME1-600); --btn-social-bg-color: transparent; --btn-social-hover-bg-color: transparent; --btn-social-border-color: transparent; --btn-social-hover-border-color: transparent; --btn-social-negative-color: var(--TEXT-COLOR-INVERTED); --btn-social-negative-hover-color: var(--THEME1-100); --btn-social-negative-bg-color: transparent; --btn-social-negative-hover-bg-color: transparent; --btn-social-negative-border-color: transparent; --btn-social-negative-hover-border-color: transparent; } /** * BUTTON PLACEHOLDER * ------------------------------------------------------------------- */ .a-button { align-items: center; border: none; border-radius: var(--btn-border-radius); cursor: pointer; display: flex; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); justify-content: center; line-height: 1.5; margin: 0; min-height: var(--btn-height); padding: var(--btn-padding); text-align: center; text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: color, background, box-shadow; transition-timing-function: var(--ANIMATION-EASING); -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; width: 100%; } @media screen and (min-width: 30rem) { .a-button { display: inline-flex; width: auto; } } .a-button .ai, .a-button .a-spinner { font-size: var(--btn-icon-size); line-height: 0; } /** * BUTTON COLORS * ------------------------------------------------------------------- */ .a-button { background: var(--btn-bg-color); color: var(--btn-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--btn-border-color) inset; } .a-button:hover, .a-button:active, .a-button:focus { background: var(--btn-hover-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--btn-hover-border-color) inset; color: var(--btn-hover-color); text-decoration: none; } .a-button.a-button--neutral { --btn-color: var(--btn-neutral-color); --btn-hover-color: var(--btn-neutral-hover-color); --btn-bg-color: var(--btn-neutral-bg-color); --btn-hover-bg-color: var(--btn-neutral-hover-bg-color); --btn-border-color: var(--btn-neutral-border-color); --btn-hover-border-color: var(--btn-neutral-hover-border-color); } .a-button.a-button--secondary { --btn-color: var(--btn-secondary-color); --btn-hover-color: var(--btn-secondary-hover-color); --btn-bg-color: var(--btn-secondary-bg-color); --btn-hover-bg-color: var(--btn-secondary-hover-bg-color); --btn-border-color: var(--btn-secondary-border-color); --btn-hover-border-color: var(--btn-secondary-hover-border-color); } .a-button.a-button--success { --btn-color: var(--btn-success-color); --btn-hover-color: var(--btn-success-hover-color); --btn-bg-color: var(--btn-success-bg-color); --btn-hover-bg-color: var(--btn-success-hover-bg-color); --btn-border-color: var(--btn-success-border-color); --btn-hover-border-color: var(--btn-success-hover-border-color); } .a-button.a-button--warning { --btn-color: var(--btn-warning-color); --btn-hover-color: var(--btn-warning-hover-color); --btn-bg-color: var(--btn-warning-bg-color); --btn-hover-bg-color: var(--btn-warning-hover-bg-color); --btn-border-color: var(--btn-warning-border-color); --btn-hover-border-color: var(--btn-warning-hover-border-color); } .a-button.a-button--danger { --btn-color: var(--btn-danger-color); --btn-hover-color: var(--btn-danger-hover-color); --btn-bg-color: var(--btn-danger-bg-color); --btn-hover-bg-color: var(--btn-danger-hover-bg-color); --btn-border-color: var(--btn-danger-border-color); --btn-hover-border-color: var(--btn-danger-hover-border-color); } .a-button:disabled { --btn-color: var(--btn-disabled-color); --btn-hover-color: var(--btn-disabled-hover-color); --btn-bg-color: var(--btn-disabled-bg-color); --btn-hover-bg-color: var(--btn-disabled-hover-bg-color); --btn-border-color: var(--btn-disabled-border-color); --btn-hover-border-color: var(--btn-disabled-hover-border-color); cursor: not-allowed; } /** * SOCIAL BUTTON COLORS * ------------------------------------------------------------------- */ .a-button.has-icon.a-button--twitter { --btn-color: var(--btn-twitter-color); --btn-hover-color: var(--btn-twitter-hover-color); --btn-bg-color: var(--btn-twitter-bg-color); --btn-hover-bg-color: var(--btn-twitter-hover-bg-color); --btn-border-color: var(--btn-twitter-border-color); --btn-hover-border-color: var(--btn-twitter-hover-border-color); } .a-button.has-icon.a-button--x { --btn-color: var(--btn-x-color); --btn-hover-color: var(--btn-x-hover-color); --btn-bg-color: var(--btn-x-bg-color); --btn-hover-bg-color: var(--btn-x-hover-bg-color); --btn-border-color: var(--btn-x-border-color); --btn-hover-border-color: var(--btn-x-hover-border-color); } .a-button.has-icon.a-button--linkedin { --btn-color: var(--btn-linkedin-color); --btn-hover-color: var(--btn-linkedin-hover-color); --btn-bg-color: var(--btn-linkedin-bg-color); --btn-hover-bg-color: var(--btn-linkedin-hover-bg-color); --btn-border-color: var(--btn-linkedin-border-color); --btn-hover-border-color: var(--btn-linkedin-hover-border-color); } .a-button.has-icon.a-button--facebook { --btn-color: var(--btn-facebook-color); --btn-hover-color: var(--btn-facebook-hover-color); --btn-bg-color: var(--btn-facebook-bg-color); --btn-hover-bg-color: var(--btn-facebook-hover-bg-color); --btn-border-color: var(--btn-facebook-border-color); --btn-hover-border-color: var(--btn-facebook-hover-border-color); } .a-button.has-icon.a-button--instagram { --btn-color: var(--btn-instagram-color); --btn-hover-color: var(--btn-instagram-hover-color); --btn-bg-color: var(--btn-instagram-bg-color); --btn-hover-bg-color: var(--btn-instagram-hover-bg-color); --btn-border-color: var(--btn-instagram-border-color); --btn-hover-border-color: var(--btn-instagram-hover-border-color); } .a-button.has-icon.a-button--snapchat { --btn-color: var(--btn-snapchat-color); --btn-hover-color: var(--btn-snapchat-hover-color); --btn-bg-color: var(--btn-snapchat-bg-color); --btn-hover-bg-color: var(--btn-snapchat-hover-bg-color); --btn-border-color: var(--btn-snapchat-border-color); --btn-hover-border-color: var(--btn-snapchat-hover-border-color); } .a-button.has-icon.a-button--tiktok { --btn-color: var(--btn-tiktok-color); --btn-hover-color: var(--btn-tiktok-hover-color); --btn-bg-color: var(--btn-tiktok-bg-color); --btn-hover-bg-color: var(--btn-tiktok-hover-bg-color); --btn-border-color: var(--btn-tiktok-border-color); --btn-hover-border-color: var(--btn-tiktok-hover-border-color); } .a-button.has-icon.a-button--youtube { --btn-color: var(--btn-youtube-color); --btn-hover-color: var(--btn-youtube-hover-color); --btn-bg-color: var(--btn-youtube-bg-color); --btn-hover-bg-color: var(--btn-youtube-hover-bg-color); --btn-border-color: var(--btn-youtube-border-color); --btn-hover-border-color: var(--btn-youtube-hover-border-color); } .a-button.has-icon.a-button--social { --btn-color: var(--btn-social-color); --btn-hover-color: var(--btn-social-hover-color); --btn-bg-color: var(--btn-social-bg-color); --btn-hover-bg-color: var(--btn-social-hover-bg-color); --btn-border-color: var(--btn-social-border-color); --btn-hover-border-color: var(--btn-social-hover-border-color); } .a-button.has-icon.a-button--social.a-button--negative { --btn-color: var(--btn-social-negative-color); --btn-hover-color: var(--btn-social-negative-hover-color); --btn-bg-color: var(--btn-social-negative-bg-color); --btn-hover-bg-color: var(--btn-social-negative-hover-bg-color); --btn-border-color: var(--btn-social-negative-border-color); --btn-hover-border-color: var(--btn-social-negative-hover-border-color); } /** * OUTLINED BUTTON COLORS * ------------------------------------------------------------------- */ .a-button.a-button--outlined { --btn-color: var(--btn-outlined-color); --btn-hover-color: var(--btn-outlined-hover-color); --btn-bg-color: var(--btn-outlined-bg-color); --btn-hover-bg-color: var(--btn-outlined-hover-bg-color); --btn-border-color: var(--btn-outlined-border-color); --btn-hover-border-color: var(--btn-outlined-hover-border-color); } .a-button.a-button--outlined.a-button--neutral { --btn-color: var(--btn-outlined-neutral-color); --btn-hover-color: var(--btn-outlined-neutral-hover-color); --btn-bg-color: var(--btn-outlined-neutral-bg-color); --btn-hover-bg-color: var(--btn-outlined-neutral-hover-bg-color); --btn-border-color: var(--btn-outlined-neutral-border-color); --btn-hover-border-color: var(--btn-outlined-neutral-hover-border-color); } .a-button.a-button--outlined.a-button--success { --btn-color: var(--btn-outlined-success-color); --btn-hover-color: var(--btn-outlined-success-hover-color); --btn-bg-color: var(--btn-outlined-success-bg-color); --btn-hover-bg-color: var(--btn-outlined-success-hover-bg-color); --btn-border-color: var(--btn-outlined-success-border-color); --btn-hover-border-color: var(--btn-outlined-success-hover-border-color); } .a-button.a-button--outlined.a-button--warning { --btn-color: var(--btn-outlined-warning-color); --btn-hover-color: var(--btn-outlined-warning-hover-color); --btn-bg-color: var(--btn-outlined-warning-bg-color); --btn-hover-bg-color: var(--btn-outlined-warning-hover-bg-color); --btn-border-color: var(--btn-outlined-warning-border-color); --btn-hover-border-color: var(--btn-outlined-warning-hover-border-color); } .a-button.a-button--outlined.a-button--danger { --btn-color: var(--btn-outlined-danger-color); --btn-hover-color: var(--btn-outlined-danger-hover-color); --btn-bg-color: var(--btn-outlined-danger-bg-color); --btn-hover-bg-color: var(--btn-outlined-danger-hover-bg-color); --btn-border-color: var(--btn-outlined-danger-border-color); --btn-hover-border-color: var(--btn-outlined-danger-hover-border-color); } .a-button.a-button--outlined:disabled { --btn-color: var(--btn-outlined-disabled-color); --btn-hover-color: var(--btn-outlined-disabled-hover-color); --btn-bg-color: var(--btn-outlined-disabled-bg-color); --btn-hover-bg-color: var(--btn-outlined-disabled-hover-bg-color); --btn-border-color: var(--btn-outlined-disabled-border-color); --btn-hover-border-color: var(--btn-outlined-disabled-hover-border-color); } /** * TEXT BUTTON COLORS * ------------------------------------------------------------------- */ .a-button.a-button--text { --btn-color: var(--btn-text-color); --btn-hover-color: var(--btn-text-hover-color); --btn-bg-color: var(--btn-text-bg-color); --btn-hover-bg-color: var(--btn-text-hover-bg-color); --btn-border-color: var(--btn-text-border-color); --btn-hover-border-color: var(--btn-text-hover-border-color); } .a-button.a-button--text.a-button--neutral { --btn-color: var(--btn-text-neutral-color); --btn-hover-color: var(--btn-text-neutral-hover-color); --btn-bg-color: var(--btn-text-neutral-bg-color); --btn-hover-bg-color: var(--btn-text-neutral-hover-bg-color); --btn-border-color: var(--btn-text-neutral-border-color); --btn-hover-border-color: var(--btn-text-neutral-hover-border-color); } .a-button.a-button--text.a-button--success { --btn-color: var(--btn-text-success-color); --btn-hover-color: var(--btn-text-success-hover-color); --btn-bg-color: var(--btn-text-success-bg-color); --btn-hover-bg-color: var(--btn-text-success-hover-bg-color); --btn-border-color: var(--btn-text-success-border-color); --btn-hover-border-color: var(--btn-text-success-hover-border-color); } .a-button.a-button--text.a-button--warning { --btn-color: var(--btn-text-warning-color); --btn-hover-color: var(--btn-text-warning-hover-color); --btn-bg-color: var(--btn-text-warning-bg-color); --btn-hover-bg-color: var(--btn-text-warning-hover-bg-color); --btn-border-color: var(--btn-text-warning-border-color); --btn-hover-border-color: var(--btn-text-warning-hover-border-color); } .a-button.a-button--text.a-button--danger { --btn-color: var(--btn-text-danger-color); --btn-hover-color: var(--btn-text-danger-hover-color); --btn-bg-color: var(--btn-text-danger-bg-color); --btn-hover-bg-color: var(--btn-text-danger-hover-bg-color); --btn-border-color: var(--btn-text-danger-border-color); --btn-hover-border-color: var(--btn-text-danger-hover-border-color); } .a-button.a-button--text:disabled { --btn-color: var(--btn-text-disabled-color); --btn-hover-color: var(--btn-text-disabled-hover-color); --btn-bg-color: var(--btn-text-disabled-bg-color); --btn-hover-bg-color: var(--btn-text-disabled-hover-bg-color); --btn-border-color: var(--btn-text-disabled-border-color); --btn-hover-border-color: var(--btn-text-disabled-hover-border-color); } /** * BUTTON SIZES * ------------------------------------------------------------------- */ .a-button.a-button--s { --btn-height: var(--SPACER-L); --btn-padding: calc(var(--SPACER-XS) / 2) var(--SPACER-S); --btn-icon-size: 1rem; } .a-button.a-button--l { --btn-height: var(--SPACER-XXL); --btn-font-size: 1.125rem; --btn-padding: var(--SPACER-S) var(--SPACER); --btn-icon-size: 1.5rem; } /** * BUTTON WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-button.has-icon-left, .a-button.has-icon-right { position: relative; } .a-button.has-icon-left .ai, .a-button.has-icon-left .a-spinner, .a-button.has-icon-right .ai, .a-button.has-icon-right .a-spinner { position: absolute; top: 50%; transform: translateY(-50%); width: var(--SPACER-XL); } .a-button.has-icon-left { padding-left: var(--SPACER-XL); } .a-button.has-icon-left .ai, .a-button.has-icon-left .a-spinner { left: 0; } .a-button.has-icon-right { padding-right: var(--SPACER-XL); } .a-button.has-icon-right .ai, .a-button.has-icon-right .a-spinner { right: 0; } .a-button--s.has-icon-left .ai, .a-button--s.has-icon-left .a-spinner, .a-button--s.has-icon-right .ai, .a-button--s.has-icon-right .a-spinner { width: var(--SPACER-L); } .a-button--s.has-icon-left { padding-left: var(--SPACER-L); } .a-button--s.has-icon-right { padding-right: var(--SPACER-L); } .a-button--l.has-icon-left .ai, .a-button--l.has-icon-left .a-spinner, .a-button--l.has-icon-right .ai, .a-button--l.has-icon-right .a-spinner { width: var(--SPACER-XXL); } .a-button--l.has-icon-left { padding-left: var(--SPACER-XXL); } .a-button--l.has-icon-right { padding-right: var(--SPACER-XXL); } /** * BUTTON ICONS * ------------------------------------------------------------------- */ .a-button.has-icon { display: inline-block; padding: 0; position: relative; vertical-align: middle; width: var(--SPACER-XL); } .a-button.has-icon .ai, .a-button.has-icon .a-spinner { left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: var(--SPACER-XL); } .a-button--s.has-icon { width: var(--SPACER-L); } .a-button--s.has-icon .ai, .a-button--s.has-icon .a-spinner { width: var(--SPACER-L); } .a-button--l.has-icon { width: var(--SPACER-XXL); } .a-button--l.has-icon .ai, .a-button--l.has-icon .a-spinner { width: var(--SPACER-XXL); } /** * FULL WIDTH BUTTON * ------------------------------------------------------------------- */ @media screen and (min-width: 30rem) { .a-button--full { display: block; width: 100%; } } /** * BUTTON WITH AVATAR * ------------------------------------------------------------------- */ .a-button.has-avatar, .a-button.has-avatar-with-inset { overflow: hidden; position: relative; } .a-button.has-avatar .a-avatar, .a-button.has-avatar-with-inset .a-avatar { left: 0; position: absolute; top: 0; } .a-button.has-avatar { padding-left: var(--shared-avatar-size); } .a-button.has-avatar-with-inset { padding-left: calc(var(--shared-avatar-size) + var(--SPACER)); } .a-button--s.has-avatar { padding-left: var(--shared-avatar-size-s); } .a-button--s.has-avatar-with-inset { padding-left: calc(var(--shared-avatar-size-s) + var(--SPACER-S)); } .a-button--l.has-avatar { padding-left: var(--shared-avatar-size-l); } .a-button--l.has-avatar-with-inset { padding-left: calc(var(--shared-avatar-size-l) + var(--SPACER)); } /** * BUTTON WITH SPINNER * ------------------------------------------------------------------- */ .a-button .a-spinner { --spinner-color: var(--btn-color); --spinner-text-color: var(--btn-color); } /** * CODE VARIABLES * ------------------------------------------------------------------- */ pre, code, kbd { --pre-color: var(--TEXT-COLOR); --pre-bg: var(--BG-COLOR); --pre-font-size: 1rem; --pre-padding: var(--SPACER-XS); --code-color: var(--pre-color); --code-bg: var(--pre-bg); --code-font-size: .875rem; --code-padding: calc(var(--SPACER) / 12) var(--SPACER-3XS); --kbd-color: var(--TEXT-COLOR-INVERTED); --kbd-bg: #6f6f6f; --kbd-font-size: .875rem; --kbd-padding: var(--code-padding); } /** * CODE * ------------------------------------------------------------------- */ /** * STANDARD CODE * ------------------------------------------------------------------- */ code, kbd, pre, samp { font-family: var(--FONT-FAMILY-MONOSPACE); } /** * Inline code */ code { background-color: var(--code-bg); color: var(--code-color); font-size: var(--code-font-size); padding: var(--code-padding); } a > code { background-color: inherit; color: inherit; padding: 0; } /** * Keyboard input */ kbd { background-color: var(--kbd-bg); color: var(--kbd-color); font-size: var(--kbd-font-size); padding: var(--kbd-padding); } kbd kbd { font-size: 100%; padding: 0; } /** * CODE BLOCK * ------------------------------------------------------------------- */ .a-pre { background: var(--pre-bg); color: var(--pre-color); display: block; font-size: var(--pre-font-size); margin-top: 0; padding: var(--pre-padding); white-space: pre-wrap; } .a-pre code { background-color: transparent; padding: 0; } /** * CODE MODIFIERS * ------------------------------------------------------------------- */ /** * Scrollable code block */ .a-pre--scrollable { overflow: auto; white-space: pre; } /** * COPYRIGHT VARIABLES * ------------------------------------------------------------------- * This component has shared variables with _molecules.image.scss. You can find them in _quarks.css-properties.scss. */ .a-copyright { --copyright-height: var(--shared-copyright-height); --copyright-color: var(--shared-copyright-color); --copyright-bg-color: var(--OVERLAY-COLOR); } /** * COPYRIGHT * ------------------------------------------------------------------- */ .a-copyright { background-color: var(--copyright-bg-color); color: var(--copyright-color); display: flex; font-size: 1rem; height: var(--copyright-height); transition: transform var(--ANIMATION-NORMAL); max-width: 100%; } a.a-copyright { text-decoration: none; } a.a-copyright:hover .a-copyright__label, a.a-copyright:active .a-copyright__label, a.a-copyright:focus .a-copyright__label { text-decoration: underline; } /** * COPYRIGHT ELEMENTS * ------------------------------------------------------------------- */ .a-copyright__sign { align-items: center; display: flex; font-size: 1.125rem; height: 100%; justify-content: center; width: var(--copyright-height); } .a-copyright__label { flex: 1; font-weight: var(--FONT-WEIGHT-BOLD); line-height: var(--copyright-height); margin-right: var(--SPACER-XS); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * FORM ELEMENTS * ------------------------------------------------------------------- */ .a-form .a-input:not(:last-child) { margin-bottom: var(--SPACER); } .a-form .m-flyout { margin-bottom: var(--SPACER); } .a-form .m-flyout .a-input { margin-bottom: 0; } /** * FIELDSET * ------------------------------------------------------------------- */ fieldset { border: none; border-bottom: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); border-top: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); margin: 0; min-width: 0; padding: var(--SPACER-XL) 0; position: relative; } fieldset + fieldset { margin-top: calc(var(--BORDER-WIDTH) * -1); } fieldset.a-input { border: none; padding: 0; } legend:not(.a-input__label) { color: #6f6f6f; font-size: 1.125rem; font-weight: var(--FONT-WEIGHT-BOLD); padding: 0 var(--SPACER-XXS) 0 0; } /** * INPUTS * ------------------------------------------------------------------- * Input fields are normalized in _base.normalize.scss */ /** * INPUTS VARIABLES * ------------------------------------------------------------------- */ .a-input { --input-color: var(--TEXT-COLOR); --input-bg-color: var(--BG-COLOR-LIGHT); --input-border-color: var(--BORDER-COLOR); --input-placeholder-color: #6f6f6f; --input-disabled-color: var(--STATE-DISABLED); --input-disabled-bg-color: var(--BG-COLOR); --input-disabled-border-color: var(--BORDER-COLOR-LIGHT); --input-readonly-color: var(--TEXT-COLOR); --input-readonly-bg-color: var(--BG-COLOR-LIGHT); --input-readonly-border-color: var(--BORDER-COLOR); --input-icon-color: #6f6f6f; --input-icon-hover-color: #141414; --input-icon-size: 1.25rem; --input-danger-border-color: var(--STATE-DANGER); --input-height: var(--SPACER-XL); --input-padding-vertical: 0; --input-padding-horizontal: var(--SPACER-S); --select-padding-vertical: var(--SPACER-XS); --textarea-height: 12rem; } /** * INPUT FONT-FAMILY * ------------------------------------------------------------------- */ button, input, input[type=search], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; margin: 0; } /** * INPUT * ------------------------------------------------------------------- */ .a-input { position: relative; } .a-input input, .a-input select, .a-input textarea { background-color: var(--input-bg-color); border: var(--BORDER-WIDTH) solid var(--input-border-color); border-radius: var(--BORDER-RADIUS); color: var(--input-color); line-height: normal; resize: vertical; transition: border-color var(--ANIMATION-NORMAL); width: 100%; } .a-input input::-webkit-input-placeholder, .a-input select::-webkit-input-placeholder, .a-input textarea::-webkit-input-placeholder { color: var(--input-placeholder-color); text-overflow: ellipsis; } .a-input input:-ms-input-placeholder, .a-input select:-ms-input-placeholder, .a-input textarea:-ms-input-placeholder { color: var(--input-placeholder-color); text-overflow: ellipsis; } .a-input input::-moz-placeholder, .a-input select::-moz-placeholder, .a-input textarea::-moz-placeholder { color: var(--input-placeholder-color); opacity: 1; text-overflow: ellipsis; } .a-input input:-moz-placeholder, .a-input select:-moz-placeholder, .a-input textarea:-moz-placeholder { color: var(--input-placeholder-color); opacity: 1; text-overflow: ellipsis; } .a-input input:disabled, .a-input select:disabled, .a-input textarea:disabled { --input-color: var(--input-disabled-color); --input-bg-color: var(--input-disabled-bg-color); --input-border-color: var(--input-disabled-border-color); cursor: not-allowed; } .a-input input[readonly], .a-input select[readonly], .a-input textarea[readonly] { --input-color: var(--input-readonly-color); --input-bg-color: var(--input-readonly-bg-color); --input-border-color: var(--input-readonly-border-color); } .a-input input, .a-input select { min-height: var(--input-height); } .a-input input { padding: var(--input-padding-vertical) var(--input-padding-horizontal); } .a-input select { padding: var(--select-padding-vertical) var(--input-padding-horizontal); } .a-input textarea { min-height: var(--textarea-height); padding: var(--input-padding-horizontal); } .a-input.w-textarea-padding { padding: var(--input-padding-horizontal); } /** * INPUT WRAPPER * ------------------------------------------------------------------- */ .a-input__wrapper { position: relative; } /** * INPUT LABEL * ------------------------------------------------------------------- */ .a-input__label { display: inline-block; margin-bottom: var(--SPACER-XXS); text-align: left; } .a-input__label + .a-switch, .a-input__label + .a-input__checkbox, .a-input__label + .a-input__radio { margin-top: var(--SPACER-XXS); } .a-input__label + .a-input__description { margin-top: 0; } /** * INPUT INFO * ------------------------------------------------------------------- */ .a-input__description { display: block; margin: var(--SPACER-XXS) 0; } .a-input__description.is-error, .a-input__description.is-success { display: flex; } .a-input__description.is-error .ai, .a-input__description.is-success .ai { margin-right: var(--SPACER-XXS); } .a-input__description.is-success { color: var(--STATE-SUCCESS); } .a-input__description.is-error { color: var(--STATE-DANGER); } /** * INPUT LABEL MODIFIERS * ------------------------------------------------------------------- */ .a-input__label--inline { margin-right: var(--SPACER-XS); } /** * INPUT STATES * ------------------------------------------------------------------- */ .a-input.has-error { --input-border-color: var(--input-danger-border-color); } /** * INPUT WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-input.has-icon-left .a-input__wrapper > .ai, .a-input.has-icon-right .a-input__wrapper > .ai { align-items: center; color: var(--input-icon-color); display: flex; font-size: var(--input-icon-size); height: 100%; pointer-events: none; position: absolute; right: 0; text-align: center; top: 50%; transform: translateY(-50%); -webkit-user-select: none; -moz-user-select: none; user-select: none; width: var(--input-height); } .a-input.has-icon-left .a-input__wrapper > .ai.is-clickable, .a-input.has-icon-right .a-input__wrapper > .ai.is-clickable { cursor: pointer; pointer-events: auto; transition: color var(--ANIMATION-NORMAL); } .a-input.has-icon-left .a-input__wrapper > .ai.is-clickable:hover, .a-input.has-icon-right .a-input__wrapper > .ai.is-clickable:hover { color: var(--input-icon-hover-color); } .a-input.has-icon-left .a-input__wrapper input, .a-input.has-icon-left .a-input__wrapper select { padding-left: var(--input-height); } .a-input.has-icon-left .a-input__wrapper > .ai { left: 0; } .a-input.has-icon-right .a-input__wrapper input, .a-input.has-icon-right .a-input__wrapper select { padding-right: var(--input-height); } .a-input.has-icon-right .a-input__wrapper > .ai { right: 0; } /** * INPUT WITH ADDON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-input.has-addon-left input:focus, .a-input.has-addon-left select:focus, .a-input.has-addon-right input:focus, .a-input.has-addon-right select:focus { outline: none; } .a-input.has-addon-left .a-input__wrapper, .a-input.has-addon-right .a-input__wrapper { display: flex; } .a-input.has-addon-left:focus-within .a-input__wrapper, .a-input.has-addon-right:focus-within .a-input__wrapper { outline: 5px auto Highlight; outline: 2px auto -webkit-focus-ring-color; } .a-input.has-addon-left input, .a-input.has-addon-left select { border-bottom-left-radius: 0; border-left: none; border-top-left-radius: 0; } .a-input.has-addon-left .a-input__addon { border-bottom-left-radius: var(--BORDER-RADIUS); border-left: var(--BORDER-WIDTH) solid var(--input-border-color); border-top-left-radius: var(--BORDER-RADIUS); padding-left: var(--input-padding-horizontal); } .a-input.has-addon-right input { border-bottom-right-radius: 0; border-right: none; border-top-right-radius: 0; } .a-input.has-addon-right .a-input__addon { border-bottom-right-radius: var(--BORDER-RADIUS); border-right: var(--BORDER-WIDTH) solid var(--input-border-color); border-top-right-radius: var(--BORDER-RADIUS); padding-right: var(--input-padding-horizontal); } .a-input__addon { background: var(--input-bg-color); border-bottom: var(--BORDER-WIDTH) solid var(--input-border-color); border-top: var(--BORDER-WIDTH) solid var(--input-border-color); color: var(--input-icon-color); line-height: var(--input-height); text-align: center; white-space: nowrap; } /** * INLINE INPUT * ------------------------------------------------------------------- */ .a-input--inline input, .a-input--inline select, .a-input--inline textarea, .a-input--inline .a-input__checkbox, .a-input--inline .a-input__radio { width: auto; } .a-input__wrapper--inline { display: inline-block; } /** * INPUT SIZES * ------------------------------------------------------------------- */ .a-input.a-input--s { --input-height: var(--SPACER-L); --input-icon-size: 1rem; --input-padding-horizontal: var(--SPACER-XS); --select-padding-vertical: 0; --textarea-height: 8rem; } @-moz-document url-prefix() { .a-input.a-input--s select { line-height: 2.1; } } .a-input.a-input--l { --input-height: var(--SPACER-XXL); --input-padding-horizontal: var(--SPACER); --select-padding-vertical: 1.125rem; --textarea-height: 16rem; } /** * LABEL VARIABLES * ------------------------------------------------------------------- */ .a-label { --label-height: 1.125rem; --label-padding: 0 var(--SPACER-XXS); --label-font-size: .875rem; --label-line-height: var(--label-height); --label-font-weight: var(--FONT-WEIGHT-BOLD); --label-color: var(--TEXT-COLOR); --label-bg-color: transparent; --label-border-color: #6f6f6f; --label-primary-color: var(--THEME1-600); --label-primary-bg-color: var(--label-bg-color); --label-primary-border-color: var(--label-primary-color); --label-success-color: var(--SUCCESS-700); --label-success-bg-color: var(--label-bg-color); --label-success-border-color: var(--label-success-color); --label-warning-color: #ce4c00; --label-warning-bg-color: var(--label-bg-color); --label-warning-border-color: var(--label-warning-color); --label-danger-color: var(--DANGER-600); --label-danger-bg-color: var(--label-bg-color); --label-danger-border-color: var(--label-danger-color); } /** * LABELS * ------------------------------------------------------------------- */ .a-label { background-color: var(--label-bg-color); border: var(--BORDER-WIDTH) solid var(--label-border-color); border-radius: var(--BORDER-RADIUS); color: var(--label-color); display: inline-block; font-size: var(--label-font-size); font-weight: var(--label-font-weight); letter-spacing: 0.24px; line-height: var(--label-line-height); min-height: var(--label-height); padding: var(--label-padding); } /** * LABELS COLORS * ------------------------------------------------------------------- */ .a-label.a-label--primary { --label-color: var(--label-primary-color); --label-bg-color: var(--label-primary-bg-color); --label-border-color: var(--label-primary-border-color); } .a-label.a-label--success { --label-color: var(--label-success-color); --label-bg-color: var(--label-success-bg-color); --label-border-color: var(--label-success-border-color); } .a-label.a-label--warning { --label-color: var(--label-warning-color); --label-bg-color: var(--label-warning-bg-color); --label-border-color: var(--label-warning-border-color); } .a-label.a-label--danger { --label-color: var(--label-danger-color); --label-bg-color: var(--label-danger-bg-color); --label-border-color: var(--label-danger-border-color); } /** * LINKS * ------------------------------------------------------------------- */ /** * LINK WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ a:not([class^=a-button]).has-icon-left .ai, a:not([class^=a-button]).has-icon-right .ai { font-size: 0.875rem; vertical-align: middle; } a:not([class^=a-button]).has-icon-left .ai { padding-right: var(--SPACER-XXS); } a:not([class^=a-button]).has-icon-right .ai { padding-left: var(--SPACER-XXS); } /** * LIST VARIABLES * ------------------------------------------------------------------- */ .a-list, .a-checkbox-list, .a-avatar-list { --list-item-color: var(--TEXT-COLOR); --list-item-bg-color: var(--BG-COLOR-LIGHT); --list-item-hover-color: var(--THEME1-600); --list-item-active-color: var(--TEXT-COLOR); --list-item-hover-bg-color: var(--THEME1-100); --list-item-active-bg-color: var(--BG-COLOR); --list-item-border-color: var(--BORDER-COLOR-LIGHT); } /** * LISTS * ------------------------------------------------------------------- */ /** * STANDARD LIST * ------------------------------------------------------------------- */ .a-list { padding-left: var(--SPACER-S); } .a-list .a-list__content { display: inline-flex; padding: var(--SPACER-XXS) 0; } .a-list .a-list__text { flex-grow: 1; } .a-list .a-list__text + .ai, .a-list .ai + .a-list__text { margin-left: var(--SPACER-XS); } /** * LINED LIST * ------------------------------------------------------------------- */ .a-list.a-list--lined { list-style: none; margin: 0; padding: 0; } .a-list.a-list--lined > .a-list__item:last-of-type .a-list__content { border-bottom: var(--BORDER-WIDTH) solid var(--list-item-border-color); } .a-list.a-list--lined > .a-list__item > .a-list__content { border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); padding: 0.875rem var(--SPACER-S); } .a-list.a-list--lined .a-list__content { display: flex; } .a-list.a-list--lined a.a-list__content { background-color: var(--list-item-bg-color); color: var(--list-item-color); text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: background-color, color; transition-timing-function: var(--ANIMATION-EASING); } .a-list.a-list--lined a.a-list__content:hover, .a-list.a-list--lined a.a-list__content:active, .a-list.a-list--lined a.a-list__content:focus { background-color: var(--list-item-hover-bg-color); color: var(--list-item-hover-color); } .a-list.a-list--lined a.a-list__content.is-active { background-color: var(--list-item-active-bg-color); color: var(--list-item-active-color); font-weight: var(--FONT-WEIGHT-BOLD); } .a-list.a-list--lined .a-list { border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); } .a-list.a-list--lined .a-list .a-list__item:first-of-type .a-list__content { border-top: none; } .a-list.a-list--lined .a-list .a-list__item:last-of-type .a-list__content { border-bottom: none; } .a-list.a-list--lined .a-list .a-list__item .a-list__content { padding-left: calc(var(--SPACER-S) * 2); } .a-list.a-list--lined.a-list--flushed .a-list__item:first-of-type > .a-list__content { border-top: none; } .a-list.a-list--lined.a-list--flushed .a-list__item:last-of-type > .a-list__content { border-bottom: none; } /** * DEFINITION LIST * ------------------------------------------------------------------- */ .a-definition-list { margin: 0; } .a-definition-list dt { padding-top: var(--SPACER-3XS); } .a-definition-list dd { font-weight: var(--FONT-WEIGHT-BOLD); margin-left: 0; padding-bottom: var(--SPACER-3XS); } /** * CHECKBOX LIST * ------------------------------------------------------------------- */ .a-checkbox-list { list-style: none; margin: 0; padding: 0; } .a-checkbox-list .a-checkbox-list__item:last-of-type .a-checkbox-list__checkbox { border-bottom: var(--BORDER-WIDTH) solid var(--list-item-border-color); } .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox { background-color: var(--list-item-bg-color); border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); padding-left: var(--SPACER-S); transition: background-color var(--ANIMATION-NORMAL); } .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox:hover, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox:active, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox:focus { background-color: var(--list-item-hover-bg-color); } .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__checkbox label, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__radio label { align-items: center; display: flex; min-height: var(--SPACER-XL); padding-bottom: var(--SPACER-3XS); padding-right: var(--SPACER-S); padding-top: var(--SPACER-3XS); } .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__checkbox label:before, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__checkbox label:after, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__radio label:before, .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox .a-input__radio label:after { top: 50%; transform: translateY(-50%); } .a-checkbox-list .a-checkbox-list { border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); } .a-checkbox-list .a-checkbox-list .a-checkbox-list__item:first-of-type .a-checkbox-list__checkbox { border-top: none; } .a-checkbox-list .a-checkbox-list .a-checkbox-list__item:last-of-type .a-checkbox-list__checkbox { border-bottom: none; } .a-checkbox-list .a-checkbox-list .a-checkbox-list__item .a-checkbox-list__checkbox { padding-left: calc(var(--SPACER) + var(--SPACER-S)); } .a-checkbox-list.a-checkbox-list--flushed .a-checkbox-list__item:first-of-type .a-checkbox-list__checkbox { border-top: none; } .a-checkbox-list.a-checkbox-list--flushed .a-checkbox-list__item:last-of-type .a-checkbox-list__checkbox { border-bottom: none; } /** * AVATAR LIST * ------------------------------------------------------------------- */ .a-avatar-list { list-style: none; margin: 0; padding: 0; } .a-avatar-list:not(.a-avatar-list--flushed) { border-bottom: var(--BORDER-WIDTH) solid var(--list-item-border-color); border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); } .a-avatar-list .ai { color: var(--TEXT-COLOR-LIGHT); transition: color var(--ANIMATION-NORMAL); } .a-avatar-list__item:first-of-type .a-avatar-list__content { border-top: none; } .a-avatar-list__item:not(:last-child) .a-avatar-list__item-container { margin-bottom: calc(var(--BORDER-WIDTH) * -1); } .a-avatar-list__item.is-active .a-avatar-list__item-container { background-color: var(--list-item-active-bg-color); color: var(--list-item-active-color); } .a-avatar-list__item.is-active .a-avatar-list__item-container .avatar-list__name { font-weight: var(--FONT-WEIGHT-BOLD); } .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container { color: var(--list-item-color); transition: background-color var(--ANIMATION-NORMAL); } .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:hover, .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:active, .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:focus { background-color: var(--list-item-hover-bg-color); color: var(--list-item-hover-color); } .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:hover .ai, .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:active .ai, .a-avatar-list__item:not(.is-active) a.a-avatar-list__item-container:focus .ai { color: var(--list-item-hover-color); } a.a-avatar-list__item-container { background-color: var(--list-item-bg-color); text-decoration: none; } .a-avatar-list__item-container { align-items: center; display: flex; flex-grow: 1; padding-left: var(--SPACER-S); } .a-avatar-list__avatar { margin-right: var(--SPACER-S); } .a-avatar-list__content { border-top: var(--BORDER-WIDTH) solid var(--list-item-border-color); display: flex; flex-grow: 1; min-height: var(--SPACER-XL); padding: var(--SPACER-XS) var(--SPACER-S) var(--SPACER-XS) 0; } .a-avatar-list__text { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; } /** * PAGE INDICATOR VARIABLES * ------------------------------------------------------------------- */ .a-page-indicator { --page-indicator-width: auto; --page-indicator-height: var(--SPACER-3XS); --page-indicator-spacing: .125rem; --page-indicator-bg-color: var(--THEME1-100); --page-indicator-active-bg-color: var(--THEME1-600); } /** * PAGE INDICATOR * ------------------------------------------------------------------- */ .a-page-indicator { display: flex; } /** * PAGE INDICATOR ELEMENTS * ------------------------------------------------------------------- */ .a-page-indicator__item { background-color: transparent; flex-grow: 1; height: var(--SPACER-XL); position: relative; width: var(--page-indicator-width); } .a-page-indicator__item:before { background-color: var(--page-indicator-bg-color); content: ""; height: var(--page-indicator-height); left: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: background-color var(--ANIMATION-NORMAL); width: 100%; } .a-page-indicator__item:not(:last-child) { margin-right: var(--page-indicator-spacing); } .a-page-indicator__item.is-active:before { --page-indicator-bg-color: var(--page-indicator-active-bg-color); } button.a-page-indicator__item, a.a-page-indicator__item { border: none; cursor: pointer; padding: 0; } button.a-page-indicator__item:hover:before, button.a-page-indicator__item:active:before, button.a-page-indicator__item:focus:before, a.a-page-indicator__item:hover:before, a.a-page-indicator__item:active:before, a.a-page-indicator__item:focus:before { --page-indicator-bg-color: var(--page-indicator-active-bg-color); } /** * PAGE INDICATOR MODIFIERS * ------------------------------------------------------------------- */ .a-page-indicator.a-page-indicator--s { --page-indicator-width: .375rem; --page-indicator-height: .375rem; --page-indicator-spacing: .375rem; display: inline-flex; } .a-page-indicator.a-page-indicator--s .a-page-indicator__item { flex-grow: 0; } .a-page-indicator.a-page-indicator--l { --page-indicator-width: auto; --page-indicator-height: var(--SPACER-XXS); --page-indicator-spacing: var(--SPACER-3XS); } .a-page-indicator.a-page-indicator--negative { --page-indicator-bg-color: rgba(255, 255, 255, 0.25); --page-indicator-active-bg-color: #fff; } /** * PROGRESS VARIABLES * ------------------------------------------------------------------- */ .a-progress { --progress-height: var(--SPACER-3XS); --progress-label-size: .875rem; --progress-label-spacing: var(--SPACER-XXS); --progress-bg-color: var(--THEME1-100); --progress-bar-bg-color: var(--THEME1-600); } /** * PROGRESS * ------------------------------------------------------------------- */ /** * PROGRESS ELEMENTS * ------------------------------------------------------------------- */ .a-progress__label { display: block; font-size: var(--progress-label-size); margin-bottom: var(--SPACER-XXS); } .a-progress__inner { background-color: var(--progress-bg-color); display: flex; height: var(--progress-height); position: relative; width: 100%; } .a-progress__bar { background-color: var(--progress-bar-bg-color); height: 100%; } /** * PROGRESS MODIFIERS * ------------------------------------------------------------------- */ .a-progress.a-progress--l { --progress-height: 1.25rem; --progress-label-size: 1rem; --progress-label-spacing: var(--SPACER-XS); } /** * RADIO BUTTON & CHECKBOX VARIABLES * ------------------------------------------------------------------- */ .a-input__checkbox, .a-input__radio { --radio-checkbox-color: var(--TEXT-COLOR-INVERTED); --radio-checkbox-bg-color: var(--THEME1-600); --radio-checkbox-border-color: var(--BORDER-COLOR); --radio-checkbox-disabled-color: var(--STATE-DISABLED); --radio-checkbox-disabled-bg-color: var(--BG-COLOR); --radio-checkbox-disabled-border-color: var(--BORDER-COLOR-LIGHT); } /** * RADIO BUTTON & CHECKBOX * ------------------------------------------------------------------- */ .a-input .a-input__radio, .a-input .a-input__checkbox { display: block; } .a-input .a-input__radio:not(:last-child), .a-input .a-input__checkbox:not(:last-child) { margin-bottom: var(--SPACER-XS); } .a-input--inline .a-input__radio, .a-input--inline .a-input__checkbox { display: inline-block; } .a-input--inline .a-input__radio + .a-input__radio, .a-input--inline .a-input__radio + .a-input__checkbox, .a-input--inline .a-input__checkbox + .a-input__radio, .a-input--inline .a-input__checkbox + .a-input__checkbox { margin-left: var(--SPACER); } .a-input__checkbox, .a-input__radio { display: block; padding-left: var(--SPACER); position: relative; } .a-input__checkbox input, .a-input__radio input { cursor: pointer; line-height: normal; min-height: 0; opacity: 0; padding: 0; position: absolute; width: auto; z-index: 1; } .a-input__checkbox input:checked + label:before, .a-input__radio input:checked + label:before { background-color: var(--radio-checkbox-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-bg-color) inset; } .a-input__checkbox input:disabled, .a-input__radio input:disabled { cursor: not-allowed; } .a-input__checkbox input:disabled + label, .a-input__radio input:disabled + label { color: var(--radio-checkbox-disabled-color); cursor: not-allowed; } .a-input__checkbox input:disabled + label:before, .a-input__radio input:disabled + label:before { background-color: var(--radio-checkbox-disabled-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-disabled-border-color) inset; } .a-input__checkbox input:focus + label:after, .a-input__radio input:focus + label:after { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .a-input__checkbox label, .a-input__radio label { cursor: pointer; display: inline-block; line-height: var(--SPACER); max-width: 100%; min-height: var(--SPACER); padding-left: var(--SPACER-XS); position: relative; vertical-align: middle; } .a-input__checkbox label:before, .a-input__radio label:before { background-color: var(--radio-checkbox-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-border-color) inset; content: ""; display: inline-block; height: var(--SPACER); left: 0; margin-left: calc(var(--SPACER) * -1); position: absolute; transition-duration: var(--ANIMATION-DURATION); transition-property: background, box-shadow; transition-timing-function: var(--ANIMATION-EASING); width: var(--SPACER); } .a-input__checkbox label:after, .a-input__radio label:after { color: var(--radio-checkbox-color); content: ""; display: inline-block; font-size: 16px; height: var(--SPACER); left: 0; margin-left: calc(var(--SPACER) * -1); position: absolute; text-align: center; top: 0; transition-duration: var(--ANIMATION-DURATION); transition-property: background-size; transition-timing-function: var(--ANIMATION-EASING); width: var(--SPACER); } .a-input__checkbox input[type=checkbox] + label:before { border-radius: var(--BORDER-RADIUS); } .a-input__checkbox input[type=checkbox] + label:after { background-position: center center; background-repeat: no-repeat; background-size: 0% 0%; } .a-input__checkbox input[type=checkbox]:checked + label:after, .a-input__checkbox input[type=checkbox]:indeterminate + label:after { background-size: 100% 100%; } .a-input__checkbox input[type=checkbox]:checked + label:after { background-image: url("data:image/svg+xml;utf8,"); } .a-input__checkbox input[type=checkbox]:checked:disabled + label:after { background-image: url("data:image/svg+xml;utf8,"); } .a-input__checkbox input[type=checkbox]:indeterminate + label:before { background-color: var(--radio-checkbox-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-bg-color) inset; } .a-input__checkbox input[type=checkbox]:indeterminate + label:after { background-image: url("data:image/svg+xml;utf8,"); } .a-input__checkbox input[type=checkbox]:indeterminate:disabled + label:after { background-color: var(--radio-checkbox-disabled-bg-color); background-image: url("data:image/svg+xml;utf8,"); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-disabled-border-color) inset; } .a-input__radio input[type=radio] + label:before, .a-input__radio input[type=radio] + label:after { border-radius: 50%; } .a-input__radio input[type=radio]:checked + label:before { background: var(--BG-COLOR-LIGHT); box-shadow: 0 0 0 0.375rem var(--radio-checkbox-bg-color) inset; } .a-input__radio input[type=radio]:checked:disabled + label:before { background: var(--radio-checkbox-disabled-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--radio-checkbox-disabled-border-color) inset, 0 0 0 0.375rem var(--radio-checkbox-disabled-bg-color) inset; } /** * RANGE SLIDER VARIABLES * ------------------------------------------------------------------- */ .a-range-slider { --range-slider-bg-color: var(--THEME1-100); --range-slider-bar-bg-color: var(--THEME1-600); --range-slider-handle-bg-color: var(--THEME1-600); --range-slider-tickmark-bg-color: var(--THEME1-300); } /** * RANGE SLIDER * ------------------------------------------------------------------- */ /** * RANGE SLIDER ELEMENTS * ------------------------------------------------------------------- */ .a-range-slider__labels, .a-range-slider__descriptions { display: flex; justify-content: space-between; } .a-range-slider__labels { margin-bottom: var(--SPACER-XS); } .a-range-slider__descriptions { margin-top: var(--SPACER-3XS); } .a-range-slider__inner { background-color: var(--range-slider-bg-color); height: var(--SPACER-3XS); position: relative; width: 100%; } .a-range-slider__bar { background-color: var(--range-slider-bar-bg-color); height: 100%; position: absolute; } .a-range-slider__handle { border-radius: 50%; cursor: grab; padding: var(--SPACER-S); position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .a-range-slider__handle:before { background-color: var(--range-slider-handle-bg-color); border-radius: var(--SPACER-XS); content: ""; display: block; height: var(--SPACER-XS); width: var(--SPACER-XS); } .a-range-slider__tickmarks { bottom: 0; display: flex; justify-content: space-between; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .a-range-slider__tickmark { background-color: var(--range-slider-tickmark-bg-color); width: calc(var(--BORDER-WIDTH) * 2); } /** * SPINNER VARIABLES * ------------------------------------------------------------------- */ .a-spinner { --spinner-color: var(--BORDER-COLOR); --spinner-size: 2rem; --spinner-thickness: .1875rem; --spinner-text-color: var(--TEXT-COLOR-LIGHT); --spinner-animation-name: spin; --spinner-animation-speed: 1600ms; --spinner-animation-timing: linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /** * SPINNER * ------------------------------------------------------------------- */ .a-spinner { align-items: center; display: inline-flex; justify-content: center; } .a-spinner__circle { animation: var(--spinner-animation-name) var(--spinner-animation-speed) infinite var(--spinner-animation-timing); border-radius: 100%; border: var(--spinner-thickness) solid var(--spinner-color); border-top-color: transparent; height: var(--spinner-size); position: relative; transform: rotate(-25deg); width: var(--spinner-size); } .a-spinner__circle:before { border-radius: 100%; border: var(--spinner-thickness) solid var(--spinner-color); border-top-color: transparent; content: ""; height: var(--spinner-size); left: calc(var(--spinner-thickness) * -1); position: absolute; top: calc(var(--spinner-thickness) * -1); transform: rotate(50deg); width: var(--spinner-size); } .a-spinner__text { color: var(--spinner-text-color); font-size: 0.875rem; margin-left: var(--SPACER-S); } /** * SPINNER MODIFIERS * ------------------------------------------------------------------- */ .a-spinner.a-spinner--xs { --spinner-size: var(--SPACER-S); --spinner-thickness: .0625rem; } .a-spinner.a-spinner--s { --spinner-size: var(--SPACER); --spinner-thickness: .125rem; } .a-spinner.a-spinner--l { --spinner-size: 4rem; --spinner-thickness: var(--SPACER-3XS); } .a-spinner.a-spinner--vertical { flex-direction: column; } .a-spinner.a-spinner--vertical .a-spinner__text { margin-left: 0; margin-top: var(--SPACER-XXS); text-align: center; } .a-spinner.a-spinner--vertical.a-spinner--l .a-spinner__text { margin-top: var(--SPACER-XS); } /** * SWITCH VARIABLES * ------------------------------------------------------------------- */ .a-switch { --switch-width: 2.75rem; --switch-height: var(--SPACER); --switch-inset: .1875rem; --switch-handle-size: 1.125rem; --switch-label-font-size: 1rem; --switch-label-color: var(--TEXT-COLOR); --switch-label-disabled-color: var(--BORDER-COLOR); --switch-bg-color: var(--BORDER-COLOR); --switch-border-color: var(--switch-bg-color); --switch-handle-bg-color: var(--BG-COLOR-LIGHT); --switch-active-bg-color: var(--THEME1-600); --switch-active-border-color: var(--switch-active-bg-color); --switch-handle-active-bg-color: var(--BG-COLOR-LIGHT); --switch-disabled-bg-color: var(--BORDER-COLOR-LIGHT); --switch-disabled-border-color: var(--switch-disabled-bg-color); --switch-handle-disabled-bg-color: var(--BG-COLOR-LIGHT); } /** * SWITCH * ------------------------------------------------------------------- */ .a-switch { align-items: center; background: transparent; border: none; cursor: pointer; display: flex; padding: 0; } .a-switch[aria-checked=true] { --switch-bg-color: var(--switch-active-bg-color); --switch-border-color: var(--switch-active-border-color); --switch-handle-bg-color: var(--switch-handle-active-bg-color); } .a-switch[aria-checked=true] .a-switch__label--off { display: none; } .a-switch[aria-checked=true] .a-switch__toggle-label--off { opacity: 0; } .a-switch[aria-checked=true] .a-switch__toggle:after { transform: translate(calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-inset)), -50%); } .a-switch[aria-checked=false] .a-switch__label--on { display: none; } .a-switch[aria-checked=false] .a-switch__toggle-label--on { opacity: 0; } .a-switch:disabled { --switch-bg-color: var(--switch-disabled-bg-color); --switch-border-color: var(--switch-disabled-border-color); --switch-handle-bg-color: var(--switch-handle-disabled-bg-color); --switch-label-color: var(--switch-label-disabled-color); cursor: not-allowed; } /** * SWITCH ELEMENTS * ------------------------------------------------------------------- */ .a-switch__toggle { align-items: center; background-color: var(--switch-bg-color); border-radius: var(--switch-height); display: flex; height: var(--switch-height); justify-content: space-between; padding: var(--switch-inset); position: relative; transition: background-color, border; width: var(--switch-width); } .a-switch__toggle:after { background-color: var(--switch-handle-bg-color); border-radius: var(--switch-handle-size); content: ""; height: var(--switch-handle-size); left: 0; position: absolute; top: 50%; transform: translate(var(--switch-inset), -50%); transition: background, transform var(--ANIMATION-NORMAL); width: var(--switch-handle-size); } .a-switch__label { color: var(--switch-label-color); font-size: var(--switch-label-font-size); min-width: 2rem; transition: color var(--ANIMATION-NORMAL); text-align: right; } .a-switch__label + .a-switch__toggle, .a-switch__toggle ~ .a-switch__label { margin-left: var(--SPACER-XS); } .a-switch__toggle ~ .a-switch__label { text-align: left; } .a-switch__toggle-label { color: var(--switch-handle-bg-color); font-size: 0.875rem; text-transform: uppercase; transition: opacity var(--ANIMATION-NORMAL); width: var(--switch-handle-size); } /** * TABLE VARIABLES * ------------------------------------------------------------------- */ .a-table, .a-table-scrollable-wrapper { --table-bg-color: var(--BG-COLOR-LIGHT); --table-border-color: var(--BORDER-COLOR); --table-border-color-light: var(--BORDER-COLOR-LIGHT); --table-highlight-bg-color: var(--THEME1-100); --table-highlight-border-color: var(--THEME1-600); --table-striped-bg-color: var(--BG-COLOR); --table-sort-btn-color: var(--TEXT-COLOR); --table-sort-btn-active-color: var(--THEME1-600); --table-sort-btn-bg-color: var(--BG-COLOR-LIGHT); --table-sort-btn-hover-bg-color: var(--THEME1-100); --table-sort-btn-icon-color: #949494; --table-sort-btn-icon-active-color: var(--THEME1-600); } /** * TABLE * ------------------------------------------------------------------- */ .a-table { background-color: var(--table-bg-color); border: var(--BORDER-WIDTH) solid var(--table-border-color); border-collapse: collapse; width: 100%; } .a-table caption { margin-bottom: var(--SPACER-XXS); text-align: left; } .a-table thead tr { border-bottom: var(--BORDER-WIDTH) solid var(--table-border-color); } .a-table tbody tr { transition: background-color var(--ANIMATION-NORMAL); } .a-table tbody tr:not(:last-child) { border-bottom: var(--BORDER-WIDTH) solid var(--table-border-color-light); } .a-table tbody tr.is-selected, .a-table tbody tr.is-clickable:active, .a-table tbody tr.is-clickable:hover, .a-table tbody tr.is-clickable:focus { background-color: var(--table-highlight-bg-color); cursor: pointer; } .a-table tbody tr.is-selected .small, .a-table tbody tr.is-clickable:active .small, .a-table tbody tr.is-clickable:hover .small, .a-table tbody tr.is-clickable:focus .small { color: #424242; } .a-table tbody tr.is-selected td { border-top: var(--BORDER-WIDTH) solid var(--table-highlight-border-color); border-bottom: var(--BORDER-WIDTH) solid var(--table-highlight-border-color); } .a-table tbody tr.is-selected td:first-child { border-left: var(--BORDER-WIDTH) solid var(--table-highlight-border-color); } .a-table tbody tr.is-selected td:last-child { border-right: var(--BORDER-WIDTH) solid var(--table-highlight-border-color); } .a-table tr { height: var(--SPACER-XL); } .a-table th, .a-table td { background-clip: padding-box; padding: var(--SPACER-XS); } .a-table th:not(.u-text-center):not(.u-text-right):not(.u-text-justify), .a-table td:not(.u-text-center):not(.u-text-right):not(.u-text-justify) { text-align: left; } .a-table th.is-condensed, .a-table td.is-condensed { padding: var(--SPACER-3XS) var(--SPACER-XS); } .a-table th.is-collapsed, .a-table td.is-collapsed { padding: 0; } /** * TABLE ELEMENTS * ------------------------------------------------------------------- */ .a-table__sort-button { align-items: center; background-color: var(--table-sort-btn-bg-color); border: none; color: var(--table-sort-btn-color); cursor: pointer; display: flex; font-weight: var(--FONT-WEIGHT-BOLD); justify-content: flex-start; margin: 0; min-height: var(--SPACER-XL); padding: 0 var(--SPACER-XS); transition: background-color var(--ANIMATION-NORMAL); -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; } .a-table__sort-button:hover, .a-table__sort-button:active, .a-table__sort-button:focus { --table-sort-btn-bg-color: var(--table-sort-btn-hover-bg-color); } .a-table__sort-button.a-table__sort-button--align-right { justify-content: flex-end; } .a-table__sort-button.a-table__sort-button--unsorted, .a-table__sort-button.a-table__sort-button--sorted-asc, .a-table__sort-button.a-table__sort-button--sorted-desc { --table-sort-btn-color: var(--table-sort-btn-active-color); } .a-table__sort-button.a-table__sort-button--unsorted:after, .a-table__sort-button.a-table__sort-button--sorted-asc:after, .a-table__sort-button.a-table__sort-button--sorted-desc:after { background: var(--table-sort-btn-icon-color); content: ""; height: 1rem; margin-left: var(--SPACER-3XS); -webkit-mask-size: contain; mask-size: contain; width: 1rem; } .a-table__sort-button.a-table__sort-button--unsorted:after { -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; } .a-table__sort-button.a-table__sort-button--unsorted:hover:after, .a-table__sort-button.a-table__sort-button--unsorted:focus:after { background: var(--TEXT-COLOR-LIGHT); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; } .a-table__sort-button.a-table__sort-button--sorted-asc { --table-sort-btn-icon-color: var(--table-sort-btn-icon-active-color); } .a-table__sort-button.a-table__sort-button--sorted-asc:after { -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; } .a-table__sort-button.a-table__sort-button--sorted-desc { --table-sort-btn-icon-color: var(--table-sort-btn-icon-active-color); } .a-table__sort-button.a-table__sort-button--sorted-desc:after { -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; } /** * TABLE SCHEMES * ------------------------------------------------------------------- */ .a-table.a-table--striped tbody tr:nth-child(odd) { background-color: var(--table-striped-bg-color); } .a-table.a-table--striped tbody tr:nth-child(odd).is-selected, .a-table.a-table--striped tbody tr:nth-child(odd).is-clickable:active, .a-table.a-table--striped tbody tr:nth-child(odd).is-clickable:hover, .a-table.a-table--striped tbody tr:nth-child(odd).is-clickable:focus { background-color: var(--table-highlight-bg-color); } .a-table.a-table--open { border: none; } /** * TABLE RESPONSIVE WRAPPER * ------------------------------------------------------------------- */ .a-table-responsive-wrapper { position: relative; } .a-table-responsive-wrapper:not(.has-first-column-fixed).has-shadow-left:before { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: var(--SPACER-XS); } .a-table-responsive-wrapper:not(.has-last-column-fixed).has-shadow-right:after { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; position: absolute; right: 0; top: 0; width: var(--SPACER-XS); } .a-table-responsive-wrapper.has-first-column-fixed { /* When the first column of the table is fixed, the drop shadow on the left side of the table is displayed on the right side of the fixed first column */ } .a-table-responsive-wrapper.has-first-column-fixed table tr th:first-child, .a-table-responsive-wrapper.has-first-column-fixed table tr td:first-child { background-color: var(--table-bg-color); box-shadow: inset calc(var(--BORDER-WIDTH) * -1) 0 0 0 var(--table-border-color); left: 0; position: sticky; z-index: 1; } .a-table-responsive-wrapper.has-first-column-fixed table tr th:first-child.is-collapsed, .a-table-responsive-wrapper.has-first-column-fixed table tr td:first-child.is-collapsed { padding-right: 1px; } .a-table-responsive-wrapper.has-first-column-fixed.has-shadow-left table tr th:first-child:after, .a-table-responsive-wrapper.has-first-column-fixed.has-shadow-left table tr td:first-child:after { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; position: absolute; right: 0; top: 0; transform: translateX(100%); width: var(--SPACER-XS); } .a-table-responsive-wrapper.has-last-column-fixed { /* When the last column of the table is fixed, the drop shadow on the right side of the table is displayed on the lefst side of the fixed last column */ } .a-table-responsive-wrapper.has-last-column-fixed table tr th:last-child, .a-table-responsive-wrapper.has-last-column-fixed table tr td:last-child { background-color: var(--table-bg-color); box-shadow: inset var(--BORDER-WIDTH) 0 0 0 var(--table-border-color); position: sticky; right: 0; } .a-table-responsive-wrapper.has-last-column-fixed table tr th:last-child.is-collapsed, .a-table-responsive-wrapper.has-last-column-fixed table tr td:last-child.is-collapsed { padding-left: 1px; } .a-table-responsive-wrapper.has-last-column-fixed.has-shadow-right table tr th:last-child:after, .a-table-responsive-wrapper.has-last-column-fixed.has-shadow-right table tr td:last-child:after { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; left: 0; position: absolute; top: 0; transform: translateX(-100%); width: var(--SPACER-XS); } .a-table-scrollable-wrapper { border: var(--BORDER-WIDTH) solid var(--table-border-color); overflow-x: auto; overflow-y: hidden; width: 100%; } .a-table-scrollable-wrapper table { border: none; margin-bottom: calc(var(--BORDER-WIDTH) * -1); } .a-table-scrollable-wrapper table > thead > tr > td, .a-table-scrollable-wrapper table > thead > tr > th, .a-table-scrollable-wrapper table > tbody > tr > td, .a-table-scrollable-wrapper table > tbody > tr > th, .a-table-scrollable-wrapper table > tfoot > tr > td, .a-table-scrollable-wrapper table > tfoot > tr > th { white-space: nowrap; } /** * TABLE CELL 1PX HEIGHT FIX FOR CHECKBOXES AND BUTTONS * ------------------------------------------------------------------- */ .a-table__sort-button { min-height: calc(var(--SPACER-XL) - 1px); } .a-table .a-input__checkbox { margin: -0.5px 0; } /** * TOGGLE * ------------------------------------------------------------------- */ .a-toggle { display: block; } @media screen and (min-width: 30rem) { .a-toggle { display: inline-block; } } /** * TOGGLE ELEMENTS * ------------------------------------------------------------------- */ .a-toggle__button { background: transparent; border: none; display: flex; flex-direction: column; height: var(--SPACER-XL); overflow: hidden; padding: 0; } .a-toggle__button[aria-expanded=true] .a-toggle__on, .a-toggle__button[aria-expanded=true] .a-toggle__off { transform: translateY(-100%); } .a-toggle__on, .a-toggle__off { transition-property: background, color, transform; width: 100%; } .a-toggle__on { order: 1; } .a-toggle__off { order: 2; } /** * TOGGLE MODIFIERS * ------------------------------------------------------------------- */ .a-toggle.a-toggle--s .a-toggle__button { height: var(--SPACER-L); } .a-toggle.a-toggle--l .a-toggle__button { height: var(--SPACER-XXL); } /** * TOOLTIP VARIABLES * ------------------------------------------------------------------- */ .a-tooltip { --tooltip-max-width: 13rem; --tooltip-color: #fff; --tooltip-bg-color: #424242; --tooltip-inverted-color: #141414; --tooltip-inverted-bg-color: #d8d8d8; } /** * TOOLTIP PLACEHOLDER * ------------------------------------------------------------------- */ .a-tooltip { display: inline-block; font-size: 0.875rem; max-width: var(--tooltip-max-width); padding: var(--SPACER-3XS) var(--SPACER-XXS); position: relative; } .a-tooltip a { color: inherit; } /** * TOOLTIP COLORS * ------------------------------------------------------------------- */ .a-tooltip { background-color: var(--tooltip-bg-color); color: var(--tooltip-color); } .a-tooltip.a-tooltip--inverted { --tooltip-color: var(--tooltip-inverted-color); --tooltip-bg-color: var(--tooltip-inverted-bg-color); } /** * MOLECULES * ------------------------------------------------------------------- */ /** * ACCORDION VARIABLES * ------------------------------------------------------------------- */ .m-accordion { --accordion-header-color: var(--TEXT-COLOR); --accordion-header-hover-color: var(--THEME1-600); --accordion-header-bg-color: var(--BG-COLOR-LIGHT); --accordion-header-hover-bg-color: var(--THEME1-100); --accordion-header-border-color: var(--BORDER-COLOR); --accordion-header-hover-border-color: var(--THEME1-600); --accordion-content-bg-color: var(--accordion-header-bg-color); --accordion-content-border-color: var(--accordion-header-border-color); --accordion-icon-color: var(--TEXT-COLOR-LIGHT); --accordion-icon-hover-color: var(--accordion-header-hover-color); } /** * ACCORDION * ------------------------------------------------------------------- */ .m-accordion:not(.m-accordion--open) .m-accordion__tab[aria-expanded=true] .m-accordion__header { --accordion-header-bg-color: var(--BG-COLOR); } .m-accordion:not(.m-accordion--open) .m-accordion__tab[aria-expanded=true] .m-accordion__header:hover, .m-accordion:not(.m-accordion--open) .m-accordion__tab[aria-expanded=true] .m-accordion__header:active, .m-accordion:not(.m-accordion--open) .m-accordion__tab[aria-expanded=true] .m-accordion__header:focus { --accordion-header-bg-color: var(--accordion-header-hover-bg-color); --accordion-header-border-color: var(--accordion-header-hover-border-color); } .m-accordion:not(.m-accordion--open) .m-accordion__header:hover, .m-accordion:not(.m-accordion--open) .m-accordion__header:active, .m-accordion:not(.m-accordion--open) .m-accordion__header:focus { --accordion-header-border-color: var(--accordion-header-hover-border-color); } /** * ACCORDION ELEMENTS * ------------------------------------------------------------------- */ .m-accordion__tab:not(:first-child) { margin-top: calc(var(--BORDER-WIDTH) * -1); } .m-accordion__tab .m-accordion__header[aria-expanded=true] { font-weight: var(--FONT-WEIGHT-BOLD); } .m-accordion__tab .m-accordion__header[aria-expanded=true]:after { -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; } .m-accordion__tab .m-accordion__header[aria-expanded=true]:hover, .m-accordion__tab .m-accordion__header[aria-expanded=true]:active, .m-accordion__tab .m-accordion__header[aria-expanded=true]:focus { --accordion-header-color: var(--accordion-header-hover-color); --accordion-icon-color: var(--accordion-icon-hover-color); } .m-accordion__tab .m-accordion__header[aria-expanded=true] + .m-accordion__content { display: flex; max-height: none; } .m-accordion__header { align-items: center; background-color: var(--accordion-header-bg-color); border: var(--BORDER-WIDTH) solid var(--accordion-header-border-color); color: var(--accordion-header-color); cursor: pointer; display: flex; min-height: var(--SPACER-XL); padding: var(--SPACER-XS) var(--SPACER-XL) var(--SPACER-XS) var(--SPACER-XS); position: relative; text-align: left; transition-duration: var(--ANIMATION-DURATION); transition-property: color, background, border; transition-timing-function: var(--ANIMATION-EASING); -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; } .m-accordion__header:hover, .m-accordion__header:active, .m-accordion__header:focus { --accordion-header-color: var(--accordion-header-hover-color); --accordion-header-bg-color: var(--accordion-header-hover-bg-color); --accordion-icon-color: var(--accordion-icon-hover-color); z-index: 1; } .m-accordion__header:after { background: var(--accordion-icon-color); content: ""; height: 1rem; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center center; mask: url("data:image/svg+xml;utf8,") no-repeat center center; -webkit-mask-size: contain; mask-size: contain; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--SPACER-XL); } .m-accordion__content { background-color: var(--accordion-content-bg-color); border: var(--BORDER-WIDTH) solid var(--accordion-content-border-color); border-top: none; display: none; margin-top: calc(var(--BORDER-WIDTH) * -1); max-height: 0; padding: 0; transition: max-height 0.5s ease-out; } /** * ACCORDION MODIFIERS * ------------------------------------------------------------------- */ .m-accordion.m-accordion--open .m-accordion__header, .m-accordion.m-accordion--open .m-accordion__content { border-left: none; border-right: none; } .m-accordion.m-accordion--open .m-accordion__tab:first-child .m-accordion__header { border-top: none; } .m-accordion.m-accordion--open .m-accordion__tab:last-child .m-accordion__content { border-bottom: none; } /** * ALERT VARIABLES * ------------------------------------------------------------------- */ .m-alert { --alert-color: var(--STATE-INFO); --alert-bg-color: var(--BG-COLOR-LIGHT); --alert-border-color: var(--alert-color); --alert-success-color: var(--STATE-SUCCESS); --alert-success-border-color: var(--alert-success-color); --alert-warning-color: var(--STATE-WARNING); --alert-warning-border-color: var(--alert-warning-color); --alert-danger-color: var(--STATE-DANGER); --alert-danger-border-color: var(--alert-danger-color); --alert-padding: var(--SPACER); } /** * ALERTS * ------------------------------------------------------------------- */ .m-alert { background-color: var(--alert-bg-color); border: var(--BORDER-WIDTH) solid var(--alert-border-color); border-radius: var(--BORDER-RADIUS); color: var(--alert-color); padding: var(--alert-padding); position: relative; } .m-alert .m-alert__close { position: absolute; right: 0; top: 0; } /** * ALERTS ELEMENTS * ------------------------------------------------------------------- */ .m-alert__icon { float: left; margin: calc(var(--SPACER-XS) / -3) 0.75rem 0 0; } .m-alert__icon .ai { font-size: 1.5rem; } .m-alert__actions { margin-bottom: calc(var(--SPACER-XS) * -1); } @media screen and (min-width: 30rem) { .m-alert__actions { display: flex; margin-bottom: 0; } } .m-alert__actions .a-button { margin-bottom: var(--SPACER-XS); } @media screen and (min-width: 30rem) { .m-alert__actions .a-button { margin-bottom: 0; } .m-alert__actions .a-button:not(:first-child) { margin-left: var(--SPACER-XS); } } /** * ALERTS MODIFIERS * ------------------------------------------------------------------- */ .m-alert.m-alert--success { --alert-color: var(--alert-success-color); --alert-border-color: var(--alert-success-border-color); } .m-alert.m-alert--warning { --alert-color: var(--alert-warning-color); --alert-border-color: var(--alert-warning-border-color); } .m-alert.m-alert--danger { --alert-color: var(--alert-danger-color); --alert-border-color: var(--alert-danger-border-color); } .m-alert.m-alert--inline { --alert-padding: var(--SPACER-XS); } /** * BUTTON GROUP * ------------------------------------------------------------------- */ .m-button-group { display: flex; flex-wrap: wrap; padding-bottom: var(--BORDER-WIDTH); vertical-align: middle; } .m-button-group > .a-button { border-radius: 0; z-index: 1; } .m-button-group > .a-button:not(.has-icon) { width: auto; } .m-button-group > .a-button:disabled { z-index: 0; } .m-button-group > .a-button:focus { z-index: 2; } .m-button-group > .a-button:first-child { border-bottom-left-radius: var(--BORDER-RADIUS); border-top-left-radius: var(--BORDER-RADIUS); } .m-button-group > .a-button:last-child { border-bottom-right-radius: var(--BORDER-RADIUS); border-top-right-radius: var(--BORDER-RADIUS); } .m-button-group > .a-button:not(.a-button--outlined) { border-right: var(--BORDER-WIDTH) solid var(--btn-hover-border-color); margin-bottom: calc(var(--BORDER-WIDTH) * -1); } .m-button-group > .a-button:not(.a-button--outlined):last-child { border-right: none; } .m-button-group > .a-button:not(.a-button--outlined).a-button--secondary { border-color: var(--btn-secondary-hover-border-color); } .m-button-group > .a-button:not(.a-button--outlined).a-button--success { border-color: var(--btn-success-hover-border-color); } .m-button-group > .a-button:not(.a-button--outlined).a-button--warning { border-color: var(--btn-warning-hover-border-color); } .m-button-group > .a-button:not(.a-button--outlined).a-button--danger { border-color: var(--btn-danger-hover-border-color); } .m-button-group > .a-button--outlined { margin-bottom: calc(var(--BORDER-WIDTH) * -1); margin-right: calc(var(--BORDER-WIDTH) * -1); } .m-button-group > .a-button--outlined:last-child { margin-right: 0; } .m-button-group > .a-button--outlined:not(:disabled):hover, .m-button-group > .a-button--outlined:not(:disabled):active, .m-button-group > .a-button--outlined:not(:disabled):focus { z-index: 1; } .m-button-group--vertical { flex-direction: column; } .m-button-group--vertical > .a-button:first-child { border-bottom-left-radius: 0; border-top-left-radius: var(--BORDER-RADIUS); border-top-right-radius: var(--BORDER-RADIUS); } .m-button-group--vertical > .a-button:last-child { border-bottom-left-radius: var(--BORDER-RADIUS); border-bottom-right-radius: var(--BORDER-RADIUS); border-top-right-radius: 0; } .m-button-group--vertical > .a-button:not(.a-button--outlined) { border-right: none; } .m-button-group--vertical > .a-button:not(.a-button--outlined):not(:first-child) { border-top: var(--BORDER-WIDTH) solid var(--btn-hover-border-color); } .m-button-group--vertical > .a-button--outlined { margin-right: 0; } /** * BUTTON LIST * ------------------------------------------------------------------- */ .m-button-list li:not(:last-child) { margin-bottom: var(--SPACER-XS); } /** * BUTTON LIST MODIFIERS * ------------------------------------------------------------------- */ .m-button-list--horizontal { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--SPACER-XS) * -1); } .m-button-list--horizontal li { margin-bottom: var(--SPACER-XS); } .m-button-list--horizontal li:not(:last-child) { margin-right: var(--SPACER-XS); } /** * CARD VARIABLES * ------------------------------------------------------------------- */ .m-card { --card-bg-color: var(--BG-COLOR-LIGHT); --card-border-color: var(--BORDER-COLOR); } /** * CARD * ------------------------------------------------------------------- */ .m-card { background-color: var(--card-bg-color); border: var(--BORDER-WIDTH) solid var(--card-border-color); } /** * CARD ELEMENTS * ------------------------------------------------------------------- */ .m-card__image img { display: block; width: 100%; } .m-card__body { padding: var(--SPACER); } /** * COLLAPSIBLE LIST * ------------------------------------------------------------------- */ .m-collapsible-list ul { margin-bottom: calc(var(--SPACER-XXS) * -1); margin-top: var(--SPACER-XXS); padding-left: var(--SPACER); } .m-collapsible-list__item { padding: var(--SPACER-XXS) 0; } .m-collapsible-list__item:not(.is-active) > a { text-decoration: none; transition: none; } .m-collapsible-list__item:not(.is-active) > a:link, .m-collapsible-list__item:not(.is-active) > a:visited { color: var(--TEXT-COLOR); } .m-collapsible-list__item:not(.is-active) > a:hover, .m-collapsible-list__item:not(.is-active) > a:active, .m-collapsible-list__item:not(.is-active) > a:focus { color: var(--LINK-HOVER-COLOR); text-decoration: underline; } .m-collapsible-list__item .ai { font-size: 0.875em; padding: 0 var(--SPACER-XXS) 0 0; } /** * COLLAPSIBLE LIST MODIFIERS * ------------------------------------------------------------------- */ .m-collapsible-list__item.is-active > a { font-weight: var(--FONT-WEIGHT-BOLD); } .m-collapsible-list__item ul.is-collapsed { display: none; } /** * DATEPICKER * ------------------------------------------------------------------- */ .m-datepicker { --datepicker-text-color: var(--TEXT-COLOR); --datepicker-text-color-light: var(--TEXT-COLOR-LIGHT); --datepicker-text-color-xlight: var(--TEXT-COLOR-INVERTED); --datepicker-bg-color: var(--BG-COLOR-LIGHT); --datepicker-bg-color-dark: var(--BG-COLOR); --datepicker-border-color: var(--BORDER-COLOR); --datepicker-border-color-light: var(--BORDER-COLOR-LIGHT); --datepicker-highlight-color: var(--THEME1-100); --datepicker-active-color: var(--THEME1-600); } /** * DATEPICKER * ------------------------------------------------------------------- */ .m-datepicker { background-color: var(--datepicker-bg-color); border-radius: var(--BORDER-RADIUS); max-width: calc(var(--SPACER) * 14); opacity: 0; transform: translateY(calc(var(--SPACER-XL) * -1)); transition: visibility 0s var(--ANIMATION-NORMAL), opacity var(--ANIMATION-NORMAL), transform var(--ANIMATION-NORMAL); visibility: hidden; } .m-datepicker table { border-spacing: 0; table-layout: fixed; width: 100%; } /** * DATEPICKER ELEMENTS * ------------------------------------------------------------------- */ /** * DATEPICKER NAVIGATION * ------------------------------------------------------------------- */ .m-datepicker__nav { border: var(--BORDER-WIDTH) solid var(--datepicker-border-color); border-top-left-radius: var(--BORDER-RADIUS); border-top-right-radius: var(--BORDER-RADIUS); display: flex; height: var(--SPACER-XL); justify-content: space-between; } .m-datepicker__nav-title { align-items: center; background: transparent; border: none; color: var(--datepicker-text-color); cursor: pointer; display: flex; flex-grow: 1; font-size: 1rem; font-weight: var(--FONT-WEIGHT-BOLD); margin: 0; padding: 0 1rem; transition: background-color var(--ANIMATION-NORMAL), color var(--ANIMATION-NORMAL); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .m-datepicker__nav-title .ai { color: var(--datepicker-text-color-light); font-size: 1.25rem; margin-left: var(--SPACER-XXS); } .m-datepicker__nav-title:hover, .m-datepicker__nav-title:active, .m-datepicker__nav-title:focus { background-color: var(--datepicker-highlight-color); } .m-datepicker__nav-title:hover, .m-datepicker__nav-title:hover .ai, .m-datepicker__nav-title:active, .m-datepicker__nav-title:active .ai, .m-datepicker__nav-title:focus, .m-datepicker__nav-title:focus .ai { color: var(--datepicker-active-color); } .m-datepicker__nav-pagination { display: flex; } .m-datepicker__nav-pagination .a-button { min-height: auto; } /** * DATEPICKER DAY VIEW * ------------------------------------------------------------------- */ .m-datepicker__grid { border-bottom: var(--BORDER-WIDTH) solid var(--datepicker-border-color); border-bottom-left-radius: var(--BORDER-RADIUS); border-bottom-right-radius: var(--BORDER-RADIUS); border-left: var(--BORDER-WIDTH) solid var(--datepicker-border-color); border-right: var(--BORDER-WIDTH) solid var(--datepicker-border-color); overflow: hidden; } .m-datepicker__grid-head { height: var(--SPACER-XL); } .m-datepicker__grid-head th { background-color: var(--datepicker-bg-color-dark); color: var(--datepicker-text-color-light); font-size: 0.875rem; font-weight: var(--FONT-WEIGHT-NORMAL); padding: 0; } .m-datepicker__grid-body { background-color: var(--datepicker-bg-color); } .m-datepicker__grid-body td { padding: 0; position: relative; } .m-datepicker__grid-body td:after { content: ""; display: block; margin-top: 100%; } .m-datepicker__grid-body button { background-color: transparent; border-radius: var(--BORDER-RADIUS); border: var(--BORDER-WIDTH) solid transparent; color: var(--datepicker-text-color); cursor: pointer; font-size: 1rem; height: 100%; padding: 0; position: absolute; transition-duration: var(--ANIMATION-DURATION); transition-property: color, background-color, border; transition-timing-function: var(--ANIMATION-EASING); width: 100%; } .m-datepicker__grid-body button:not(.is-selected):not(.is-unavailable):not(:disabled):hover, .m-datepicker__grid-body button:not(.is-selected):not(.is-unavailable):not(:disabled):active, .m-datepicker__grid-body button:not(.is-selected):not(.is-unavailable):not(:disabled):focus { background-color: var(--datepicker-highlight-color); color: var(--datepicker-active-color); } .m-datepicker__grid-body button:not(.is-current):not(.is-selected):not(.is-unavailable):not(:disabled):hover, .m-datepicker__grid-body button:not(.is-current):not(.is-selected):not(.is-unavailable):not(:disabled):active, .m-datepicker__grid-body button:not(.is-current):not(.is-selected):not(.is-unavailable):not(:disabled):focus { border-color: var(--datepicker-highlight-color); } .m-datepicker__grid-body button:focus { z-index: 1; } .m-datepicker__grid-body button.is-current { border-color: var(--datepicker-border-color); } .m-datepicker__grid-body button.is-selected { background-color: var(--datepicker-active-color); color: var(--datepicker-text-color-xlight); font-weight: var(--FONT-WEIGHT-BOLD); } .m-datepicker__grid-body button.is-faded { background-color: var(--datepicker-bg-color-dark); border-color: var(--datepicker-bg-color-dark); color: var(--datepicker-text-color-light); } .m-datepicker__grid-body button.is-unavailable, .m-datepicker__grid-body button:disabled { color: var(--datepicker-text-color-light); cursor: not-allowed; font-size: 0.875rem; } .m-datepicker__grid-body button.is-unavailable:before, .m-datepicker__grid-body button:disabled:before { background-color: var(--datepicker-border-color-light); content: ""; height: var(--BORDER-WIDTH); left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 2rem; } .m-datepicker__grid-body button span { position: relative; } /** * DATEPICKER YEAR VIEW * ------------------------------------------------------------------- */ .m-datepicker__list { border-bottom: var(--BORDER-WIDTH) solid var(--datepicker-border-color); border-bottom-left-radius: var(--BORDER-RADIUS); border-bottom-right-radius: var(--BORDER-RADIUS); border-left: var(--BORDER-WIDTH) solid var(--datepicker-border-color); border-right: var(--BORDER-WIDTH) solid var(--datepicker-border-color); overflow: hidden; } .m-datepicker__list-body { background-color: var(--datepicker-bg-color); } .m-datepicker__list-body tr:first-child button { border-top: 0; } .m-datepicker__list-body tr:last-child button { border-bottom: 0; } .m-datepicker__list-body tr td:first-child button { border-left: 0; } .m-datepicker__list-body tr td:last-child button { border-right: 0; } .m-datepicker__list-body td { padding: 0; } .m-datepicker__list-body button { background-color: transparent; border-radius: var(--BORDER-RADIUS); border: var(--BORDER-WIDTH) solid transparent; color: var(--datepicker-text-color); cursor: pointer; height: var(--SPACER-XL); padding: 0; position: relative; transition-duration: var(--ANIMATION-DURATION); transition-property: color, background-color, border; transition-timing-function: var(--ANIMATION-EASING); width: 100%; } .m-datepicker__list-body button:hover, .m-datepicker__list-body button:active, .m-datepicker__list-body button:focus { background-color: var(--datepicker-highlight-color); color: var(--datepicker-active-color); } .m-datepicker__list-body button.is-current { border-color: var(--datepicker-border-color); } .m-datepicker__list-body button.is-selected { background-color: var(--datepicker-active-color); color: var(--datepicker-text-color-xlight); font-weight: var(--FONT-WEIGHT-BOLD); } /** * DATEPICKER MODIFIERS * ------------------------------------------------------------------- */ .m-datepicker.is-open { opacity: 1; transform: translateY(calc(var(--BORDER-WIDTH) * -1)); transition-delay: 0s; visibility: visible; } .m-datepicker--fixed { box-shadow: var(--BOX-SHADOW); position: absolute; right: 0; top: 100%; z-index: 3; } .m-datepicker--left { left: 0; right: auto; } .m-datepicker--headroom { margin-bottom: 15rem; } /** * FLYOUT VARIABLES * ------------------------------------------------------------------- */ .m-flyout { --flyout-bg-color: var(--BG-COLOR-LIGHT); --flyout-border-color: var(--BORDER-COLOR); --flyout-max-width: 24rem; --flyout-max-width-s: 16rem; --flyout-max-height: calc(var(--SPACER) * 9); } /** * FLYOUT * ------------------------------------------------------------------- */ .m-flyout { display: inline-block; outline: none; position: relative; } /** * FLYOUT ELEMENTS * ------------------------------------------------------------------- */ .m-flyout__content { background-color: var(--flyout-bg-color); border: var(--BORDER-WIDTH) solid var(--flyout-border-color); border-radius: var(--BORDER-RADIUS); box-shadow: var(--BOX-SHADOW); opacity: 0; position: absolute; transform: translateY(calc(var(--SPACER-XL) * -1)); transition: visibility 0s var(--ANIMATION-NORMAL), opacity var(--ANIMATION-NORMAL), transform var(--ANIMATION-NORMAL); visibility: hidden; width: var(--flyout-max-width-s); z-index: 4; } @media screen and (min-width: 45rem) { .m-flyout__content { width: var(--flyout-max-width); } } /** * FLYOUT POSITIONING * ------------------------------------------------------------------- */ .m-flyout--bottom-right .m-flyout__content, .m-flyout--upper-right .m-flyout__content { right: 0; } .m-flyout--upper-left .m-flyout__content, .m-flyout--upper-right .m-flyout__content { transform: translateY(-100%); } .m-flyout--bottom-right .m-flyout__content { box-shadow: var(--BOX-SHADOW-BOTTOM-LEFT); } .m-flyout--upper-left .m-flyout__content { box-shadow: var(--BOX-SHADOW-TOP-RIGHT); } .m-flyout--upper-right .m-flyout__content { box-shadow: var(--BOX-SHADOW-TOP-LEFT); } /** * FLYOUT SIZES * ------------------------------------------------------------------- */ @media screen and (min-width: 45rem) { .m-flyout--s .m-flyout__content { width: var(--flyout-max-width-s); } } .m-flyout--scrollable .m-flyout__content { max-height: var(--flyout-max-height); overflow-y: scroll; } /** * FLYOUT VISIBILITY * ------------------------------------------------------------------- */ .m-flyout.is-open > .m-flyout__content { opacity: 1; transform: translateY(0); transition-delay: 0s; visibility: visible; } .m-flyout.is-open.m-flyout--upper-left .m-flyout__content, .m-flyout.is-open.m-flyout--upper-right .m-flyout__content { transform: translateY(calc(-100% - var(--SPACER-XL))); } .m-flyout__content.has-padding { padding: var(--SPACER-S); } /** * FLYOUT FIX AFTER FORM ELEMENT * ------------------------------------------------------------------- */ .a-input + .m-flyout__content { min-width: 100%; margin-top: calc(var(--BORDER-WIDTH) * -1); width: auto; } /** * DATEPICKER IN FLYOUT BORDER FIX * ------------------------------------------------------------------- */ .m-flyout__content.m-datepicker { border: none; } /** * FLYOUT FOCUS OUTLINE FIX * ------------------------------------------------------------------- */ .m-flyout:focus { outline: none; } /** * IMAGES * ------------------------------------------------------------------- * This component has shared variables with _atoms.copyright.scss. You can find them in _quarks.css-properties.scss. */ /** * IMAGES VARIABLES * ------------------------------------------------------------------- */ .m-image { --image-copyright-height: calc(var(--shared-copyright-height) * -1); --image-copyright-color: var(--shared-copyright-color); } /** * IMAGE * ------------------------------------------------------------------- */ .m-image { display: inline-block; overflow: hidden; position: relative; } .m-image img { height: auto; max-width: 100%; } /** * IMAGE ELEMENTS * ------------------------------------------------------------------- */ .m-image__copyright { bottom: 0; color: var(--image-copyright-color); position: absolute; right: 0; transform: translateX(100%) translateX(var(--image-copyright-height)); } .m-image__copyright:hover, .m-image__copyright:active, .m-image__copyright:focus { color: var(--image-copyright-color); transform: translateX(0); } /** * MODAL VARIABLES * ------------------------------------------------------------------- */ .m-modal { --modal-bg-color: var(--BG-COLOR-LIGHT); --modal-border-color: var(--BORDER-COLOR); --modal-width: calc(var(--SPACER) * 17); --modal-width-l: calc(var(--SPACER) * 25); } /** * MODAL * ------------------------------------------------------------------- */ .m-modal { background-color: var(--modal-bg-color); border: var(--BORDER-WIDTH) solid var(--modal-border-color); border-radius: var(--BORDER-RADIUS); width: 100%; } @media screen and (min-width: 30rem) { .m-modal { max-width: var(--modal-width); } } .m-modal .m-modal__close { position: absolute; right: 0; top: 0; } .m-modal .m-modal__close + * { margin-right: var(--SPACER-L); } /** * MODAL ELEMENTS * ------------------------------------------------------------------- */ .m-modal__content { padding: var(--SPACER); position: relative; } .m-modal__footer { margin-bottom: calc(var(--SPACER-XS) * -1); } @media screen and (min-width: 30rem) { .m-modal__footer { display: flex; margin-bottom: 0; } } .m-modal__footer .a-button { margin-bottom: var(--SPACER-XS); } @media screen and (min-width: 30rem) { .m-modal__footer .a-button { margin-bottom: 0; } .m-modal__footer .a-button:not(:first-child) { margin-left: var(--SPACER-XS); } } /** * MODAL MODIFIERS * ------------------------------------------------------------------- */ @media screen and (min-width: 30rem) { .m-modal--l { --modal-width: var(--modal-width-l); } } /** * NAVIGATION VARIABLES * ------------------------------------------------------------------- */ .m-nav-list, .m-nav-tabs { --nav-color: var(--TEXT-COLOR); --nav-bg-color: transparent; --nav-border-color: var(--BORDER-COLOR-LIGHT); --nav-hover-color: var(--THEME1-600); --nav-hover-bg-color: var(--THEME1-100); --nav-active-color: var(--THEME1-600); --nav-active-border-color: var(--THEME1-600); --nav-disabled-color: var(--STATE-DISABLED); } /** * NAVIGATION LIST * ------------------------------------------------------------------- */ .m-nav-list ol > li, .m-nav-list ul > li { display: flex; flex-direction: column; min-height: var(--SPACER-XL); transition-duration: var(--ANIMATION-DURATION); transition-property: background-color, box-shadow; transition-timing-function: var(--ANIMATION-EASING); } .m-nav-list ol > li:not(:first-child) > a, .m-nav-list ol > li:not(:first-child) > button, .m-nav-list ul > li:not(:first-child) > a, .m-nav-list ul > li:not(:first-child) > button { border-top: var(--BORDER-WIDTH) solid var(--nav-border-color); } .m-nav-list ol > li:not(.is-active):not(.is-disabled):hover, .m-nav-list ol > li:not(.is-active):not(.is-disabled):active, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus-within, .m-nav-list ul > li:not(.is-active):not(.is-disabled):hover, .m-nav-list ul > li:not(.is-active):not(.is-disabled):active, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus-within { background-color: var(--nav-hover-bg-color); color: var(--nav-hover-color); } .m-nav-list ol > li:not(.is-active):not(.is-disabled):hover > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):hover > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):active > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):active > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus-within > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus-within > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):hover > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):hover > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):active > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):active > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus-within > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus-within > button { border-top-color: transparent; } .m-nav-list ol > li:not(.is-active):not(.is-disabled):hover + li > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):hover + li > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):active + li > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):active + li > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus + li > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus + li > button, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus-within + li > a, .m-nav-list ol > li:not(.is-active):not(.is-disabled):focus-within + li > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):hover + li > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):hover + li > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):active + li > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):active + li > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus + li > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus + li > button, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus-within + li > a, .m-nav-list ul > li:not(.is-active):not(.is-disabled):focus-within + li > button { border-top-color: transparent; } .m-nav-list ol > li.is-active, .m-nav-list ol > li.is-active:hover, .m-nav-list ol > li.is-active:active, .m-nav-list ol > li.is-active:focus, .m-nav-list ol > li.is-active:focus-within, .m-nav-list ul > li.is-active, .m-nav-list ul > li.is-active:hover, .m-nav-list ul > li.is-active:active, .m-nav-list ul > li.is-active:focus, .m-nav-list ul > li.is-active:focus-within { background-color: var(--nav-active-bg-color); box-shadow: var(--SPACER-3XS) 0 0 0 var(--nav-active-border-color) inset; color: var(--nav-active-color); font-weight: var(--FONT-WEIGHT-BOLD); } .m-nav-list ol > li.is-disabled, .m-nav-list ol > li.is-disabled:hover, .m-nav-list ol > li.is-disabled:active, .m-nav-list ol > li.is-disabled:focus, .m-nav-list ol > li.is-disabled:focus-within, .m-nav-list ul > li.is-disabled, .m-nav-list ul > li.is-disabled:hover, .m-nav-list ul > li.is-disabled:active, .m-nav-list ul > li.is-disabled:focus, .m-nav-list ul > li.is-disabled:focus-within { color: var(--nav-disabled-color); } .m-nav-list ol > li.is-disabled > a, .m-nav-list ol > li.is-disabled > button, .m-nav-list ol > li.is-disabled:hover > a, .m-nav-list ol > li.is-disabled:hover > button, .m-nav-list ol > li.is-disabled:active > a, .m-nav-list ol > li.is-disabled:active > button, .m-nav-list ol > li.is-disabled:focus > a, .m-nav-list ol > li.is-disabled:focus > button, .m-nav-list ol > li.is-disabled:focus-within > a, .m-nav-list ol > li.is-disabled:focus-within > button, .m-nav-list ul > li.is-disabled > a, .m-nav-list ul > li.is-disabled > button, .m-nav-list ul > li.is-disabled:hover > a, .m-nav-list ul > li.is-disabled:hover > button, .m-nav-list ul > li.is-disabled:active > a, .m-nav-list ul > li.is-disabled:active > button, .m-nav-list ul > li.is-disabled:focus > a, .m-nav-list ul > li.is-disabled:focus > button, .m-nav-list ul > li.is-disabled:focus-within > a, .m-nav-list ul > li.is-disabled:focus-within > button { cursor: not-allowed; } .m-nav-list ol > li > a, .m-nav-list ol > li > button, .m-nav-list ul > li > a, .m-nav-list ul > li > button { align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-grow: 1; margin-left: var(--SPACER-S); padding: var(--SPACER-3XS) var(--SPACER-S) var(--SPACER-3XS) 0; text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: border-top-color, color; transition-timing-function: var(--ANIMATION-EASING); } .m-nav-list ol > li > a > .ai, .m-nav-list ol > li > button > .ai, .m-nav-list ul > li > a > .ai, .m-nav-list ul > li > button > .ai { display: inline-block; margin-right: var(--SPACER-XXS); } .m-nav-list ol > li > a > .a-badge, .m-nav-list ol > li > button > .a-badge, .m-nav-list ul > li > a > .a-badge, .m-nav-list ul > li > button > .a-badge { margin-left: var(--SPACER-XXS); } /** * NAVIGATION TABS * ------------------------------------------------------------------- */ .m-nav-tabs { position: relative; } .m-nav-tabs ol, .m-nav-tabs ul { -ms-overflow-style: scrollbar; -webkit-overflow-scrolling: touch; display: flex; overflow-x: auto; } .m-nav-tabs ol > li, .m-nav-tabs ul > li { display: flex; flex-direction: column; min-height: var(--SPACER-XL); transition-duration: var(--ANIMATION-DURATION); transition-property: background-color, box-shadow; transition-timing-function: var(--ANIMATION-EASING); } .m-nav-tabs ol > li:not(.is-active):not(.is-disabled):hover, .m-nav-tabs ol > li:not(.is-active):not(.is-disabled):active, .m-nav-tabs ol > li:not(.is-active):not(.is-disabled):focus, .m-nav-tabs ol > li:not(.is-active):not(.is-disabled):focus-within, .m-nav-tabs ul > li:not(.is-active):not(.is-disabled):hover, .m-nav-tabs ul > li:not(.is-active):not(.is-disabled):active, .m-nav-tabs ul > li:not(.is-active):not(.is-disabled):focus, .m-nav-tabs ul > li:not(.is-active):not(.is-disabled):focus-within { background-color: var(--nav-hover-bg-color); color: var(--nav-hover-color); } .m-nav-tabs ol > li.is-active, .m-nav-tabs ol > li.is-active:hover, .m-nav-tabs ol > li.is-active:active, .m-nav-tabs ol > li.is-active:focus, .m-nav-tabs ol > li.is-active:focus-within, .m-nav-tabs ul > li.is-active, .m-nav-tabs ul > li.is-active:hover, .m-nav-tabs ul > li.is-active:active, .m-nav-tabs ul > li.is-active:focus, .m-nav-tabs ul > li.is-active:focus-within { background-color: var(--nav-active-bg-color); box-shadow: 0 calc(var(--SPACER-3XS) * -1) 0 0 var(--nav-active-border-color) inset; color: var(--nav-active-color); font-weight: var(--FONT-WEIGHT-BOLD); } .m-nav-tabs ol > li.is-disabled, .m-nav-tabs ol > li.is-disabled:hover, .m-nav-tabs ol > li.is-disabled:active, .m-nav-tabs ol > li.is-disabled:focus, .m-nav-tabs ol > li.is-disabled:focus-within, .m-nav-tabs ul > li.is-disabled, .m-nav-tabs ul > li.is-disabled:hover, .m-nav-tabs ul > li.is-disabled:active, .m-nav-tabs ul > li.is-disabled:focus, .m-nav-tabs ul > li.is-disabled:focus-within { color: var(--nav-disabled-color); } .m-nav-tabs ol > li.is-disabled > a, .m-nav-tabs ol > li.is-disabled > button, .m-nav-tabs ol > li.is-disabled:hover > a, .m-nav-tabs ol > li.is-disabled:hover > button, .m-nav-tabs ol > li.is-disabled:active > a, .m-nav-tabs ol > li.is-disabled:active > button, .m-nav-tabs ol > li.is-disabled:focus > a, .m-nav-tabs ol > li.is-disabled:focus > button, .m-nav-tabs ol > li.is-disabled:focus-within > a, .m-nav-tabs ol > li.is-disabled:focus-within > button, .m-nav-tabs ul > li.is-disabled > a, .m-nav-tabs ul > li.is-disabled > button, .m-nav-tabs ul > li.is-disabled:hover > a, .m-nav-tabs ul > li.is-disabled:hover > button, .m-nav-tabs ul > li.is-disabled:active > a, .m-nav-tabs ul > li.is-disabled:active > button, .m-nav-tabs ul > li.is-disabled:focus > a, .m-nav-tabs ul > li.is-disabled:focus > button, .m-nav-tabs ul > li.is-disabled:focus-within > a, .m-nav-tabs ul > li.is-disabled:focus-within > button { cursor: not-allowed; } .m-nav-tabs ol > li > a, .m-nav-tabs ol > li > button, .m-nav-tabs ul > li > a, .m-nav-tabs ul > li > button { align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-grow: 1; padding: var(--SPACER-3XS) var(--SPACER-S); text-decoration: none; transition: color var(--ANIMATION-NORMAL); white-space: nowrap; } .m-nav-tabs ol > li > a > .ai, .m-nav-tabs ol > li > button > .ai, .m-nav-tabs ul > li > a > .ai, .m-nav-tabs ul > li > button > .ai { display: inline-block; margin-right: var(--SPACER-XXS); } .m-nav-tabs ol > li > a > .a-badge, .m-nav-tabs ol > li > button > .a-badge, .m-nav-tabs ul > li > a > .a-badge, .m-nav-tabs ul > li > button > .a-badge { margin-left: var(--SPACER-XXS); } .m-nav-tabs.has-border { border-bottom: var(--BORDER-WIDTH) solid var(--nav-border-color); } .m-nav-tabs.has-shadow-left:before { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: var(--SPACER-XS); } .m-nav-tabs.has-shadow-right:after { background-color: var(--BOX-SHADOW-COLOR); bottom: 0; content: ""; position: absolute; right: 0; top: 0; width: var(--SPACER-XS); } /** * OVERLAY VARIABLES * ------------------------------------------------------------------- * This component has shared variables with _organisms.slideshow.scss. You can find them in _quarks.css-properties.scss. */ .m-overlay { --overlay-bg-color: var(--OVERLAY-COLOR); --overlay-button-font-size: 1.75rem; --overlay-button-color: var(--TEXT-COLOR-INVERTED); --overlay-button-hover-color: #d8d8d8; } /** * OVERLAY * ------------------------------------------------------------------- */ .m-overlay { background-color: var(--overlay-bg-color); bottom: 0; display: none; left: 0; outline: 0; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 10; } .m-overlay.is-active { align-items: center; display: flex; justify-content: center; } /** * OVERLAY ELEMENTS * ------------------------------------------------------------------- */ .m-overlay__button { background: none; border: none; color: var(--overlay-button-color); cursor: pointer; font-size: var(--overlay-button-font-size); padding: var(--SPACER-XS); position: absolute; right: var(--SPACER-XS); top: var(--SPACER-XS); transition: color var(--ANIMATION-NORMAL); } .m-overlay__button:active, .m-overlay__button:hover, .m-overlay__button:focus { color: var(--overlay-button-hover-color); } .m-overlay__inner { max-height: calc(100vh - 8.75rem); overflow-x: hidden; overflow-y: auto; } .m-overlay__slideshow.o-slideshow { max-height: 80vh; max-width: 105vh; width: 100%; } .m-overlay__slideshow.o-slideshow .o-slideshow__footer { color: var(--shared-slideshow-footer-color-light); } .m-overlay__pane { position: absolute; z-index: 6; } /** * PAGINATION VARIABLES * ------------------------------------------------------------------- */ .m-pagination { --pagination-font-size: var(--FONT-SIZE-BASE); --pagination-size: var(--SPACER-XL); --pagination-padding: 0 var(--SPACER); --pagination-color: var(--THEME1-600); --pagination-hover-color: var(--THEME1-600); --pagination-active-color: var(--TEXT-COLOR-INVERTED); --pagination-bg-color: var(--BG-COLOR-LIGHT); --pagination-hover-bg-color: var(--THEME1-100); --pagination-active-bg-color: var(--THEME1-600); --pagination-border-color: var(--THEME1-600); --pagination-hover-border: var(--THEME1-700); --pagination-active-border: var(--THEME1-700); --pagination-disabled-color: var(--STATE-DISABLED); --pagination-disabled-bg-color: var(--BG-COLOR); --pagination-disabled-border-color: var(--BG-COLOR); } /** * PAGINATION * ------------------------------------------------------------------- */ .m-pagination { display: flex; } .m-pagination > li { background-color: var(--pagination-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--pagination-border-color) inset; color: var(--pagination-color); font-size: var(--pagination-font-size); height: var(--pagination-size); line-height: var(--pagination-size); position: relative; text-align: center; width: var(--pagination-size); z-index: 1; } .m-pagination > li > a { color: var(--pagination-color); display: block; text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: color, background-color, box-shadow; transition-timing-function: var(--ANIMATION-EASING); } .m-pagination > li > a:hover, .m-pagination > li > a:active, .m-pagination > li > a:focus, .m-pagination > li > a.is-active { background-color: var(--pagination-hover-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--pagination-hover-border) inset; color: var(--pagination-hover-color); } .m-pagination > li > a.is-active { background-color: var(--pagination-active-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--pagination-active-border) inset; color: var(--pagination-active-color); font-weight: var(--FONT-WEIGHT-BOLD); } .m-pagination > li > a.is-disabled { background-color: var(--pagination-disabled-bg-color); box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--pagination-disabled-border) inset; color: var(--pagination-disabled-color); cursor: not-allowed; } .m-pagination > li:has(a.is-disabled) { box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--pagination-disabled-border) inset; } .m-pagination > li + li { margin-left: calc(var(--BORDER-WIDTH) * -1); } .m-pagination > li:first-child, .m-pagination > li:first-child > a { border-bottom-left-radius: var(--BORDER-RADIUS); border-top-left-radius: var(--BORDER-RADIUS); } .m-pagination > li:last-child, .m-pagination > li:last-child > a { border-bottom-right-radius: var(--BORDER-RADIUS); border-top-right-radius: var(--BORDER-RADIUS); } .m-pagination .m-pagination__label { padding: var(--pagination-padding); width: auto; } .m-pagination .m-pagination__next { z-index: 0; } .m-pagination .m-pagination__prev + .m-pagination__next { z-index: 1; } /** * PAGINATION SIZES * ------------------------------------------------------------------- */ .m-pagination.m-pagination--s { --pagination-size: var(--SPACER-L); --pagination-padding: 0 var(--SPACER-XS); } /** * STEP INDICATOR VARIABLES * ------------------------------------------------------------------- */ .m-step-indicator { --step-indicator-square-size: var(--SPACER); --step-indicator-square-color: var(--TEXT-COLOR-LIGHT); --step-indicator-square-bg-color: var(--BG-COLOR); --step-indicator-square-hover-bg-color: var(--THEME1-100); --step-indicator-square-border-color: var(--BORDER-COLOR); --step-indicator-square-active-color: var(--THEME1-600); --step-indicator-square-active-bg-color: var(--BG-COLOR-LIGHT); --step-indicator-square-active-border-color: var(--THEME1-600); --step-indicator-square-completed-color: var(--TEXT-COLOR-INVERTED); --step-indicator-square-completed-bg-color: var(--THEME1-600); --step-indicator-square-completed-hover-bg-color: var(--THEME1-700); --step-indicator-square-completed-border-color: var(--THEME1-600); --step-indicator-square-completed-hover-border-color: var(--THEME1-700); --step-indicator-line-color: var(--step-indicator-square-border-color); --step-indicator-line-active-color: var(--step-indicator-square-border-color); --step-indicator-line-completed-color: var(--THEME1-600); --step-indicator-label-color: var(--TEXT-COLOR-LIGHT); --step-indicator-label-active-color: var(--TEXT-COLOR); --step-indicator-label-completed-color: var(--TEXT-COLOR); --step-indicator-label-highlight-color: var(--THEME1-600); } /** * STEP INDICATOR * ------------------------------------------------------------------- */ .m-step-indicator { display: flex; } @media screen and (max-width: 45rem) { .m-step-indicator { padding-bottom: var(--SPACER); position: relative; } } .m-step-indicator li { counter-increment: steps; } @media screen and (min-width: 45rem) { .m-step-indicator li { flex: 1 1 0; } } .m-step-indicator li:last-child .m-step-indicator__number:after { content: none; } @media screen and (max-width: 45rem) { .m-step-indicator li:not(:last-child) { flex-grow: 1; } } .m-step-indicator li.is-incompleted a { --step-indicator-square-color: var(--step-indicator-square-active-color); --step-indicator-square-bg-color: var(--step-indicator-square-active-bg-color); --step-indicator-square-border-color: var(--step-indicator-square-active-border-color); --step-indicator-line-color: var(--step-indicator-line-active-color); } .m-step-indicator li.is-incompleted a:hover, .m-step-indicator li.is-incompleted a:active, .m-step-indicator li.is-incompleted a:focus { --step-indicator-square-bg-color: var(--step-indicator-square-hover-bg-color); } .m-step-indicator li.is-active { --step-indicator-square-color: var(--step-indicator-square-active-color); --step-indicator-square-bg-color: var(--step-indicator-square-active-bg-color); --step-indicator-square-border-color: var(--step-indicator-square-active-border-color); --step-indicator-line-color: var(--step-indicator-line-active-color); --step-indicator-label-color: var(--step-indicator-label-active-color); } .m-step-indicator li.is-active .m-step-indicator__number { font-weight: var(--FONT-WEIGHT-BOLD); } .m-step-indicator li.is-active .m-step-indicator__label { display: block; font-size: 1rem; font-weight: var(--FONT-WEIGHT-BOLD); } .m-step-indicator li.is-completed { --step-indicator-square-color: var(--step-indicator-square-completed-color); --step-indicator-square-bg-color: var(--step-indicator-square-completed-bg-color); --step-indicator-square-border-color: var(--step-indicator-square-completed-border-color); --step-indicator-line-color: var(--step-indicator-line-completed-color); --step-indicator-label-color: var(--step-indicator-label-completed-color); } .m-step-indicator li.is-completed a:hover, .m-step-indicator li.is-completed a:active, .m-step-indicator li.is-completed a:focus { --step-indicator-square-bg-color: var(--step-indicator-square-completed-hover-bg-color); --step-indicator-square-border-color: var(--step-indicator-square-completed-hover-border-color); } .m-step-indicator li.is-completed .m-step-indicator__number { font-weight: var(--FONT-WEIGHT-BOLD); } .m-step-indicator li.is-incompleted a, .m-step-indicator li.is-completed a { --step-indicator-label-color: var(--step-indicator-label-highlight-color); } @media screen and (min-width: 45rem) { .m-step-indicator li.is-incompleted a:hover .m-step-indicator__label, .m-step-indicator li.is-incompleted a:active .m-step-indicator__label, .m-step-indicator li.is-incompleted a:focus .m-step-indicator__label, .m-step-indicator li.is-completed a:hover .m-step-indicator__label, .m-step-indicator li.is-completed a:active .m-step-indicator__label, .m-step-indicator li.is-completed a:focus .m-step-indicator__label { text-decoration: underline; } } .m-step-indicator li a { text-decoration: none; } .m-step-indicator li a .m-step-indicator__number { font-weight: var(--FONT-WEIGHT-BOLD); } .m-step-indicator li a:focus { outline: none; } .m-step-indicator li a:focus .m-step-indicator__number:before { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } /** * STEP INDICATOR ELEMENTS * ------------------------------------------------------------------- */ .m-step-indicator__number { display: block; position: relative; } .m-step-indicator__number:before { align-items: center; background-color: var(--step-indicator-square-bg-color); border: var(--BORDER-WIDTH) solid var(--step-indicator-square-border-color); border-radius: var(--BORDER-RADIUS); color: var(--step-indicator-square-color); content: counter(steps); display: flex; font-size: 1rem; height: var(--step-indicator-square-size); justify-content: center; position: relative; transition: background-color var(--ANIMATION-NORMAL); width: var(--step-indicator-square-size); } .m-step-indicator__number:after { background-color: var(--step-indicator-line-color); content: ""; height: var(--BORDER-WIDTH); left: var(--step-indicator-square-size); position: absolute; top: calc(var(--step-indicator-square-size) / 2 - var(--BORDER-WIDTH) / 2); width: calc(100% - var(--step-indicator-square-size)); } .m-step-indicator__label { color: var(--step-indicator-label-color); display: block; font-size: 0.875rem; } @media screen and (max-width: 45rem) { .m-step-indicator__label { bottom: 0; display: none; left: 0; position: absolute; } } @media screen and (min-width: 45rem) { .m-step-indicator__label { margin-top: var(--SPACER-XXS); padding-right: var(--SPACER-XXS); } } /** * TAG VARIABLES * ------------------------------------------------------------------- */ .m-tag { --tag-height: var(--SPACER-L); --tag-color: #424242; --tag-bg-color: var(--BG-COLOR-LIGHT); --tag-border-color: var(--BORDER-COLOR); } /** * TAGS * ------------------------------------------------------------------- */ .m-tag { align-items: center; background-color: var(--tag-bg-color); border-radius: var(--tag-height); border: var(--BORDER-WIDTH) solid var(--tag-border-color); display: inline-flex; height: var(--tag-height); justify-content: center; overflow: hidden; padding-left: var(--SPACER-XS); transition-duration: var(--ANIMATION-DURATION); transition-property: background, border-color; transition-timing-function: var(--ANIMATION-EASING); } button.m-tag { --tag-color: var(--THEME1-600); --tag-bg-color: var(--BG-COLOR-LIGHT); --tag-border-color: var(--THEME1-600); cursor: pointer; margin: 0; padding: 0 0 0 var(--SPACER-XS); } button.m-tag:hover, button.m-tag:active, button.m-tag:focus { --tag-bg-color: var(--THEME1-100); } button.m-tag[aria-pressed=true] { --tag-color: var(--TEXT-COLOR-INVERTED); --tag-bg-color: var(--THEME1-600); --tag-border-color: var(--THEME1-600); } button.m-tag[aria-pressed=true]:hover, button.m-tag[aria-pressed=true]:active, button.m-tag[aria-pressed=true]:focus { --tag-bg-color: var(--THEME1-700); --tag-border-color: var(--THEME1-700); } /** * TAGS ELEMENTS * ------------------------------------------------------------------- */ .m-tag__icon, .m-tag__button { color: var(--tag-color); transition: color var(--ANIMATION-NORMAL); } .m-tag__icon .ai, .m-tag__button .ai { font-size: 0.75rem; } .m-tag__label { color: var(--tag-color); font-size: 0.875rem; font-weight: var(--FONT-WEIGHT-BOLD); line-height: normal; margin: 0 var(--SPACER-S) 0 var(--SPACER-3XS); max-width: calc(var(--SPACER) * 10); transition: color var(--ANIMATION-NORMAL); } .m-tag__button { background: transparent; border-radius: 100%; border: none; color: var(--tag-color); cursor: pointer; height: 2rem; padding: 0; width: 2rem; } .m-tag__icon + .m-tag__label { margin-left: var(--SPACER-XXS); } .m-tag__label + .m-tag__button { margin-left: calc(var(--SPACER-S) * -1); } /** * TAGS MODIFIERS * ------------------------------------------------------------------- */ .m-tag.is-clickable { cursor: pointer; } .m-tag.is-clickable:hover, .m-tag.is-clickable:active, .m-tag.is-clickable:focus { --tag-color: var(--TEXT-COLOR); --tag-bg-color: var(--BG-COLOR); } /** * UPLOAD VARIABLES * ------------------------------------------------------------------- */ .m-upload { --upload-color: var(--TEXT-COLOR); --upload-bg-color: var(--BG-COLOR-LIGHT); --upload-hover-bg-color: var(--THEME1-100); --upload-border-color: var(--THEME1-600); --upload-disabled-color: var(--STATE-DISABLED); --upload-disabled-bg-color: var(--BG-COLOR); --upload-disabled-border-color: var(--upload-disabled-color); --upload-focus-border-color: var(--THEME1-100); --upload-file-color: var(--TEXT-COLOR); --upload-file-bg-color: var(--BG-COLOR); --upload-file-danger-color: var(--STATE-DANGER); } /** * UPLOAD * ------------------------------------------------------------------- */ .m-upload.is-disabled .m-upload__dropzone { border-color: var(--upload-disabled-border-color); cursor: not-allowed; } .m-upload.is-disabled .m-upload__dropzone, .m-upload.is-disabled .m-upload__dropzone:active, .m-upload.is-disabled .m-upload__dropzone:hover, .m-upload.is-disabled .m-upload__dropzone:focus { background-color: var(--upload-disabled-bg-color); } .m-upload.is-disabled .m-upload__input { cursor: not-allowed; } .m-upload.is-disabled .m-upload__content { color: var(--upload-disabled-color); } /** * UPLOAD ELEMENTS * ------------------------------------------------------------------- */ .m-upload__inner { display: flex; flex-direction: row; } .m-upload__dropzone { align-items: center; background-color: var(--upload-bg-color); border: calc(var(--BORDER-WIDTH) * 2) dashed var(--upload-border-color); border-radius: var(--BORDER-RADIUS); color: var(--upload-color); cursor: pointer; display: flex; justify-content: center; min-height: calc(var(--SPACER) * 5); padding: var(--SPACER-L) var(--SPACER); position: relative; text-align: center; transition: background var(--ANIMATION-NORMAL); width: 100%; } .m-upload__dropzone:active, .m-upload__dropzone:hover, .m-upload__dropzone:focus { background-color: var(--upload-hover-bg-color); } .m-upload__button { position: relative; } .m-upload__input { bottom: 0; cursor: pointer; height: 100%; left: 0; opacity: 0.01; position: absolute; right: 0; top: 0; width: 100%; } .m-upload__input:focus + .m-upload__content:before { content: ""; } .m-upload__content { max-width: calc(var(--SPACER) * 15); width: 100%; } .m-upload__content:before { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; bottom: -0.1875rem; cursor: pointer; left: -0.1875rem; position: absolute; right: -0.1875rem; top: -0.1875rem; z-index: -1; } .m-upload__description { display: block; margin-top: var(--SPACER-XS); } .m-upload__files { margin-top: var(--SPACER); } .m-upload__files > li { background-color: var(--upload-file-bg-color); border-radius: var(--BORDER-RADIUS); color: var(--upload-file-color); line-height: var(--LINE-HEIGHT-PARAGRAPH); min-height: var(--SPACER-L); padding: var(--SPACER-XXS) var(--SPACER-XL) var(--SPACER-XXS) var(--SPACER-XL); position: relative; } .m-upload__files > li:not(:last-child) { margin-bottom: var(--SPACER-XS); } .m-upload__files > li > .ai { left: var(--SPACER-S); position: absolute; top: calc(var(--SPACER) / 4 * 3); transform: translateY(-50%); } .m-upload__files .m-upload__delete { position: absolute; right: 0; top: 0; } .m-upload__files .m-upload__delete.a-button { --btn-hover-color: var(--TEXT-COLOR); --btn-bg-color: transparent; } .m-upload__files .m-upload__delete.a-button.a-button--danger { --btn-hover-color: var(--DANGER-700); --btn-hover-bg-color: transparent; } .m-upload__filename, .m-upload__error { display: block; } .m-upload__error { color: var(--upload-file-danger-color); } /** * ORGANISMS * ------------------------------------------------------------------- */ /** * ARTICLE VARIABLES * ------------------------------------------------------------------- */ .o-article { --article-h1-margin: var(--SPACER-XXL) 0 var(--SPACER); --article-h2-margin: var(--SPACER-XL) 0 var(--SPACER-S); --article-h3-margin: var(--SPACER-L) 0 var(--SPACER-S); --article-h4-margin: var(--SPACER) 0 var(--SPACER-XS); --article-h5-margin: var(--SPACER) 0 var(--SPACER-XS); --article-h6-margin: var(--SPACER) 0 var(--SPACER-XS); --article-p-margin: 0 0 var(--SPACER-XS); --article-ul-margin: 0 0 var(--SPACER-S); --article-ol-margin: 0 0 var(--SPACER-3XS); --article-li-margin: 0 0 var(--SPACER-3XS); } /** * ARTICLE * ------------------------------------------------------------------- */ .o-article h1, .o-article h2, .o-article h3 { -webkit-hyphens: auto; hyphens: auto; } .o-article h1 { margin: var(--article-h1-margin); } .o-article h2 { margin: var(--article-h2-margin); } .o-article h3 { margin: var(--article-h3-margin); } .o-article h4 { margin: var(--article-h4-margin); } .o-article h5 { margin: var(--article-h5-margin); } .o-article h6 { margin: var(--article-h6-margin); } .o-article p { margin: var(--article-p-margin); } .o-article ul li, .o-article ol li { margin: var(--article-li-margin); } .o-article ul ul, .o-article ul ol, .o-article ol ul, .o-article ol ol { margin: 0; padding-left: var(--SPACER); } .o-article ul { margin: var(--article-ul-margin); } .o-article ol { margin: var(--article-ol-margin); } .o-article > :first-child { margin-top: 0; } /** * FOOTER VARIABLES * ------------------------------------------------------------------- */ .o-footer { --footer-bg: #000; --footer-color: var(--BG-COLOR-LIGHT); } /** * FOOTER * ------------------------------------------------------------------- */ .o-footer { align-items: center; background-color: var(--footer-bg); display: flex; flex: 0 0 auto; height: var(--SPACER-XL); justify-content: center; position: relative; text-align: center; } .o-footer .o-footer__button { border-radius: 0; } @media screen and (min-width: 45rem) { .o-footer .o-footer__button { bottom: 0; position: absolute; right: 0; } } /** * FOOTER ELEMENTS * ------------------------------------------------------------------- */ .o-footer__label { color: var(--footer-color); font-size: 0.875rem; line-height: var(--LINE-HEIGHT-PARAGRAPH); padding: 0 var(--SPACER-XS); } @media screen and (max-width: 45rem) { .o-footer__label { flex: 1 1 auto; } } @media screen and (min-width: 45rem) { .o-footer__label { padding: 0 var(--SPACER-XXL); } } .o-footer__label a { color: inherit; text-decoration: underline; } .o-footer__label a:hover, .o-footer__label a:active, .o-footer__label a:focus { text-decoration: none; } /** * HEADER VARIABLES * ------------------------------------------------------------------- * This component has shared variables with _organisms.navigation-menu.scss. You can find them in _quarks.css-properties.scss. */ .o-header { --header-height: var(--shared-header-height); --header-bg-color: var(--BG-COLOR-LIGHT); --header-border: var(--BORDER-COLOR); } /** * HEADER * ------------------------------------------------------------------- */ .o-header { background-color: var(--header-bg-color); border-bottom: var(--BORDER-WIDTH) solid var(--header-border); box-sizing: content-box; height: var(--header-height); position: relative; } .o-header *, .o-header *:after, .o-header *:before { box-sizing: border-box; } /** * HEADER LAYOUT * ------------------------------------------------------------------- */ .o-header__content-wrapper { display: flex; flex-wrap: wrap; height: 100%; justify-content: flex-end; } .o-header__content { flex: 1; height: 100%; } .o-header__menu-items { display: flex; justify-content: flex-end; } /** * HEADER ELEMENTS * ------------------------------------------------------------------- */ .o-header__button { border-left: var(--BORDER-WIDTH) solid var(--header-border); } .o-header__button, .o-header__button .a-avatar { border-radius: 0; } .o-header__button-skip { cursor: default; opacity: 0; position: absolute; transform: translateY(calc(var(--header-height) * -1)); z-index: 9; } .o-header__button-skip:focus { cursor: pointer; opacity: 1; transform: translateY(0); } .o-header__logo { margin-top: var(--BORDER-WIDTH); position: absolute; top: var(--header-height); } .o-header__logo img { height: calc(var(--SPACER) * 3); } /** * NAVIGATION MENU VARIABLES * ------------------------------------------------------------------- * This component has shared variables with _organisms.header.scss. You can find them in _quarks.css-properties.scss. */ .o-menu { --navigation-menu-border-color: var(--BORDER-COLOR); --navigation-menu-mobile-height: var(--SPACER-XXL); --navigation-menu-pane-width: 20rem; --navigation-menu-undocked-width: 15rem; --navigation-menu-docked-width: var(--shared-header-height); --navigation-menu-submenu-inset: var(--SPACER-XS); --navigation-menu-submenu-height: calc(var(--navigation-menu-undocked-width) * 2); --navigation-menu-animation-speed: var(--ANIMATION-DURATION); } /** * NAVIGATION MENU * ------------------------------------------------------------------- */ .o-menu { background: var(--BG-COLOR-LIGHT); width: 100%; z-index: 7; } @media screen and (min-width: 45rem) { .o-menu { border-right: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); min-width: var(--navigation-menu-undocked-width); overflow-x: hidden; overflow-y: auto; position: initial; top: 0; transition: width min-width var(--ANIMATION-EASING) var(--navigation-menu-animation-speed); width: var(--navigation-menu-undocked-width); } .o-menu a { border: none; } .o-menu.is-docked { min-width: var(--navigation-menu-docked-width); overflow: visible; width: var(--navigation-menu-docked-width); } .o-menu.is-docked .o-menu__tabs-wrapper { box-shadow: none; } .o-menu.is-docked .o-menu__tab { width: calc(var(--navigation-menu-docked-width) - var(--BORDER-WIDTH)); } .o-menu.is-docked .o-menu__tab .o-menu__tab-wrapper:not(.is-active) { overflow: hidden; } .o-menu.is-docked .o-menu__submenu { left: var(--navigation-menu-docked-width); position: absolute; top: calc(var(--BORDER-WIDTH) * -1); } .o-menu.is-docked .o-menu__submenu .o-menu__submenu { left: 100%; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper { box-shadow: var(--BOX-SHADOW); max-height: inherit; transition: width var(--ANIMATION-EASING); width: 0; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list { border: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); border-bottom: none; border-left: none; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list .o-menu__submenu-list { border-left: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li .o-menu__icon { transform: rotate(-90deg); } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li a { border-bottom: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); padding-left: var(--SPACER-XS); } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper { width: var(--navigation-menu-undocked-width); } } .o-menu .o-menu__link, .o-menu .o-menu__submenu-list a { white-space: nowrap; } .o-menu .o-menu__link, .o-menu .o-menu__link:active, .o-menu .o-menu__link:link, .o-menu .o-menu__link:hover, .o-menu .o-menu__submenu-list a, .o-menu .o-menu__submenu-list a:active, .o-menu .o-menu__submenu-list a:link, .o-menu .o-menu__submenu-list a:hover { color: var(--TEXT-COLOR-LIGHT); text-decoration: none; } .o-menu > .o-menu__tabs-wrapper { align-content: space-between; align-items: center; background: var(--BG-COLOR-LIGHT); border-top: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); display: flex; position: relative; width: 100%; z-index: 9; } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n+3):not(:last-child) { display: none; } @media screen and (min-width: 45rem) { .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n+3):not(:last-child) { display: block; } } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n+3):last-child { display: block; } @media screen and (min-width: 45rem) { .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n+3):last-child { display: none; } } @media screen and (min-width: 45rem) { .o-menu > .o-menu__tabs-wrapper { flex-direction: column; height: auto; width: auto; z-index: 6; } } .o-menu .o-menu__tab { border-right: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); cursor: pointer; flex-basis: 33%; flex-grow: 1; height: 100%; position: relative; width: 33%; } .o-menu .o-menu__tab:last-child { border-right: none; } .o-menu .o-menu__tab.is-active .o-menu__tab-wrapper { overflow-y: auto; } .o-menu .o-menu__tab.is-active .o-menu__submenu-icon { transform: rotate(180deg); } .o-menu .o-menu__tab.is-active > .o-menu__tab-wrapper > .o-menu__submenu > .o-menu__submenu-content-wrapper:first-of-type { display: block; max-height: var(--navigation-menu-submenu-height); overflow: visible; } @media screen and (min-width: 45rem) { .o-menu .o-menu__tab { border-bottom: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); border-right: none; width: 100%; } } .o-menu .o-menu__tab > .o-menu__tab-wrapper { overflow: hidden; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header { align-items: center; color: var(--TEXT-COLOR-LIGHT); display: flex; flex-direction: column; font-weight: bold; height: var(--navigation-menu-mobile-height); justify-content: center; text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: background, color; transition-timing-function: var(--ANIMATION-EASING); } @supports (margin-bottom: env(safe-area-inset-bottom)) { .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header { margin-bottom: env(safe-area-inset-bottom); } } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:hover, .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:active, .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:hover { background-color: var(--BG-COLOR); color: var(--TEXT-COLOR-LIGHT); } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__tab-title { align-items: center; display: flex; flex-direction: column; text-align: center; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon { font-size: 1.375rem; margin-bottom: var(--SPACER-XXS); } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__tab-icon { width: 1.75rem; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__submenu-icon { display: none; font-size: 1rem; transition: transform var(--navigation-menu-animation-speed) ease; } @media screen and (min-width: 45rem) { .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__submenu-icon { display: inline; } } @media screen and (min-width: 45rem) { .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon { margin-bottom: 0; } } @media screen and (min-width: 45rem) { .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header { align-items: center; flex-direction: row; height: var(--shared-header-height); justify-content: space-between; padding: 0.625rem; position: relative; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__link { margin-left: var(--SPACER-S); } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__tab-title { align-items: center; display: flex; flex-direction: row; } } .o-menu .o-menu__submenu { display: none; } .o-menu .o-menu__submenu .u-cursor-pointer { cursor: pointer; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper { background: var(--BG-COLOR-LIGHT); display: none; max-height: 0; overflow: hidden; transition: max-height var(--ANIMATION-EASING) var(--navigation-menu-animation-speed); } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list { border: none; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li { position: relative; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li > a { border: none; color: var(--TEXT-COLOR-LIGHT); display: flex; justify-content: space-between; overflow: hidden; white-space: nowrap; } @media screen and (min-width: 45rem) { .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li > a { padding-left: calc(var(--navigation-menu-docked-width) + var(--navigation-menu-submenu-inset)); padding-right: var(--SPACER-3XS); } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li > a a { border: none; } } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .o-menu__submenu-list li > a > .o-menu__icon { transform: rotate(0deg); } @media screen and (min-width: 45rem) { .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li > a > .o-menu__icon { margin-right: var(--SPACER-3XS); transform: rotate(0deg); transition: transform var(--navigation-menu-animation-speed) var(--ANIMATION-EASING); } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li.is-active > .o-menu__submenu > .o-menu__submenu-content-wrapper { display: block; max-height: var(--navigation-menu-submenu-height); overflow: visible; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li.is-active > a > .o-menu__icon { transform: rotate(180deg); } } .o-menu .o-menu__submenu .o-menu__submenu-list li .o-menu__submenu li > a { padding-left: calc(var(--navigation-menu-docked-width) + var(--navigation-menu-submenu-inset) * 2); } @media screen and (min-width: 45rem) { .o-menu .o-menu__submenu { display: block; } } .o-menu__submenu-list { border-top: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); } .o-menu__submenu-list > li { font-weight: var(--FONT-WEIGHT-BOLD); line-height: var(--LINE-HEIGHT-PARAGRAPH); text-align: center; } .o-menu__submenu-list > li > a, .o-menu__submenu-list > li > button { align-items: center; background: var(--BG-COLOR-LIGHT); border: none; border-bottom: var(--BORDER-WIDTH) solid var(--navigation-menu-border-color); color: inherit; display: flex; flex: 1 1 auto; min-height: calc(var(--SPACER-XL) + var(--BORDER-WIDTH)); text-decoration: none; transition-duration: var(--ANIMATION-DURATION); transition-property: background, color; transition-timing-function: var(--ANIMATION-EASING); } .o-menu__submenu-list > li > a:hover, .o-menu__submenu-list > li > a:active, .o-menu__submenu-list > li > button:hover, .o-menu__submenu-list > li > button:active { background-color: var(--BG-COLOR); } .o-menu__submenu-list > li > a > .ai, .o-menu__submenu-list > li > button > .ai { display: inline-block; margin-right: var(--SPACER-XS); } .o-menu__submenu-list > li > button { cursor: pointer; width: 100%; } .o-menu > .o-menu__hide-cta { display: none; } @media screen and (min-width: 45rem) { .o-menu > .o-menu__hide-cta { display: block; padding: 1rem var(--SPACER-XS); text-align: right; } .o-menu > .o-menu__hide-cta > a { text-decoration: none; } } .o-menu > .o-menu__navigation-pane { background: var(--BG-COLOR-LIGHT); max-height: calc(100vh - var(--navigation-menu-mobile-height)); position: absolute; top: 0; transition: transform var(--navigation-menu-animation-speed) ease; width: 100%; z-index: 8; } .o-menu > .o-menu__navigation-pane .o-navigation-pane__overlay { background: var(--OVERLAY-COLOR); bottom: 100%; height: 0; opacity: 0; position: absolute; transition: opacity calc(var(--navigation-menu-animation-speed) * 2) ease; width: 100vh; } .o-menu > .o-menu__navigation-pane .o-navigation-pane__wrapper { background: var(--BG-COLOR-LIGHT); box-shadow: 0 -0.75rem 0 var(--BOX-SHADOW-COLOR); margin-bottom: calc(var(--BORDER-WIDTH) * -1); max-height: calc(100vh - var(--shared-header-height) - var(--navigation-menu-mobile-height)); min-height: var(--SPACER); overflow-y: scroll; position: relative; } .o-menu > .o-menu__navigation-pane .o-menu__main-submenu .o-menu__back-link, .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu .o-menu__back-link { color: var(--TEXT-COLOR-LIGHT); font-weight: normal; } .o-menu > .o-menu__navigation-pane .o-menu__main-submenu li > a > .o-menu__icon, .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu li > a > .o-menu__icon { float: right; transform: rotate(-90deg); } .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu { background: var(--BG-COLOR-LIGHT); bottom: 0; height: 0; left: 0; overflow: hidden; position: absolute; transform: translateX(100%); transition: transform var(--navigation-menu-animation-speed) ease; width: 100%; } .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu.is-visible { height: auto; overflow: inherit; transform: translateX(0); } .o-menu > .o-menu__navigation-pane.is-visible { transform: translateY(-100%); } .o-menu > .o-menu__navigation-pane.is-visible > .o-navigation-pane__overlay { min-height: 100vh; opacity: 0.8; } @media screen and (min-width: 45rem) { .o-menu > .o-menu__navigation-pane { display: none; } } /** * SLIDESHOW VARIABLES * ------------------------------------------------------------------- * This component has shared variables with _molecules.overlay.scss. You can find them in _quarks.css-properties.scss. */ .o-slideshow { --slideshow-max-height: 37.5rem; --slideshow-bg-color: #141414; --slideshow-footer-color: var(--TEXT-COLOR); --slideshow-footer-color-light: var(--shared-slideshow-footer-color-light); } /** * SLIDESHOW * ------------------------------------------------------------------- */ .o-slideshow { max-height: var(--slideshow-max-height); } /** * SLIDESHOW ELEMENTS * ------------------------------------------------------------------- */ .o-slideshow__inner { max-height: inherit; position: relative; } .o-slideshow__slides { max-height: inherit; } .o-slideshow__slide { display: none; max-height: inherit; } .o-slideshow__slide.is-active { display: block; } .o-slideshow__image { align-items: center; background-color: var(--slideshow-bg-color); display: flex; flex-direction: column; justify-content: center; max-height: inherit; position: relative; } .o-slideshow__image .a-image { align-self: center; max-height: inherit; } .o-slideshow__image .a-image img { max-height: inherit; } .o-slideshow__prev, .o-slideshow__next { top: 50%; transform: translateY(-50%); z-index: 1; } @media screen and (min-width: 45rem) { .o-slideshow__prev, .o-slideshow__next { font-size: var(--SPACER); } } @media screen and (min-width: 75rem) { .o-slideshow__prev, .o-slideshow__next { font-size: var(--SPACER-L); } } .o-slideshow__prev.has-icon, .o-slideshow__next.has-icon { position: absolute; } .o-slideshow__prev.has-icon svg, .o-slideshow__next.has-icon svg { filter: drop-shadow(0 0 2px var(--OVERLAY-COLOR)); } .o-slideshow__prev, .o-slideshow__prev:hover, .o-slideshow__prev:active, .o-slideshow__prev:focus, .o-slideshow__next, .o-slideshow__next:hover, .o-slideshow__next:active, .o-slideshow__next:focus { background: transparent; box-shadow: none; } .o-slideshow__prev .ai, .o-slideshow__next .ai { font-size: inherit; } .o-slideshow__prev { left: 0; } @media screen and (min-width: 62rem) { .o-slideshow__prev.o-slideshow__prev--outside { left: calc(var(--SPACER-XL) * -1); } } @media screen and (min-width: 75rem) { .o-slideshow__prev.o-slideshow__prev--outside { left: calc(var(--SPACER-XL) / -3 * 4); } } .o-slideshow__next { right: 0; } @media screen and (min-width: 62rem) { .o-slideshow__next.o-slideshow__next--outside { right: calc(var(--SPACER-XL) * -1); } } @media screen and (min-width: 75rem) { .o-slideshow__next.o-slideshow__next--outside { right: calc(var(--SPACER-XL) / -3 * 4); } } .o-slideshow__footer { color: var(--slideshow-footer-color); } .o-slideshow__counter { font-weight: var(--FONT-WEIGHT-BOLD); margin-right: var(--SPACER-XS); } /** * SLIDESHOW MODIFIERS * ------------------------------------------------------------------- */ .o-slideshow--transparent .o-slideshow__image { background-color: transparent; } /** * TAG LIST * ------------------------------------------------------------------- */ .o-tag-list { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--SPACER-XXS) * -1); } /** * TAG LIST ELEMENTS * ------------------------------------------------------------------- */ .o-tag-list__item { margin-bottom: var(--SPACER-XXS); } .o-tag-list__item:not(:last-child) { margin-right: var(--SPACER-XXS); } /** * AUI styling for dynamic components * ------------------------------------------------------------------- */ /** * AUI HERO * ------------------------------------------------------------------- */ .o-hero { align-items: center; background: var(--BG-COLOR); display: flex; height: calc(var(--SPACER) * 8); } .o-hero__card { flex: 1 1 auto; padding-left: var(--SPACER-XL); } .o-hero__cta { padding-right: var(--SPACER-XL); } /** * AUI ITEM COUNTER * ------------------------------------------------------------------- */ .m-items-per-page .a-input .a-input__wrapper { display: inline-block; margin-right: var(--SPACER-XS); } /** * AUI LEAFLET * ------------------------------------------------------------------- */ .o-leaflet { border: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); display: flex; height: 37.5rem; max-height: 80vh; min-height: 12.5rem; width: 100%; } .o-leaflet__wrapper { flex: 1; height: 100%; overflow: hidden; position: relative; } .o-leaflet__map { font-family: inherit; font-size: inherit; height: 100%; position: relative; z-index: 1; } .o-leaflet__content { background-color: var(--BG-COLOR-LIGHT); overflow: auto; width: 0; } .o-leaflet__content.has-content { border-right: solid var(--BORDER-WIDTH) var(--BORDER-COLOR); padding: var(--SPACER-S); width: 18.75rem; } .o-leaflet__controls { position: absolute; z-index: 2; } .o-leaflet__controls--bottom-left { bottom: var(--SPACER-S); left: var(--SPACER-S); } .o-leaflet__controls--bottom-right { bottom: var(--SPACER-S); right: var(--SPACER-S); } .o-leaflet__controls--top-left { left: var(--SPACER-S); top: var(--SPACER-S); } .o-leaflet__controls--top-right { right: var(--SPACER-S); top: var(--SPACER-S); } .o-leaflet__controls--top-left .o-leaflet__control, .o-leaflet__controls--top-right .o-leaflet__control { margin-bottom: var(--SPACER-3XS); } .o-leaflet__controls--bottom-left .o-leaflet__control, .o-leaflet__controls--bottom-right .o-leaflet__control { margin-top: var(--SPACER-3XS); } .o-leaflet__controls--bottom-left .o-leaflet__control, .o-leaflet__controls--top-left .o-leaflet__control { margin-right: var(--SPACER-3XS); } .o-leaflet__controls--bottom-right .o-leaflet__control, .o-leaflet__controls--top-right .o-leaflet__control { margin-left: var(--SPACER-3XS); } .o-leaflet__control { float: left; } .o-leaflet__zoom-control { display: block; } .o-leaflet__html-icon { background-color: transparent; border: none; } .o-leaflet.is-full-screen { border: none; bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 10; } .o-leaflet.is-full-screen .o-leaflet__content { border: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); box-shadow: 0.75rem 0.75rem 0 var(--BOX-SHADOW-COLOR); left: var(--SPACER-S); max-height: calc(100% - 10rem); position: absolute; top: var(--SPACER-S); width: 21.875rem; z-index: 2; } .o-leaflet.is-full-screen .o-leaflet__controls--top-left { left: calc(21.875rem + 2 * var(--SPACER-XS)); } /** * LEAFLET OVERRIDES */ .leaflet-popup-content-wrapper { border: var(--BORDER-WIDTH) solid #f3f3f3 !important; border-radius: 0 !important; box-shadow: var(--SPACER-XS) var(--SPACER-XS) 0 var(--BOX-SHADOW-COLOR) !important; position: relative; } .leaflet-popup-content-wrapper:after { background-color: var(--BG-COLOR-LIGHT); bottom: -1px; content: ""; height: 1px; left: 50%; position: absolute; transform: translateX(-50%); width: var(--SPACER); } .leaflet-popup-content { font-size: 14px; margin: var(--SPACER-XS) !important; } .leaflet-container { font-family: inherit !important; } .leaflet-popup-close-button { right: var(--SPACER-3XS) !important; top: var(--SPACER-3XS) !important; z-index: 1; } /** * AUI PANE * ------------------------------------------------------------------- */ .m-pane { background-color: var(--BG-COLOR-LIGHT); height: 100%; width: 20rem; z-index: 7; } .m-pane__content { height: 100%; overflow-y: scroll; } .m-pane--left, .m-pane--right { position: absolute; transition: transform var(--ANIMATION-NORMAL); } .m-pane--left.m-pane--open, .m-pane--right.m-pane--open { transform: translate(0); } .m-pane--left { transform: translate(-100%); } .m-pane--right { transform: translate(100%); } /** * AUI SEARCH FILTER * ------------------------------------------------------------------- */ .m-search-filter__label { background: var(--BG-COLOR-LIGHT); border: var(--BORDER-WIDTH) solid var(--BORDER-COLOR); cursor: pointer; display: flex; height: var(--SPACER-XL); justify-content: center; line-height: var(--SPACER-XL); margin: 0 var(--SPACER-XS) 0 0; padding-left: var(--SPACER); } .m-search-filter__label > span:not(.ai) { margin-left: var(--SPACER-3XS); } .m-search-filter__label > .ai { color: #6f6f6f; font-size: 1.25rem; height: var(--SPACER-XL); line-height: var(--SPACER-XL); pointer-events: none; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: var(--SPACER-XL); } .m-search-filter__label.m-search-filter__label--active { background-color: var(--TEXT-COLOR); border-color: var(--TEXT-COLOR); color: var(--TEXT-COLOR-INVERTED); } .m-search-filter__label.m-search-filter__label--active > .ai { color: var(--TEXT-COLOR-INVERTED); } .m-search-filter__label.m-search-filter__label--error { background-color: var(--TEXT-COLOR); border-color: var(--TEXT-COLOR); color: var(--TEXT-COLOR-INVERTED); } .m-search-filter__label.m-search-filter__label--error > .ai { color: var(--TEXT-COLOR-INVERTED); } .m-search-filter__input { margin-bottom: 0; padding: var(--SPACER-XS); } .m-search-filter__input .a-input__wrapper { margin-right: 0; } .m-search-filter__clear { margin: 0; padding: 0 var(--SPACER-S) var(--SPACER-S); text-align: center; } .m-search-filter__search { display: flex; flex-direction: column; max-height: 50vh; } .m-search-filter__search .a-list.a-list--lined.u-list-unstyled { margin: -1px 0; } .m-search-filter__search.m-search-filter__search--scroll { overflow-y: auto; } .m-search-filter__results-title { font-size: 16px; margin: 0 var(--SPACER-XS); } .m-search-filter__results-item { cursor: pointer; } .m-search-filter__results-item .a-input__checkbox { display: flex; padding-left: calc(var(--SPACER) * 1.5); } .m-search-filter__results-item .a-input__checkbox input[type=checkbox]:checked + label:after { top: var(--SPACER-XS); } .m-search-filter__results-item .a-input__checkbox label { flex: 1; padding: var(--SPACER-XS); } .m-search-filter__results-item:hover { background-color: var(--BG-COLOR); } .m-search-filter .a-list .m-search-filter__results-item { padding: 0; } /** * AUI SIDEBAR * ------------------------------------------------------------------- */ .o-sidebar { --sidebar-width: 20rem; } /** * PANE * ------------------------------------------------------------------- */ .o-sidebar { background-color: var(--BG-COLOR-LIGHT); height: 100%; overflow: hidden; transition: width var(--ANIMATION-NORMAL); width: 0; } .o-sidebar__content { height: 100%; overflow-x: hidden; overflow-y: auto; width: var(--sidebar-width); } .o-sidebar__content--padding { padding: var(--SPACER-XL); } .o-sidebar.o-sidebar--open { width: var(--sidebar-width); } /** * AUI TABLE * ------------------------------------------------------------------- * - Column selector * - Table bar */ /** * COLUMN SELECTOR * ------------------------------------------------------------------- */ .a-table-column-selector { margin: 0 0 -1px; max-height: 70vh; overflow: auto; } .a-table-column-selector__actions { display: flex; flex-direction: column; margin-left: var(--SPACER-3XS); margin-right: 0; } .a-table-column-selector > li { align-items: center; display: flex; justify-content: space-between; padding: 0; } .a-table-column-selector > li:first-child { border-top: none; } .a-table-column-selector > li:last-child { border-bottom: none; } .a-table-column-selector > li.show { animation: fadeIn var(--ANIMATION-NORMAL); } .a-table-column-selector > li.active { background-color: var(--BG-COLOR); } /** * TABLE BAR * ------------------------------------------------------------------- */ .a-table-bar { background-color: #d8d8d8; display: flex; padding: var(--SPACER-XS); } .a-table-bar__filters { flex: 1; margin-right: var(--SPACER); min-height: var(--SPACER-XXL); overflow: hidden; } .a-table-bar__filters-show-more { margin: var(--SPACER-3XS); } .a-table-bar__filters--open { height: 100%; } .a-table-bar__item { display: inline-block; margin: var(--SPACER-3XS); } .a-table-bar__search { background: var(--BG-COLOR-LIGHT); height: 100%; margin: var(--SPACER-3XS); } /** * AUI ANIMATION * ------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }