/* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .cmp-modal-license--wrapper .cmp-content__iframe--wrapper { height: 450px !important; width: 100% !important; -webkit-flex: 1 !important; /* Safari 6.1+ */ -ms-flex: 1 !important; /* IE 10 */ flex: 1 !important; } /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* applies to all modals */ .cmp-modal .list .item i { float: left; width: 1em; } .cmp-modal .list .item .content { width: calc(100% - 2em); float: left; } .cmp-modal .list .item .content .header { text-overflow: ellipsis; overflow: hidden; } .cmp-modal .cmp-message { text-transform: unset; } .cmp-modal-download--wrapper .field.cmp-modal-download__asset-rendition-group { margin-bottom: 2rem; } .cmp-modal-download--wrapper .cmp-modal-download__asset-rendition-group-title { margin-bottom: .5rem; } .cmp-modal-download--wrapper .cmp-modal-download__asset-rendition-group-option { margin: .25rem 0; } /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .cmp-modal-share__wrapper--initial .cmp-content--loading, .cmp-modal-share__wrapper--initial .cmp-content--success, .cmp-modal-share__wrapper--initial .cmp-content--error, .cmp-modal-share__wrapper--initial .cmp-footer__actions--completed { display: none !important; } .cmp-modal-share__wrapper--initial .cmp-content--form, .cmp-modal-share__wrapper--initial .cmp-footer__actions { display: block !important; } .cmp-modal-share__wrapper--loading .cmp-content--form, .cmp-modal-share__wrapper--loading .cmp-content--success, .cmp-modal-share__wrapper--loading .cmp-content--error, .cmp-modal-share__wrapper--loading .cmp-footer__actions--completed { display: none !important; } .cmp-modal-share__wrapper--loading .cmp-content--loading { opacity: 1 !important; display: block !important; } .cmp-modal-share__wrapper--success .cmp-content--form, .cmp-modal-share__wrapper--success .cmp-content--loading, .cmp-modal-share__wrapper--success .cmp-content--error, .cmp-modal-share__wrapper--success .cmp-footer__actions { display: none !important; } .cmp-modal-share__wrapper--success .cmp-content--success, .cmp-modal-share__wrapper--success .cmp-footer__actions--completed { display: block !important; } .cmp-modal-share__wrapper--error .cmp-content--form, .cmp-modal-share__wrapper--error .cmp-content--loading, .cmp-modal-share__wrapper--error .cmp-content--success, .cmp-modal-share__wrapper--error .cmp-footer__actions { display: none !important; } .cmp-modal-share__wrapper--error .cmp-content--error, .cmp-modal-share__wrapper--error .cmp-footer__actions--completed { display: block !important; } /* * Asset Share Commons * * Copyright [2021] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .cmp-modal-downloads .ui.accordion-title { cursor: pointer; } .cmp-modal-downloads .ui.accordion-content { display: none; } .cmp-modal-downloads .ui.accordion-content.active { display: table-row; } .cmp-modal-downloads .cmp-modal-downloads__table { width: 100%; border-collapse: collapse; font-size: 1em; } .cmp-modal-downloads .cmp-modal-downloads__col--action, .cmp-modal-downloads .cmp-modal-downloads__col--total-count, .cmp-modal-downloads .cmp-modal-downloads__col--file-size { text-align: right; } .cmp-modal-downloads .cmp-modal-downloads__col--status { text-transform: uppercase; } .cmp-modal-downloads .cmp-modal-downloads__table-header { text-transform: uppercase; } .cmp-modal-downloads .cmp-modal-downloads__row-delimiter { background-color: transparent; border-width: 0; border-top: solid 1px #cccccc; } .cmp-modal-downloads .cmp-modal-downloads__artifacts { margin-left: 1.75rem; } .cmp-modal-downloads .cmp-modal-downloads__artifacts-list { padding-left: 1.5rem; color: #666; font-size: 1em; } .cmp-modal-downloads .cmp-modal-downloads__artifacts-item { padding: .25rem 0; } .cmp-modal-downloads .cmp-modal-downloads__artifacts-title { text-transform: uppercase; color: #666; font-size: 1em; } .cmp-modal-downloads .cmp-modal-downloads__artifacts-delimiter { background-color: transparent; border-width: 0; border-top: solid 1px #eee; margin-bottom: 1rem; } .cmp-modal-downloads .cmp-modal-downloads__refresh { float: right; } .cmp-modal-downloads .cmp-modal-downloads__empty-text { text-transform: uppercase; text-align: center; height: 100px; line-height: 100px; } /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* applies to all modals */ .cmp-modal .list .item i { float: left; width: 1em; } .cmp-modal .list .item .content { width: calc(100% - 2em); float: left; } .cmp-modal .list .item .content .header { text-overflow: ellipsis; overflow: hidden; } .cmp-modal .cmp-message { text-transform: unset; } .cmp-modal-download--wrapper .field.cmp-modal-download__asset-rendition-group { margin-bottom: 2rem; } .cmp-modal-download--wrapper .cmp-modal-download__asset-rendition-group-title { margin-bottom: .5rem; } .cmp-modal-download--wrapper .cmp-modal-download__asset-rendition-group-option { margin: .25rem 0; } /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .cmp-modal-cart .cmp-modal-cart__empty-text { text-transform: uppercase; text-align: center; height: 100px; line-height: 100px; } .cmp-modal-cart td { border-width: 0 !important; } .cmp-modal-cart .ui.selectable.table tr { cursor: auto; } @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin&display=swap); /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ Import this file into your LESS project to use Fomantic-UI without build tools */ /* Global */ /*! * # Fomantic-UI - Reset * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reset *******************************/ /* Packaged Theme */ /******************************* Reset *******************************/ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reset *******************************/ /* Border-Box */ *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } /* iPad Input Shadows */ input[type="text"], input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; /* mobile firefox too! */ } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /*! * # Fomantic-UI - Site * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged Theme */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Site Theme */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Page *******************************/ html, body { height: 100%; } html { font-size: 14px; } body { margin: 0; padding: 0; overflow-x: hidden; min-width: 320px; background: #F5F8FA; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4285em; color: #000000; } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: Helvetica, Arial, sans-serif; line-height: 1.28571429em; margin: calc(2rem - 0.1428571428571429em) 0 1rem; font-weight: bold; padding: 0; } h1 { min-height: 1rem; font-size: 2rem; } h2 { font-size: 1.71428571rem; } h3 { font-size: 1.28571429rem; } h4 { font-size: 1.07142857rem; } h5 { font-size: 1rem; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0; } /******************************* Text *******************************/ p { margin: 0 0 1em; line-height: 1.4285em; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } /*------------------- Links --------------------*/ a { color: #2F743C; text-decoration: none; } a:hover { color: #6EBE49; text-decoration: none; } /******************************* Scrollbars *******************************/ /******************************* Highlighting *******************************/ /* Site */ ::-webkit-selection { background-color: #CCE2FF; color: #000000; } ::-moz-selection { background-color: #CCE2FF; color: #000000; } ::selection { background-color: #CCE2FF; color: #000000; } /* Form */ textarea::-webkit-selection, input::-webkit-selection { background-color: rgba(100, 100, 100, 0.4); color: #000000; } textarea::-moz-selection, input::-moz-selection { background-color: rgba(100, 100, 100, 0.4); color: #000000; } textarea::selection, input::selection { background-color: rgba(100, 100, 100, 0.4); color: #000000; } /* Force Simple Scrollbars */ body ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; } body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0; } body ::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: rgba(0, 0, 0, 0.25); transition: color 0.2s ease; } body ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.15); } body ::-webkit-scrollbar-thumb:hover { background: rgba(128, 135, 139, 0.8); } /* Inverted UI */ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* Global Overrides *******************************/ /******************************* Site Overrides *******************************/ .image.background { background-color: #F4F4F4; } /* Elements */ /*! * # Fomantic-UI - Button * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Button *******************************/ /*------------------- Element --------------------*/ /* Button */ /* Button defaults to using same height as input globally */ /* Text */ /* Internal Shadow */ /* Box Shadow */ /* Icon */ /* Loader */ /* @willChange: box-shadow, transform, opacity, color, background; */ /*------------------- Group --------------------*/ /*------------------- States --------------------*/ /* Hovered */ /* Focused */ /* Disabled */ /* Pressed Down */ /* Active */ /* Active + Hovered */ /* Loading */ /*------------------- Types --------------------*/ /* Or */ /* Icon */ /* Labeled */ /* hypotenuse of triangle */ /* Labeled Icon */ /* Inverted */ /* Basic */ /* Basic Hover */ /* Basic Focus */ /* Basic Down */ /* Basic Active */ /* Basic Inverted */ /* Basic Group */ /*------------- Tertiary -------------*/ /* Tertiary Hover */ /* Tertiary Focus */ /* Tertiary Active */ /*------------------- Variations --------------------*/ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Packaged Theme */ /******************************* Button *******************************/ /*------------------- Element --------------------*/ /* Button */ /* Button defaults to using same height as input globally */ /* Text */ /* Internal Shadow */ /* Box Shadow */ /* Icon */ /* Loader */ /* @willChange: box-shadow, transform, opacity, color, background; */ /*------------------- Group --------------------*/ /*------------------- States --------------------*/ /* Hovered */ /* Focused */ /* Disabled */ /* Pressed Down */ /* Active */ /* Active + Hovered */ /* Loading */ /*------------------- Types --------------------*/ /* Or */ /* Icon */ /* Labeled */ /* hypotenuse of triangle */ /* Labeled Icon */ /* Inverted */ /* Basic */ /* Basic Hover */ /* Basic Focus */ /* Basic Down */ /* Basic Active */ /* Basic Inverted */ /* Basic Group */ /*------------- Tertiary -------------*/ /* Tertiary Hover */ /* Tertiary Focus */ /* Tertiary Active */ /*------------------- Variations --------------------*/ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Button *******************************/ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: baseline; background: #E0E1E2 none; color: rgba(0, 0, 0, 0.6); font-family: Helvetica, Arial, sans-serif; margin: 0 0.25em 0 0; padding: 0.833em 1.5em 0.833em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.28571429rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; user-select: none; transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.button:hover { background-color: #CACBCD; background-image: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8); } .ui.button:hover .icon { opacity: 0.85; } /*-------------- Focus ---------------*/ .ui.button:focus { background-color: #CACBCD; color: rgba(0, 0, 0, 0.8); background-image: none; box-shadow: ''; } .ui.button:focus .icon { opacity: 0.85; } /*-------------- Down ---------------*/ .ui.button:active, .ui.active.button:active { background-color: #BABBBC; background-image: ''; color: rgba(0, 0, 0, 0.9); box-shadow: 0 0 0 1px transparent inset, none; } /*-------------- Active ---------------*/ .ui.active.button { background-color: #C0C1C2; background-image: none; box-shadow: 0 0 0 1px transparent inset; color: rgba(0, 0, 0, 0.95); } .ui.active.button:hover { background-color: #C0C1C2; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.button:active { background-color: #C0C1C2; background-image: none; } /*-------------- Loading ---------------*/ /* Specificity hack */ .ui.loading.loading.loading.loading.loading.loading.button { position: relative; cursor: default; text-shadow: none !important; color: transparent; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.15); } .ui.loading.button:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; animation: loader 0.6s infinite linear; border: 0.2em solid currentColor; color: #FFFFFF; box-shadow: 0 0 0 1px transparent; } /******************************* Types *******************************/ /*------------------- Labeled Button --------------------*/ .ui.labeled.button:not(.icon) { display: inline-flex; flex-direction: row; background: none; padding: 0 !important; border: none; box-shadow: none; } .ui.labeled.button > .button { margin: 0; } .ui.labeled.button > .label { display: flex; align-items: center; margin: 0 0 0 -1px !important; font-size: 1em; padding: ''; border-color: rgba(34, 36, 38, 0.15); } /* Tag */ .ui.labeled.button > .tag.label:before { width: 1.85em; height: 1.85em; } /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.labeled.button:not([class*="left labeled"]) > .label { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Left Side */ .ui[class*="left labeled"].button > .button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui[class*="left labeled"].button > .label { border-top-right-radius: 0; border-bottom-right-radius: 0; } /*-------------- Icon ---------------*/ .ui.button > .icon:not(.button) { height: auto; opacity: 0.8; margin: 0 0.42857143em 0 -0.21428571em; transition: opacity 0.1s ease; vertical-align: ''; color: ''; } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown), .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { margin: 0 0.42857143em 0 -0.21428571em; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { margin: 0 -0.21428571em 0 0.42857143em; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ .ui.buttons .button, .ui.buttons .or, .ui.button { font-size: 1rem; } /*-------------- Icon Only ---------------*/ .ui.icon.buttons .button, .ui.icon.button { padding: 0.833em 0.833em 0.833em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: 0.9; margin: 0 !important; vertical-align: top; } /*------------------- Fluid --------------------*/ .ui.fluid.buttons, .ui.fluid.button { width: 100%; } .ui.fluid.button { display: block; } .ui.two.buttons { width: 100%; } .ui.two.buttons > .button { width: 50%; } .ui.three.buttons { width: 100%; } .ui.three.buttons > .button { width: 33.333%; } .ui.four.buttons { width: 100%; } .ui.four.buttons > .button { width: 25%; } .ui.five.buttons { width: 100%; } .ui.five.buttons > .button { width: 20%; } .ui.six.buttons { width: 100%; } .ui.six.buttons > .button { width: 16.666%; } .ui.seven.buttons { width: 100%; } .ui.seven.buttons > .button { width: 14.285%; } .ui.eight.buttons { width: 100%; } .ui.eight.buttons > .button { width: 12.5%; } .ui.nine.buttons { width: 100%; } .ui.nine.buttons > .button { width: 11.11%; } .ui.ten.buttons { width: 100%; } .ui.ten.buttons > .button { width: 10%; } .ui.eleven.buttons { width: 100%; } .ui.eleven.buttons > .button { width: 9.09%; } .ui.twelve.buttons { width: 100%; } .ui.twelve.buttons > .button { width: 8.3333%; } /* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button { display: flex; width: auto; justify-content: center; } .ui.two.vertical.buttons > .button { height: 50%; } .ui.three.vertical.buttons > .button { height: 33.333%; } .ui.four.vertical.buttons > .button { height: 25%; } .ui.five.vertical.buttons > .button { height: 20%; } .ui.six.vertical.buttons > .button { height: 16.666%; } .ui.seven.vertical.buttons > .button { height: 14.285%; } .ui.eight.vertical.buttons > .button { height: 12.5%; } .ui.nine.vertical.buttons > .button { height: 11.11%; } .ui.ten.vertical.buttons > .button { height: 10%; } .ui.eleven.vertical.buttons > .button { height: 9.09%; } .ui.twelve.vertical.buttons > .button { height: 8.3333%; } /*------------------- Colors --------------------*/ .ui.primary.buttons .button, .ui.primary.button { background-color: #6EBE49; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.primary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: #7DC55B; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: #58ae30; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: #589c38; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active { background-color: #5fb736; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button, .ui.secondary.button { background-color: #505050; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.secondary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { background-color: #5d5d5d; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:focus, .ui.secondary.button:focus { background-color: #646464; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:active, .ui.secondary.button:active { background-color: #6a6a6a; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button:active, .ui.secondary.active.button, .ui.secondary.button .active.button:active { background-color: #5d5d5d; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button, .ui.red.button { background-color: #DB2828; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.red.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.red.buttons .button:hover, .ui.red.button:hover { background-color: #d01919; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:focus, .ui.red.button:focus { background-color: #ca1010; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:active, .ui.red.button:active { background-color: #b21e1e; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .active.button, .ui.red.buttons .active.button:active, .ui.red.active.button, .ui.red.button .active.button:active { background-color: #d41515; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button, .ui.orange.button { background-color: #F2711C; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.orange.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.orange.buttons .button:hover, .ui.orange.button:hover { background-color: #f26202; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:focus, .ui.orange.button:focus { background-color: #e55b00; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:active, .ui.orange.button:active { background-color: #cf590c; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .active.button, .ui.orange.buttons .active.button:active, .ui.orange.active.button, .ui.orange.button .active.button:active { background-color: #f56100; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button, .ui.yellow.button { background-color: #FBBD08; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.yellow.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.yellow.buttons .button:hover, .ui.yellow.button:hover { background-color: #eaae00; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:focus, .ui.yellow.button:focus { background-color: #daa300; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:active, .ui.yellow.button:active { background-color: #cd9903; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .active.button, .ui.yellow.buttons .active.button:active, .ui.yellow.active.button, .ui.yellow.button .active.button:active { background-color: #eaae00; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button, .ui.olive.button { background-color: #B5CC18; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.olive.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.olive.buttons .button:hover, .ui.olive.button:hover { background-color: #a7bd0d; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:focus, .ui.olive.button:focus { background-color: #a0b605; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:active, .ui.olive.button:active { background-color: #8d9e13; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .active.button, .ui.olive.buttons .active.button:active, .ui.olive.active.button, .ui.olive.button .active.button:active { background-color: #aac109; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button, .ui.green.button { background-color: #21BA45; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.green.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.green.buttons .button:hover, .ui.green.button:hover { background-color: #16ab39; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:focus, .ui.green.button:focus { background-color: #0ea432; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:active, .ui.green.button:active { background-color: #198f35; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .active.button, .ui.green.buttons .active.button:active, .ui.green.active.button, .ui.green.button .active.button:active { background-color: #13ae38; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button, .ui.teal.button { background-color: #00B5AD; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.teal.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.teal.buttons .button:hover, .ui.teal.button:hover { background-color: #009c95; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:focus, .ui.teal.button:focus { background-color: #008c86; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:active, .ui.teal.button:active { background-color: #00827c; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active, .ui.teal.active.button, .ui.teal.button .active.button:active { background-color: #009c95; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button, .ui.blue.button { background-color: #2185D0; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.blue.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.blue.buttons .button:hover, .ui.blue.button:hover { background-color: #1678c2; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:focus, .ui.blue.button:focus { background-color: #0d71bb; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:active, .ui.blue.button:active { background-color: #1a69a4; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .active.button, .ui.blue.buttons .active.button:active, .ui.blue.active.button, .ui.blue.button .active.button:active { background-color: #1279c6; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button, .ui.violet.button { background-color: #6435C9; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.violet.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.violet.buttons .button:hover, .ui.violet.button:hover { background-color: #5829bb; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:focus, .ui.violet.button:focus { background-color: #4f20b5; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:active, .ui.violet.button:active { background-color: #502aa1; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .active.button, .ui.violet.buttons .active.button:active, .ui.violet.active.button, .ui.violet.button .active.button:active { background-color: #5626bf; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button, .ui.purple.button { background-color: #A333C8; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.purple.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.purple.buttons .button:hover, .ui.purple.button:hover { background-color: #9627ba; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:focus, .ui.purple.button:focus { background-color: #8f1eb4; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:active, .ui.purple.button:active { background-color: #82299f; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .active.button, .ui.purple.buttons .active.button:active, .ui.purple.active.button, .ui.purple.button .active.button:active { background-color: #9724be; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button, .ui.pink.button { background-color: #E03997; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.pink.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.pink.buttons .button:hover, .ui.pink.button:hover { background-color: #e61a8d; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:focus, .ui.pink.button:focus { background-color: #e10f85; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:active, .ui.pink.button:active { background-color: #c71f7e; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .active.button, .ui.pink.buttons .active.button:active, .ui.pink.active.button, .ui.pink.button .active.button:active { background-color: #ea158d; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button, .ui.brown.button { background-color: #A5673F; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.brown.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.brown.buttons .button:hover, .ui.brown.button:hover { background-color: #975b33; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:focus, .ui.brown.button:focus { background-color: #90532b; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:active, .ui.brown.button:active { background-color: #805031; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .active.button, .ui.brown.buttons .active.button:active, .ui.brown.active.button, .ui.brown.button .active.button:active { background-color: #995a31; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button, .ui.grey.button { background-color: #767676; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.grey.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.grey.buttons .button:hover, .ui.grey.button:hover { background-color: #838383; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:focus, .ui.grey.button:focus { background-color: #8a8a8a; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:active, .ui.grey.button:active { background-color: #909090; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .active.button, .ui.grey.buttons .active.button:active, .ui.grey.active.button, .ui.grey.button .active.button:active { background-color: #696969; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button, .ui.black.button { background-color: #1B1C1D; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.black.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.black.buttons .button:hover, .ui.black.button:hover { background-color: #27292a; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:focus, .ui.black.button:focus { background-color: #2f3032; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:active, .ui.black.button:active { background-color: #343637; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .active.button, .ui.black.buttons .active.button:active, .ui.black.active.button, .ui.black.button .active.button:active { background-color: #0f0f10; color: #FFFFFF; text-shadow: none; } /*--------------- Positive ----------------*/ /* Standard */ .ui.positive.buttons .button, .ui.positive.button { background-color: #6EBE49; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.positive.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.positive.buttons .button:hover, .ui.positive.button:hover { background-color: #60b539; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:focus, .ui.positive.button:focus { background-color: #58ae30; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:active, .ui.positive.button:active { background-color: #589c38; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .active.button, .ui.positive.buttons .active.button:active, .ui.positive.active.button, .ui.positive.button .active.button:active { background-color: #5fb736; color: #FFFFFF; text-shadow: none; } /*--------------- Negative ----------------*/ /* Standard */ .ui.negative.buttons .button, .ui.negative.button { background-color: #DB2828; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.negative.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.negative.buttons .button:hover, .ui.negative.button:hover { background-color: #d01919; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:focus, .ui.negative.button:focus { background-color: #ca1010; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:active, .ui.negative.button:active { background-color: #b21e1e; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .active.button, .ui.negative.buttons .active.button:active, .ui.negative.active.button, .ui.negative.button .active.button:active { background-color: #d41515; color: #FFFFFF; text-shadow: none; } /******************************* Groups *******************************/ .ui.buttons { display: inline-flex; flex-direction: row; font-size: 0; vertical-align: baseline; margin: 0 0.25em 0 0; } .ui.buttons:not(.basic):not(.inverted) { box-shadow: none; } /* Clearfix */ .ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Standard Group */ .ui.buttons .button { flex: 1 0 auto; border-radius: 0; margin: 0 0 0 0; } .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.buttons .button:first-child { border-left: none; margin-left: 0; border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.buttons .button:last-child { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } /* Vertical Style */ .ui.vertical.buttons { display: inline-flex; flex-direction: column; } .ui.vertical.buttons .button { display: block; float: none; width: 100%; margin: 0 0 0 0; box-shadow: none; border-radius: 0; } .ui.vertical.buttons .button:first-child { border-top-left-radius: 0.28571429rem; border-top-right-radius: 0.28571429rem; } .ui.vertical.buttons .button:last-child { margin-bottom: 0; border-bottom-left-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } .ui.vertical.buttons .button:only-child { border-radius: 0.28571429rem; } /******************************* Theme Overrides *******************************/ /******************************* Theme Overrides *******************************/ .actions .ui.button { min-width: 95pt; } /* Renders a button to appear as a link */ .ui.button.link { background-color: transparent; padding: 0; display: inline; color: #2F743C; text-decoration: none; font-weight: normal; } .ui.button.link:hover { color: #6EBE49; text-decoration: none; } /* Renders a button icon to appear just as an icon */ .ui.icon.button.plain { background: none; } .ui.icon.button.plain:hover { background: none; color: #6EBE49; } /*! * # Fomantic-UI - Header * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Header *******************************/ /*------------------- Element --------------------*/ /* Sub Heading */ /* Sub Header */ /* Icon */ /* Image */ /* Label */ /* Content */ /* Paragraph after Header */ /*------------------- Variations --------------------*/ /* Sizing */ /* Sub Header */ /* Icon Header */ /* No Line Height Offset */ /* Divided */ /* Block */ /* Attached */ /* Inverted */ /* Floated */ /* Packaged Theme */ /******************************* Header *******************************/ /*------------------- Element --------------------*/ /* Sub Heading */ /* Sub Header */ /* Icon */ /* Image */ /* Label */ /* Content */ /* Paragraph after Header */ /*------------------- Variations --------------------*/ /* Sizing */ /* Sub Header */ /* Icon Header */ /* No Line Height Offset */ /* Divided */ /* Block */ /* Attached */ /* Inverted */ /* Floated */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Header *******************************/ /* Standard */ .ui.header { border: none; margin: calc(2rem - 0.1428571428571429em) 0 1rem; padding: 0 0; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.28571429em; text-transform: none; color: #000000; } .ui.header:first-child { margin-top: -0.14285714em; } .ui.header:last-child { margin-bottom: 0; } /*-------------- Icon ---------------*/ .ui.header > .icon { display: table-cell; opacity: 1; font-size: 1.5em; padding-top: 0; vertical-align: middle; } /* With Text Node */ .ui.header .icon:only-child { display: inline-block; padding: 0; margin-right: 0.75rem; } /*------------------- Image --------------------*/ .ui.header > .image:not(.icon), .ui.header > img { display: inline-block; margin-top: 0.14285714em; width: 2.5em; height: auto; vertical-align: middle; } .ui.header > .image:not(.icon):only-child, .ui.header > img:only-child { margin-right: 0.75rem; } /*-------------- Content ---------------*/ .ui.header .content { display: inline-block; vertical-align: top; } /* After Image */ .ui.header > img + .content, .ui.header > .image + .content { padding-left: 0.75rem; vertical-align: middle; } /* After Icon */ .ui.header > .icon + .content { padding-left: 0.75rem; display: table-cell; vertical-align: middle; } /*-------------- Loose Coupling ---------------*/ .ui.header .ui.label { font-size: ''; margin-left: 0.5rem; vertical-align: middle; } /* Positioning */ .ui.header + p { margin-top: 0; } /******************************* Types *******************************/ /*-------------- Page ---------------*/ h1.ui.header { font-size: 2rem; } h2.ui.header { font-size: 1.71428571rem; } h3.ui.header { font-size: 1.28571429rem; } h4.ui.header { font-size: 1.07142857rem; } h5.ui.header { font-size: 1rem; } h6.ui.header { font-size: 0.85714286rem; } /*-------------- Content Heading ---------------*/ /******************************* States *******************************/ /******************************* Variations *******************************/ /*------------------- Colors --------------------*/ .ui.primary.header { color: #6EBE49; } a.ui.primary.header:hover { color: #60b539; } .ui.secondary.header { color: #505050; } a.ui.secondary.header:hover { color: #5d5d5d; } .ui.red.header { color: #DB2828; } a.ui.red.header:hover { color: #d01919; } .ui.orange.header { color: #F2711C; } a.ui.orange.header:hover { color: #f26202; } .ui.yellow.header { color: #FBBD08; } a.ui.yellow.header:hover { color: #eaae00; } .ui.olive.header { color: #B5CC18; } a.ui.olive.header:hover { color: #a7bd0d; } .ui.green.header { color: #21BA45; } a.ui.green.header:hover { color: #16ab39; } .ui.teal.header { color: #00B5AD; } a.ui.teal.header:hover { color: #009c95; } .ui.blue.header { color: #2185D0; } a.ui.blue.header:hover { color: #1678c2; } .ui.violet.header { color: #6435C9; } a.ui.violet.header:hover { color: #5829bb; } .ui.purple.header { color: #A333C8; } a.ui.purple.header:hover { color: #9627ba; } .ui.pink.header { color: #E03997; } a.ui.pink.header:hover { color: #e61a8d; } .ui.brown.header { color: #A5673F; } a.ui.brown.header:hover { color: #975b33; } .ui.grey.header { color: #767676; } a.ui.grey.header:hover { color: #838383; } .ui.black.header { color: #1B1C1D; } a.ui.black.header:hover { color: #27292a; } /*------------------- Sizing --------------------*/ .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1.28571429em; } /******************************* Theme Overrides *******************************/ /******************************* Theme Overrides *******************************/ h5 { color: #909090; font-weight: bold; margin: 0; } /*! * # Fomantic-UI - Icon * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ /* Solid Icons */ /* Outline Icons */ /* Brand Icons */ /*-------------- Definition ---------------*/ /* Icon Variables */ /* Variations */ /* Packaged Theme */ /******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ /* Solid Icons */ /* Outline Icons */ /* Brand Icons */ /*-------------- Definition ---------------*/ /* Icon Variables */ /* Variations */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Icon *******************************/ @font-face { font-family: 'Icons'; src: url(seagate-brandportal-sui/resources/fonts/icons.eot); src: url(seagate-brandportal-sui/resources/fonts/icons.eot?#iefix) format('embedded-opentype'), url(seagate-brandportal-sui/resources/fonts/icons.woff2) format('woff2'), url(seagate-brandportal-sui/resources/fonts/icons.woff) format('woff'), url(seagate-brandportal-sui/resources/fonts/icons.ttf) format('truetype'), url(seagate-brandportal-sui/resources/images/icons.svg?3d102342391af184d5ae9e7708d8220f#icons) format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon { display: inline-block; opacity: 1; margin: 0 0.25rem 0 0; width: 1.18em; height: 1em; font-family: 'Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; speak: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } i.icon:before { background: none !important; } /******************************* Types *******************************/ /******************************* States *******************************/ i.icon:hover, i.icons:hover, i.icon:active, i.icons:active, i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { opacity: 1; } /******************************* Variations *******************************/ /*------------------- Circular --------------------*/ i.circular.icon { border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0 !important; box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; width: 2em !important; height: 2em !important; } /*------------------- Colors --------------------*/ i.primary.icon.icon.icon.icon { color: #6EBE49; } i.secondary.icon.icon.icon.icon { color: #505050; } i.red.icon.icon.icon.icon { color: #DB2828; } i.orange.icon.icon.icon.icon { color: #F2711C; } i.yellow.icon.icon.icon.icon { color: #FBBD08; } i.olive.icon.icon.icon.icon { color: #B5CC18; } i.green.icon.icon.icon.icon { color: #21BA45; } i.teal.icon.icon.icon.icon { color: #00B5AD; } i.blue.icon.icon.icon.icon { color: #2185D0; } i.violet.icon.icon.icon.icon { color: #6435C9; } i.purple.icon.icon.icon.icon { color: #A333C8; } i.pink.icon.icon.icon.icon { color: #E03997; } i.brown.icon.icon.icon.icon { color: #A5673F; } i.grey.icon.icon.icon.icon { color: #767676; } i.black.icon.icon.icon.icon { color: #1B1C1D; } /*------------------- Sizes --------------------*/ i.icon, i.icons { font-size: 1em; } i.mini.mini.mini.icon, i.mini.mini.mini.icons { line-height: 1; vertical-align: middle; font-size: 0.4em; } i.large.large.large.icon, i.large.large.large.icons { line-height: 1; vertical-align: middle; font-size: 1.5em; } i.big.big.big.icon, i.big.big.big.icons { line-height: 1; vertical-align: middle; font-size: 2em; } /******************************* Groups *******************************/ i.icons { display: inline-block; position: relative; line-height: 1; } i.icons .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); margin: 0; } i.icons .icon:first-child { position: static; width: auto; height: auto; vertical-align: top; transform: none; } /* * Font Awesome 5.11.2 by @fontawesome [https://fontawesome.com] * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) */ /******************************* Fomantic-UI integration of FontAwesome : // class names are separated i.icon.angle-left => i.icon.angle.left // variations are extracted i.icon.circle => i.icon.circle i.icon.circle-o => i.icon.circle.outline // abbreviation are replaced by full words i.icon.*-h => i.icon.*.horizontal i.icon.*-v => i.icon.*.vertical i.icon.alpha => i.icon.alphabet i.icon.asc => i.icon.ascending i.icon.desc => i.icon.descending i.icon.alt => i.icon.alternate Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand *******************************/ /******************************* Icons *******************************/ /* Deprecated *In/Out Naming Conflict) */ i.icon.linkedin.in:before { content: "\f0e1"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } i.icon.sign.in:before { content: "\f2f6"; } i.icon.in.cart:before { content: "\f218"; } i.icon.log.out:before { content: "\f2f5"; } i.icon.sign.out:before { content: "\f2f5"; } /******************************* Solid Icons *******************************/ /* Icons */ i.icon.ad:before { content: "\f641"; } i.icon.address.book:before { content: "\f2b9"; } i.icon.address.card:before { content: "\f2bb"; } i.icon.adjust:before { content: "\f042"; } i.icon.air.freshener:before { content: "\f5d0"; } i.icon.align.center:before { content: "\f037"; } i.icon.align.justify:before { content: "\f039"; } i.icon.align.left:before { content: "\f036"; } i.icon.align.right:before { content: "\f038"; } i.icon.allergies:before { content: "\f461"; } i.icon.ambulance:before { content: "\f0f9"; } i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } i.icon.anchor:before { content: "\f13d"; } i.icon.angle.double.down:before { content: "\f103"; } i.icon.angle.double.left:before { content: "\f100"; } i.icon.angle.double.right:before { content: "\f101"; } i.icon.angle.double.up:before { content: "\f102"; } i.icon.angle.down:before { content: "\f107"; } i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } i.icon.angle.up:before { content: "\f106"; } i.icon.angry:before { content: "\f556"; } i.icon.ankh:before { content: "\f644"; } i.icon.archive:before { content: "\f187"; } i.icon.archway:before { content: "\f557"; } i.icon.arrow.alternate.circle.down:before { content: "\f358"; } i.icon.arrow.alternate.circle.left:before { content: "\f359"; } i.icon.arrow.alternate.circle.right:before { content: "\f35a"; } i.icon.arrow.alternate.circle.up:before { content: "\f35b"; } i.icon.arrow.circle.down:before { content: "\f0ab"; } i.icon.arrow.circle.left:before { content: "\f0a8"; } i.icon.arrow.circle.right:before { content: "\f0a9"; } i.icon.arrow.circle.up:before { content: "\f0aa"; } i.icon.arrow.left:before { content: "\f060"; } i.icon.arrow.right:before { content: "\f061"; } i.icon.arrow.up:before { content: "\f062"; } i.icon.arrow.down:before { content: "\f063"; } i.icon.arrows.alternate:before { content: "\f0b2"; } i.icon.arrows.alternate.horizontal:before { content: "\f337"; } i.icon.arrows.alternate.vertical:before { content: "\f338"; } i.icon.assistive.listening.systems:before { content: "\f2a2"; } i.icon.asterisk:before { content: "\f069"; } i.icon.at:before { content: "\f1fa"; } i.icon.atlas:before { content: "\f558"; } i.icon.atom:before { content: "\f5d2"; } i.icon.audio.description:before { content: "\f29e"; } i.icon.award:before { content: "\f559"; } i.icon.baby:before { content: "\f77c"; } i.icon.baby.carriage:before { content: "\f77d"; } i.icon.backspace:before { content: "\f55a"; } i.icon.backward:before { content: "\f04a"; } i.icon.bacon:before { content: "\f7e5"; } i.icon.balance.scale:before { content: "\f24e"; } i.icon.balance.scale.left:before { content: "\f515"; } i.icon.balance.scale.right:before { content: "\f516"; } i.icon.ban:before { content: "\f05e"; } i.icon.band.aid:before { content: "\f462"; } i.icon.barcode:before { content: "\f02a"; } i.icon.bars:before { content: "\f0c9"; } i.icon.baseball.ball:before { content: "\f433"; } i.icon.basketball.ball:before { content: "\f434"; } i.icon.bath:before { content: "\f2cd"; } i.icon.battery.empty:before { content: "\f244"; } i.icon.battery.full:before { content: "\f240"; } i.icon.battery.half:before { content: "\f242"; } i.icon.battery.quarter:before { content: "\f243"; } i.icon.battery.three.quarters:before { content: "\f241"; } i.icon.bed:before { content: "\f236"; } i.icon.beer:before { content: "\f0fc"; } i.icon.bell:before { content: "\f0f3"; } i.icon.bell.slash:before { content: "\f1f6"; } i.icon.bezier.curve:before { content: "\f55b"; } i.icon.bible:before { content: "\f647"; } i.icon.bicycle:before { content: "\f206"; } i.icon.biking:before { content: "\f84a"; } i.icon.binoculars:before { content: "\f1e5"; } i.icon.biohazard:before { content: "\f780"; } i.icon.birthday.cake:before { content: "\f1fd"; } i.icon.blender:before { content: "\f517"; } i.icon.blender.phone:before { content: "\f6b6"; } i.icon.blind:before { content: "\f29d"; } i.icon.blog:before { content: "\f781"; } i.icon.bold:before { content: "\f032"; } i.icon.bolt:before { content: "\f0e7"; } i.icon.bomb:before { content: "\f1e2"; } i.icon.bone:before { content: "\f5d7"; } i.icon.bong:before { content: "\f55c"; } i.icon.book:before { content: "\f02d"; } i.icon.book.dead:before { content: "\f6b7"; } i.icon.book.medical:before { content: "\f7e6"; } i.icon.book.open:before { content: "\f518"; } i.icon.book.reader:before { content: "\f5da"; } i.icon.bookmark:before { content: "\f02e"; } i.icon.border.all:before { content: "\f84c"; } i.icon.border.none:before { content: "\f850"; } i.icon.border.style:before { content: "\f853"; } i.icon.bowling.ball:before { content: "\f436"; } i.icon.box:before { content: "\f466"; } i.icon.box.open:before { content: "\f49e"; } i.icon.boxes:before { content: "\f468"; } i.icon.braille:before { content: "\f2a1"; } i.icon.brain:before { content: "\f5dc"; } i.icon.bread.slice:before { content: "\f7ec"; } i.icon.briefcase:before { content: "\f0b1"; } i.icon.briefcase.medical:before { content: "\f469"; } i.icon.broadcast.tower:before { content: "\f519"; } i.icon.broom:before { content: "\f51a"; } i.icon.brush:before { content: "\f55d"; } i.icon.bug:before { content: "\f188"; } i.icon.building:before { content: "\f1ad"; } i.icon.bullhorn:before { content: "\f0a1"; } i.icon.bullseye:before { content: "\f140"; } i.icon.burn:before { content: "\f46a"; } i.icon.bus:before { content: "\f207"; } i.icon.bus.alternate:before { content: "\f55e"; } i.icon.business.time:before { content: "\f64a"; } i.icon.calculator:before { content: "\f1ec"; } i.icon.calendar:before { content: "\f133"; } i.icon.calendar.alternate:before { content: "\f073"; } i.icon.calendar.check:before { content: "\f274"; } i.icon.calendar.day:before { content: "\f783"; } i.icon.calendar.minus:before { content: "\f272"; } i.icon.calendar.plus:before { content: "\f271"; } i.icon.calendar.times:before { content: "\f273"; } i.icon.calendar.week:before { content: "\f784"; } i.icon.camera:before { content: "\f030"; } i.icon.camera.retro:before { content: "\f083"; } i.icon.campground:before { content: "\f6bb"; } i.icon.candy.cane:before { content: "\f786"; } i.icon.cannabis:before { content: "\f55f"; } i.icon.capsules:before { content: "\f46b"; } i.icon.car:before { content: "\f1b9"; } i.icon.car.alternate:before { content: "\f5de"; } i.icon.car.battery:before { content: "\f5df"; } i.icon.car.crash:before { content: "\f5e1"; } i.icon.car.side:before { content: "\f5e4"; } i.icon.caret.down:before { content: "\f0d7"; } i.icon.caret.left:before { content: "\f0d9"; } i.icon.caret.right:before { content: "\f0da"; } i.icon.caret.square.down:before { content: "\f150"; } i.icon.caret.square.left:before { content: "\f191"; } i.icon.caret.square.right:before { content: "\f152"; } i.icon.caret.square.up:before { content: "\f151"; } i.icon.caret.up:before { content: "\f0d8"; } i.icon.carrot:before { content: "\f787"; } i.icon.cart.arrow.down:before { content: "\f218"; } i.icon.cart.plus:before { content: "\f217"; } i.icon.cash.register:before { content: "\f788"; } i.icon.cat:before { content: "\f6be"; } i.icon.certificate:before { content: "\f0a3"; } i.icon.chair:before { content: "\f6c0"; } i.icon.chalkboard:before { content: "\f51b"; } i.icon.chalkboard.teacher:before { content: "\f51c"; } i.icon.charging.station:before { content: "\f5e7"; } i.icon.chart.area:before { content: "\f1fe"; } i.icon.chart.bar:before { content: "\f080"; } i.icon.chart.line:before { content: "\f201"; } i.icon.chart.pie:before { content: "\f200"; } i.icon.check:before { content: "\f00c"; } i.icon.check.circle:before { content: "\f058"; } i.icon.check.double:before { content: "\f560"; } i.icon.check.square:before { content: "\f14a"; } i.icon.cheese:before { content: "\f7ef"; } i.icon.chess:before { content: "\f439"; } i.icon.chess.bishop:before { content: "\f43a"; } i.icon.chess.board:before { content: "\f43c"; } i.icon.chess.king:before { content: "\f43f"; } i.icon.chess.knight:before { content: "\f441"; } i.icon.chess.pawn:before { content: "\f443"; } i.icon.chess.queen:before { content: "\f445"; } i.icon.chess.rook:before { content: "\f447"; } i.icon.chevron.circle.down:before { content: "\f13a"; } i.icon.chevron.circle.left:before { content: "\f137"; } i.icon.chevron.circle.right:before { content: "\f138"; } i.icon.chevron.circle.up:before { content: "\f139"; } i.icon.chevron.down:before { content: "\f078"; } i.icon.chevron.left:before { content: "\f053"; } i.icon.chevron.right:before { content: "\f054"; } i.icon.chevron.up:before { content: "\f077"; } i.icon.child:before { content: "\f1ae"; } i.icon.church:before { content: "\f51d"; } i.icon.circle:before { content: "\f111"; } i.icon.circle.notch:before { content: "\f1ce"; } i.icon.city:before { content: "\f64f"; } i.icon.clinic.medical:before { content: "\f7f2"; } i.icon.clipboard:before { content: "\f328"; } i.icon.clipboard.check:before { content: "\f46c"; } i.icon.clipboard.list:before { content: "\f46d"; } i.icon.clock:before { content: "\f017"; } i.icon.clone:before { content: "\f24d"; } i.icon.closed.captioning:before { content: "\f20a"; } i.icon.cloud:before { content: "\f0c2"; } i.icon.cloud.download.alternate:before { content: "\f381"; } i.icon.cloud.meatball:before { content: "\f73b"; } i.icon.cloud.moon:before { content: "\f6c3"; } i.icon.cloud.moon.rain:before { content: "\f73c"; } i.icon.cloud.rain:before { content: "\f73d"; } i.icon.cloud.showers.heavy:before { content: "\f740"; } i.icon.cloud.sun:before { content: "\f6c4"; } i.icon.cloud.sun.rain:before { content: "\f743"; } i.icon.cloud.upload.alternate:before { content: "\f382"; } i.icon.cocktail:before { content: "\f561"; } i.icon.code:before { content: "\f121"; } i.icon.code.branch:before { content: "\f126"; } i.icon.coffee:before { content: "\f0f4"; } i.icon.cog:before { content: "\f013"; } i.icon.cogs:before { content: "\f085"; } i.icon.coins:before { content: "\f51e"; } i.icon.columns:before { content: "\f0db"; } i.icon.comment:before { content: "\f075"; } i.icon.comment.alternate:before { content: "\f27a"; } i.icon.comment.dollar:before { content: "\f651"; } i.icon.comment.dots:before { content: "\f4ad"; } i.icon.comment.medical:before { content: "\f7f5"; } i.icon.comment.slash:before { content: "\f4b3"; } i.icon.comments:before { content: "\f086"; } i.icon.comments.dollar:before { content: "\f653"; } i.icon.compact.disc:before { content: "\f51f"; } i.icon.compass:before { content: "\f14e"; } i.icon.compress:before { content: "\f066"; } i.icon.compress.arrows.alternate:before { content: "\f78c"; } i.icon.concierge.bell:before { content: "\f562"; } i.icon.cookie:before { content: "\f563"; } i.icon.cookie.bite:before { content: "\f564"; } i.icon.copy:before { content: "\f0c5"; } i.icon.copyright:before { content: "\f1f9"; } i.icon.couch:before { content: "\f4b8"; } i.icon.credit.card:before { content: "\f09d"; } i.icon.crop:before { content: "\f125"; } i.icon.crop.alternate:before { content: "\f565"; } i.icon.cross:before { content: "\f654"; } i.icon.crosshairs:before { content: "\f05b"; } i.icon.crow:before { content: "\f520"; } i.icon.crown:before { content: "\f521"; } i.icon.crutch:before { content: "\f7f7"; } i.icon.cube:before { content: "\f1b2"; } i.icon.cubes:before { content: "\f1b3"; } i.icon.cut:before { content: "\f0c4"; } i.icon.database:before { content: "\f1c0"; } i.icon.deaf:before { content: "\f2a4"; } i.icon.democrat:before { content: "\f747"; } i.icon.desktop:before { content: "\f108"; } i.icon.dharmachakra:before { content: "\f655"; } i.icon.diagnoses:before { content: "\f470"; } i.icon.dice:before { content: "\f522"; } i.icon.dice.d20:before { content: "\f6cf"; } i.icon.dice.d6:before { content: "\f6d1"; } i.icon.dice.five:before { content: "\f523"; } i.icon.dice.four:before { content: "\f524"; } i.icon.dice.one:before { content: "\f525"; } i.icon.dice.six:before { content: "\f526"; } i.icon.dice.three:before { content: "\f527"; } i.icon.dice.two:before { content: "\f528"; } i.icon.digital.tachograph:before { content: "\f566"; } i.icon.directions:before { content: "\f5eb"; } i.icon.divide:before { content: "\f529"; } i.icon.dizzy:before { content: "\f567"; } i.icon.dna:before { content: "\f471"; } i.icon.dog:before { content: "\f6d3"; } i.icon.dollar.sign:before { content: "\f155"; } i.icon.dolly:before { content: "\f472"; } i.icon.dolly.flatbed:before { content: "\f474"; } i.icon.donate:before { content: "\f4b9"; } i.icon.door.closed:before { content: "\f52a"; } i.icon.door.open:before { content: "\f52b"; } i.icon.dot.circle:before { content: "\f192"; } i.icon.dove:before { content: "\f4ba"; } i.icon.download:before { content: "\f019"; } i.icon.drafting.compass:before { content: "\f568"; } i.icon.dragon:before { content: "\f6d5"; } i.icon.draw.polygon:before { content: "\f5ee"; } i.icon.drum:before { content: "\f569"; } i.icon.drum.steelpan:before { content: "\f56a"; } i.icon.drumstick.bite:before { content: "\f6d7"; } i.icon.dumbbell:before { content: "\f44b"; } i.icon.dumpster:before { content: "\f793"; } i.icon.dumpster.fire:before { content: "\f794"; } i.icon.dungeon:before { content: "\f6d9"; } i.icon.edit:before { content: "\f044"; } i.icon.egg:before { content: "\f7fb"; } i.icon.eject:before { content: "\f052"; } i.icon.ellipsis.horizontal:before { content: "\f141"; } i.icon.ellipsis.vertical:before { content: "\f142"; } i.icon.envelope:before { content: "\f0e0"; } i.icon.envelope.open:before { content: "\f2b6"; } i.icon.envelope.open.text:before { content: "\f658"; } i.icon.envelope.square:before { content: "\f199"; } i.icon.equals:before { content: "\f52c"; } i.icon.eraser:before { content: "\f12d"; } i.icon.ethernet:before { content: "\f796"; } i.icon.euro.sign:before { content: "\f153"; } i.icon.exchange.alternate:before { content: "\f362"; } i.icon.exclamation:before { content: "\f12a"; } i.icon.exclamation.circle:before { content: "\f06a"; } i.icon.exclamation.triangle:before { content: "\f071"; } i.icon.expand:before { content: "\f065"; } i.icon.expand.arrows.alternate:before { content: "\f31e"; } i.icon.external.alternate:before { content: "\f35d"; } i.icon.external.link.square.alternate:before { content: "\f360"; } i.icon.eye:before { content: "\f06e"; } i.icon.eye.dropper:before { content: "\f1fb"; } i.icon.eye.slash:before { content: "\f070"; } i.icon.fan:before { content: "\f863"; } i.icon.fast.backward:before { content: "\f049"; } i.icon.fast.forward:before { content: "\f050"; } i.icon.fax:before { content: "\f1ac"; } i.icon.feather:before { content: "\f52d"; } i.icon.feather.alternate:before { content: "\f56b"; } i.icon.female:before { content: "\f182"; } i.icon.fighter.jet:before { content: "\f0fb"; } i.icon.file:before { content: "\f15b"; } i.icon.file.alternate:before { content: "\f15c"; } i.icon.file.archive:before { content: "\f1c6"; } i.icon.file.audio:before { content: "\f1c7"; } i.icon.file.code:before { content: "\f1c9"; } i.icon.file.contract:before { content: "\f56c"; } i.icon.file.csv:before { content: "\f6dd"; } i.icon.file.download:before { content: "\f56d"; } i.icon.file.excel:before { content: "\f1c3"; } i.icon.file.export:before { content: "\f56e"; } i.icon.file.image:before { content: "\f1c5"; } i.icon.file.import:before { content: "\f56f"; } i.icon.file.invoice:before { content: "\f570"; } i.icon.file.invoice.dollar:before { content: "\f571"; } i.icon.file.medical:before { content: "\f477"; } i.icon.file.medical.alternate:before { content: "\f478"; } i.icon.file.pdf:before { content: "\f1c1"; } i.icon.file.powerpoint:before { content: "\f1c4"; } i.icon.file.prescription:before { content: "\f572"; } i.icon.file.signature:before { content: "\f573"; } i.icon.file.upload:before { content: "\f574"; } i.icon.file.video:before { content: "\f1c8"; } i.icon.file.word:before { content: "\f1c2"; } i.icon.fill:before { content: "\f575"; } i.icon.fill.drip:before { content: "\f576"; } i.icon.film:before { content: "\f008"; } i.icon.filter:before { content: "\f0b0"; } i.icon.fingerprint:before { content: "\f577"; } i.icon.fire:before { content: "\f06d"; } i.icon.fire.alternate:before { content: "\f7e4"; } i.icon.fire.extinguisher:before { content: "\f134"; } i.icon.first.aid:before { content: "\f479"; } i.icon.fish:before { content: "\f578"; } i.icon.fist.raised:before { content: "\f6de"; } i.icon.flag:before { content: "\f024"; } i.icon.flag.checkered:before { content: "\f11e"; } i.icon.flag.usa:before { content: "\f74d"; } i.icon.flask:before { content: "\f0c3"; } i.icon.flushed:before { content: "\f579"; } i.icon.folder:before { content: "\f07b"; } i.icon.folder.minus:before { content: "\f65d"; } i.icon.folder.open:before { content: "\f07c"; } i.icon.folder.plus:before { content: "\f65e"; } i.icon.font:before { content: "\f031"; } i.icon.football.ball:before { content: "\f44e"; } i.icon.forward:before { content: "\f04e"; } i.icon.frog:before { content: "\f52e"; } i.icon.frown:before { content: "\f119"; } i.icon.frown.open:before { content: "\f57a"; } i.icon.fruit-apple:before { content: "\f5d1"; } i.icon.funnel.dollar:before { content: "\f662"; } i.icon.futbol:before { content: "\f1e3"; } i.icon.gamepad:before { content: "\f11b"; } i.icon.gas.pump:before { content: "\f52f"; } i.icon.gavel:before { content: "\f0e3"; } i.icon.gem:before { content: "\f3a5"; } i.icon.genderless:before { content: "\f22d"; } i.icon.ghost:before { content: "\f6e2"; } i.icon.gift:before { content: "\f06b"; } i.icon.gifts:before { content: "\f79c"; } i.icon.glass.cheers:before { content: "\f79f"; } i.icon.glass.martini:before { content: "\f000"; } i.icon.glass.martini.alternate:before { content: "\f57b"; } i.icon.glass.whiskey:before { content: "\f7a0"; } i.icon.glasses:before { content: "\f530"; } i.icon.globe:before { content: "\f0ac"; } i.icon.globe.africa:before { content: "\f57c"; } i.icon.globe.americas:before { content: "\f57d"; } i.icon.globe.asia:before { content: "\f57e"; } i.icon.globe.europe:before { content: "\f7a2"; } i.icon.golf.ball:before { content: "\f450"; } i.icon.gopuram:before { content: "\f664"; } i.icon.graduation.cap:before { content: "\f19d"; } i.icon.greater.than:before { content: "\f531"; } i.icon.greater.than.equal:before { content: "\f532"; } i.icon.grimace:before { content: "\f57f"; } i.icon.grin:before { content: "\f580"; } i.icon.grin.alternate:before { content: "\f581"; } i.icon.grin.beam:before { content: "\f582"; } i.icon.grin.beam.sweat:before { content: "\f583"; } i.icon.grin.hearts:before { content: "\f584"; } i.icon.grin.squint:before { content: "\f585"; } i.icon.grin.squint.tears:before { content: "\f586"; } i.icon.grin.stars:before { content: "\f587"; } i.icon.grin.tears:before { content: "\f588"; } i.icon.grin.tongue:before { content: "\f589"; } i.icon.grin.tongue.squint:before { content: "\f58a"; } i.icon.grin.tongue.wink:before { content: "\f58b"; } i.icon.grin.wink:before { content: "\f58c"; } i.icon.grip.horizontal:before { content: "\f58d"; } i.icon.grip.lines:before { content: "\f7a4"; } i.icon.grip.lines.vertical:before { content: "\f7a5"; } i.icon.grip.vertical:before { content: "\f58e"; } i.icon.guitar:before { content: "\f7a6"; } i.icon.h.square:before { content: "\f0fd"; } i.icon.hamburger:before { content: "\f805"; } i.icon.hammer:before { content: "\f6e3"; } i.icon.hamsa:before { content: "\f665"; } i.icon.hand.holding:before { content: "\f4bd"; } i.icon.hand.holding.heart:before { content: "\f4be"; } i.icon.hand.holding.usd:before { content: "\f4c0"; } i.icon.hand.lizard:before { content: "\f258"; } i.icon.hand.middle.finger:before { content: "\f806"; } i.icon.hand.paper:before { content: "\f256"; } i.icon.hand.peace:before { content: "\f25b"; } i.icon.hand.point.down:before { content: "\f0a7"; } i.icon.hand.point.left:before { content: "\f0a5"; } i.icon.hand.point.right:before { content: "\f0a4"; } i.icon.hand.point.up:before { content: "\f0a6"; } i.icon.hand.pointer:before { content: "\f25a"; } i.icon.hand.rock:before { content: "\f255"; } i.icon.hand.scissors:before { content: "\f257"; } i.icon.hand.spock:before { content: "\f259"; } i.icon.hands:before { content: "\f4c2"; } i.icon.hands.helping:before { content: "\f4c4"; } i.icon.handshake:before { content: "\f2b5"; } i.icon.hanukiah:before { content: "\f6e6"; } i.icon.hard.hat:before { content: "\f807"; } i.icon.hashtag:before { content: "\f292"; } i.icon.hat.cowboy:before { content: "\f8c0"; } i.icon.hat.cowboy.side:before { content: "\f8c1"; } i.icon.hat.wizard:before { content: "\f6e8"; } i.icon.haykal:before { content: "\f666"; } i.icon.hdd:before { content: "\f0a0"; } i.icon.heading:before { content: "\f1dc"; } i.icon.headphones:before { content: "\f025"; } i.icon.headphones.alternate:before { content: "\f58f"; } i.icon.headset:before { content: "\f590"; } i.icon.heart:before { content: "\f004"; } i.icon.heart.broken:before { content: "\f7a9"; } i.icon.heartbeat:before { content: "\f21e"; } i.icon.helicopter:before { content: "\f533"; } i.icon.highlighter:before { content: "\f591"; } i.icon.hiking:before { content: "\f6ec"; } i.icon.hippo:before { content: "\f6ed"; } i.icon.history:before { content: "\f1da"; } i.icon.hockey.puck:before { content: "\f453"; } i.icon.holly.berry:before { content: "\f7aa"; } i.icon.home:before { content: "\f015"; } i.icon.horse:before { content: "\f6f0"; } i.icon.horse.head:before { content: "\f7ab"; } i.icon.hospital:before { content: "\f0f8"; } i.icon.hospital.alternate:before { content: "\f47d"; } i.icon.hospital.symbol:before { content: "\f47e"; } i.icon.hot.tub:before { content: "\f593"; } i.icon.hotdog:before { content: "\f80f"; } i.icon.hotel:before { content: "\f594"; } i.icon.hourglass:before { content: "\f254"; } i.icon.hourglass.end:before { content: "\f253"; } i.icon.hourglass.half:before { content: "\f252"; } i.icon.hourglass.start:before { content: "\f251"; } i.icon.house.damage:before { content: "\f6f1"; } i.icon.hryvnia:before { content: "\f6f2"; } i.icon.i.cursor:before { content: "\f246"; } i.icon.ice.cream:before { content: "\f810"; } i.icon.icicles:before { content: "\f7ad"; } i.icon.icons:before { content: "\f86d"; } i.icon.id.badge:before { content: "\f2c1"; } i.icon.id.card:before { content: "\f2c2"; } i.icon.id.card.alternate:before { content: "\f47f"; } i.icon.igloo:before { content: "\f7ae"; } i.icon.image:before { content: "\f03e"; } i.icon.images:before { content: "\f302"; } i.icon.inbox:before { content: "\f01c"; } i.icon.indent:before { content: "\f03c"; } i.icon.industry:before { content: "\f275"; } i.icon.infinity:before { content: "\f534"; } i.icon.info:before { content: "\f129"; } i.icon.info.circle:before { content: "\f05a"; } i.icon.italic:before { content: "\f033"; } i.icon.jedi:before { content: "\f669"; } i.icon.joint:before { content: "\f595"; } i.icon.journal.whills:before { content: "\f66a"; } i.icon.kaaba:before { content: "\f66b"; } i.icon.key:before { content: "\f084"; } i.icon.keyboard:before { content: "\f11c"; } i.icon.khanda:before { content: "\f66d"; } i.icon.kiss:before { content: "\f596"; } i.icon.kiss.beam:before { content: "\f597"; } i.icon.kiss.wink.heart:before { content: "\f598"; } i.icon.kiwi.bird:before { content: "\f535"; } i.icon.landmark:before { content: "\f66f"; } i.icon.language:before { content: "\f1ab"; } i.icon.laptop:before { content: "\f109"; } i.icon.laptop.code:before { content: "\f5fc"; } i.icon.laptop.medical:before { content: "\f812"; } i.icon.laugh:before { content: "\f599"; } i.icon.laugh.beam:before { content: "\f59a"; } i.icon.laugh.squint:before { content: "\f59b"; } i.icon.laugh.wink:before { content: "\f59c"; } i.icon.layer.group:before { content: "\f5fd"; } i.icon.leaf:before { content: "\f06c"; } i.icon.lemon:before { content: "\f094"; } i.icon.less.than:before { content: "\f536"; } i.icon.less.than.equal:before { content: "\f537"; } i.icon.level.down.alternate:before { content: "\f3be"; } i.icon.level.up.alternate:before { content: "\f3bf"; } i.icon.life.ring:before { content: "\f1cd"; } i.icon.lightbulb:before { content: "\f0eb"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.lira.sign:before { content: "\f195"; } i.icon.list:before { content: "\f03a"; } i.icon.list.alternate:before { content: "\f022"; } i.icon.list.ol:before { content: "\f0cb"; } i.icon.list.ul:before { content: "\f0ca"; } i.icon.location.arrow:before { content: "\f124"; } i.icon.lock:before { content: "\f023"; } i.icon.lock.open:before { content: "\f3c1"; } i.icon.long.arrow.alternate.down:before { content: "\f309"; } i.icon.long.arrow.alternate.left:before { content: "\f30a"; } i.icon.long.arrow.alternate.right:before { content: "\f30b"; } i.icon.long.arrow.alternate.up:before { content: "\f30c"; } i.icon.low.vision:before { content: "\f2a8"; } i.icon.luggage.cart:before { content: "\f59d"; } i.icon.magic:before { content: "\f0d0"; } i.icon.magnet:before { content: "\f076"; } i.icon.mail.bulk:before { content: "\f674"; } i.icon.male:before { content: "\f183"; } i.icon.map:before { content: "\f279"; } i.icon.map.marked:before { content: "\f59f"; } i.icon.map.marked.alternate:before { content: "\f5a0"; } i.icon.map.marker:before { content: "\f041"; } i.icon.map.marker.alternate:before { content: "\f3c5"; } i.icon.map.pin:before { content: "\f276"; } i.icon.map.signs:before { content: "\f277"; } i.icon.marker:before { content: "\f5a1"; } i.icon.mars:before { content: "\f222"; } i.icon.mars.double:before { content: "\f227"; } i.icon.mars.stroke:before { content: "\f229"; } i.icon.mars.stroke.horizontal:before { content: "\f22b"; } i.icon.mars.stroke.vertical:before { content: "\f22a"; } i.icon.mask:before { content: "\f6fa"; } i.icon.medal:before { content: "\f5a2"; } i.icon.medkit:before { content: "\f0fa"; } i.icon.meh:before { content: "\f11a"; } i.icon.meh.blank:before { content: "\f5a4"; } i.icon.meh.rolling.eyes:before { content: "\f5a5"; } i.icon.memory:before { content: "\f538"; } i.icon.menorah:before { content: "\f676"; } i.icon.mercury:before { content: "\f223"; } i.icon.meteor:before { content: "\f753"; } i.icon.microchip:before { content: "\f2db"; } i.icon.microphone:before { content: "\f130"; } i.icon.microphone.alternate:before { content: "\f3c9"; } i.icon.microphone.alternate.slash:before { content: "\f539"; } i.icon.microphone.slash:before { content: "\f131"; } i.icon.microscope:before { content: "\f610"; } i.icon.minus:before { content: "\f068"; } i.icon.minus.circle:before { content: "\f056"; } i.icon.minus.square:before { content: "\f146"; } i.icon.mitten:before { content: "\f7b5"; } i.icon.mobile:before { content: "\f10b"; } i.icon.mobile.alternate:before { content: "\f3cd"; } i.icon.money.bill:before { content: "\f0d6"; } i.icon.money.bill.alternate:before { content: "\f3d1"; } i.icon.money.bill.wave:before { content: "\f53a"; } i.icon.money.bill.wave.alternate:before { content: "\f53b"; } i.icon.money.check:before { content: "\f53c"; } i.icon.money.check.alternate:before { content: "\f53d"; } i.icon.monument:before { content: "\f5a6"; } i.icon.moon:before { content: "\f186"; } i.icon.mortar.pestle:before { content: "\f5a7"; } i.icon.mosque:before { content: "\f678"; } i.icon.motorcycle:before { content: "\f21c"; } i.icon.mountain:before { content: "\f6fc"; } i.icon.mouse:before { content: "\f8cc"; } i.icon.mouse.pointer:before { content: "\f245"; } i.icon.mug.hot:before { content: "\f7b6"; } i.icon.music:before { content: "\f001"; } i.icon.network.wired:before { content: "\f6ff"; } i.icon.neuter:before { content: "\f22c"; } i.icon.newspaper:before { content: "\f1ea"; } i.icon.not.equal:before { content: "\f53e"; } i.icon.notes.medical:before { content: "\f481"; } i.icon.object.group:before { content: "\f247"; } i.icon.object.ungroup:before { content: "\f248"; } i.icon.oil.can:before { content: "\f613"; } i.icon.om:before { content: "\f679"; } i.icon.otter:before { content: "\f700"; } i.icon.outdent:before { content: "\f03b"; } i.icon.pager:before { content: "\f815"; } i.icon.paint.brush:before { content: "\f1fc"; } i.icon.paint.roller:before { content: "\f5aa"; } i.icon.palette:before { content: "\f53f"; } i.icon.pallet:before { content: "\f482"; } i.icon.paper.plane:before { content: "\f1d8"; } i.icon.paperclip:before { content: "\f0c6"; } i.icon.parachute.box:before { content: "\f4cd"; } i.icon.paragraph:before { content: "\f1dd"; } i.icon.parking:before { content: "\f540"; } i.icon.passport:before { content: "\f5ab"; } i.icon.pastafarianism:before { content: "\f67b"; } i.icon.paste:before { content: "\f0ea"; } i.icon.pause:before { content: "\f04c"; } i.icon.pause.circle:before { content: "\f28b"; } i.icon.paw:before { content: "\f1b0"; } i.icon.peace:before { content: "\f67c"; } i.icon.pen:before { content: "\f304"; } i.icon.pen.alternate:before { content: "\f305"; } i.icon.pen.fancy:before { content: "\f5ac"; } i.icon.pen.nib:before { content: "\f5ad"; } i.icon.pen.square:before { content: "\f14b"; } i.icon.pencil.alternate:before { content: "\f303"; } i.icon.pencil.ruler:before { content: "\f5ae"; } i.icon.people.carry:before { content: "\f4ce"; } i.icon.pepper.hot:before { content: "\f816"; } i.icon.percent:before { content: "\f295"; } i.icon.percentage:before { content: "\f541"; } i.icon.person.booth:before { content: "\f756"; } i.icon.phone:before { content: "\f095"; } i.icon.phone.alternate:before { content: "\f879"; } i.icon.phone.slash:before { content: "\f3dd"; } i.icon.phone.square:before { content: "\f098"; } i.icon.phone.square.alternate:before { content: "\f87b"; } i.icon.phone.volume:before { content: "\f2a0"; } i.icon.photo.video:before { content: "\f87c"; } i.icon.piggy.bank:before { content: "\f4d3"; } i.icon.pills:before { content: "\f484"; } i.icon.pizza.slice:before { content: "\f818"; } i.icon.place.of.worship:before { content: "\f67f"; } i.icon.plane:before { content: "\f072"; } i.icon.plane.arrival:before { content: "\f5af"; } i.icon.plane.departure:before { content: "\f5b0"; } i.icon.play:before { content: "\f04b"; } i.icon.play.circle:before { content: "\f144"; } i.icon.plug:before { content: "\f1e6"; } i.icon.plus:before { content: "\f067"; } i.icon.plus.circle:before { content: "\f055"; } i.icon.plus.square:before { content: "\f0fe"; } i.icon.podcast:before { content: "\f2ce"; } i.icon.poll:before { content: "\f681"; } i.icon.poll.horizontal:before { content: "\f682"; } i.icon.poo:before { content: "\f2fe"; } i.icon.poo.storm:before { content: "\f75a"; } i.icon.poop:before { content: "\f619"; } i.icon.portrait:before { content: "\f3e0"; } i.icon.pound.sign:before { content: "\f154"; } i.icon.power.off:before { content: "\f011"; } i.icon.pray:before { content: "\f683"; } i.icon.praying.hands:before { content: "\f684"; } i.icon.prescription:before { content: "\f5b1"; } i.icon.prescription.bottle:before { content: "\f485"; } i.icon.prescription.bottle.alternate:before { content: "\f486"; } i.icon.print:before { content: "\f02f"; } i.icon.procedures:before { content: "\f487"; } i.icon.project.diagram:before { content: "\f542"; } i.icon.puzzle.piece:before { content: "\f12e"; } i.icon.qrcode:before { content: "\f029"; } i.icon.question:before { content: "\f128"; } i.icon.question.circle:before { content: "\f059"; } i.icon.quidditch:before { content: "\f458"; } i.icon.quote.left:before { content: "\f10d"; } i.icon.quote.right:before { content: "\f10e"; } i.icon.quran:before { content: "\f687"; } i.icon.radiation:before { content: "\f7b9"; } i.icon.radiation.alternate:before { content: "\f7ba"; } i.icon.rainbow:before { content: "\f75b"; } i.icon.random:before { content: "\f074"; } i.icon.receipt:before { content: "\f543"; } i.icon.record.vinyl:before { content: "\f8d9"; } i.icon.recycle:before { content: "\f1b8"; } i.icon.redo:before { content: "\f01e"; } i.icon.redo.alternate:before { content: "\f2f9"; } i.icon.registered:before { content: "\f25d"; } i.icon.remove.format:before { content: "\f87d"; } i.icon.reply:before { content: "\f3e5"; } i.icon.reply.all:before { content: "\f122"; } i.icon.republican:before { content: "\f75e"; } i.icon.restroom:before { content: "\f7bd"; } i.icon.retweet:before { content: "\f079"; } i.icon.ribbon:before { content: "\f4d6"; } i.icon.ring:before { content: "\f70b"; } i.icon.road:before { content: "\f018"; } i.icon.robot:before { content: "\f544"; } i.icon.rocket:before { content: "\f135"; } i.icon.route:before { content: "\f4d7"; } i.icon.rss:before { content: "\f09e"; } i.icon.rss.square:before { content: "\f143"; } i.icon.ruble.sign:before { content: "\f158"; } i.icon.ruler:before { content: "\f545"; } i.icon.ruler.combined:before { content: "\f546"; } i.icon.ruler.horizontal:before { content: "\f547"; } i.icon.ruler.vertical:before { content: "\f548"; } i.icon.running:before { content: "\f70c"; } i.icon.rupee.sign:before { content: "\f156"; } i.icon.sad.cry:before { content: "\f5b3"; } i.icon.sad.tear:before { content: "\f5b4"; } i.icon.satellite:before { content: "\f7bf"; } i.icon.satellite.dish:before { content: "\f7c0"; } i.icon.save:before { content: "\f0c7"; } i.icon.school:before { content: "\f549"; } i.icon.screwdriver:before { content: "\f54a"; } i.icon.scroll:before { content: "\f70e"; } i.icon.sd.card:before { content: "\f7c2"; } i.icon.search:before { content: "\f002"; } i.icon.search.dollar:before { content: "\f688"; } i.icon.search.location:before { content: "\f689"; } i.icon.search.minus:before { content: "\f010"; } i.icon.search.plus:before { content: "\f00e"; } i.icon.seedling:before { content: "\f4d8"; } i.icon.server:before { content: "\f233"; } i.icon.shapes:before { content: "\f61f"; } i.icon.share:before { content: "\f064"; } i.icon.share.alternate:before { content: "\f1e0"; } i.icon.share.alternate.square:before { content: "\f1e1"; } i.icon.share.square:before { content: "\f14d"; } i.icon.shekel.sign:before { content: "\f20b"; } i.icon.shield.alternate:before { content: "\f3ed"; } i.icon.ship:before { content: "\f21a"; } i.icon.shipping.fast:before { content: "\f48b"; } i.icon.shoe.prints:before { content: "\f54b"; } i.icon.shopping.bag:before { content: "\f290"; } i.icon.shopping.basket:before { content: "\f291"; } i.icon.shopping.cart:before { content: "\f07a"; } i.icon.shower:before { content: "\f2cc"; } i.icon.shuttle.van:before { content: "\f5b6"; } i.icon.sign:before { content: "\f4d9"; } i.icon.sign.in.alternate:before { content: "\f2f6"; } i.icon.sign.language:before { content: "\f2a7"; } i.icon.sign.out.alternate:before { content: "\f2f5"; } i.icon.signal:before { content: "\f012"; } i.icon.signature:before { content: "\f5b7"; } i.icon.sim.card:before { content: "\f7c4"; } i.icon.sitemap:before { content: "\f0e8"; } i.icon.skating:before { content: "\f7c5"; } i.icon.skiing:before { content: "\f7c9"; } i.icon.skiing.nordic:before { content: "\f7ca"; } i.icon.skull:before { content: "\f54c"; } i.icon.skull.crossbones:before { content: "\f714"; } i.icon.slash:before { content: "\f715"; } i.icon.sleigh:before { content: "\f7cc"; } i.icon.sliders.horizontal:before { content: "\f1de"; } i.icon.smile:before { content: "\f118"; } i.icon.smile.beam:before { content: "\f5b8"; } i.icon.smile.wink:before { content: "\f4da"; } i.icon.smog:before { content: "\f75f"; } i.icon.smoking:before { content: "\f48d"; } i.icon.smoking.ban:before { content: "\f54d"; } i.icon.sms:before { content: "\f7cd"; } i.icon.snowboarding:before { content: "\f7ce"; } i.icon.snowflake:before { content: "\f2dc"; } i.icon.snowman:before { content: "\f7d0"; } i.icon.snowplow:before { content: "\f7d2"; } i.icon.socks:before { content: "\f696"; } i.icon.solar.panel:before { content: "\f5ba"; } i.icon.sort:before { content: "\f0dc"; } i.icon.sort.alphabet.down:before { content: "\f15d"; } i.icon.sort.alphabet.down.alternate:before { content: "\f881"; } i.icon.sort.alphabet.up:before { content: "\f15e"; } i.icon.sort.alphabet.up.alternate:before { content: "\f882"; } i.icon.sort.amount.down:before { content: "\f160"; } i.icon.sort.amount.down.alternate:before { content: "\f884"; } i.icon.sort.amount.up:before { content: "\f161"; } i.icon.sort.amount.up.alternate:before { content: "\f885"; } i.icon.sort.down:before { content: "\f0dd"; } i.icon.sort.numeric.down:before { content: "\f162"; } i.icon.sort.numeric.down.alternate:before { content: "\f886"; } i.icon.sort.numeric.up:before { content: "\f163"; } i.icon.sort.numeric.up.alternate:before { content: "\f887"; } i.icon.sort.up:before { content: "\f0de"; } i.icon.spa:before { content: "\f5bb"; } i.icon.space.shuttle:before { content: "\f197"; } i.icon.spell.check:before { content: "\f891"; } i.icon.spider:before { content: "\f717"; } i.icon.spinner:before { content: "\f110"; } i.icon.splotch:before { content: "\f5bc"; } i.icon.spray.can:before { content: "\f5bd"; } i.icon.square:before { content: "\f0c8"; } i.icon.square.full:before { content: "\f45c"; } i.icon.square.root.alternate:before { content: "\f698"; } i.icon.stamp:before { content: "\f5bf"; } i.icon.star:before { content: "\f005"; } i.icon.star.and.crescent:before { content: "\f699"; } i.icon.star.half:before { content: "\f089"; } i.icon.star.half.alternate:before { content: "\f5c0"; } i.icon.star.of.david:before { content: "\f69a"; } i.icon.star.of.life:before { content: "\f621"; } i.icon.step.backward:before { content: "\f048"; } i.icon.step.forward:before { content: "\f051"; } i.icon.stethoscope:before { content: "\f0f1"; } i.icon.sticky.note:before { content: "\f249"; } i.icon.stop:before { content: "\f04d"; } i.icon.stop.circle:before { content: "\f28d"; } i.icon.stopwatch:before { content: "\f2f2"; } i.icon.store:before { content: "\f54e"; } i.icon.store.alternate:before { content: "\f54f"; } i.icon.stream:before { content: "\f550"; } i.icon.street.view:before { content: "\f21d"; } i.icon.strikethrough:before { content: "\f0cc"; } i.icon.stroopwafel:before { content: "\f551"; } i.icon.subscript:before { content: "\f12c"; } i.icon.subway:before { content: "\f239"; } i.icon.suitcase:before { content: "\f0f2"; } i.icon.suitcase.rolling:before { content: "\f5c1"; } i.icon.sun:before { content: "\f185"; } i.icon.superscript:before { content: "\f12b"; } i.icon.surprise:before { content: "\f5c2"; } i.icon.swatchbook:before { content: "\f5c3"; } i.icon.swimmer:before { content: "\f5c4"; } i.icon.swimming.pool:before { content: "\f5c5"; } i.icon.synagogue:before { content: "\f69b"; } i.icon.sync:before { content: "\f021"; } i.icon.sync.alternate:before { content: "\f2f1"; } i.icon.syringe:before { content: "\f48e"; } i.icon.table:before { content: "\f0ce"; } i.icon.table.tennis:before { content: "\f45d"; } i.icon.tablet:before { content: "\f10a"; } i.icon.tablet.alternate:before { content: "\f3fa"; } i.icon.tablets:before { content: "\f490"; } i.icon.tachometer.alternate:before { content: "\f3fd"; } i.icon.tag:before { content: "\f02b"; } i.icon.tags:before { content: "\f02c"; } i.icon.tape:before { content: "\f4db"; } i.icon.tasks:before { content: "\f0ae"; } i.icon.taxi:before { content: "\f1ba"; } i.icon.teeth:before { content: "\f62e"; } i.icon.teeth.open:before { content: "\f62f"; } i.icon.temperature.high:before { content: "\f769"; } i.icon.temperature.low:before { content: "\f76b"; } i.icon.tenge:before { content: "\f7d7"; } i.icon.terminal:before { content: "\f120"; } i.icon.text.height:before { content: "\f034"; } i.icon.text.width:before { content: "\f035"; } i.icon.th:before { content: "\f00a"; } i.icon.th.large:before { content: "\f009"; } i.icon.th.list:before { content: "\f00b"; } i.icon.theater.masks:before { content: "\f630"; } i.icon.thermometer:before { content: "\f491"; } i.icon.thermometer.empty:before { content: "\f2cb"; } i.icon.thermometer.full:before { content: "\f2c7"; } i.icon.thermometer.half:before { content: "\f2c9"; } i.icon.thermometer.quarter:before { content: "\f2ca"; } i.icon.thermometer.three.quarters:before { content: "\f2c8"; } i.icon.thumbs.down:before { content: "\f165"; } i.icon.thumbs.up:before { content: "\f164"; } i.icon.thumbtack:before { content: "\f08d"; } i.icon.ticket.alternate:before { content: "\f3ff"; } i.icon.times:before { content: "\f00d"; } i.icon.times.circle:before { content: "\f057"; } i.icon.tint:before { content: "\f043"; } i.icon.tint.slash:before { content: "\f5c7"; } i.icon.tired:before { content: "\f5c8"; } i.icon.toggle.off:before { content: "\f204"; } i.icon.toggle.on:before { content: "\f205"; } i.icon.toilet:before { content: "\f7d8"; } i.icon.toilet.paper:before { content: "\f71e"; } i.icon.toolbox:before { content: "\f552"; } i.icon.tools:before { content: "\f7d9"; } i.icon.tooth:before { content: "\f5c9"; } i.icon.torah:before { content: "\f6a0"; } i.icon.torii.gate:before { content: "\f6a1"; } i.icon.tractor:before { content: "\f722"; } i.icon.trademark:before { content: "\f25c"; } i.icon.traffic.light:before { content: "\f637"; } i.icon.train:before { content: "\f238"; } i.icon.tram:before { content: "\f7da"; } i.icon.transgender:before { content: "\f224"; } i.icon.transgender.alternate:before { content: "\f225"; } i.icon.trash:before { content: "\f1f8"; } i.icon.trash.alternate:before { content: "\f2ed"; } i.icon.trash.restore:before { content: "\f829"; } i.icon.trash.restore.alternate:before { content: "\f82a"; } i.icon.tree:before { content: "\f1bb"; } i.icon.trophy:before { content: "\f091"; } i.icon.truck:before { content: "\f0d1"; } i.icon.truck.monster:before { content: "\f63b"; } i.icon.truck.moving:before { content: "\f4df"; } i.icon.truck.packing:before { content: "\f4de"; } i.icon.truck.pickup:before { content: "\f63c"; } i.icon.tshirt:before { content: "\f553"; } i.icon.tty:before { content: "\f1e4"; } i.icon.tv:before { content: "\f26c"; } i.icon.umbrella:before { content: "\f0e9"; } i.icon.umbrella.beach:before { content: "\f5ca"; } i.icon.underline:before { content: "\f0cd"; } i.icon.undo:before { content: "\f0e2"; } i.icon.undo.alternate:before { content: "\f2ea"; } i.icon.universal.access:before { content: "\f29a"; } i.icon.university:before { content: "\f19c"; } i.icon.unlink:before { content: "\f127"; } i.icon.unlock:before { content: "\f09c"; } i.icon.unlock.alternate:before { content: "\f13e"; } i.icon.upload:before { content: "\f093"; } i.icon.user:before { content: "\f007"; } i.icon.user.alternate:before { content: "\f406"; } i.icon.user.alternate.slash:before { content: "\f4fa"; } i.icon.user.astronaut:before { content: "\f4fb"; } i.icon.user.check:before { content: "\f4fc"; } i.icon.user.circle:before { content: "\f2bd"; } i.icon.user.clock:before { content: "\f4fd"; } i.icon.user.cog:before { content: "\f4fe"; } i.icon.user.edit:before { content: "\f4ff"; } i.icon.user.friends:before { content: "\f500"; } i.icon.user.graduate:before { content: "\f501"; } i.icon.user.injured:before { content: "\f728"; } i.icon.user.lock:before { content: "\f502"; } i.icon.user.md:before { content: "\f0f0"; } i.icon.user.minus:before { content: "\f503"; } i.icon.user.ninja:before { content: "\f504"; } i.icon.user.nurse:before { content: "\f82f"; } i.icon.user.plus:before { content: "\f234"; } i.icon.user.secret:before { content: "\f21b"; } i.icon.user.shield:before { content: "\f505"; } i.icon.user.slash:before { content: "\f506"; } i.icon.user.tag:before { content: "\f507"; } i.icon.user.tie:before { content: "\f508"; } i.icon.user.times:before { content: "\f235"; } i.icon.users:before { content: "\f0c0"; } i.icon.users.cog:before { content: "\f509"; } i.icon.utensil.spoon:before { content: "\f2e5"; } i.icon.utensils:before { content: "\f2e7"; } i.icon.vector.square:before { content: "\f5cb"; } i.icon.venus:before { content: "\f221"; } i.icon.venus.double:before { content: "\f226"; } i.icon.venus.mars:before { content: "\f228"; } i.icon.vial:before { content: "\f492"; } i.icon.vials:before { content: "\f493"; } i.icon.video:before { content: "\f03d"; } i.icon.video.slash:before { content: "\f4e2"; } i.icon.vihara:before { content: "\f6a7"; } i.icon.voicemail:before { content: "\f897"; } i.icon.volleyball.ball:before { content: "\f45f"; } i.icon.volume.down:before { content: "\f027"; } i.icon.volume.mute:before { content: "\f6a9"; } i.icon.volume.off:before { content: "\f026"; } i.icon.volume.up:before { content: "\f028"; } i.icon.vote.yea:before { content: "\f772"; } i.icon.vr.cardboard:before { content: "\f729"; } i.icon.walking:before { content: "\f554"; } i.icon.wallet:before { content: "\f555"; } i.icon.warehouse:before { content: "\f494"; } i.icon.water:before { content: "\f773"; } i.icon.wave.square:before { content: "\f83e"; } i.icon.weight:before { content: "\f496"; } i.icon.weight.hanging:before { content: "\f5cd"; } i.icon.wheelchair:before { content: "\f193"; } i.icon.wifi:before { content: "\f1eb"; } i.icon.wind:before { content: "\f72e"; } i.icon.window.close:before { content: "\f410"; } i.icon.window.maximize:before { content: "\f2d0"; } i.icon.window.minimize:before { content: "\f2d1"; } i.icon.window.restore:before { content: "\f2d2"; } i.icon.wine.bottle:before { content: "\f72f"; } i.icon.wine.glass:before { content: "\f4e3"; } i.icon.wine.glass.alternate:before { content: "\f5ce"; } i.icon.won.sign:before { content: "\f159"; } i.icon.wrench:before { content: "\f0ad"; } i.icon.x.ray:before { content: "\f497"; } i.icon.yen.sign:before { content: "\f157"; } i.icon.yin.yang:before { content: "\f6ad"; } /* Aliases */ i.icon.add:before { content: "\f067"; } i.icon.add.circle:before { content: "\f055"; } i.icon.add.square:before { content: "\f0fe"; } i.icon.add.to.calendar:before { content: "\f271"; } i.icon.add.to.cart:before { content: "\f217"; } i.icon.add.user:before { content: "\f234"; } i.icon.alarm:before { content: "\f0f3"; } i.icon.alarm.mute:before { content: "\f1f6"; } i.icon.ald:before { content: "\f2a2"; } i.icon.als:before { content: "\f2a2"; } i.icon.announcement:before { content: "\f0a1"; } i.icon.area.chart:before { content: "\f1fe"; } i.icon.area.graph:before { content: "\f1fe"; } i.icon.arrow.down.cart:before { content: "\f218"; } i.icon.asexual:before { content: "\f22d"; } i.icon.asl:before { content: "\f2a3"; } i.icon.asl.interpreting:before { content: "\f2a3"; } i.icon.assistive.listening.devices:before { content: "\f2a2"; } i.icon.attach:before { content: "\f0c6"; } i.icon.attention:before { content: "\f06a"; } i.icon.balance:before { content: "\f24e"; } i.icon.bar:before { content: "\f0fc"; } i.icon.bathtub:before { content: "\f2cd"; } i.icon.battery.four:before { content: "\f240"; } i.icon.battery.high:before { content: "\f241"; } i.icon.battery.low:before { content: "\f243"; } i.icon.battery.medium:before { content: "\f242"; } i.icon.battery.one:before { content: "\f243"; } i.icon.battery.three:before { content: "\f241"; } i.icon.battery.two:before { content: "\f242"; } i.icon.battery.zero:before { content: "\f244"; } i.icon.birthday:before { content: "\f1fd"; } i.icon.block.layout:before { content: "\f009"; } i.icon.broken.chain:before { content: "\f127"; } i.icon.browser:before { content: "\f022"; } i.icon.call:before { content: "\f095"; } i.icon.call.square:before { content: "\f098"; } i.icon.cancel:before { content: "\f00d"; } i.icon.cart:before { content: "\f07a"; } i.icon.cc:before { content: "\f20a"; } i.icon.chain:before { content: "\f0c1"; } i.icon.chat:before { content: "\f075"; } i.icon.checked.calendar:before { content: "\f274"; } i.icon.checkmark:before { content: "\f00c"; } i.icon.checkmark.box:before { content: "\f14a"; } i.icon.chess.rock:before { content: "\f447"; } i.icon.circle.notched:before { content: "\f1ce"; } i.icon.circle.thin:before { content: "\f111"; } i.icon.close:before { content: "\f00d"; } i.icon.cloud.download:before { content: "\f381"; } i.icon.cloud.upload:before { content: "\f382"; } i.icon.cny:before { content: "\f157"; } i.icon.cocktail:before { content: "\f000"; } i.icon.commenting:before { content: "\f27a"; } i.icon.compose:before { content: "\f303"; } i.icon.computer:before { content: "\f108"; } i.icon.configure:before { content: "\f0ad"; } i.icon.content:before { content: "\f0c9"; } i.icon.conversation:before { content: "\f086"; } i.icon.credit.card.alternative:before { content: "\f09d"; } i.icon.currency:before { content: "\f3d1"; } i.icon.dashboard:before { content: "\f3fd"; } i.icon.deafness:before { content: "\f2a4"; } i.icon.delete:before { content: "\f00d"; } i.icon.delete.calendar:before { content: "\f273"; } i.icon.detective:before { content: "\f21b"; } i.icon.diamond:before { content: "\f3a5"; } i.icon.discussions:before { content: "\f086"; } i.icon.disk:before { content: "\f0a0"; } i.icon.doctor:before { content: "\f0f0"; } i.icon.dollar:before { content: "\f155"; } i.icon.dont:before { content: "\f05e"; } i.icon.drivers.license:before { content: "\f2c2"; } i.icon.dropdown:before { content: "\f0d7"; } i.icon.emergency:before { content: "\f0f9"; } i.icon.erase:before { content: "\f12d"; } i.icon.eur:before { content: "\f153"; } i.icon.euro:before { content: "\f153"; } i.icon.exchange:before { content: "\f362"; } i.icon.external:before { content: "\f35d"; } i.icon.external.share:before { content: "\f14d"; } i.icon.external.square:before { content: "\f360"; } i.icon.eyedropper:before { content: "\f1fb"; } i.icon.factory:before { content: "\f275"; } i.icon.favorite:before { content: "\f005"; } i.icon.feed:before { content: "\f09e"; } i.icon.female.homosexual:before { content: "\f226"; } i.icon.file.text:before { content: "\f15c"; } i.icon.find:before { content: "\f1e5"; } i.icon.first.aid:before { content: "\f0fa"; } i.icon.food:before { content: "\f2e7"; } i.icon.fork:before { content: "\f126"; } i.icon.game:before { content: "\f11b"; } i.icon.gay:before { content: "\f227"; } i.icon.gbp:before { content: "\f154"; } i.icon.grab:before { content: "\f255"; } i.icon.graduation:before { content: "\f19d"; } i.icon.grid.layout:before { content: "\f00a"; } i.icon.group:before { content: "\f0c0"; } i.icon.h:before { content: "\f0fd"; } i.icon.hamburger:before { content: "\f0c9"; } i.icon.hand.victory:before { content: "\f25b"; } i.icon.handicap:before { content: "\f193"; } i.icon.hard.of.hearing:before { content: "\f2a4"; } i.icon.header:before { content: "\f1dc"; } i.icon.heart.empty:before { content: "\f004"; } i.icon.help:before { content: "\f128"; } i.icon.help.circle:before { content: "\f059"; } i.icon.heterosexual:before { content: "\f228"; } i.icon.hide:before { content: "\f070"; } i.icon.hotel:before { content: "\f236"; } i.icon.hourglass.four:before { content: "\f254"; } i.icon.hourglass.full:before { content: "\f254"; } i.icon.hourglass.one:before { content: "\f251"; } i.icon.hourglass.three:before { content: "\f253"; } i.icon.hourglass.two:before { content: "\f252"; } i.icon.hourglass.zero:before { content: "\f253"; } i.icon.idea:before { content: "\f0eb"; } i.icon.ils:before { content: "\f20b"; } i.icon.in.cart:before { content: "\f218"; } i.icon.inr:before { content: "\f156"; } i.icon.intergender:before { content: "\f224"; } i.icon.intersex:before { content: "\f224"; } i.icon.jpy:before { content: "\f157"; } i.icon.krw:before { content: "\f159"; } i.icon.lab:before { content: "\f0c3"; } i.icon.law:before { content: "\f24e"; } i.icon.legal:before { content: "\f0e3"; } i.icon.lesbian:before { content: "\f226"; } i.icon.level.down:before { content: "\f3be"; } i.icon.level.up:before { content: "\f3bf"; } i.icon.lightning:before { content: "\f0e7"; } i.icon.like:before { content: "\f004"; } i.icon.line.graph:before { content: "\f201"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.lira:before { content: "\f195"; } i.icon.list.layout:before { content: "\f00b"; } i.icon.log.out:before { content: "\f2f5"; } i.icon.magnify:before { content: "\f00e"; } i.icon.mail:before { content: "\f0e0"; } i.icon.mail.forward:before { content: "\f064"; } i.icon.mail.square:before { content: "\f199"; } i.icon.male.homosexual:before { content: "\f227"; } i.icon.man:before { content: "\f222"; } i.icon.marker:before { content: "\f041"; } i.icon.mars.alternate:before { content: "\f229"; } i.icon.mars.horizontal:before { content: "\f22b"; } i.icon.mars.vertical:before { content: "\f22a"; } i.icon.meanpath:before { content: "\f0c8"; } i.icon.military:before { content: "\f0fb"; } i.icon.money:before { content: "\f3d1"; } i.icon.move:before { content: "\f0b2"; } i.icon.mute:before { content: "\f131"; } i.icon.non.binary.transgender:before { content: "\f223"; } i.icon.numbered.list:before { content: "\f0cb"; } i.icon.options:before { content: "\f1de"; } i.icon.ordered.list:before { content: "\f0cb"; } i.icon.other.gender:before { content: "\f229"; } i.icon.other.gender.horizontal:before { content: "\f22b"; } i.icon.other.gender.vertical:before { content: "\f22a"; } i.icon.payment:before { content: "\f09d"; } i.icon.pencil:before { content: "\f303"; } i.icon.pencil.square:before { content: "\f14b"; } i.icon.photo:before { content: "\f030"; } i.icon.picture:before { content: "\f03e"; } i.icon.pie.chart:before { content: "\f200"; } i.icon.pie.graph:before { content: "\f200"; } i.icon.pin:before { content: "\f08d"; } i.icon.plus.cart:before { content: "\f217"; } i.icon.point:before { content: "\f041"; } i.icon.pointing.down:before { content: "\f0a7"; } i.icon.pointing.left:before { content: "\f0a5"; } i.icon.pointing.right:before { content: "\f0a4"; } i.icon.pointing.up:before { content: "\f0a6"; } i.icon.pound:before { content: "\f154"; } i.icon.power:before { content: "\f011"; } i.icon.power.cord:before { content: "\f1e6"; } i.icon.privacy:before { content: "\f084"; } i.icon.protect:before { content: "\f023"; } i.icon.puzzle:before { content: "\f12e"; } i.icon.r.circle:before { content: "\f25d"; } i.icon.radio:before { content: "\f192"; } i.icon.rain:before { content: "\f0e9"; } i.icon.record:before { content: "\f03d"; } i.icon.refresh:before { content: "\f021"; } i.icon.remove:before { content: "\f00d"; } i.icon.remove.bookmark:before { content: "\f02e"; } i.icon.remove.circle:before { content: "\f057"; } i.icon.remove.from.calendar:before { content: "\f272"; } i.icon.remove.user:before { content: "\f235"; } i.icon.repeat:before { content: "\f01e"; } i.icon.resize.horizontal:before { content: "\f337"; } i.icon.resize.vertical:before { content: "\f338"; } i.icon.rmb:before { content: "\f157"; } i.icon.rouble:before { content: "\f158"; } i.icon.rub:before { content: "\f158"; } i.icon.ruble:before { content: "\f158"; } i.icon.rupee:before { content: "\f156"; } i.icon.s15:before { content: "\f2cd"; } i.icon.selected.radio:before { content: "\f192"; } i.icon.send:before { content: "\f1d8"; } i.icon.setting:before { content: "\f013"; } i.icon.settings:before { content: "\f085"; } i.icon.shekel:before { content: "\f20b"; } i.icon.sheqel:before { content: "\f20b"; } i.icon.shield:before { content: "\f3ed"; } i.icon.shipping:before { content: "\f0d1"; } i.icon.shop:before { content: "\f07a"; } i.icon.shuffle:before { content: "\f074"; } i.icon.shutdown:before { content: "\f011"; } i.icon.sidebar:before { content: "\f0c9"; } i.icon.sign.in:before { content: "\f2f6"; } i.icon.sign.out:before { content: "\f2f5"; } i.icon.signing:before { content: "\f2a7"; } i.icon.signup:before { content: "\f044"; } i.icon.sliders:before { content: "\f1de"; } i.icon.soccer:before { content: "\f1e3"; } i.icon.sort.alphabet.ascending:before { content: "\f15d"; } i.icon.sort.alphabet.descending:before { content: "\f15e"; } i.icon.sort.ascending:before { content: "\f0de"; } i.icon.sort.content.ascending:before { content: "\f160"; } i.icon.sort.content.descending:before { content: "\f161"; } i.icon.sort.descending:before { content: "\f0dd"; } i.icon.sort.numeric.ascending:before { content: "\f162"; } i.icon.sort.numeric.descending:before { content: "\f163"; } i.icon.sound:before { content: "\f025"; } i.icon.spoon:before { content: "\f2e5"; } i.icon.spy:before { content: "\f21b"; } i.icon.star.empty:before { content: "\f005"; } i.icon.star.half.empty:before { content: "\f089"; } i.icon.star.half.full:before { content: "\f089"; } i.icon.student:before { content: "\f19d"; } i.icon.talk:before { content: "\f27a"; } i.icon.target:before { content: "\f140"; } i.icon.teletype:before { content: "\f1e4"; } i.icon.television:before { content: "\f26c"; } i.icon.text.cursor:before { content: "\f246"; } i.icon.text.telephone:before { content: "\f1e4"; } i.icon.theme:before { content: "\f043"; } i.icon.thermometer:before { content: "\f2c7"; } i.icon.thumb.tack:before { content: "\f08d"; } i.icon.ticket:before { content: "\f3ff"; } i.icon.time:before { content: "\f017"; } i.icon.times.rectangle:before { content: "\f410"; } i.icon.tm:before { content: "\f25c"; } i.icon.toggle.down:before { content: "\f150"; } i.icon.toggle.left:before { content: "\f191"; } i.icon.toggle.right:before { content: "\f152"; } i.icon.toggle.up:before { content: "\f151"; } i.icon.translate:before { content: "\f1ab"; } i.icon.travel:before { content: "\f0b1"; } i.icon.treatment:before { content: "\f0f1"; } i.icon.triangle.down:before { content: "\f0d7"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.try:before { content: "\f195"; } i.icon.unhide:before { content: "\f06e"; } i.icon.unlinkify:before { content: "\f127"; } i.icon.unmute:before { content: "\f130"; } i.icon.unordered.list:before { content: "\f0ca"; } i.icon.usd:before { content: "\f155"; } i.icon.user.cancel:before { content: "\f235"; } i.icon.user.close:before { content: "\f235"; } i.icon.user.delete:before { content: "\f235"; } i.icon.user.doctor:before { content: "\f0f0"; } i.icon.user.x:before { content: "\f235"; } i.icon.vcard:before { content: "\f2bb"; } i.icon.video.camera:before { content: "\f03d"; } i.icon.video.play:before { content: "\f144"; } i.icon.volume.control.phone:before { content: "\f2a0"; } i.icon.wait:before { content: "\f017"; } i.icon.warning:before { content: "\f12a"; } i.icon.warning.circle:before { content: "\f06a"; } i.icon.warning.sign:before { content: "\f071"; } i.icon.wi.fi:before { content: "\f1eb"; } i.icon.winner:before { content: "\f091"; } i.icon.wizard:before { content: "\f0d0"; } i.icon.woman:before { content: "\f221"; } i.icon.won:before { content: "\f159"; } i.icon.world:before { content: "\f0ac"; } i.icon.write:before { content: "\f303"; } i.icon.write.square:before { content: "\f14b"; } i.icon.x:before { content: "\f00d"; } i.icon.yen:before { content: "\f157"; } i.icon.zip:before { content: "\f187"; } i.icon.zoom:before { content: "\f00e"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } /******************************* Outline Icons *******************************/ /* Outline Icon */ /* Load & Define Icon Font */ @font-face { font-family: 'outline-icons'; src: url(seagate-brandportal-sui/resources/fonts/outline-icons.eot); src: url(seagate-brandportal-sui/resources/fonts/outline-icons.eot?#iefix) format('embedded-opentype'), url(seagate-brandportal-sui/resources/fonts/outline-icons.woff2) format('woff2'), url(seagate-brandportal-sui/resources/fonts/outline-icons.woff) format('woff'), url(seagate-brandportal-sui/resources/fonts/outline-icons.ttf) format('truetype'), url(seagate-brandportal-sui/resources/images/outline-icons.svg?9443c1e7fdf95d739af3f0901224f90a#icons) format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon.outline { font-family: 'outline-icons'; } /* Icons */ i.icon.address.book.outline:before { content: "\f2b9"; } i.icon.address.card.outline:before { content: "\f2bb"; } i.icon.angry.outline:before { content: "\f556"; } i.icon.arrow.alternate.circle.down.outline:before { content: "\f358"; } i.icon.arrow.alternate.circle.left.outline:before { content: "\f359"; } i.icon.arrow.alternate.circle.right.outline:before { content: "\f35a"; } i.icon.arrow.alternate.circle.up.outline:before { content: "\f35b"; } i.icon.bell.outline:before { content: "\f0f3"; } i.icon.bell.slash.outline:before { content: "\f1f6"; } i.icon.bookmark.outline:before { content: "\f02e"; } i.icon.building.outline:before { content: "\f1ad"; } i.icon.calendar.alternate.outline:before { content: "\f073"; } i.icon.calendar.check.outline:before { content: "\f274"; } i.icon.calendar.minus.outline:before { content: "\f272"; } i.icon.calendar.outline:before { content: "\f133"; } i.icon.calendar.plus.outline:before { content: "\f271"; } i.icon.calendar.times.outline:before { content: "\f273"; } i.icon.caret.square.down.outline:before { content: "\f150"; } i.icon.caret.square.left.outline:before { content: "\f191"; } i.icon.caret.square.right.outline:before { content: "\f152"; } i.icon.caret.square.up.outline:before { content: "\f151"; } i.icon.chart.bar.outline:before { content: "\f080"; } i.icon.check.circle.outline:before { content: "\f058"; } i.icon.check.square.outline:before { content: "\f14a"; } i.icon.circle.outline:before { content: "\f111"; } i.icon.clipboard.outline:before { content: "\f328"; } i.icon.clock.outline:before { content: "\f017"; } i.icon.clone.outline:before { content: "\f24d"; } i.icon.closed.captioning.outline:before { content: "\f20a"; } i.icon.comment.alternate.outline:before { content: "\f27a"; } i.icon.comment.dots.outline:before { content: "\f4ad"; } i.icon.comment.outline:before { content: "\f075"; } i.icon.comments.outline:before { content: "\f086"; } i.icon.compass.outline:before { content: "\f14e"; } i.icon.copy.outline:before { content: "\f0c5"; } i.icon.copyright.outline:before { content: "\f1f9"; } i.icon.credit.card.outline:before { content: "\f09d"; } i.icon.dizzy.outline:before { content: "\f567"; } i.icon.dot.circle.outline:before { content: "\f192"; } i.icon.edit.outline:before { content: "\f044"; } i.icon.envelope.open.outline:before { content: "\f2b6"; } i.icon.envelope.outline:before { content: "\f0e0"; } i.icon.eye.outline:before { content: "\f06e"; } i.icon.eye.slash.outline:before { content: "\f070"; } i.icon.file.alternate.outline:before { content: "\f15c"; } i.icon.file.archive.outline:before { content: "\f1c6"; } i.icon.file.audio.outline:before { content: "\f1c7"; } i.icon.file.code.outline:before { content: "\f1c9"; } i.icon.file.excel.outline:before { content: "\f1c3"; } i.icon.file.image.outline:before { content: "\f1c5"; } i.icon.file.outline:before { content: "\f15b"; } i.icon.file.pdf.outline:before { content: "\f1c1"; } i.icon.file.powerpoint.outline:before { content: "\f1c4"; } i.icon.file.video.outline:before { content: "\f1c8"; } i.icon.file.word.outline:before { content: "\f1c2"; } i.icon.flag.outline:before { content: "\f024"; } i.icon.flushed.outline:before { content: "\f579"; } i.icon.folder.open.outline:before { content: "\f07c"; } i.icon.folder.outline:before { content: "\f07b"; } i.icon.frown.open.outline:before { content: "\f57a"; } i.icon.frown.outline:before { content: "\f119"; } i.icon.futbol.outline:before { content: "\f1e3"; } i.icon.gem.outline:before { content: "\f3a5"; } i.icon.grimace.outline:before { content: "\f57f"; } i.icon.grin.alternate.outline:before { content: "\f581"; } i.icon.grin.beam.outline:before { content: "\f582"; } i.icon.grin.beam.sweat.outline:before { content: "\f583"; } i.icon.grin.hearts.outline:before { content: "\f584"; } i.icon.grin.outline:before { content: "\f580"; } i.icon.grin.squint.outline:before { content: "\f585"; } i.icon.grin.squint.tears.outline:before { content: "\f586"; } i.icon.grin.stars.outline:before { content: "\f587"; } i.icon.grin.tears.outline:before { content: "\f588"; } i.icon.grin.tongue.outline:before { content: "\f589"; } i.icon.grin.tongue.squint.outline:before { content: "\f58a"; } i.icon.grin.tongue.wink.outline:before { content: "\f58b"; } i.icon.grin.wink.outline:before { content: "\f58c"; } i.icon.hand.lizard.outline:before { content: "\f258"; } i.icon.hand.paper.outline:before { content: "\f256"; } i.icon.hand.peace.outline:before { content: "\f25b"; } i.icon.hand.point.down.outline:before { content: "\f0a7"; } i.icon.hand.point.left.outline:before { content: "\f0a5"; } i.icon.hand.point.right.outline:before { content: "\f0a4"; } i.icon.hand.point.up.outline:before { content: "\f0a6"; } i.icon.hand.pointer.outline:before { content: "\f25a"; } i.icon.hand.rock.outline:before { content: "\f255"; } i.icon.hand.scissors.outline:before { content: "\f257"; } i.icon.hand.spock.outline:before { content: "\f259"; } i.icon.handshake.outline:before { content: "\f2b5"; } i.icon.hdd.outline:before { content: "\f0a0"; } i.icon.heart.outline:before { content: "\f004"; } i.icon.hospital.outline:before { content: "\f0f8"; } i.icon.hourglass.outline:before { content: "\f254"; } i.icon.id.badge.outline:before { content: "\f2c1"; } i.icon.id.card.outline:before { content: "\f2c2"; } i.icon.image.outline:before { content: "\f03e"; } i.icon.images.outline:before { content: "\f302"; } i.icon.keyboard.outline:before { content: "\f11c"; } i.icon.kiss.beam.outline:before { content: "\f597"; } i.icon.kiss.outline:before { content: "\f596"; } i.icon.kiss.wink.heart.outline:before { content: "\f598"; } i.icon.laugh.beam.outline:before { content: "\f59a"; } i.icon.laugh.outline:before { content: "\f599"; } i.icon.laugh.squint.outline:before { content: "\f59b"; } i.icon.laugh.wink.outline:before { content: "\f59c"; } i.icon.lemon.outline:before { content: "\f094"; } i.icon.life.ring.outline:before { content: "\f1cd"; } i.icon.lightbulb.outline:before { content: "\f0eb"; } i.icon.list.alternate.outline:before { content: "\f022"; } i.icon.map.outline:before { content: "\f279"; } i.icon.meh.blank.outline:before { content: "\f5a4"; } i.icon.meh.outline:before { content: "\f11a"; } i.icon.meh.rolling.eyes.outline:before { content: "\f5a5"; } i.icon.minus.square.outline:before { content: "\f146"; } i.icon.money.bill.alternate.outline:before { content: "\f3d1"; } i.icon.moon.outline:before { content: "\f186"; } i.icon.newspaper.outline:before { content: "\f1ea"; } i.icon.object.group.outline:before { content: "\f247"; } i.icon.object.ungroup.outline:before { content: "\f248"; } i.icon.paper.plane.outline:before { content: "\f1d8"; } i.icon.pause.circle.outline:before { content: "\f28b"; } i.icon.play.circle.outline:before { content: "\f144"; } i.icon.plus.square.outline:before { content: "\f0fe"; } i.icon.question.circle.outline:before { content: "\f059"; } i.icon.registered.outline:before { content: "\f25d"; } i.icon.sad.cry.outline:before { content: "\f5b3"; } i.icon.sad.tear.outline:before { content: "\f5b4"; } i.icon.save.outline:before { content: "\f0c7"; } i.icon.share.square.outline:before { content: "\f14d"; } i.icon.smile.beam.outline:before { content: "\f5b8"; } i.icon.smile.outline:before { content: "\f118"; } i.icon.smile.wink.outline:before { content: "\f4da"; } i.icon.snowflake.outline:before { content: "\f2dc"; } i.icon.square.outline:before { content: "\f0c8"; } i.icon.star.half.outline:before { content: "\f089"; } i.icon.star.outline:before { content: "\f005"; } i.icon.sticky.note.outline:before { content: "\f249"; } i.icon.stop.circle.outline:before { content: "\f28d"; } i.icon.sun.outline:before { content: "\f185"; } i.icon.surprise.outline:before { content: "\f5c2"; } i.icon.thumbs.down.outline:before { content: "\f165"; } i.icon.thumbs.up.outline:before { content: "\f164"; } i.icon.times.circle.outline:before { content: "\f057"; } i.icon.tired.outline:before { content: "\f5c8"; } i.icon.trash.alternate.outline:before { content: "\f2ed"; } i.icon.user.circle.outline:before { content: "\f2bd"; } i.icon.user.outline:before { content: "\f007"; } i.icon.window.close.outline:before { content: "\f410"; } i.icon.window.maximize.outline:before { content: "\f2d0"; } i.icon.window.minimize.outline:before { content: "\f2d1"; } i.icon.window.restore.outline:before { content: "\f2d2"; } /******************************* Brand Icons *******************************/ /* Load & Define Brand Font */ @font-face { font-family: 'brand-icons'; src: url(seagate-brandportal-sui/resources/fonts/brand-icons.eot); src: url(seagate-brandportal-sui/resources/fonts/brand-icons.eot?#iefix) format('embedded-opentype'), url(seagate-brandportal-sui/resources/fonts/brand-icons.woff2) format('woff2'), url(seagate-brandportal-sui/resources/fonts/brand-icons.woff) format('woff'), url(seagate-brandportal-sui/resources/fonts/brand-icons.ttf) format('truetype'), url(seagate-brandportal-sui/resources/images/brand-icons.svg?9d204f50ec8e5bcc5dcda0132d404b48#icons) format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } /* Icons */ i.icon.\35 00px:before { content: "\f26e"; font-family: 'brand-icons'; } i.icon.accessible:before { content: "\f368"; font-family: 'brand-icons'; } i.icon.accusoft:before { content: "\f369"; font-family: 'brand-icons'; } i.icon.acquisitions.incorporated:before { content: "\f6af"; font-family: 'brand-icons'; } i.icon.adn:before { content: "\f170"; font-family: 'brand-icons'; } i.icon.adobe:before { content: "\f778"; font-family: 'brand-icons'; } i.icon.adversal:before { content: "\f36a"; font-family: 'brand-icons'; } i.icon.affiliatetheme:before { content: "\f36b"; font-family: 'brand-icons'; } i.icon.airbnb:before { content: "\f834"; font-family: 'brand-icons'; } i.icon.algolia:before { content: "\f36c"; font-family: 'brand-icons'; } i.icon.alipay:before { content: "\f642"; font-family: 'brand-icons'; } i.icon.amazon:before { content: "\f270"; font-family: 'brand-icons'; } i.icon.amazon.pay:before { content: "\f42c"; font-family: 'brand-icons'; } i.icon.amilia:before { content: "\f36d"; font-family: 'brand-icons'; } i.icon.android:before { content: "\f17b"; font-family: 'brand-icons'; } i.icon.angellist:before { content: "\f209"; font-family: 'brand-icons'; } i.icon.angrycreative:before { content: "\f36e"; font-family: 'brand-icons'; } i.icon.angular:before { content: "\f420"; font-family: 'brand-icons'; } i.icon.app.store:before { content: "\f36f"; font-family: 'brand-icons'; } i.icon.app.store.ios:before { content: "\f370"; font-family: 'brand-icons'; } i.icon.apper:before { content: "\f371"; font-family: 'brand-icons'; } i.icon.apple:before { content: "\f179"; font-family: 'brand-icons'; } i.icon.apple.pay:before { content: "\f415"; font-family: 'brand-icons'; } i.icon.artstation:before { content: "\f77a"; font-family: 'brand-icons'; } i.icon.asymmetrik:before { content: "\f372"; font-family: 'brand-icons'; } i.icon.atlassian:before { content: "\f77b"; font-family: 'brand-icons'; } i.icon.audible:before { content: "\f373"; font-family: 'brand-icons'; } i.icon.autoprefixer:before { content: "\f41c"; font-family: 'brand-icons'; } i.icon.avianex:before { content: "\f374"; font-family: 'brand-icons'; } i.icon.aviato:before { content: "\f421"; font-family: 'brand-icons'; } i.icon.aws:before { content: "\f375"; font-family: 'brand-icons'; } i.icon.bandcamp:before { content: "\f2d5"; font-family: 'brand-icons'; } i.icon.battle.net:before { content: "\f835"; font-family: 'brand-icons'; } i.icon.behance:before { content: "\f1b4"; font-family: 'brand-icons'; } i.icon.behance.square:before { content: "\f1b5"; font-family: 'brand-icons'; } i.icon.bimobject:before { content: "\f378"; font-family: 'brand-icons'; } i.icon.bitbucket:before { content: "\f171"; font-family: 'brand-icons'; } i.icon.bitcoin:before { content: "\f379"; font-family: 'brand-icons'; } i.icon.bity:before { content: "\f37a"; font-family: 'brand-icons'; } i.icon.black.tie:before { content: "\f27e"; font-family: 'brand-icons'; } i.icon.blackberry:before { content: "\f37b"; font-family: 'brand-icons'; } i.icon.blogger:before { content: "\f37c"; font-family: 'brand-icons'; } i.icon.blogger.b:before { content: "\f37d"; font-family: 'brand-icons'; } i.icon.bluetooth:before { content: "\f293"; font-family: 'brand-icons'; } i.icon.bluetooth.b:before { content: "\f294"; font-family: 'brand-icons'; } i.icon.bootstrap:before { content: "\f836"; font-family: 'brand-icons'; } i.icon.btc:before { content: "\f15a"; font-family: 'brand-icons'; } i.icon.buffer:before { content: "\f837"; font-family: 'brand-icons'; } i.icon.buromobelexperte:before { content: "\f37f"; font-family: 'brand-icons'; } i.icon.buy.n.large:before { content: "\f8a6"; font-family: 'brand-icons'; } i.icon.buysellads:before { content: "\f20d"; font-family: 'brand-icons'; } i.icon.canadian.maple.leaf:before { content: "\f785"; font-family: 'brand-icons'; } i.icon.cc.amazon.pay:before { content: "\f42d"; font-family: 'brand-icons'; } i.icon.cc.amex:before { content: "\f1f3"; font-family: 'brand-icons'; } i.icon.cc.apple.pay:before { content: "\f416"; font-family: 'brand-icons'; } i.icon.cc.diners.club:before { content: "\f24c"; font-family: 'brand-icons'; } i.icon.cc.discover:before { content: "\f1f2"; font-family: 'brand-icons'; } i.icon.cc.jcb:before { content: "\f24b"; font-family: 'brand-icons'; } i.icon.cc.mastercard:before { content: "\f1f1"; font-family: 'brand-icons'; } i.icon.cc.paypal:before { content: "\f1f4"; font-family: 'brand-icons'; } i.icon.cc.stripe:before { content: "\f1f5"; font-family: 'brand-icons'; } i.icon.cc.visa:before { content: "\f1f0"; font-family: 'brand-icons'; } i.icon.centercode:before { content: "\f380"; font-family: 'brand-icons'; } i.icon.centos:before { content: "\f789"; font-family: 'brand-icons'; } i.icon.chrome:before { content: "\f268"; font-family: 'brand-icons'; } i.icon.chromecast:before { content: "\f838"; font-family: 'brand-icons'; } i.icon.cloudscale:before { content: "\f383"; font-family: 'brand-icons'; } i.icon.cloudsmith:before { content: "\f384"; font-family: 'brand-icons'; } i.icon.cloudversify:before { content: "\f385"; font-family: 'brand-icons'; } i.icon.codepen:before { content: "\f1cb"; font-family: 'brand-icons'; } i.icon.codiepie:before { content: "\f284"; font-family: 'brand-icons'; } i.icon.confluence:before { content: "\f78d"; font-family: 'brand-icons'; } i.icon.connectdevelop:before { content: "\f20e"; font-family: 'brand-icons'; } i.icon.contao:before { content: "\f26d"; font-family: 'brand-icons'; } i.icon.cotton.bureau:before { content: "\f89e"; font-family: 'brand-icons'; } i.icon.cpanel:before { content: "\f388"; font-family: 'brand-icons'; } i.icon.creative.commons:before { content: "\f25e"; font-family: 'brand-icons'; } i.icon.creative.commons.by:before { content: "\f4e7"; font-family: 'brand-icons'; } i.icon.creative.commons.nc:before { content: "\f4e8"; font-family: 'brand-icons'; } i.icon.creative.commons.nc.eu:before { content: "\f4e9"; font-family: 'brand-icons'; } i.icon.creative.commons.nc.jp:before { content: "\f4ea"; font-family: 'brand-icons'; } i.icon.creative.commons.nd:before { content: "\f4eb"; font-family: 'brand-icons'; } i.icon.creative.commons.pd:before { content: "\f4ec"; font-family: 'brand-icons'; } i.icon.creative.commons.pd.alternate:before { content: "\f4ed"; font-family: 'brand-icons'; } i.icon.creative.commons.remix:before { content: "\f4ee"; font-family: 'brand-icons'; } i.icon.creative.commons.sa:before { content: "\f4ef"; font-family: 'brand-icons'; } i.icon.creative.commons.sampling:before { content: "\f4f0"; font-family: 'brand-icons'; } i.icon.creative.commons.sampling.plus:before { content: "\f4f1"; font-family: 'brand-icons'; } i.icon.creative.commons.share:before { content: "\f4f2"; font-family: 'brand-icons'; } i.icon.creative.commons.zero:before { content: "\f4f3"; font-family: 'brand-icons'; } i.icon.critical.role:before { content: "\f6c9"; font-family: 'brand-icons'; } i.icon.css3:before { content: "\f13c"; font-family: 'brand-icons'; } i.icon.css3.alternate:before { content: "\f38b"; font-family: 'brand-icons'; } i.icon.cuttlefish:before { content: "\f38c"; font-family: 'brand-icons'; } i.icon.d.and.d:before { content: "\f38d"; font-family: 'brand-icons'; } i.icon.d.and.d.beyond:before { content: "\f6ca"; font-family: 'brand-icons'; } i.icon.dashcube:before { content: "\f210"; font-family: 'brand-icons'; } i.icon.delicious:before { content: "\f1a5"; font-family: 'brand-icons'; } i.icon.deploydog:before { content: "\f38e"; font-family: 'brand-icons'; } i.icon.deskpro:before { content: "\f38f"; font-family: 'brand-icons'; } i.icon.dev:before { content: "\f6cc"; font-family: 'brand-icons'; } i.icon.deviantart:before { content: "\f1bd"; font-family: 'brand-icons'; } i.icon.dhl:before { content: "\f790"; font-family: 'brand-icons'; } i.icon.diaspora:before { content: "\f791"; font-family: 'brand-icons'; } i.icon.digg:before { content: "\f1a6"; font-family: 'brand-icons'; } i.icon.digital.ocean:before { content: "\f391"; font-family: 'brand-icons'; } i.icon.discord:before { content: "\f392"; font-family: 'brand-icons'; } i.icon.discourse:before { content: "\f393"; font-family: 'brand-icons'; } i.icon.dochub:before { content: "\f394"; font-family: 'brand-icons'; } i.icon.docker:before { content: "\f395"; font-family: 'brand-icons'; } i.icon.draft2digital:before { content: "\f396"; font-family: 'brand-icons'; } i.icon.dribbble:before { content: "\f17d"; font-family: 'brand-icons'; } i.icon.dribbble.square:before { content: "\f397"; font-family: 'brand-icons'; } i.icon.dropbox:before { content: "\f16b"; font-family: 'brand-icons'; } i.icon.drupal:before { content: "\f1a9"; font-family: 'brand-icons'; } i.icon.dyalog:before { content: "\f399"; font-family: 'brand-icons'; } i.icon.earlybirds:before { content: "\f39a"; font-family: 'brand-icons'; } i.icon.ebay:before { content: "\f4f4"; font-family: 'brand-icons'; } i.icon.edge:before { content: "\f282"; font-family: 'brand-icons'; } i.icon.elementor:before { content: "\f430"; font-family: 'brand-icons'; } i.icon.ello:before { content: "\f5f1"; font-family: 'brand-icons'; } i.icon.ember:before { content: "\f423"; font-family: 'brand-icons'; } i.icon.empire:before { content: "\f1d1"; font-family: 'brand-icons'; } i.icon.envira:before { content: "\f299"; font-family: 'brand-icons'; } i.icon.erlang:before { content: "\f39d"; font-family: 'brand-icons'; } i.icon.ethereum:before { content: "\f42e"; font-family: 'brand-icons'; } i.icon.etsy:before { content: "\f2d7"; font-family: 'brand-icons'; } i.icon.evernote:before { content: "\f839"; font-family: 'brand-icons'; } i.icon.expeditedssl:before { content: "\f23e"; font-family: 'brand-icons'; } i.icon.facebook:before { content: "\f09a"; font-family: 'brand-icons'; } i.icon.facebook.f:before { content: "\f39e"; font-family: 'brand-icons'; } i.icon.facebook.messenger:before { content: "\f39f"; font-family: 'brand-icons'; } i.icon.facebook.square:before { content: "\f082"; font-family: 'brand-icons'; } i.icon.fantasy.flight.games:before { content: "\f6dc"; font-family: 'brand-icons'; } i.icon.fedex:before { content: "\f797"; font-family: 'brand-icons'; } i.icon.fedora:before { content: "\f798"; font-family: 'brand-icons'; } i.icon.figma:before { content: "\f799"; font-family: 'brand-icons'; } i.icon.firefox:before { content: "\f269"; font-family: 'brand-icons'; } i.icon.first.order:before { content: "\f2b0"; font-family: 'brand-icons'; } i.icon.first.order.alternate:before { content: "\f50a"; font-family: 'brand-icons'; } i.icon.firstdraft:before { content: "\f3a1"; font-family: 'brand-icons'; } i.icon.flickr:before { content: "\f16e"; font-family: 'brand-icons'; } i.icon.flipboard:before { content: "\f44d"; font-family: 'brand-icons'; } i.icon.fly:before { content: "\f417"; font-family: 'brand-icons'; } i.icon.font.awesome:before { content: "\f2b4"; font-family: 'brand-icons'; } i.icon.font.awesome.alternate:before { content: "\f35c"; font-family: 'brand-icons'; } i.icon.font.awesome.flag:before { content: "\f425"; font-family: 'brand-icons'; } i.icon.fonticons:before { content: "\f280"; font-family: 'brand-icons'; } i.icon.fonticons.fi:before { content: "\f3a2"; font-family: 'brand-icons'; } i.icon.fort.awesome:before { content: "\f286"; font-family: 'brand-icons'; } i.icon.fort.awesome.alternate:before { content: "\f3a3"; font-family: 'brand-icons'; } i.icon.forumbee:before { content: "\f211"; font-family: 'brand-icons'; } i.icon.foursquare:before { content: "\f180"; font-family: 'brand-icons'; } i.icon.free.code.camp:before { content: "\f2c5"; font-family: 'brand-icons'; } i.icon.freebsd:before { content: "\f3a4"; font-family: 'brand-icons'; } i.icon.fulcrum:before { content: "\f50b"; font-family: 'brand-icons'; } i.icon.galactic.republic:before { content: "\f50c"; font-family: 'brand-icons'; } i.icon.galactic.senate:before { content: "\f50d"; font-family: 'brand-icons'; } i.icon.get.pocket:before { content: "\f265"; font-family: 'brand-icons'; } i.icon.gg:before { content: "\f260"; font-family: 'brand-icons'; } i.icon.gg.circle:before { content: "\f261"; font-family: 'brand-icons'; } i.icon.git:before { content: "\f1d3"; font-family: 'brand-icons'; } i.icon.git.alternate:before { content: "\f841"; font-family: 'brand-icons'; } i.icon.git.square:before { content: "\f1d2"; font-family: 'brand-icons'; } i.icon.github:before { content: "\f09b"; font-family: 'brand-icons'; } i.icon.github.alternate:before { content: "\f113"; font-family: 'brand-icons'; } i.icon.github.square:before { content: "\f092"; font-family: 'brand-icons'; } i.icon.gitkraken:before { content: "\f3a6"; font-family: 'brand-icons'; } i.icon.gitlab:before { content: "\f296"; font-family: 'brand-icons'; } i.icon.gitter:before { content: "\f426"; font-family: 'brand-icons'; } i.icon.glide:before { content: "\f2a5"; font-family: 'brand-icons'; } i.icon.glide.g:before { content: "\f2a6"; font-family: 'brand-icons'; } i.icon.gofore:before { content: "\f3a7"; font-family: 'brand-icons'; } i.icon.goodreads:before { content: "\f3a8"; font-family: 'brand-icons'; } i.icon.goodreads.g:before { content: "\f3a9"; font-family: 'brand-icons'; } i.icon.google:before { content: "\f1a0"; font-family: 'brand-icons'; } i.icon.google.drive:before { content: "\f3aa"; font-family: 'brand-icons'; } i.icon.google.play:before { content: "\f3ab"; font-family: 'brand-icons'; } i.icon.google.plus:before { content: "\f2b3"; font-family: 'brand-icons'; } i.icon.google.plus.g:before { content: "\f0d5"; font-family: 'brand-icons'; } i.icon.google.plus.square:before { content: "\f0d4"; font-family: 'brand-icons'; } i.icon.google.wallet:before { content: "\f1ee"; font-family: 'brand-icons'; } i.icon.gratipay:before { content: "\f184"; font-family: 'brand-icons'; } i.icon.grav:before { content: "\f2d6"; font-family: 'brand-icons'; } i.icon.gripfire:before { content: "\f3ac"; font-family: 'brand-icons'; } i.icon.grunt:before { content: "\f3ad"; font-family: 'brand-icons'; } i.icon.gulp:before { content: "\f3ae"; font-family: 'brand-icons'; } i.icon.hacker.news:before { content: "\f1d4"; font-family: 'brand-icons'; } i.icon.hacker.news.square:before { content: "\f3af"; font-family: 'brand-icons'; } i.icon.hackerrank:before { content: "\f5f7"; font-family: 'brand-icons'; } i.icon.hips:before { content: "\f452"; font-family: 'brand-icons'; } i.icon.hire.a.helper:before { content: "\f3b0"; font-family: 'brand-icons'; } i.icon.hooli:before { content: "\f427"; font-family: 'brand-icons'; } i.icon.hornbill:before { content: "\f592"; font-family: 'brand-icons'; } i.icon.hotjar:before { content: "\f3b1"; font-family: 'brand-icons'; } i.icon.houzz:before { content: "\f27c"; font-family: 'brand-icons'; } i.icon.html5:before { content: "\f13b"; font-family: 'brand-icons'; } i.icon.hubspot:before { content: "\f3b2"; font-family: 'brand-icons'; } i.icon.imdb:before { content: "\f2d8"; font-family: 'brand-icons'; } i.icon.instagram:before { content: "\f16d"; font-family: 'brand-icons'; } i.icon.intercom:before { content: "\f7af"; font-family: 'brand-icons'; } i.icon.internet.explorer:before { content: "\f26b"; font-family: 'brand-icons'; } i.icon.invision:before { content: "\f7b0"; font-family: 'brand-icons'; } i.icon.ioxhost:before { content: "\f208"; font-family: 'brand-icons'; } i.icon.itch.io:before { content: "\f83a"; font-family: 'brand-icons'; } i.icon.itunes:before { content: "\f3b4"; font-family: 'brand-icons'; } i.icon.itunes.note:before { content: "\f3b5"; font-family: 'brand-icons'; } i.icon.java:before { content: "\f4e4"; font-family: 'brand-icons'; } i.icon.jedi.order:before { content: "\f50e"; font-family: 'brand-icons'; } i.icon.jenkins:before { content: "\f3b6"; font-family: 'brand-icons'; } i.icon.jira:before { content: "\f7b1"; font-family: 'brand-icons'; } i.icon.joget:before { content: "\f3b7"; font-family: 'brand-icons'; } i.icon.joomla:before { content: "\f1aa"; font-family: 'brand-icons'; } i.icon.js:before { content: "\f3b8"; font-family: 'brand-icons'; } i.icon.js.square:before { content: "\f3b9"; font-family: 'brand-icons'; } i.icon.jsfiddle:before { content: "\f1cc"; font-family: 'brand-icons'; } i.icon.kaggle:before { content: "\f5fa"; font-family: 'brand-icons'; } i.icon.keybase:before { content: "\f4f5"; font-family: 'brand-icons'; } i.icon.keycdn:before { content: "\f3ba"; font-family: 'brand-icons'; } i.icon.kickstarter:before { content: "\f3bb"; font-family: 'brand-icons'; } i.icon.kickstarter.k:before { content: "\f3bc"; font-family: 'brand-icons'; } i.icon.korvue:before { content: "\f42f"; font-family: 'brand-icons'; } i.icon.laravel:before { content: "\f3bd"; font-family: 'brand-icons'; } i.icon.lastfm:before { content: "\f202"; font-family: 'brand-icons'; } i.icon.lastfm.square:before { content: "\f203"; font-family: 'brand-icons'; } i.icon.leanpub:before { content: "\f212"; font-family: 'brand-icons'; } i.icon.lesscss:before { content: "\f41d"; font-family: 'brand-icons'; } i.icon.linechat:before { content: "\f3c0"; font-family: 'brand-icons'; } i.icon.linkedin:before { content: "\f08c"; font-family: 'brand-icons'; } i.icon.linkedin.in:before { content: "\f0e1"; font-family: 'brand-icons'; } i.icon.linode:before { content: "\f2b8"; font-family: 'brand-icons'; } i.icon.linux:before { content: "\f17c"; font-family: 'brand-icons'; } i.icon.lyft:before { content: "\f3c3"; font-family: 'brand-icons'; } i.icon.magento:before { content: "\f3c4"; font-family: 'brand-icons'; } i.icon.mailchimp:before { content: "\f59e"; font-family: 'brand-icons'; } i.icon.mandalorian:before { content: "\f50f"; font-family: 'brand-icons'; } i.icon.markdown:before { content: "\f60f"; font-family: 'brand-icons'; } i.icon.mastodon:before { content: "\f4f6"; font-family: 'brand-icons'; } i.icon.maxcdn:before { content: "\f136"; font-family: 'brand-icons'; } i.icon.mdb:before { content: "\f8ca"; font-family: 'brand-icons'; } i.icon.medapps:before { content: "\f3c6"; font-family: 'brand-icons'; } i.icon.medium:before { content: "\f23a"; font-family: 'brand-icons'; } i.icon.medium.m:before { content: "\f3c7"; font-family: 'brand-icons'; } i.icon.medrt:before { content: "\f3c8"; font-family: 'brand-icons'; } i.icon.meetup:before { content: "\f2e0"; font-family: 'brand-icons'; } i.icon.megaport:before { content: "\f5a3"; font-family: 'brand-icons'; } i.icon.mendeley:before { content: "\f7b3"; font-family: 'brand-icons'; } i.icon.microsoft:before { content: "\f3ca"; font-family: 'brand-icons'; } i.icon.mix:before { content: "\f3cb"; font-family: 'brand-icons'; } i.icon.mixcloud:before { content: "\f289"; font-family: 'brand-icons'; } i.icon.mizuni:before { content: "\f3cc"; font-family: 'brand-icons'; } i.icon.modx:before { content: "\f285"; font-family: 'brand-icons'; } i.icon.monero:before { content: "\f3d0"; font-family: 'brand-icons'; } i.icon.napster:before { content: "\f3d2"; font-family: 'brand-icons'; } i.icon.neos:before { content: "\f612"; font-family: 'brand-icons'; } i.icon.nimblr:before { content: "\f5a8"; font-family: 'brand-icons'; } i.icon.node:before { content: "\f419"; font-family: 'brand-icons'; } i.icon.node.js:before { content: "\f3d3"; font-family: 'brand-icons'; } i.icon.npm:before { content: "\f3d4"; font-family: 'brand-icons'; } i.icon.ns8:before { content: "\f3d5"; font-family: 'brand-icons'; } i.icon.nutritionix:before { content: "\f3d6"; font-family: 'brand-icons'; } i.icon.odnoklassniki:before { content: "\f263"; font-family: 'brand-icons'; } i.icon.odnoklassniki.square:before { content: "\f264"; font-family: 'brand-icons'; } i.icon.old.republic:before { content: "\f510"; font-family: 'brand-icons'; } i.icon.opencart:before { content: "\f23d"; font-family: 'brand-icons'; } i.icon.openid:before { content: "\f19b"; font-family: 'brand-icons'; } i.icon.opera:before { content: "\f26a"; font-family: 'brand-icons'; } i.icon.optin.monster:before { content: "\f23c"; font-family: 'brand-icons'; } i.icon.orcid:before { content: "\f8d2"; font-family: 'brand-icons'; } i.icon.osi:before { content: "\f41a"; font-family: 'brand-icons'; } i.icon.page4:before { content: "\f3d7"; font-family: 'brand-icons'; } i.icon.pagelines:before { content: "\f18c"; font-family: 'brand-icons'; } i.icon.palfed:before { content: "\f3d8"; font-family: 'brand-icons'; } i.icon.patreon:before { content: "\f3d9"; font-family: 'brand-icons'; } i.icon.paypal:before { content: "\f1ed"; font-family: 'brand-icons'; } i.icon.penny.arcade:before { content: "\f704"; font-family: 'brand-icons'; } i.icon.periscope:before { content: "\f3da"; font-family: 'brand-icons'; } i.icon.phabricator:before { content: "\f3db"; font-family: 'brand-icons'; } i.icon.phoenix.framework:before { content: "\f3dc"; font-family: 'brand-icons'; } i.icon.phoenix.squadron:before { content: "\f511"; font-family: 'brand-icons'; } i.icon.php:before { content: "\f457"; font-family: 'brand-icons'; } i.icon.pied.piper:before { content: "\f2ae"; font-family: 'brand-icons'; } i.icon.pied.piper.alternate:before { content: "\f1a8"; font-family: 'brand-icons'; } i.icon.pied.piper.hat:before { content: "\f4e5"; font-family: 'brand-icons'; } i.icon.pied.piper.pp:before { content: "\f1a7"; font-family: 'brand-icons'; } i.icon.pinterest:before { content: "\f0d2"; font-family: 'brand-icons'; } i.icon.pinterest.p:before { content: "\f231"; font-family: 'brand-icons'; } i.icon.pinterest.square:before { content: "\f0d3"; font-family: 'brand-icons'; } i.icon.playstation:before { content: "\f3df"; font-family: 'brand-icons'; } i.icon.product.hunt:before { content: "\f288"; font-family: 'brand-icons'; } i.icon.pushed:before { content: "\f3e1"; font-family: 'brand-icons'; } i.icon.python:before { content: "\f3e2"; font-family: 'brand-icons'; } i.icon.qq:before { content: "\f1d6"; font-family: 'brand-icons'; } i.icon.quinscape:before { content: "\f459"; font-family: 'brand-icons'; } i.icon.quora:before { content: "\f2c4"; font-family: 'brand-icons'; } i.icon.r.project:before { content: "\f4f7"; font-family: 'brand-icons'; } i.icon.raspberry.pi:before { content: "\f7bb"; font-family: 'brand-icons'; } i.icon.ravelry:before { content: "\f2d9"; font-family: 'brand-icons'; } i.icon.react:before { content: "\f41b"; font-family: 'brand-icons'; } i.icon.reacteurope:before { content: "\f75d"; font-family: 'brand-icons'; } i.icon.readme:before { content: "\f4d5"; font-family: 'brand-icons'; } i.icon.rebel:before { content: "\f1d0"; font-family: 'brand-icons'; } i.icon.reddit:before { content: "\f1a1"; font-family: 'brand-icons'; } i.icon.reddit.alien:before { content: "\f281"; font-family: 'brand-icons'; } i.icon.reddit.square:before { content: "\f1a2"; font-family: 'brand-icons'; } i.icon.redhat:before { content: "\f7bc"; font-family: 'brand-icons'; } i.icon.redriver:before { content: "\f3e3"; font-family: 'brand-icons'; } i.icon.redyeti:before { content: "\f69d"; font-family: 'brand-icons'; } i.icon.renren:before { content: "\f18b"; font-family: 'brand-icons'; } i.icon.replyd:before { content: "\f3e6"; font-family: 'brand-icons'; } i.icon.researchgate:before { content: "\f4f8"; font-family: 'brand-icons'; } i.icon.resolving:before { content: "\f3e7"; font-family: 'brand-icons'; } i.icon.rev:before { content: "\f5b2"; font-family: 'brand-icons'; } i.icon.rocketchat:before { content: "\f3e8"; font-family: 'brand-icons'; } i.icon.rockrms:before { content: "\f3e9"; font-family: 'brand-icons'; } i.icon.safari:before { content: "\f267"; font-family: 'brand-icons'; } i.icon.salesforce:before { content: "\f83b"; font-family: 'brand-icons'; } i.icon.sass:before { content: "\f41e"; font-family: 'brand-icons'; } i.icon.schlix:before { content: "\f3ea"; font-family: 'brand-icons'; } i.icon.scribd:before { content: "\f28a"; font-family: 'brand-icons'; } i.icon.searchengin:before { content: "\f3eb"; font-family: 'brand-icons'; } i.icon.sellcast:before { content: "\f2da"; font-family: 'brand-icons'; } i.icon.sellsy:before { content: "\f213"; font-family: 'brand-icons'; } i.icon.servicestack:before { content: "\f3ec"; font-family: 'brand-icons'; } i.icon.shirtsinbulk:before { content: "\f214"; font-family: 'brand-icons'; } i.icon.shopware:before { content: "\f5b5"; font-family: 'brand-icons'; } i.icon.simplybuilt:before { content: "\f215"; font-family: 'brand-icons'; } i.icon.sistrix:before { content: "\f3ee"; font-family: 'brand-icons'; } i.icon.sith:before { content: "\f512"; font-family: 'brand-icons'; } i.icon.sketch:before { content: "\f7c6"; font-family: 'brand-icons'; } i.icon.skyatlas:before { content: "\f216"; font-family: 'brand-icons'; } i.icon.skype:before { content: "\f17e"; font-family: 'brand-icons'; } i.icon.slack:before { content: "\f198"; font-family: 'brand-icons'; } i.icon.slack.hash:before { content: "\f3ef"; font-family: 'brand-icons'; } i.icon.slideshare:before { content: "\f1e7"; font-family: 'brand-icons'; } i.icon.snapchat:before { content: "\f2ab"; font-family: 'brand-icons'; } i.icon.snapchat.ghost:before { content: "\f2ac"; font-family: 'brand-icons'; } i.icon.snapchat.square:before { content: "\f2ad"; font-family: 'brand-icons'; } i.icon.soundcloud:before { content: "\f1be"; font-family: 'brand-icons'; } i.icon.sourcetree:before { content: "\f7d3"; font-family: 'brand-icons'; } i.icon.speakap:before { content: "\f3f3"; font-family: 'brand-icons'; } i.icon.speaker.deck:before { content: "\f83c"; font-family: 'brand-icons'; } i.icon.spotify:before { content: "\f1bc"; font-family: 'brand-icons'; } i.icon.squarespace:before { content: "\f5be"; font-family: 'brand-icons'; } i.icon.stack.exchange:before { content: "\f18d"; font-family: 'brand-icons'; } i.icon.stack.overflow:before { content: "\f16c"; font-family: 'brand-icons'; } i.icon.stackpath:before { content: "\f842"; font-family: 'brand-icons'; } i.icon.staylinked:before { content: "\f3f5"; font-family: 'brand-icons'; } i.icon.steam:before { content: "\f1b6"; font-family: 'brand-icons'; } i.icon.steam.square:before { content: "\f1b7"; font-family: 'brand-icons'; } i.icon.steam.symbol:before { content: "\f3f6"; font-family: 'brand-icons'; } i.icon.sticker.mule:before { content: "\f3f7"; font-family: 'brand-icons'; } i.icon.strava:before { content: "\f428"; font-family: 'brand-icons'; } i.icon.stripe:before { content: "\f429"; font-family: 'brand-icons'; } i.icon.stripe.s:before { content: "\f42a"; font-family: 'brand-icons'; } i.icon.studiovinari:before { content: "\f3f8"; font-family: 'brand-icons'; } i.icon.stumbleupon:before { content: "\f1a4"; font-family: 'brand-icons'; } i.icon.stumbleupon.circle:before { content: "\f1a3"; font-family: 'brand-icons'; } i.icon.superpowers:before { content: "\f2dd"; font-family: 'brand-icons'; } i.icon.supple:before { content: "\f3f9"; font-family: 'brand-icons'; } i.icon.suse:before { content: "\f7d6"; font-family: 'brand-icons'; } i.icon.swift:before { content: "\f8e1"; font-family: 'brand-icons'; } i.icon.symfony:before { content: "\f83d"; font-family: 'brand-icons'; } i.icon.teamspeak:before { content: "\f4f9"; font-family: 'brand-icons'; } i.icon.telegram:before { content: "\f2c6"; font-family: 'brand-icons'; } i.icon.telegram.plane:before { content: "\f3fe"; font-family: 'brand-icons'; } i.icon.tencent.weibo:before { content: "\f1d5"; font-family: 'brand-icons'; } i.icon.themeco:before { content: "\f5c6"; font-family: 'brand-icons'; } i.icon.themeisle:before { content: "\f2b2"; font-family: 'brand-icons'; } i.icon.think.peaks:before { content: "\f731"; font-family: 'brand-icons'; } i.icon.trade.federation:before { content: "\f513"; font-family: 'brand-icons'; } i.icon.trello:before { content: "\f181"; font-family: 'brand-icons'; } i.icon.tripadvisor:before { content: "\f262"; font-family: 'brand-icons'; } i.icon.tumblr:before { content: "\f173"; font-family: 'brand-icons'; } i.icon.tumblr.square:before { content: "\f174"; font-family: 'brand-icons'; } i.icon.twitch:before { content: "\f1e8"; font-family: 'brand-icons'; } i.icon.twitter:before { content: "\f099"; font-family: 'brand-icons'; } i.icon.twitter.square:before { content: "\f081"; font-family: 'brand-icons'; } i.icon.typo3:before { content: "\f42b"; font-family: 'brand-icons'; } i.icon.uber:before { content: "\f402"; font-family: 'brand-icons'; } i.icon.ubuntu:before { content: "\f7df"; font-family: 'brand-icons'; } i.icon.uikit:before { content: "\f403"; font-family: 'brand-icons'; } i.icon.umbraco:before { content: "\f8e8"; font-family: 'brand-icons'; } i.icon.uniregistry:before { content: "\f404"; font-family: 'brand-icons'; } i.icon.untappd:before { content: "\f405"; font-family: 'brand-icons'; } i.icon.ups:before { content: "\f7e0"; font-family: 'brand-icons'; } i.icon.usb:before { content: "\f287"; font-family: 'brand-icons'; } i.icon.usps:before { content: "\f7e1"; font-family: 'brand-icons'; } i.icon.ussunnah:before { content: "\f407"; font-family: 'brand-icons'; } i.icon.vaadin:before { content: "\f408"; font-family: 'brand-icons'; } i.icon.viacoin:before { content: "\f237"; font-family: 'brand-icons'; } i.icon.viadeo:before { content: "\f2a9"; font-family: 'brand-icons'; } i.icon.viadeo.square:before { content: "\f2aa"; font-family: 'brand-icons'; } i.icon.viber:before { content: "\f409"; font-family: 'brand-icons'; } i.icon.vimeo:before { content: "\f40a"; font-family: 'brand-icons'; } i.icon.vimeo.square:before { content: "\f194"; font-family: 'brand-icons'; } i.icon.vimeo.v:before { content: "\f27d"; font-family: 'brand-icons'; } i.icon.vine:before { content: "\f1ca"; font-family: 'brand-icons'; } i.icon.vk:before { content: "\f189"; font-family: 'brand-icons'; } i.icon.vnv:before { content: "\f40b"; font-family: 'brand-icons'; } i.icon.vuejs:before { content: "\f41f"; font-family: 'brand-icons'; } i.icon.waze:before { content: "\f83f"; font-family: 'brand-icons'; } i.icon.weebly:before { content: "\f5cc"; font-family: 'brand-icons'; } i.icon.weibo:before { content: "\f18a"; font-family: 'brand-icons'; } i.icon.weixin:before { content: "\f1d7"; font-family: 'brand-icons'; } i.icon.whatsapp:before { content: "\f232"; font-family: 'brand-icons'; } i.icon.whatsapp.square:before { content: "\f40c"; font-family: 'brand-icons'; } i.icon.whmcs:before { content: "\f40d"; font-family: 'brand-icons'; } i.icon.wikipedia.w:before { content: "\f266"; font-family: 'brand-icons'; } i.icon.windows:before { content: "\f17a"; font-family: 'brand-icons'; } i.icon.wix:before { content: "\f5cf"; font-family: 'brand-icons'; } i.icon.wizards.of.the.coast:before { content: "\f730"; font-family: 'brand-icons'; } i.icon.wolf.pack.battalion:before { content: "\f514"; font-family: 'brand-icons'; } i.icon.wordpress:before { content: "\f19a"; font-family: 'brand-icons'; } i.icon.wordpress.simple:before { content: "\f411"; font-family: 'brand-icons'; } i.icon.wpbeginner:before { content: "\f297"; font-family: 'brand-icons'; } i.icon.wpexplorer:before { content: "\f2de"; font-family: 'brand-icons'; } i.icon.wpforms:before { content: "\f298"; font-family: 'brand-icons'; } i.icon.wpressr:before { content: "\f3e4"; font-family: 'brand-icons'; } i.icon.xbox:before { content: "\f412"; font-family: 'brand-icons'; } i.icon.xing:before { content: "\f168"; font-family: 'brand-icons'; } i.icon.xing.square:before { content: "\f169"; font-family: 'brand-icons'; } i.icon.y.combinator:before { content: "\f23b"; font-family: 'brand-icons'; } i.icon.yahoo:before { content: "\f19e"; font-family: 'brand-icons'; } i.icon.yammer:before { content: "\f840"; font-family: 'brand-icons'; } i.icon.yandex:before { content: "\f413"; font-family: 'brand-icons'; } i.icon.yandex.international:before { content: "\f414"; font-family: 'brand-icons'; } i.icon.yarn:before { content: "\f7e3"; font-family: 'brand-icons'; } i.icon.yelp:before { content: "\f1e9"; font-family: 'brand-icons'; } i.icon.yoast:before { content: "\f2b1"; font-family: 'brand-icons'; } i.icon.youtube:before { content: "\f167"; font-family: 'brand-icons'; } i.icon.youtube.square:before { content: "\f431"; font-family: 'brand-icons'; } i.icon.zhihu:before { content: "\f63f"; font-family: 'brand-icons'; } /* Aliases */ i.icon.american.express:before { content: "\f1f3"; font-family: 'brand-icons'; } i.icon.american.express.card:before { content: "\f1f3"; font-family: 'brand-icons'; } i.icon.amex:before { content: "\f1f3"; font-family: 'brand-icons'; } i.icon.bitbucket.square:before { content: "\f171"; font-family: 'brand-icons'; } i.icon.bluetooth.alternative:before { content: "\f294"; font-family: 'brand-icons'; } i.icon.credit.card.amazon.pay:before { content: "\f42d"; font-family: 'brand-icons'; } i.icon.credit.card.american.express:before { content: "\f1f3"; font-family: 'brand-icons'; } i.icon.credit.card.diners.club:before { content: "\f24c"; font-family: 'brand-icons'; } i.icon.credit.card.discover:before { content: "\f1f2"; font-family: 'brand-icons'; } i.icon.credit.card.jcb:before { content: "\f24b"; font-family: 'brand-icons'; } i.icon.credit.card.mastercard:before { content: "\f1f1"; font-family: 'brand-icons'; } i.icon.credit.card.paypal:before { content: "\f1f4"; font-family: 'brand-icons'; } i.icon.credit.card.stripe:before { content: "\f1f5"; font-family: 'brand-icons'; } i.icon.credit.card.visa:before { content: "\f1f0"; font-family: 'brand-icons'; } i.icon.diners.club:before { content: "\f24c"; font-family: 'brand-icons'; } i.icon.diners.club.card:before { content: "\f24c"; font-family: 'brand-icons'; } i.icon.discover:before { content: "\f1f2"; font-family: 'brand-icons'; } i.icon.discover.card:before { content: "\f1f2"; font-family: 'brand-icons'; } i.icon.disk.outline:before { content: "\f369"; font-family: 'brand-icons'; } i.icon.dribble:before { content: "\f17d"; font-family: 'brand-icons'; } i.icon.eercast:before { content: "\f2da"; font-family: 'brand-icons'; } i.icon.envira.gallery:before { content: "\f299"; font-family: 'brand-icons'; } i.icon.fa:before { content: "\f2b4"; font-family: 'brand-icons'; } i.icon.facebook.official:before { content: "\f082"; font-family: 'brand-icons'; } i.icon.five.hundred.pixels:before { content: "\f26e"; font-family: 'brand-icons'; } i.icon.gittip:before { content: "\f184"; font-family: 'brand-icons'; } i.icon.google.plus.circle:before { content: "\f2b3"; font-family: 'brand-icons'; } i.icon.google.plus.official:before { content: "\f2b3"; font-family: 'brand-icons'; } i.icon.japan.credit.bureau:before { content: "\f24b"; font-family: 'brand-icons'; } i.icon.japan.credit.bureau.card:before { content: "\f24b"; font-family: 'brand-icons'; } i.icon.jcb:before { content: "\f24b"; font-family: 'brand-icons'; } i.icon.linkedin.square:before { content: "\f08c"; font-family: 'brand-icons'; } i.icon.mastercard:before { content: "\f1f1"; font-family: 'brand-icons'; } i.icon.mastercard.card:before { content: "\f1f1"; font-family: 'brand-icons'; } i.icon.microsoft.edge:before { content: "\f282"; font-family: 'brand-icons'; } i.icon.ms.edge:before { content: "\f282"; font-family: 'brand-icons'; } i.icon.new.pied.piper:before { content: "\f2ae"; font-family: 'brand-icons'; } i.icon.optinmonster:before { content: "\f23c"; font-family: 'brand-icons'; } i.icon.paypal.card:before { content: "\f1f4"; font-family: 'brand-icons'; } i.icon.pied.piper.hat:before { content: "\f2ae"; font-family: 'brand-icons'; } i.icon.pocket:before { content: "\f265"; font-family: 'brand-icons'; } i.icon.stripe.card:before { content: "\f1f5"; font-family: 'brand-icons'; } i.icon.theme.isle:before { content: "\f2b2"; font-family: 'brand-icons'; } i.icon.visa:before { content: "\f1f0"; font-family: 'brand-icons'; } i.icon.visa.card:before { content: "\f1f0"; font-family: 'brand-icons'; } i.icon.wechat:before { content: "\f1d7"; font-family: 'brand-icons'; } i.icon.wikipedia:before { content: "\f266"; font-family: 'brand-icons'; } i.icon.wordpress.beginner:before { content: "\f297"; font-family: 'brand-icons'; } i.icon.wordpress.forms:before { content: "\f298"; font-family: 'brand-icons'; } i.icon.yc:before { content: "\f23b"; font-family: 'brand-icons'; } i.icon.ycombinator:before { content: "\f23b"; font-family: 'brand-icons'; } i.icon.youtube.play:before { content: "\f167"; font-family: 'brand-icons'; } /* * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /******************************* Semantic-UI integration of font-awesome : ///class names are separated i.icon.circle => i.icon.circle i.icon.circle-o => i.icon.circle.outline //abbreviation are replaced by full letters: i.icon.ellipsis-h => i.icon.ellipsis.horizontal i.icon.ellipsis-v => i.icon.ellipsis.vertical .alpha => .i.icon.alphabet .asc => .i.icon.ascending .desc => .i.icon.descending .alt =>.alternate ASCII order is conserved for easier maintenance. Icons that only have one style 'outline', 'square' etc do not require this class for instance `lemon icon` not `lemon outline icon` since there is only one lemon *******************************/ /******************************* Icons *******************************/ /* Web Content */ i.icon.search:before { content: "\f002"; } i.icon.mail.outline:before { content: "\f003"; } i.icon.signal:before { content: "\f012"; } i.icon.setting:before { content: "\f013"; } i.icon.home:before { content: "\f015"; } i.icon.inbox:before { content: "\f01c"; } i.icon.browser:before { content: "\f022"; } i.icon.tag:before { content: "\f02b"; } i.icon.tags:before { content: "\f02c"; } i.icon.image:before { content: "\f03e"; } i.icon.calendar:before { content: "\f073"; } i.icon.comment:before { content: "\f075"; } i.icon.shop:before { content: "\f07a"; } i.icon.comments:before { content: "\f086"; } i.icon.external:before { content: "\f08e"; } i.icon.privacy:before { content: "\f084"; } i.icon.settings:before { content: "\f085"; } i.icon.comments:before { content: "\f086"; } i.icon.external:before { content: "\f08e"; } i.icon.trophy:before { content: "\f091"; } i.icon.payment:before { content: "\f09d"; } i.icon.feed:before { content: "\f09e"; } i.icon.alarm.outline:before { content: "\f0a2"; } i.icon.tasks:before { content: "\f0ae"; } i.icon.cloud:before { content: "\f0c2"; } i.icon.lab:before { content: "\f0c3"; } i.icon.mail:before { content: "\f0e0"; } i.icon.dashboard:before { content: "\f0e4"; } i.icon.comment.outline:before { content: "\f0e5"; } i.icon.comments.outline:before { content: "\f0e6"; } i.icon.sitemap:before { content: "\f0e8"; } i.icon.idea:before { content: "\f0eb"; } i.icon.alarm:before { content: "\f0f3"; } i.icon.terminal:before { content: "\f120"; } i.icon.code:before { content: "\f121"; } i.icon.protect:before { content: "\f132"; } i.icon.calendar.outline:before { content: "\f133"; } i.icon.ticket:before { content: "\f145"; } i.icon.external.square:before { content: "\f14c"; } i.icon.bug:before { content: "\f188"; } i.icon.mail.square:before { content: "\f199"; } i.icon.history:before { content: "\f1da"; } i.icon.options:before { content: "\f1de"; } i.icon.text.telephone:before { content: "\f1e4"; } i.icon.find:before { content: "\f1e5"; } i.icon.alarm.mute:before { content: "\f1f6"; } i.icon.alarm.mute.outline:before { content: "\f1f7"; } i.icon.copyright:before { content: "\f1f9"; } i.icon.at:before { content: "\f1fa"; } i.icon.eyedropper:before { content: "\f1fb"; } i.icon.paint.brush:before { content: "\f1fc"; } i.icon.heartbeat:before { content: "\f21e"; } i.icon.mouse.pointer:before { content: "\f245"; } i.icon.hourglass.empty:before { content: "\f250"; } i.icon.hourglass.start:before { content: "\f251"; } i.icon.hourglass.half:before { content: "\f252"; } i.icon.hourglass.end:before { content: "\f253"; } i.icon.hourglass.full:before { content: "\f254"; } i.icon.hand.pointer:before { content: "\f25a"; } i.icon.trademark:before { content: "\f25c"; } i.icon.registered:before { content: "\f25d"; } i.icon.creative.commons:before { content: "\f25e"; } i.icon.add.to.calendar:before { content: "\f271"; } i.icon.remove.from.calendar:before { content: "\f272"; } i.icon.delete.calendar:before { content: "\f273"; } i.icon.checked.calendar:before { content: "\f274"; } i.icon.industry:before { content: "\f275"; } i.icon.shopping.bag:before { content: "\f290"; } i.icon.shopping.basket:before { content: "\f291"; } i.icon.hashtag:before { content: "\f292"; } i.icon.percent:before { content: "\f295"; } i.icon.handshake:before { content: "\f2b5"; } i.icon.open.envelope:before { content: "\f2b6"; } i.icon.open.envelope.outline:before { content: "\f2b7"; } i.icon.address.book:before { content: "\f2b9"; } i.icon.address.book.outline:before { content: "\f2ba"; } i.icon.address.card:before { content: "\f2bb"; } i.icon.address.card.outline:before { content: "\f2bc"; } i.icon.id.badge:before { content: "\f2c1"; } i.icon.id.card:before { content: "\f2c2"; } i.icon.id.card.outline:before { content: "\f2c3"; } i.icon.podcast:before { content: "\f2ce"; } i.icon.window.maximize:before { content: "\f2d0"; } i.icon.window.minimize:before { content: "\f2d1"; } i.icon.window.restore:before { content: "\f2d2"; } i.icon.window.close:before { content: "\f2d3"; } i.icon.window.close.outline:before { content: "\f2d4"; } /* User Actions */ i.icon.wait:before { content: "\f017"; } i.icon.download:before { content: "\f019"; } i.icon.repeat:before { content: "\f01e"; } i.icon.refresh:before { content: "\f021"; } i.icon.lock:before { content: "\f023"; } i.icon.bookmark:before { content: "\f02e"; } i.icon.print:before { content: "\f02f"; } i.icon.write:before { content: "\f040"; } i.icon.adjust:before { content: "\f042"; } i.icon.theme:before { content: "\f043"; } i.icon.edit:before { content: "\f044"; } i.icon.external.share:before { content: "\f045"; } i.icon.ban:before { content: "\f05e"; } i.icon.mail.forward:before { content: "\f064"; } i.icon.share:before { content: "\f064"; } i.icon.expand:before { content: "\f065"; } i.icon.compress:before { content: "\f066"; } i.icon.unhide:before { content: "\f06e"; } i.icon.hide:before { content: "\f070"; } i.icon.random:before { content: "\f074"; } i.icon.retweet:before { content: "\f079"; } i.icon.sign.out:before { content: "\f08b"; } i.icon.pin:before { content: "\f08d"; } i.icon.sign.in:before { content: "\f090"; } i.icon.upload:before { content: "\f093"; } i.icon.call:before { content: "\f095"; } i.icon.remove.bookmark:before { content: "\f097"; } i.icon.call.square:before { content: "\f098"; } i.icon.unlock:before { content: "\f09c"; } i.icon.configure:before { content: "\f0ad"; } i.icon.filter:before { content: "\f0b0"; } i.icon.wizard:before { content: "\f0d0"; } i.icon.undo:before { content: "\f0e2"; } i.icon.exchange:before { content: "\f0ec"; } i.icon.cloud.download:before { content: "\f0ed"; } i.icon.cloud.upload:before { content: "\f0ee"; } i.icon.reply:before { content: "\f112"; } i.icon.reply.all:before { content: "\f122"; } i.icon.erase:before { content: "\f12d"; } i.icon.unlock.alternate:before { content: "\f13e"; } i.icon.write.square:before { content: "\f14b"; } i.icon.share.square:before { content: "\f14d"; } i.icon.archive:before { content: "\f187"; } i.icon.translate:before { content: "\f1ab"; } i.icon.recycle:before { content: "\f1b8"; } i.icon.send:before { content: "\f1d8"; } i.icon.send.outline:before { content: "\f1d9"; } i.icon.share.alternate:before { content: "\f1e0"; } i.icon.share.alternate.square:before { content: "\f1e1"; } i.icon.add.to.cart:before { content: "\f217"; } i.icon.in.cart:before { content: "\f218"; } i.icon.add.user:before { content: "\f234"; } i.icon.remove.user:before { content: "\f235"; } i.icon.object.group:before { content: "\f247"; } i.icon.object.ungroup:before { content: "\f248"; } i.icon.clone:before { content: "\f24d"; } i.icon.talk:before { content: "\f27a"; } i.icon.talk.outline:before { content: "\f27b"; } /* Messages */ i.icon.help.circle:before { content: "\f059"; } i.icon.info.circle:before { content: "\f05a"; } i.icon.warning.circle:before { content: "\f06a"; } i.icon.warning.sign:before { content: "\f071"; } i.icon.announcement:before { content: "\f0a1"; } i.icon.help:before { content: "\f128"; } i.icon.info:before { content: "\f129"; } i.icon.warning:before { content: "\f12a"; } i.icon.birthday:before { content: "\f1fd"; } i.icon.help.circle.outline:before { content: "\f29c"; } /* Users */ i.icon.user:before { content: "\f007"; } i.icon.users:before { content: "\f0c0"; } i.icon.doctor:before { content: "\f0f0"; } i.icon.handicap:before { content: "\f193"; } i.icon.student:before { content: "\f19d"; } i.icon.child:before { content: "\f1ae"; } i.icon.spy:before { content: "\f21b"; } i.icon.user.circle:before { content: "\f2bd"; } i.icon.user.circle.outline:before { content: "\f2be"; } i.icon.user.outline:before { content: "\f2c0"; } /* Gender & Sexuality */ i.icon.female:before { content: "\f182"; } i.icon.male:before { content: "\f183"; } i.icon.woman:before { content: "\f221"; } i.icon.man:before { content: "\f222"; } i.icon.non.binary.transgender:before { content: "\f223"; } i.icon.intergender:before { content: "\f224"; } i.icon.transgender:before { content: "\f225"; } i.icon.lesbian:before { content: "\f226"; } i.icon.gay:before { content: "\f227"; } i.icon.heterosexual:before { content: "\f228"; } i.icon.other.gender:before { content: "\f229"; } i.icon.other.gender.vertical:before { content: "\f22a"; } i.icon.other.gender.horizontal:before { content: "\f22b"; } i.icon.neuter:before { content: "\f22c"; } i.icon.genderless:before { content: "\f22d"; } /* Accessibility */ i.icon.universal.access:before { content: "\f29a"; } i.icon.wheelchair:before { content: "\f29b"; } i.icon.blind:before { content: "\f29d"; } i.icon.audio.description:before { content: "\f29e"; } i.icon.volume.control.phone:before { content: "\f2a0"; } i.icon.braille:before { content: "\f2a1"; } i.icon.asl:before { content: "\f2a3"; } i.icon.assistive.listening.systems:before { content: "\f2a2"; } i.icon.deafness:before { content: "\f2a4"; } i.icon.sign.language:before { content: "\f2a7"; } i.icon.low.vision:before { content: "\f2a8"; } /* View Adjustment */ i.icon.block.layout:before { content: "\f009"; } i.icon.grid.layout:before { content: "\f00a"; } i.icon.list.layout:before { content: "\f00b"; } i.icon.zoom:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } i.icon.resize.vertical:before { content: "\f07d"; } i.icon.resize.horizontal:before { content: "\f07e"; } i.icon.maximize:before { content: "\f0b2"; } i.icon.crop:before { content: "\f125"; } /* Literal Objects */ i.icon.cocktail:before { content: "\f000"; } i.icon.road:before { content: "\f018"; } i.icon.flag:before { content: "\f024"; } i.icon.book:before { content: "\f02d"; } i.icon.gift:before { content: "\f06b"; } i.icon.leaf:before { content: "\f06c"; } i.icon.fire:before { content: "\f06d"; } i.icon.plane:before { content: "\f072"; } i.icon.magnet:before { content: "\f076"; } i.icon.lemon:before { content: "\f094"; } i.icon.world:before { content: "\f0ac"; } i.icon.travel:before { content: "\f0b1"; } i.icon.shipping:before { content: "\f0d1"; } i.icon.money:before { content: "\f0d6"; } i.icon.legal:before { content: "\f0e3"; } i.icon.lightning:before { content: "\f0e7"; } i.icon.umbrella:before { content: "\f0e9"; } i.icon.treatment:before { content: "\f0f1"; } i.icon.suitcase:before { content: "\f0f2"; } i.icon.bar:before { content: "\f0fc"; } i.icon.flag.outline:before { content: "\f11d"; } i.icon.flag.checkered:before { content: "\f11e"; } i.icon.puzzle:before { content: "\f12e"; } i.icon.fire.extinguisher:before { content: "\f134"; } i.icon.rocket:before { content: "\f135"; } i.icon.anchor:before { content: "\f13d"; } i.icon.bullseye:before { content: "\f140"; } i.icon.sun:before { content: "\f185"; } i.icon.moon:before { content: "\f186"; } i.icon.fax:before { content: "\f1ac"; } i.icon.life.ring:before { content: "\f1cd"; } i.icon.bomb:before { content: "\f1e2"; } i.icon.soccer:before { content: "\f1e3"; } i.icon.calculator:before { content: "\f1ec"; } i.icon.diamond:before { content: "\f219"; } i.icon.sticky.note:before { content: "\f249"; } i.icon.sticky.note.outline:before { content: "\f24a"; } i.icon.law:before { content: "\f24e"; } i.icon.hand.peace:before { content: "\f25b"; } i.icon.hand.rock:before { content: "\f255"; } i.icon.hand.paper:before { content: "\f256"; } i.icon.hand.scissors:before { content: "\f257"; } i.icon.hand.lizard:before { content: "\f258"; } i.icon.hand.spock:before { content: "\f259"; } i.icon.tv:before { content: "\f26c"; } i.icon.thermometer.full:before { content: "\f2c7"; } i.icon.thermometer.three.quarters:before { content: "\f2c8"; } i.icon.thermometer.half:before { content: "\f2c9"; } i.icon.thermometer.quarter:before { content: "\f2ca"; } i.icon.thermometer.empty:before { content: "\f2cb"; } i.icon.shower:before { content: "\f2cc"; } i.icon.bathtub:before { content: "\f2cd"; } i.icon.snowflake:before { content: "\f2dc"; } /* Shapes */ i.icon.crosshairs:before { content: "\f05b"; } i.icon.asterisk:before { content: "\f069"; } i.icon.square.outline:before { content: "\f096"; } i.icon.certificate:before { content: "\f0a3"; } i.icon.square:before { content: "\f0c8"; } i.icon.quote.left:before { content: "\f10d"; } i.icon.quote.right:before { content: "\f10e"; } i.icon.spinner:before { content: "\f110"; } i.icon.circle:before { content: "\f111"; } i.icon.ellipsis.horizontal:before { content: "\f141"; } i.icon.ellipsis.vertical:before { content: "\f142"; } i.icon.cube:before { content: "\f1b2"; } i.icon.cubes:before { content: "\f1b3"; } i.icon.circle.notched:before { content: "\f1ce"; } i.icon.circle.thin:before { content: "\f1db"; } /* Item Selection */ i.icon.checkmark:before { content: "\f00c"; } i.icon.remove:before { content: "\f00d"; } i.icon.checkmark.box:before { content: "\f046"; } i.icon.move:before { content: "\f047"; } i.icon.add.circle:before { content: "\f055"; } i.icon.minus.circle:before { content: "\f056"; } i.icon.remove.circle:before { content: "\f057"; } i.icon.check.circle:before { content: "\f058"; } i.icon.remove.circle.outline:before { content: "\f05c"; } i.icon.check.circle.outline:before { content: "\f05d"; } i.icon.plus:before { content: "\f067"; } i.icon.minus:before { content: "\f068"; } i.icon.add.square:before { content: "\f0fe"; } i.icon.radio:before { content: "\f10c"; } i.icon.minus.square:before { content: "\f146"; } i.icon.minus.square.outline:before { content: "\f147"; } i.icon.check.square:before { content: "\f14a"; } i.icon.selected.radio:before { content: "\f192"; } i.icon.plus.square.outline:before { content: "\f196"; } i.icon.toggle.off:before { content: "\f204"; } i.icon.toggle.on:before { content: "\f205"; } /* Media */ i.icon.film:before { content: "\f008"; } i.icon.sound:before { content: "\f025"; } i.icon.photo:before { content: "\f030"; } i.icon.bar.chart:before { content: "\f080"; } i.icon.camera.retro:before { content: "\f083"; } i.icon.newspaper:before { content: "\f1ea"; } i.icon.area.chart:before { content: "\f1fe"; } i.icon.pie.chart:before { content: "\f200"; } i.icon.line.chart:before { content: "\f201"; } /* Pointers */ i.icon.arrow.circle.outline.down:before { content: "\f01a"; } i.icon.arrow.circle.outline.up:before { content: "\f01b"; } i.icon.chevron.left:before { content: "\f053"; } i.icon.chevron.right:before { content: "\f054"; } i.icon.arrow.left:before { content: "\f060"; } i.icon.arrow.right:before { content: "\f061"; } i.icon.arrow.up:before { content: "\f062"; } i.icon.arrow.down:before { content: "\f063"; } i.icon.chevron.up:before { content: "\f077"; } i.icon.chevron.down:before { content: "\f078"; } i.icon.pointing.right:before { content: "\f0a4"; } i.icon.pointing.left:before { content: "\f0a5"; } i.icon.pointing.up:before { content: "\f0a6"; } i.icon.pointing.down:before { content: "\f0a7"; } i.icon.arrow.circle.left:before { content: "\f0a8"; } i.icon.arrow.circle.right:before { content: "\f0a9"; } i.icon.arrow.circle.up:before { content: "\f0aa"; } i.icon.arrow.circle.down:before { content: "\f0ab"; } i.icon.caret.down:before { content: "\f0d7"; } i.icon.caret.up:before { content: "\f0d8"; } i.icon.caret.left:before { content: "\f0d9"; } i.icon.caret.right:before { content: "\f0da"; } i.icon.angle.double.left:before { content: "\f100"; } i.icon.angle.double.right:before { content: "\f101"; } i.icon.angle.double.up:before { content: "\f102"; } i.icon.angle.double.down:before { content: "\f103"; } i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } i.icon.angle.up:before { content: "\f106"; } i.icon.angle.down:before { content: "\f107"; } i.icon.chevron.circle.left:before { content: "\f137"; } i.icon.chevron.circle.right:before { content: "\f138"; } i.icon.chevron.circle.up:before { content: "\f139"; } i.icon.chevron.circle.down:before { content: "\f13a"; } i.icon.toggle.down:before { content: "\f150"; } i.icon.toggle.up:before { content: "\f151"; } i.icon.toggle.right:before { content: "\f152"; } i.icon.long.arrow.down:before { content: "\f175"; } i.icon.long.arrow.up:before { content: "\f176"; } i.icon.long.arrow.left:before { content: "\f177"; } i.icon.long.arrow.right:before { content: "\f178"; } i.icon.arrow.circle.outline.right:before { content: "\f18e"; } i.icon.arrow.circle.outline.left:before { content: "\f190"; } i.icon.toggle.left:before { content: "\f191"; } /* Mobile */ i.icon.tablet:before { content: "\f10a"; } i.icon.mobile:before { content: "\f10b"; } i.icon.battery.full:before { content: "\f240"; } i.icon.battery.high:before { content: "\f241"; } i.icon.battery.medium:before { content: "\f242"; } i.icon.battery.low:before { content: "\f243"; } i.icon.battery.empty:before { content: "\f244"; } /* Computer */ i.icon.power:before { content: "\f011"; } i.icon.trash.outline:before { content: "\f014"; } i.icon.disk.outline:before { content: "\f0a0"; } i.icon.desktop:before { content: "\f108"; } i.icon.laptop:before { content: "\f109"; } i.icon.game:before { content: "\f11b"; } i.icon.keyboard:before { content: "\f11c"; } i.icon.plug:before { content: "\f1e6"; } /* File System */ i.icon.trash:before { content: "\f1f8"; } i.icon.file.outline:before { content: "\f016"; } i.icon.folder:before { content: "\f07b"; } i.icon.folder.open:before { content: "\f07c"; } i.icon.file.text.outline:before { content: "\f0f6"; } i.icon.folder.outline:before { content: "\f114"; } i.icon.folder.open.outline:before { content: "\f115"; } i.icon.level.up:before { content: "\f148"; } i.icon.level.down:before { content: "\f149"; } i.icon.file:before { content: "\f15b"; } i.icon.file.text:before { content: "\f15c"; } i.icon.file.pdf.outline:before { content: "\f1c1"; } i.icon.file.word.outline:before { content: "\f1c2"; } i.icon.file.excel.outline:before { content: "\f1c3"; } i.icon.file.powerpoint.outline:before { content: "\f1c4"; } i.icon.file.image.outline:before { content: "\f1c5"; } i.icon.file.archive.outline:before { content: "\f1c6"; } i.icon.file.audio.outline:before { content: "\f1c7"; } i.icon.file.video.outline:before { content: "\f1c8"; } i.icon.file.code.outline:before { content: "\f1c9"; } /* Technologies */ i.icon.qrcode:before { content: "\f029"; } i.icon.barcode:before { content: "\f02a"; } i.icon.rss:before { content: "\f09e"; } i.icon.fork:before { content: "\f126"; } i.icon.html5:before { content: "\f13b"; } i.icon.css3:before { content: "\f13c"; } i.icon.rss.square:before { content: "\f143"; } i.icon.openid:before { content: "\f19b"; } i.icon.database:before { content: "\f1c0"; } i.icon.wifi:before { content: "\f1eb"; } i.icon.server:before { content: "\f233"; } i.icon.usb:before { content: "\f287"; } i.icon.bluetooth:before { content: "\f293"; } i.icon.bluetooth.alternative:before { content: "\f294"; } i.icon.microchip:before { content: "\f2db"; } /* Rating */ i.icon.heart:before { content: "\f004"; } i.icon.star:before { content: "\f005"; } i.icon.empty.star:before { content: "\f006"; } i.icon.thumbs.outline.up:before { content: "\f087"; } i.icon.thumbs.outline.down:before { content: "\f088"; } i.icon.star.half:before { content: "\f089"; } i.icon.empty.heart:before { content: "\f08a"; } i.icon.smile:before { content: "\f118"; } i.icon.frown:before { content: "\f119"; } i.icon.meh:before { content: "\f11a"; } i.icon.star.half.empty:before { content: "\f123"; } i.icon.thumbs.up:before { content: "\f164"; } i.icon.thumbs.down:before { content: "\f165"; } /* Audio */ i.icon.music:before { content: "\f001"; } i.icon.video.play.outline:before { content: "\f01d"; } i.icon.volume.off:before { content: "\f026"; } i.icon.volume.down:before { content: "\f027"; } i.icon.volume.up:before { content: "\f028"; } i.icon.record:before { content: "\f03d"; } i.icon.step.backward:before { content: "\f048"; } i.icon.fast.backward:before { content: "\f049"; } i.icon.backward:before { content: "\f04a"; } i.icon.play:before { content: "\f04b"; } i.icon.pause:before { content: "\f04c"; } i.icon.stop:before { content: "\f04d"; } i.icon.forward:before { content: "\f04e"; } i.icon.fast.forward:before { content: "\f050"; } i.icon.step.forward:before { content: "\f051"; } i.icon.eject:before { content: "\f052"; } i.icon.unmute:before { content: "\f130"; } i.icon.mute:before { content: "\f131"; } i.icon.video.play:before { content: "\f144"; } i.icon.closed.captioning:before { content: "\f20a"; } i.icon.pause.circle:before { content: "\f28b"; } i.icon.pause.circle.outline:before { content: "\f28c"; } i.icon.stop.circle:before { content: "\f28d"; } i.icon.stop.circle.outline:before { content: "\f28e"; } /* Map, Locations, & Transportation */ i.icon.marker:before { content: "\f041"; } i.icon.coffee:before { content: "\f0f4"; } i.icon.food:before { content: "\f0f5"; } i.icon.building.outline:before { content: "\f0f7"; } i.icon.hospital:before { content: "\f0f8"; } i.icon.emergency:before { content: "\f0f9"; } i.icon.first.aid:before { content: "\f0fa"; } i.icon.military:before { content: "\f0fb"; } i.icon.h:before { content: "\f0fd"; } i.icon.location.arrow:before { content: "\f124"; } i.icon.compass:before { content: "\f14e"; } i.icon.space.shuttle:before { content: "\f197"; } i.icon.university:before { content: "\f19c"; } i.icon.building:before { content: "\f1ad"; } i.icon.paw:before { content: "\f1b0"; } i.icon.spoon:before { content: "\f1b1"; } i.icon.car:before { content: "\f1b9"; } i.icon.taxi:before { content: "\f1ba"; } i.icon.tree:before { content: "\f1bb"; } i.icon.bicycle:before { content: "\f206"; } i.icon.bus:before { content: "\f207"; } i.icon.ship:before { content: "\f21a"; } i.icon.motorcycle:before { content: "\f21c"; } i.icon.street.view:before { content: "\f21d"; } i.icon.hotel:before { content: "\f236"; } i.icon.train:before { content: "\f238"; } i.icon.subway:before { content: "\f239"; } i.icon.map.pin:before { content: "\f276"; } i.icon.map.signs:before { content: "\f277"; } i.icon.map.outline:before { content: "\f278"; } i.icon.map:before { content: "\f279"; } /* Tables */ i.icon.table:before { content: "\f0ce"; } i.icon.columns:before { content: "\f0db"; } i.icon.sort:before { content: "\f0dc"; } i.icon.sort.descending:before { content: "\f0dd"; } i.icon.sort.ascending:before { content: "\f0de"; } i.icon.sort.alphabet.ascending:before { content: "\f15d"; } i.icon.sort.alphabet.descending:before { content: "\f15e"; } i.icon.sort.content.ascending:before { content: "\f160"; } i.icon.sort.content.descending:before { content: "\f161"; } i.icon.sort.numeric.ascending:before { content: "\f162"; } i.icon.sort.numeric.descending:before { content: "\f163"; } /* Text Editor */ i.icon.font:before { content: "\f031"; } i.icon.bold:before { content: "\f032"; } i.icon.italic:before { content: "\f033"; } i.icon.text.height:before { content: "\f034"; } i.icon.text.width:before { content: "\f035"; } i.icon.align.left:before { content: "\f036"; } i.icon.align.center:before { content: "\f037"; } i.icon.align.right:before { content: "\f038"; } i.icon.align.justify:before { content: "\f039"; } i.icon.list:before { content: "\f03a"; } i.icon.outdent:before { content: "\f03b"; } i.icon.indent:before { content: "\f03c"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.cut:before { content: "\f0c4"; } i.icon.copy:before { content: "\f0c5"; } i.icon.attach:before { content: "\f0c6"; } i.icon.save:before { content: "\f0c7"; } i.icon.content:before { content: "\f0c9"; } i.icon.unordered.list:before { content: "\f0ca"; } i.icon.ordered.list:before { content: "\f0cb"; } i.icon.strikethrough:before { content: "\f0cc"; } i.icon.underline:before { content: "\f0cd"; } i.icon.paste:before { content: "\f0ea"; } i.icon.unlinkify:before { content: "\f127"; } i.icon.superscript:before { content: "\f12b"; } i.icon.subscript:before { content: "\f12c"; } i.icon.header:before { content: "\f1dc"; } i.icon.paragraph:before { content: "\f1dd"; } i.icon.text.cursor:before { content: "\f246"; } /* Currency */ i.icon.euro:before { content: "\f153"; } i.icon.pound:before { content: "\f154"; } i.icon.dollar:before { content: "\f155"; } i.icon.rupee:before { content: "\f156"; } i.icon.yen:before { content: "\f157"; } i.icon.ruble:before { content: "\f158"; } i.icon.won:before { content: "\f159"; } i.icon.bitcoin:before { content: "\f15a"; } i.icon.lira:before { content: "\f195"; } i.icon.shekel:before { content: "\f20b"; } /* Payment Options */ i.icon.paypal:before { content: "\f1ed"; } i.icon.google.wallet:before { content: "\f1ee"; } i.icon.visa:before { content: "\f1f0"; } i.icon.mastercard:before { content: "\f1f1"; } i.icon.discover:before { content: "\f1f2"; } i.icon.american.express:before { content: "\f1f3"; } i.icon.paypal.card:before { content: "\f1f4"; } i.icon.stripe:before { content: "\f1f5"; } i.icon.japan.credit.bureau:before { content: "\f24b"; } i.icon.diners.club:before { content: "\f24c"; } i.icon.credit.card.alternative:before { content: "\f283"; } /* Networks and Websites*/ i.icon.twitter.square:before { content: "\f081"; } i.icon.facebook.square:before { content: "\f082"; } i.icon.linkedin.square:before { content: "\f08c"; } i.icon.github.square:before { content: "\f092"; } i.icon.twitter:before { content: "\f099"; } i.icon.facebook.f:before { content: "\f09a"; } i.icon.github:before { content: "\f09b"; } i.icon.pinterest:before { content: "\f0d2"; } i.icon.pinterest.square:before { content: "\f0d3"; } i.icon.google.plus.square:before { content: "\f0d4"; } i.icon.google.plus:before { content: "\f0d5"; } i.icon.linkedin:before { content: "\f0e1"; } i.icon.github.alternate:before { content: "\f113"; } i.icon.maxcdn:before { content: "\f136"; } i.icon.youtube.square:before { content: "\f166"; } i.icon.youtube:before { content: "\f167"; } i.icon.xing:before { content: "\f168"; } i.icon.xing.square:before { content: "\f169"; } i.icon.youtube.play:before { content: "\f16a"; } i.icon.dropbox:before { content: "\f16b"; } i.icon.stack.overflow:before { content: "\f16c"; } i.icon.instagram:before { content: "\f16d"; } i.icon.flickr:before { content: "\f16e"; } i.icon.adn:before { content: "\f170"; } i.icon.bitbucket:before { content: "\f171"; } i.icon.bitbucket.square:before { content: "\f172"; } i.icon.tumblr:before { content: "\f173"; } i.icon.tumblr.square:before { content: "\f174"; } i.icon.apple:before { content: "\f179"; } i.icon.windows:before { content: "\f17a"; } i.icon.android:before { content: "\f17b"; } i.icon.linux:before { content: "\f17c"; } i.icon.dribble:before { content: "\f17d"; } i.icon.skype:before { content: "\f17e"; } i.icon.foursquare:before { content: "\f180"; } i.icon.trello:before { content: "\f181"; } i.icon.gittip:before { content: "\f184"; } i.icon.vk:before { content: "\f189"; } i.icon.weibo:before { content: "\f18a"; } i.icon.renren:before { content: "\f18b"; } i.icon.pagelines:before { content: "\f18c"; } i.icon.stack.exchange:before { content: "\f18d"; } i.icon.vimeo.square:before { content: "\f194"; } i.icon.slack:before { content: "\f198"; } i.icon.wordpress:before { content: "\f19a"; } i.icon.yahoo:before { content: "\f19e"; } i.icon.google:before { content: "\f1a0"; } i.icon.reddit:before { content: "\f1a1"; } i.icon.reddit.square:before { content: "\f1a2"; } i.icon.stumbleupon.circle:before { content: "\f1a3"; } i.icon.stumbleupon:before { content: "\f1a4"; } i.icon.delicious:before { content: "\f1a5"; } i.icon.digg:before { content: "\f1a6"; } i.icon.pied.piper:before { content: "\f1a7"; } i.icon.pied.piper.alternate:before { content: "\f1a8"; } i.icon.drupal:before { content: "\f1a9"; } i.icon.joomla:before { content: "\f1aa"; } i.icon.behance:before { content: "\f1b4"; } i.icon.behance.square:before { content: "\f1b5"; } i.icon.steam:before { content: "\f1b6"; } i.icon.steam.square:before { content: "\f1b7"; } i.icon.spotify:before { content: "\f1bc"; } i.icon.deviantart:before { content: "\f1bd"; } i.icon.soundcloud:before { content: "\f1be"; } i.icon.vine:before { content: "\f1ca"; } i.icon.codepen:before { content: "\f1cb"; } i.icon.jsfiddle:before { content: "\f1cc"; } i.icon.rebel:before { content: "\f1d0"; } i.icon.empire:before { content: "\f1d1"; } i.icon.git.square:before { content: "\f1d2"; } i.icon.git:before { content: "\f1d3"; } i.icon.hacker.news:before { content: "\f1d4"; } i.icon.tencent.weibo:before { content: "\f1d5"; } i.icon.qq:before { content: "\f1d6"; } i.icon.wechat:before { content: "\f1d7"; } i.icon.slideshare:before { content: "\f1e7"; } i.icon.twitch:before { content: "\f1e8"; } i.icon.yelp:before { content: "\f1e9"; } i.icon.lastfm:before { content: "\f202"; } i.icon.lastfm.square:before { content: "\f203"; } i.icon.ioxhost:before { content: "\f208"; } i.icon.angellist:before { content: "\f209"; } i.icon.meanpath:before { content: "\f20c"; } i.icon.buysellads:before { content: "\f20d"; } i.icon.connectdevelop:before { content: "\f20e"; } i.icon.dashcube:before { content: "\f210"; } i.icon.forumbee:before { content: "\f211"; } i.icon.leanpub:before { content: "\f212"; } i.icon.sellsy:before { content: "\f213"; } i.icon.shirtsinbulk:before { content: "\f214"; } i.icon.simplybuilt:before { content: "\f215"; } i.icon.skyatlas:before { content: "\f216"; } i.icon.facebook:before { content: "\f230"; } i.icon.pinterest:before { content: "\f231"; } i.icon.whatsapp:before { content: "\f232"; } i.icon.viacoin:before { content: "\f237"; } i.icon.medium:before { content: "\f23a"; } i.icon.y.combinator:before { content: "\f23b"; } i.icon.optinmonster:before { content: "\f23c"; } i.icon.opencart:before { content: "\f23d"; } i.icon.expeditedssl:before { content: "\f23e"; } i.icon.gg:before { content: "\f260"; } i.icon.gg.circle:before { content: "\f261"; } i.icon.tripadvisor:before { content: "\f262"; } i.icon.odnoklassniki:before { content: "\f263"; } i.icon.odnoklassniki.square:before { content: "\f264"; } i.icon.pocket:before { content: "\f265"; } i.icon.wikipedia:before { content: "\f266"; } i.icon.safari:before { content: "\f267"; } i.icon.chrome:before { content: "\f268"; } i.icon.firefox:before { content: "\f269"; } i.icon.opera:before { content: "\f26a"; } i.icon.internet.explorer:before { content: "\f26b"; } i.icon.contao:before { content: "\f26d"; } i.icon.\35 00px:before { content: "\f26e"; } i.icon.amazon:before { content: "\f270"; } i.icon.houzz:before { content: "\f27c"; } i.icon.vimeo:before { content: "\f27d"; } i.icon.black.tie:before { content: "\f27e"; } i.icon.fonticons:before { content: "\f280"; } i.icon.reddit.alien:before { content: "\f281"; } i.icon.microsoft.edge:before { content: "\f282"; } i.icon.codiepie:before { content: "\f284"; } i.icon.modx:before { content: "\f285"; } i.icon.fort.awesome:before { content: "\f286"; } i.icon.product.hunt:before { content: "\f288"; } i.icon.mixcloud:before { content: "\f289"; } i.icon.scribd:before { content: "\f28a"; } i.icon.gitlab:before { content: "\f296"; } i.icon.wpbeginner:before { content: "\f297"; } i.icon.wpforms:before { content: "\f298"; } i.icon.envira.gallery:before { content: "\f299"; } i.icon.glide:before { content: "\f2a5"; } i.icon.glide.g:before { content: "\f2a6"; } i.icon.viadeo:before { content: "\f2a9"; } i.icon.viadeo.square:before { content: "\f2aa"; } i.icon.snapchat:before { content: "\f2ab"; } i.icon.snapchat.ghost:before { content: "\f2ac"; } i.icon.snapchat.square:before { content: "\f2ad"; } i.icon.pied.piper.hat:before { content: "\f2ae"; } i.icon.first.order:before { content: "\f2b0"; } i.icon.yoast:before { content: "\f2b1"; } i.icon.themeisle:before { content: "\f2b2"; } i.icon.google.plus.circle:before { content: "\f2b3"; } i.icon.font.awesome:before { content: "\f2b4"; } i.icon.linode:before { content: "\f2b8"; } i.icon.quora:before { content: "\f2c4"; } i.icon.free.code.camp:before { content: "\f2c5"; } i.icon.telegram:before { content: "\f2c6"; } i.icon.bandcamp:before { content: "\f2d5"; } i.icon.grav:before { content: "\f2d6"; } i.icon.etsy:before { content: "\f2d7"; } i.icon.imdb:before { content: "\f2d8"; } i.icon.ravelry:before { content: "\f2d9"; } i.icon.eercast:before { content: "\f2da"; } i.icon.superpowers:before { content: "\f2dd"; } i.icon.wpexplorer:before { content: "\f2de"; } i.icon.meetup:before { content: "\f2e0"; } /******************************* Aliases *******************************/ i.icon.like:before { content: "\f004"; } i.icon.favorite:before { content: "\f005"; } i.icon.video:before { content: "\f008"; } i.icon.check:before { content: "\f00c"; } i.icon.close:before { content: "\f00d"; } i.icon.cancel:before { content: "\f00d"; } i.icon.delete:before { content: "\f00d"; } i.icon.x:before { content: "\f00d"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.magnify:before { content: "\f00e"; } i.icon.shutdown:before { content: "\f011"; } i.icon.clock:before { content: "\f017"; } i.icon.time:before { content: "\f017"; } i.icon.play.circle.outline:before { content: "\f01d"; } i.icon.headphone:before { content: "\f025"; } i.icon.camera:before { content: "\f030"; } i.icon.video.camera:before { content: "\f03d"; } i.icon.picture:before { content: "\f03e"; } i.icon.pencil:before { content: "\f040"; } i.icon.compose:before { content: "\f040"; } i.icon.point:before { content: "\f041"; } i.icon.tint:before { content: "\f043"; } i.icon.signup:before { content: "\f044"; } i.icon.plus.circle:before { content: "\f055"; } i.icon.question.circle:before { content: "\f059"; } i.icon.dont:before { content: "\f05e"; } i.icon.minimize:before { content: "\f066"; } i.icon.add:before { content: "\f067"; } i.icon.exclamation.circle:before { content: "\f06a"; } i.icon.attention:before { content: "\f06a"; } i.icon.eye:before { content: "\f06e"; } i.icon.exclamation.triangle:before { content: "\f071"; } i.icon.shuffle:before { content: "\f074"; } i.icon.chat:before { content: "\f075"; } i.icon.cart:before { content: "\f07a"; } i.icon.shopping.cart:before { content: "\f07a"; } i.icon.bar.graph:before { content: "\f080"; } i.icon.key:before { content: "\f084"; } i.icon.cogs:before { content: "\f085"; } i.icon.discussions:before { content: "\f086"; } i.icon.like.outline:before { content: "\f087"; } i.icon.dislike.outline:before { content: "\f088"; } i.icon.heart.outline:before { content: "\f08a"; } i.icon.log.out:before { content: "\f08b"; } i.icon.thumb.tack:before { content: "\f08d"; } i.icon.winner:before { content: "\f091"; } i.icon.phone:before { content: "\f095"; } i.icon.bookmark.outline:before { content: "\f097"; } i.icon.phone.square:before { content: "\f098"; } i.icon.credit.card:before { content: "\f09d"; } i.icon.hdd.outline:before { content: "\f0a0"; } i.icon.bullhorn:before { content: "\f0a1"; } i.icon.bell.outline:before { content: "\f0a2"; } i.icon.hand.outline.right:before { content: "\f0a4"; } i.icon.hand.outline.left:before { content: "\f0a5"; } i.icon.hand.outline.up:before { content: "\f0a6"; } i.icon.hand.outline.down:before { content: "\f0a7"; } i.icon.globe:before { content: "\f0ac"; } i.icon.wrench:before { content: "\f0ad"; } i.icon.briefcase:before { content: "\f0b1"; } i.icon.group:before { content: "\f0c0"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.chain:before { content: "\f0c1"; } i.icon.flask:before { content: "\f0c3"; } i.icon.sidebar:before { content: "\f0c9"; } i.icon.bars:before { content: "\f0c9"; } i.icon.list.ul:before { content: "\f0ca"; } i.icon.list.ol:before { content: "\f0cb"; } i.icon.numbered.list:before { content: "\f0cb"; } i.icon.magic:before { content: "\f0d0"; } i.icon.truck:before { content: "\f0d1"; } i.icon.currency:before { content: "\f0d6"; } i.icon.triangle.down:before { content: "\f0d7"; } i.icon.dropdown:before { content: "\f0d7"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } i.icon.envelope:before { content: "\f0e0"; } i.icon.conversation:before { content: "\f0e6"; } i.icon.rain:before { content: "\f0e9"; } i.icon.clipboard:before { content: "\f0ea"; } i.icon.lightbulb:before { content: "\f0eb"; } i.icon.bell:before { content: "\f0f3"; } i.icon.ambulance:before { content: "\f0f9"; } i.icon.medkit:before { content: "\f0fa"; } i.icon.fighter.jet:before { content: "\f0fb"; } i.icon.beer:before { content: "\f0fc"; } i.icon.plus.square:before { content: "\f0fe"; } i.icon.computer:before { content: "\f108"; } i.icon.circle.outline:before { content: "\f10c"; } i.icon.gamepad:before { content: "\f11b"; } i.icon.star.half.full:before { content: "\f123"; } i.icon.broken.chain:before { content: "\f127"; } i.icon.question:before { content: "\f128"; } i.icon.exclamation:before { content: "\f12a"; } i.icon.eraser:before { content: "\f12d"; } i.icon.microphone:before { content: "\f130"; } i.icon.microphone.slash:before { content: "\f131"; } i.icon.shield:before { content: "\f132"; } i.icon.target:before { content: "\f140"; } i.icon.play.circle:before { content: "\f144"; } i.icon.pencil.square:before { content: "\f14b"; } i.icon.eur:before { content: "\f153"; } i.icon.gbp:before { content: "\f154"; } i.icon.usd:before { content: "\f155"; } i.icon.inr:before { content: "\f156"; } i.icon.cny:before { content: "\f157"; } i.icon.rmb:before { content: "\f157"; } i.icon.jpy:before { content: "\f157"; } i.icon.rouble:before { content: "\f158"; } i.icon.rub:before { content: "\f158"; } i.icon.krw:before { content: "\f159"; } i.icon.btc:before { content: "\f15a"; } i.icon.gratipay:before { content: "\f184"; } i.icon.zip:before { content: "\f187"; } i.icon.dot.circle.outline:before { content: "\f192"; } i.icon.try:before { content: "\f195"; } i.icon.graduation:before { content: "\f19d"; } i.icon.circle.outline:before { content: "\f1db"; } i.icon.sliders:before { content: "\f1de"; } i.icon.weixin:before { content: "\f1d7"; } i.icon.tty:before { content: "\f1e4"; } i.icon.teletype:before { content: "\f1e4"; } i.icon.binoculars:before { content: "\f1e5"; } i.icon.power.cord:before { content: "\f1e6"; } i.icon.wi-fi:before { content: "\f1eb"; } i.icon.visa.card:before { content: "\f1f0"; } i.icon.mastercard.card:before { content: "\f1f1"; } i.icon.discover.card:before { content: "\f1f2"; } i.icon.amex:before { content: "\f1f3"; } i.icon.american.express.card:before { content: "\f1f3"; } i.icon.stripe.card:before { content: "\f1f5"; } i.icon.bell.slash:before { content: "\f1f6"; } i.icon.bell.slash.outline:before { content: "\f1f7"; } i.icon.area.graph:before { content: "\f1fe"; } i.icon.pie.graph:before { content: "\f200"; } i.icon.line.graph:before { content: "\f201"; } i.icon.cc:before { content: "\f20a"; } i.icon.sheqel:before { content: "\f20b"; } i.icon.ils:before { content: "\f20b"; } i.icon.plus.cart:before { content: "\f217"; } i.icon.arrow.down.cart:before { content: "\f218"; } i.icon.detective:before { content: "\f21b"; } i.icon.venus:before { content: "\f221"; } i.icon.mars:before { content: "\f222"; } i.icon.mercury:before { content: "\f223"; } i.icon.intersex:before { content: "\f224"; } i.icon.venus.double:before { content: "\f226"; } i.icon.female.homosexual:before { content: "\f226"; } i.icon.mars.double:before { content: "\f227"; } i.icon.male.homosexual:before { content: "\f227"; } i.icon.venus.mars:before { content: "\f228"; } i.icon.mars.stroke:before { content: "\f229"; } i.icon.mars.alternate:before { content: "\f229"; } i.icon.mars.vertical:before { content: "\f22a"; } i.icon.mars.stroke.vertical:before { content: "\f22a"; } i.icon.mars.horizontal:before { content: "\f22b"; } i.icon.mars.stroke.horizontal:before { content: "\f22b"; } i.icon.asexual:before { content: "\f22d"; } i.icon.facebook.official:before { content: "\f230"; } i.icon.user.plus:before { content: "\f234"; } i.icon.user.times:before { content: "\f235"; } i.icon.user.close:before { content: "\f235"; } i.icon.user.cancel:before { content: "\f235"; } i.icon.user.delete:before { content: "\f235"; } i.icon.user.x:before { content: "\f235"; } i.icon.bed:before { content: "\f236"; } i.icon.yc:before { content: "\f23b"; } i.icon.ycombinator:before { content: "\f23b"; } i.icon.battery.four:before { content: "\f240"; } i.icon.battery.three:before { content: "\f241"; } i.icon.battery.three.quarters:before { content: "\f241"; } i.icon.battery.two:before { content: "\f242"; } i.icon.battery.half:before { content: "\f242"; } i.icon.battery.one:before { content: "\f243"; } i.icon.battery.quarter:before { content: "\f243"; } i.icon.battery.zero:before { content: "\f244"; } i.icon.i.cursor:before { content: "\f246"; } i.icon.jcb:before { content: "\f24b"; } i.icon.japan.credit.bureau.card:before { content: "\f24b"; } i.icon.diners.club.card:before { content: "\f24c"; } i.icon.balance:before { content: "\f24e"; } i.icon.hourglass.outline:before { content: "\f250"; } i.icon.hourglass.zero:before { content: "\f250"; } i.icon.hourglass.one:before { content: "\f251"; } i.icon.hourglass.two:before { content: "\f252"; } i.icon.hourglass.three:before { content: "\f253"; } i.icon.hourglass.four:before { content: "\f254"; } i.icon.grab:before { content: "\f255"; } i.icon.hand.victory:before { content: "\f25b"; } i.icon.tm:before { content: "\f25c"; } i.icon.r.circle:before { content: "\f25d"; } i.icon.television:before { content: "\f26c"; } i.icon.five.hundred.pixels:before { content: "\f26e"; } i.icon.calendar.plus:before { content: "\f271"; } i.icon.calendar.minus:before { content: "\f272"; } i.icon.calendar.times:before { content: "\f273"; } i.icon.calendar.check:before { content: "\f274"; } i.icon.factory:before { content: "\f275"; } i.icon.commenting:before { content: "\f27a"; } i.icon.commenting.outline:before { content: "\f27b"; } i.icon.edge:before { content: "\f282"; } i.icon.ms.edge:before { content: "\f282"; } i.icon.wordpress.beginner:before { content: "\f297"; } i.icon.wordpress.forms:before { content: "\f298"; } i.icon.envira:before { content: "\f299"; } i.icon.question.circle.outline:before { content: "\f29c"; } i.icon.assistive.listening.devices:before { content: "\f2a2"; } i.icon.als:before { content: "\f2a2"; } i.icon.ald:before { content: "\f2a2"; } i.icon.asl.interpreting:before { content: "\f2a3"; } i.icon.deaf:before { content: "\f2a4"; } i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } i.icon.hard.of.hearing:before { content: "\f2a4"; } i.icon.signing:before { content: "\f2a7"; } i.icon.new.pied.piper:before { content: "\f2ae"; } i.icon.theme.isle:before { content: "\f2b2"; } i.icon.google.plus.official:before { content: "\f2b3"; } i.icon.fa:before { content: "\f2b4"; } i.icon.vcard:before { content: "\f2bb"; } i.icon.vcard.outline:before { content: "\f2bc"; } i.icon.drivers.license:before { content: "\f2c2"; } i.icon.drivers.license.outline:before { content: "\f2c3"; } i.icon.thermometer:before { content: "\f2c7"; } i.icon.s15:before { content: "\f2cd"; } i.icon.bath:before { content: "\f2cd"; } i.icon.times.rectangle:before { content: "\f2d3"; } i.icon.times.rectangle.outline:before { content: "\f2d4"; } /*! * # Fomantic-UI - Image * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Spaced */ /* Floated */ /* Size */ /* Packaged Theme */ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Spaced */ /* Floated */ /* Size */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Image *******************************/ .ui.image { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: transparent; } img.ui.image { display: block; } .ui.image svg, .ui.image img { display: block; max-width: 100%; height: auto; } /******************************* States *******************************/ .ui.hidden.images, .ui.ui.hidden.image { display: none; } .ui.hidden.transition.images, .ui.hidden.transition.image { display: block; visibility: hidden; } .ui.images > .hidden.transition { display: inline-block; visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Sizes ---------------*/ .ui.medium.images .image, .ui.medium.images img, .ui.medium.images svg, .ui.medium.image { width: 300px; height: auto; font-size: 1rem; } .ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image { width: 35px; height: auto; font-size: 0.78571429rem; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Input * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Input *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /*------------------- States --------------------*/ /* Placeholder */ /* Down */ /* Focus */ /* Loader */ /*------------------- Variations --------------------*/ /* Inverted */ /* Packaged Theme */ /******************************* Input *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /*------------------- States --------------------*/ /* Placeholder */ /* Down */ /* Focus */ /* Loader */ /*------------------- Variations --------------------*/ /* Inverted */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input { position: relative; font-weight: normal; font-style: normal; display: inline-flex; color: #000000; } .ui.input > input { margin: 0; max-width: 100%; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; font-family: Helvetica, Arial, sans-serif; padding: 0.67857143em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #000000; border-radius: 0.28571429rem; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.input > input::-webkit-input-placeholder { color: #737373; } .ui.input > input::-moz-placeholder { color: #737373; } .ui.input > input:-ms-input-placeholder { color: #737373; } /******************************* States *******************************/ /*-------------------- Active ---------------------*/ .ui.input > input:active, .ui.input.down input { border-color: rgba(0, 0, 0, 0.3); background: #FAFAFA; color: #000000; box-shadow: none; } /*-------------------- Focus ---------------------*/ .ui.input.focus > input, .ui.input > input:focus { border-color: #6EBE49; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); box-shadow: none; } .ui.input.focus > input::-webkit-input-placeholder, .ui.input > input:focus::-webkit-input-placeholder { color: #737373; } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { color: #737373; } .ui.input.focus > input:-ms-input-placeholder, .ui.input > input:focus:-ms-input-placeholder { color: #737373; } /******************************* Variations *******************************/ /*-------------------- Icon ---------------------*/ .ui.icon.input > i.icon { cursor: default; position: absolute; line-height: 1; text-align: center; top: 0; right: 0; margin: 0; height: 100%; width: 2.67142857em; opacity: 0.5; border-radius: 0 0.28571429rem 0.28571429rem 0; transition: opacity 0.3s ease; } .ui.icon.input > i.icon:not(.link) { pointer-events: none; } .ui.ui.ui.ui.icon.input > textarea, .ui.ui.ui.ui.icon.input > input { padding-right: 2.67142857em; } .ui.icon.input > i.icon:before, .ui.icon.input > i.icon:after { left: 0; position: absolute; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .ui.icon.input > i.link.icon { cursor: pointer; } .ui.icon.input > i.circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > i.icon { right: auto; left: 1px; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui.ui.ui.ui[class*="left icon"].input > textarea, .ui.ui.ui.ui[class*="left icon"].input > input { padding-left: 2.67142857em; padding-right: 1em; } /* Focus */ .ui.icon.input > textarea:focus ~ i.icon, .ui.icon.input > input:focus ~ i.icon { opacity: 1; } .ui.icon.input > textarea ~ .icon { height: 3em; } :not(.field) > .ui.transparent.icon.input > textarea ~ .icon { height: 1.3em; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input { display: flex; } .ui.fluid.input > input { width: 0 !important; } /*-------------------- Size ---------------------*/ .ui.input { font-size: 1em; } .ui.big.input { font-size: 1.28571429em; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Label * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Label *******************************/ /*------------------- Element --------------------*/ /* medium is not @emSize custom value required */ /* Group */ /*------------------- Parts --------------------*/ /* Link */ /* Icon */ /* Image */ /* Detail */ /* Delete */ /*------------------- Types --------------------*/ /* Image Label */ /*------------------- States --------------------*/ /* Hover */ /* Active */ /* Active Hover */ /*------------------- Variations --------------------*/ /* Basic */ /* Tag */ /* Avoids error with background: inherit; on animation */ /* Ribbon */ /* Rounding Offset on Triangle */ /* Rounding Offset on Triangle */ /* Inverted */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Avoids error with background: inherit; on animation */ /* Basic Pointing */ /* Floating */ /*------------------- Group --------------------*/ /* Sizing */ /* Packaged Theme */ /******************************* Label *******************************/ /*------------------- Element --------------------*/ /* medium is not @emSize custom value required */ /* Group */ /*------------------- Parts --------------------*/ /* Link */ /* Icon */ /* Image */ /* Detail */ /* Delete */ /*------------------- Types --------------------*/ /* Image Label */ /*------------------- States --------------------*/ /* Hover */ /* Active */ /* Active Hover */ /*------------------- Variations --------------------*/ /* Basic */ /* Tag */ /* Avoids error with background: inherit; on animation */ /* Ribbon */ /* Rounding Offset on Triangle */ /* Rounding Offset on Triangle */ /* Inverted */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Avoids error with background: inherit; on animation */ /* Basic Pointing */ /* Floating */ /*------------------- Group --------------------*/ /* Sizing */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Label *******************************/ .ui.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0 0.14285714em; background-color: #E8E8E8; background-image: none; padding: 0.75em 1.5em; color: rgba(0, 0, 0, 0.6); text-transform: none; font-weight: normal; border: 0 solid transparent; border-radius: 0.28571429rem; transition: background 0.1s ease; } .ui.label:first-child { margin-left: 0; } .ui.label:last-child { margin-right: 0; } /* Link */ a.ui.label { cursor: pointer; } /* Inside Link */ .ui.label > a { cursor: pointer; color: inherit; opacity: 0.5; transition: 0.1s opacity ease; } .ui.label > a:hover { opacity: 1; } /* Image */ .ui.label > img { width: auto !important; vertical-align: middle; height: 2.5em; } /* Icon */ .ui.left.icon.label > .icon, .ui.label > .icon { width: auto; margin: 0 0.75em 0 0; } /* Detail */ .ui.label > .detail { display: inline-block; vertical-align: top; font-weight: bold; margin-left: 1em; opacity: 0.8; } .ui.label > .detail .icon { margin: 0 0.25em 0 0; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon { cursor: pointer; font-size: 0.92857143em; opacity: 0.5; transition: background 0.1s ease; } .ui.label > .close.icon:hover, .ui.label > .delete.icon:hover { opacity: 1; } /* Backward compatible positioning */ .ui.label.left.icon > .close.icon, .ui.label.left.icon > .delete.icon { margin: 0 0.5em 0 0; } .ui.label:not(.icon) > .close.icon, .ui.label:not(.icon) > .delete.icon { margin: 0 0 0 0.5em; } /* Label for only an icon */ .ui.icon.label > .icon { margin: 0 auto; } /* Right Side Icon */ .ui.right.icon.label > .icon { margin: 0 0 0 0.75em; } /*------------------- Group --------------------*/ .ui.labels > .label { margin: 0 0.5em 0.5em 0; } /*------------------- Coupling --------------------*/ .ui.header > .ui.label { margin-top: -0.375em; } /* Remove border radius on attached segment */ .ui.attached.segment > .ui.top.left.attached.label, .ui.bottom.attached.segment > .ui.top.left.attached.label { border-top-left-radius: 0; } .ui.attached.segment > .ui.top.right.attached.label, .ui.bottom.attached.segment > .ui.top.right.attached.label { border-top-right-radius: 0; } .ui.top.attached.segment > .ui.bottom.left.attached.label { border-bottom-left-radius: 0; } .ui.top.attached.segment > .ui.bottom.right.attached.label { border-bottom-right-radius: 0; } /* Padding on next content after a label */ .ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), .ui.top.attached.label + :not(.attached) { margin-top: 2rem !important; } .ui.bottom.attached.label ~ :last-child:not(.attached) { margin-top: 0; margin-bottom: 2rem !important; } /******************************* Types *******************************/ /*------------------- Tag --------------------*/ .ui.tag.labels .label, .ui.tag.label { margin-left: 1em; position: relative; padding-left: 1.5em; padding-right: 1.5em; border-radius: 0 0.28571429rem 0.28571429rem 0; transition: none; } .ui.tag.labels .label:before, .ui.tag.label:before { position: absolute; transform: translateY(-50%) translateX(50%) rotate(-45deg); top: 50%; right: 100%; content: ''; background-color: inherit; background-image: none; width: 1.56em; height: 1.56em; transition: none; } .ui.tag.labels .label:after, .ui.tag.label:after { position: absolute; content: ''; top: 50%; left: -0.25em; margin-top: -0.25em; background-color: #FFFFFF; width: 0.5em; height: 0.5em; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); border-radius: 500rem; } .ui.basic.tag.labels .label:before, .ui.basic.tag.label:before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; right: calc(100% + 1px); } .ui.basic.tag.labels .label:after, .ui.basic.tag.label:after { box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ .ui.labels a.label:hover, a.ui.label:hover { background-color: #E0E0E0; border-color: #E0E0E0; background-image: none; color: rgba(0, 0, 0, 0.8); } .ui.labels a.label:hover:before, a.ui.label:hover:before { color: rgba(0, 0, 0, 0.8); } /*------------------- Active --------------------*/ .ui.active.label { background-color: #D0D0D0; border-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.label:before { background-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Active Hover --------------------*/ .ui.labels a.active.label:hover, a.ui.active.label:hover { background-color: #C8C8C8; border-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.labels a.active.label:hover:before, a.ui.active.label:hover:before { background-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Visible --------------------*/ .ui.labels.visible .label, .ui.label.visible:not(.dropdown) { display: inline-block !important; } /*------------------- Hidden --------------------*/ .ui.labels.hidden .label, .ui.label.hidden { display: none !important; } /******************************* Variations *******************************/ /*------------------- Basic --------------------*/ .ui.basic.labels .label, .ui.basic.label { background: none #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #000000; box-shadow: none; } /* Link */ .ui.basic.labels a.label:hover, a.ui.basic.label:hover { text-decoration: none; background: none #FFFFFF; color: #6EBE49; box-shadow: none; } /*------------------- Colors --------------------*/ .ui.primary.labels .label, .ui.ui.ui.primary.label { background-color: #6EBE49; border-color: #6EBE49; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.primary.labels a.label:hover, a.ui.ui.ui.primary.label:hover { background-color: #60b539; border-color: #60b539; color: #FFFFFF; } /* Basic */ .ui.basic.labels .primary.label, .ui.ui.ui.basic.primary.label { background: none #FFFFFF; border-color: #6EBE49; color: #6EBE49; } .ui.basic.labels a.primary.label:hover, a.ui.ui.ui.basic.primary.label:hover { background: none #FFFFFF; border-color: #60b539; color: #60b539; } .ui.secondary.labels .label, .ui.ui.ui.secondary.label { background-color: #505050; border-color: #505050; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.secondary.labels a.label:hover, a.ui.ui.ui.secondary.label:hover { background-color: #5d5d5d; border-color: #5d5d5d; color: #FFFFFF; } /* Basic */ .ui.basic.labels .secondary.label, .ui.ui.ui.basic.secondary.label { background: none #FFFFFF; border-color: #505050; color: #505050; } .ui.basic.labels a.secondary.label:hover, a.ui.ui.ui.basic.secondary.label:hover { background: none #FFFFFF; border-color: #5d5d5d; color: #5d5d5d; } .ui.red.labels .label, .ui.ui.ui.red.label { background-color: #DB2828; border-color: #DB2828; color: #FFFFFF; } /* Link */ .ui.red.labels a.label:hover, a.ui.ui.ui.red.label:hover { background-color: #d01919; border-color: #d01919; color: #FFFFFF; } /* Basic */ .ui.basic.labels .red.label, .ui.ui.ui.basic.red.label { background: none #FFFFFF; border-color: #DB2828; color: #DB2828; } .ui.basic.labels a.red.label:hover, a.ui.ui.ui.basic.red.label:hover { background: none #FFFFFF; border-color: #d01919; color: #d01919; } .ui.orange.labels .label, .ui.ui.ui.orange.label { background-color: #F2711C; border-color: #F2711C; color: #FFFFFF; } /* Link */ .ui.orange.labels a.label:hover, a.ui.ui.ui.orange.label:hover { background-color: #f26202; border-color: #f26202; color: #FFFFFF; } /* Basic */ .ui.basic.labels .orange.label, .ui.ui.ui.basic.orange.label { background: none #FFFFFF; border-color: #F2711C; color: #F2711C; } .ui.basic.labels a.orange.label:hover, a.ui.ui.ui.basic.orange.label:hover { background: none #FFFFFF; border-color: #f26202; color: #f26202; } .ui.yellow.labels .label, .ui.ui.ui.yellow.label { background-color: #FBBD08; border-color: #FBBD08; color: #FFFFFF; } /* Link */ .ui.yellow.labels a.label:hover, a.ui.ui.ui.yellow.label:hover { background-color: #eaae00; border-color: #eaae00; color: #FFFFFF; } /* Basic */ .ui.basic.labels .yellow.label, .ui.ui.ui.basic.yellow.label { background: none #FFFFFF; border-color: #FBBD08; color: #FBBD08; } .ui.basic.labels a.yellow.label:hover, a.ui.ui.ui.basic.yellow.label:hover { background: none #FFFFFF; border-color: #eaae00; color: #eaae00; } .ui.olive.labels .label, .ui.ui.ui.olive.label { background-color: #B5CC18; border-color: #B5CC18; color: #FFFFFF; } /* Link */ .ui.olive.labels a.label:hover, a.ui.ui.ui.olive.label:hover { background-color: #a7bd0d; border-color: #a7bd0d; color: #FFFFFF; } /* Basic */ .ui.basic.labels .olive.label, .ui.ui.ui.basic.olive.label { background: none #FFFFFF; border-color: #B5CC18; color: #B5CC18; } .ui.basic.labels a.olive.label:hover, a.ui.ui.ui.basic.olive.label:hover { background: none #FFFFFF; border-color: #a7bd0d; color: #a7bd0d; } .ui.green.labels .label, .ui.ui.ui.green.label { background-color: #21BA45; border-color: #21BA45; color: #FFFFFF; } /* Link */ .ui.green.labels a.label:hover, a.ui.ui.ui.green.label:hover { background-color: #16ab39; border-color: #16ab39; color: #FFFFFF; } /* Basic */ .ui.basic.labels .green.label, .ui.ui.ui.basic.green.label { background: none #FFFFFF; border-color: #21BA45; color: #21BA45; } .ui.basic.labels a.green.label:hover, a.ui.ui.ui.basic.green.label:hover { background: none #FFFFFF; border-color: #16ab39; color: #16ab39; } .ui.teal.labels .label, .ui.ui.ui.teal.label { background-color: #00B5AD; border-color: #00B5AD; color: #FFFFFF; } /* Link */ .ui.teal.labels a.label:hover, a.ui.ui.ui.teal.label:hover { background-color: #009c95; border-color: #009c95; color: #FFFFFF; } /* Basic */ .ui.basic.labels .teal.label, .ui.ui.ui.basic.teal.label { background: none #FFFFFF; border-color: #00B5AD; color: #00B5AD; } .ui.basic.labels a.teal.label:hover, a.ui.ui.ui.basic.teal.label:hover { background: none #FFFFFF; border-color: #009c95; color: #009c95; } .ui.blue.labels .label, .ui.ui.ui.blue.label { background-color: #2185D0; border-color: #2185D0; color: #FFFFFF; } /* Link */ .ui.blue.labels a.label:hover, a.ui.ui.ui.blue.label:hover { background-color: #1678c2; border-color: #1678c2; color: #FFFFFF; } /* Basic */ .ui.basic.labels .blue.label, .ui.ui.ui.basic.blue.label { background: none #FFFFFF; border-color: #2185D0; color: #2185D0; } .ui.basic.labels a.blue.label:hover, a.ui.ui.ui.basic.blue.label:hover { background: none #FFFFFF; border-color: #1678c2; color: #1678c2; } .ui.violet.labels .label, .ui.ui.ui.violet.label { background-color: #6435C9; border-color: #6435C9; color: #FFFFFF; } /* Link */ .ui.violet.labels a.label:hover, a.ui.ui.ui.violet.label:hover { background-color: #5829bb; border-color: #5829bb; color: #FFFFFF; } /* Basic */ .ui.basic.labels .violet.label, .ui.ui.ui.basic.violet.label { background: none #FFFFFF; border-color: #6435C9; color: #6435C9; } .ui.basic.labels a.violet.label:hover, a.ui.ui.ui.basic.violet.label:hover { background: none #FFFFFF; border-color: #5829bb; color: #5829bb; } .ui.purple.labels .label, .ui.ui.ui.purple.label { background-color: #A333C8; border-color: #A333C8; color: #FFFFFF; } /* Link */ .ui.purple.labels a.label:hover, a.ui.ui.ui.purple.label:hover { background-color: #9627ba; border-color: #9627ba; color: #FFFFFF; } /* Basic */ .ui.basic.labels .purple.label, .ui.ui.ui.basic.purple.label { background: none #FFFFFF; border-color: #A333C8; color: #A333C8; } .ui.basic.labels a.purple.label:hover, a.ui.ui.ui.basic.purple.label:hover { background: none #FFFFFF; border-color: #9627ba; color: #9627ba; } .ui.pink.labels .label, .ui.ui.ui.pink.label { background-color: #E03997; border-color: #E03997; color: #FFFFFF; } /* Link */ .ui.pink.labels a.label:hover, a.ui.ui.ui.pink.label:hover { background-color: #e61a8d; border-color: #e61a8d; color: #FFFFFF; } /* Basic */ .ui.basic.labels .pink.label, .ui.ui.ui.basic.pink.label { background: none #FFFFFF; border-color: #E03997; color: #E03997; } .ui.basic.labels a.pink.label:hover, a.ui.ui.ui.basic.pink.label:hover { background: none #FFFFFF; border-color: #e61a8d; color: #e61a8d; } .ui.brown.labels .label, .ui.ui.ui.brown.label { background-color: #A5673F; border-color: #A5673F; color: #FFFFFF; } /* Link */ .ui.brown.labels a.label:hover, a.ui.ui.ui.brown.label:hover { background-color: #975b33; border-color: #975b33; color: #FFFFFF; } /* Basic */ .ui.basic.labels .brown.label, .ui.ui.ui.basic.brown.label { background: none #FFFFFF; border-color: #A5673F; color: #A5673F; } .ui.basic.labels a.brown.label:hover, a.ui.ui.ui.basic.brown.label:hover { background: none #FFFFFF; border-color: #975b33; color: #975b33; } .ui.grey.labels .label, .ui.ui.ui.grey.label { background-color: #767676; border-color: #767676; color: #FFFFFF; } /* Link */ .ui.grey.labels a.label:hover, a.ui.ui.ui.grey.label:hover { background-color: #838383; border-color: #838383; color: #FFFFFF; } /* Basic */ .ui.basic.labels .grey.label, .ui.ui.ui.basic.grey.label { background: none #FFFFFF; border-color: #767676; color: #767676; } .ui.basic.labels a.grey.label:hover, a.ui.ui.ui.basic.grey.label:hover { background: none #FFFFFF; border-color: #838383; color: #838383; } .ui.black.labels .label, .ui.ui.ui.black.label { background-color: #1B1C1D; border-color: #1B1C1D; color: #FFFFFF; } /* Link */ .ui.black.labels a.label:hover, a.ui.ui.ui.black.label:hover { background-color: #27292a; border-color: #27292a; color: #FFFFFF; } /* Basic */ .ui.basic.labels .black.label, .ui.ui.ui.basic.black.label { background: none #FFFFFF; border-color: #1B1C1D; color: #1B1C1D; } .ui.basic.labels a.black.label:hover, a.ui.ui.ui.basic.black.label:hover { background: none #FFFFFF; border-color: #27292a; color: #27292a; } /*------------------- Horizontal --------------------*/ .ui.horizontal.labels .label, .ui.horizontal.label { margin: 0 0.5em 0 0; padding: 0.4em 1.5em; min-width: 3em; text-align: center; } /*------------------- Circular --------------------*/ .ui.circular.labels .label, .ui.circular.label { min-width: 2em; min-height: 2em; padding: 0.5em !important; line-height: 1em; text-align: center; border-radius: 500rem; } .ui.empty.circular.labels .label, .ui.empty.circular.label { min-width: 0; min-height: 0; overflow: hidden; width: 0.5em; height: 0.5em; vertical-align: baseline; } /*------------------ Floating Label -------------------*/ .ui.floating.label { position: absolute; z-index: 100; top: -1em; right: 0; white-space: nowrap; transform: translateX(50%); } .ui.right.aligned.floating.label { transform: translateX(1.2em); } .ui.left.floating.label { left: 0; right: auto; transform: translateX(-50%); } .ui.left.aligned.floating.label { transform: translateX(-1.2em); } .ui.bottom.floating.label { top: auto; bottom: -1em; } /*------------------- Sizes --------------------*/ .ui.labels .label, .ui.label { font-size: 0.85714286rem; } .ui.large.labels .label, .ui.large.label { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /*--- Primary Color ---*/ .ui.primary.labels .label, .ui.primary.label { background-color: #6EBE49 !important; border-color: #6EBE49 !important; color: #FFFFFF !important; } /* Link */ .ui.primary.labels .label:hover, a.ui.primary.label:hover { background-color: #6EBE49 !important; border-color: #6EBE49 !important; color: #6EBE49 !important; } /* Corner */ .ui.primary.corner.label, .ui.primary.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.primary.ribbon.label { border-color: #60b539 !important; } /* Basic */ .ui.basic.primary.label { background-color: #FFFFFF !important; color: #6EBE49 !important; border-color: #6EBE49 !important; } .ui.basic.primary.labels a.label:hover, a.ui.basic.primary.label:hover { background-color: #FFFFFF !important; color: #60b539 !important; border-color: #60b539 !important; } /*! * # Fomantic-UI - List * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* List *******************************/ /*------------------- View --------------------*/ /* List */ /* List Item */ /* Sub List */ /* Sub List Item */ /*------------------- Elements --------------------*/ /* Icon */ /* Image */ /* Content */ /* Header */ /* Description */ /* Link */ /* Header Link */ /* Linked Icon */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Float */ /* Horizontal */ /* Inverted */ /* Link List */ /* Inverted Link List */ /* Selection List */ /* Selection List States */ /* Inverted Selection List */ /* Animated List */ /* Bulleted */ /* Horizontal Bullets */ /* Ordered List */ /* Horizontal Ordered */ /* Divided */ /* Divided Horizontal */ /* Divided */ /* Divided Horizontal */ /* Relaxed */ /* Very Relaxed */ /* Packaged Theme */ /******************************* List *******************************/ /*------------------- View --------------------*/ /* List */ /* List Item */ /* Sub List */ /* Sub List Item */ /*------------------- Elements --------------------*/ /* Icon */ /* Image */ /* Content */ /* Header */ /* Description */ /* Link */ /* Header Link */ /* Linked Icon */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Float */ /* Horizontal */ /* Inverted */ /* Link List */ /* Inverted Link List */ /* Selection List */ /* Selection List States */ /* Inverted Selection List */ /* Animated List */ /* Bulleted */ /* Horizontal Bullets */ /* Ordered List */ /* Horizontal Ordered */ /* Divided */ /* Divided Horizontal */ /* Divided */ /* Divided Horizontal */ /* Relaxed */ /* Very Relaxed */ /* Site Theme */ /* Linked Icon */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* List *******************************/ ul.ui.list, ol.ui.list, .ui.list { list-style-type: none; margin: 1em 0; padding: 0 0; } ul.ui.list:first-child, ol.ui.list:first-child, .ui.list:first-child { margin-top: 0; padding-top: 0; } ul.ui.list:last-child, ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0; padding-bottom: 0; } /******************************* Content *******************************/ /* List Item */ ul.ui.list li, ol.ui.list li, .ui.list > .item, .ui.list .list > .item { display: list-item; table-layout: fixed; list-style-type: none; list-style-position: outside; padding: 0.21428571em 0; line-height: 1.14285714em; } ul.ui.list > li:first-child:after, ol.ui.list > li:first-child:after, .ui.list > .list > .item:after, .ui.list > .item:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } ul.ui.list li:first-child, ol.ui.list li:first-child, .ui.list .list > .item:first-child, .ui.list > .item:first-child { padding-top: 0; } ul.ui.list li:last-child, ol.ui.list li:last-child, .ui.list .list > .item:last-child, .ui.list > .item:last-child { padding-bottom: 0; } /* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list:not(.icon) { clear: both; margin: 0; padding: 0.75em 0 0.25em 0.5em; } /* Child Item */ ul.ui.list ul li, ol.ui.list ol li, .ui.list .list > .item { padding: 0.14285714em 0; line-height: inherit; } /* Content */ .ui.list .list > .item > .content, .ui.list > .item > .content { line-height: 1.14285714em; color: #000000; } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list { margin-left: 0; padding-left: 0; } /* Header */ .ui.list .list > .item .header, .ui.list > .item .header { display: block; margin: 0; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #000000; } /* Description */ .ui.list .list > .item .description, .ui.list > .item .description { display: block; color: rgba(0, 0, 0, 0.7); } /* Child Link */ .ui.list > .item a, .ui.list .list > .item a { cursor: pointer; } /* Linking Item */ .ui.list .list > a.item, .ui.list > a.item { cursor: pointer; color: #2F743C; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { color: #6EBE49; } /* Header Link */ .ui.list .list > .item a.header, .ui.list > .item a.header { cursor: pointer; color: #2F743C !important; } .ui.list .list > .item > a.header:hover, .ui.list > .item > a.header:hover { color: #6EBE49 !important; } /******************************* Coupling *******************************/ .ui.menu .ui.list > .item, .ui.menu .ui.list .list > .item { display: list-item; table-layout: fixed; background-color: transparent; list-style-type: none; list-style-position: outside; padding: 0.21428571em 0; line-height: 1.14285714em; } .ui.menu .ui.list .list > .item:before, .ui.menu .ui.list > .item:before { border: none; background: none; } .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child { padding-top: 0; } .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child { padding-bottom: 0; } /******************************* Types *******************************/ /******************************* States *******************************/ /*------------------- Hover --------------------*/ /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ .ui.list { font-size: 1em; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Loader * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Loader *******************************/ /* Some global loader styles defined in site.variables */ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Exact Sizes (Avoids Rounding Errors) */ /* Packaged Theme */ /******************************* Loader *******************************/ /* Some global loader styles defined in site.variables */ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Exact Sizes (Avoids Rounding Errors) */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Loader *******************************/ /* Standard Size */ .ui.loader { display: none; position: absolute; top: 50%; left: 50%; margin: 0; text-align: center; z-index: 1000; transform: translateX(-50%) translateY(-50%); } /* Static Shape */ .ui.loader:before { position: absolute; content: ''; top: 0; left: 50%; width: 100%; height: 100%; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } /* Active Shape */ .ui.loader:after { position: absolute; content: ''; top: 0; left: 50%; width: 100%; height: 100%; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; } /* Active Animation */ @keyframes loader { 100% { transform: rotate(360deg); } } /*------------------- Coupling --------------------*/ /* Show inside active dimmer */ .ui.dimmer > .loader { display: block; } /* Black Dimmer */ .ui.dimmer > .ui.loader { color: rgba(255, 255, 255, 0.9); } .ui.dimmer > .ui.loader:not(.elastic):before { border-color: rgba(255, 255, 255, 0.15); } /* White Dimmer (Inverted) */ .ui.inverted.dimmer > .ui.loader { color: #000000; } .ui.inverted.dimmer > .ui.loader:not(.elastic):before { border-color: rgba(0, 0, 0, 0.1); } /******************************* Types *******************************/ /*------------------- Text --------------------*/ .ui.ui.ui.ui.text.loader { width: auto; height: auto; text-align: center; font-style: normal; } /******************************* States *******************************/ .ui.indeterminate.loader:after { animation-direction: reverse; animation-duration: 1.2s; } .ui.loader.active, .ui.loader.visible { display: block; } .ui.loader.disabled, .ui.loader.hidden { display: none; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ .ui.loader { width: 2.28571429rem; height: 2.28571429rem; font-size: 1em; } .ui.loader:before, .ui.loader:after { width: 2.28571429rem; height: 2.28571429rem; margin: 0 0 0 -1.14285714rem; } .ui.text.loader { min-width: 2.28571429rem; padding-top: 3.07142857rem; } .ui.big.loader { width: 3.71428571rem; height: 3.71428571rem; font-size: 1.28571429em; } .ui.big.loader:before, .ui.big.loader:after { width: 3.71428571rem; height: 3.71428571rem; margin: 0 0 0 -1.85714286rem; } .ui.big.text.loader { min-width: 3.71428571rem; padding-top: 4.5rem; } .ui.huge.loader { width: 4.14285714rem; height: 4.14285714rem; font-size: 1.42857143em; } .ui.huge.loader:before, .ui.huge.loader:after { width: 4.14285714rem; height: 4.14285714rem; margin: 0 0 0 -2.07142857rem; } .ui.huge.text.loader { min-width: 4.14285714rem; padding-top: 4.92857143rem; } /*------------------- Colors --------------------*/ .ui.primary.elastic.loader.loader:before, .ui.primary.basic.elastic.loading.button:before, .ui.primary.basic.elastic.loading.button:after, .ui.primary.elastic.loading.loading.loading:not(.segment):before, .ui.primary.elastic.loading.loading.loading .input > i.icon:before, .ui.primary.elastic.loading.loading.loading.loading > i.icon:before, .ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.primary.loading.loading.loading.loading .input > i.icon:after, .ui.primary.loading.loading.loading.loading > i.icon:after, .ui.primary.loader.loader.loader:after { color: #6EBE49; } .ui.inverted.primary.elastic.loader:before, .ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.primary.elastic.loading.loading.loading > i.icon:before, .ui.inverted.primary.loading.loading.loading.loading:not(.usual):after, .ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.primary.loading.loading.loading.loading > i.icon:after, .ui.inverted.primary.loader.loader.loader:after { color: #54C8FF; } .ui.secondary.elastic.loader.loader:before, .ui.secondary.basic.elastic.loading.button:before, .ui.secondary.basic.elastic.loading.button:after, .ui.secondary.elastic.loading.loading.loading:not(.segment):before, .ui.secondary.elastic.loading.loading.loading .input > i.icon:before, .ui.secondary.elastic.loading.loading.loading.loading > i.icon:before, .ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.secondary.loading.loading.loading.loading .input > i.icon:after, .ui.secondary.loading.loading.loading.loading > i.icon:after, .ui.secondary.loader.loader.loader:after { color: #505050; } .ui.inverted.secondary.elastic.loader:before, .ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before, .ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after, .ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.secondary.loading.loading.loading.loading > i.icon:after, .ui.inverted.secondary.loader.loader.loader:after { color: #545454; } .ui.red.elastic.loader.loader:before, .ui.red.basic.elastic.loading.button:before, .ui.red.basic.elastic.loading.button:after, .ui.red.elastic.loading.loading.loading:not(.segment):before, .ui.red.elastic.loading.loading.loading .input > i.icon:before, .ui.red.elastic.loading.loading.loading.loading > i.icon:before, .ui.red.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.red.loading.loading.loading.loading .input > i.icon:after, .ui.red.loading.loading.loading.loading > i.icon:after, .ui.red.loader.loader.loader:after { color: #DB2828; } .ui.inverted.red.elastic.loader:before, .ui.inverted.red.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.red.elastic.loading.loading.loading > i.icon:before, .ui.inverted.red.loading.loading.loading.loading:not(.usual):after, .ui.inverted.red.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.red.loading.loading.loading.loading > i.icon:after, .ui.inverted.red.loader.loader.loader:after { color: #FF695E; } .ui.orange.elastic.loader.loader:before, .ui.orange.basic.elastic.loading.button:before, .ui.orange.basic.elastic.loading.button:after, .ui.orange.elastic.loading.loading.loading:not(.segment):before, .ui.orange.elastic.loading.loading.loading .input > i.icon:before, .ui.orange.elastic.loading.loading.loading.loading > i.icon:before, .ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.orange.loading.loading.loading.loading .input > i.icon:after, .ui.orange.loading.loading.loading.loading > i.icon:after, .ui.orange.loader.loader.loader:after { color: #F2711C; } .ui.inverted.orange.elastic.loader:before, .ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.orange.elastic.loading.loading.loading > i.icon:before, .ui.inverted.orange.loading.loading.loading.loading:not(.usual):after, .ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.orange.loading.loading.loading.loading > i.icon:after, .ui.inverted.orange.loader.loader.loader:after { color: #FF851B; } .ui.yellow.elastic.loader.loader:before, .ui.yellow.basic.elastic.loading.button:before, .ui.yellow.basic.elastic.loading.button:after, .ui.yellow.elastic.loading.loading.loading:not(.segment):before, .ui.yellow.elastic.loading.loading.loading .input > i.icon:before, .ui.yellow.elastic.loading.loading.loading.loading > i.icon:before, .ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.yellow.loading.loading.loading.loading .input > i.icon:after, .ui.yellow.loading.loading.loading.loading > i.icon:after, .ui.yellow.loader.loader.loader:after { color: #FBBD08; } .ui.inverted.yellow.elastic.loader:before, .ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before, .ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after, .ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.yellow.loading.loading.loading.loading > i.icon:after, .ui.inverted.yellow.loader.loader.loader:after { color: #FFE21F; } .ui.olive.elastic.loader.loader:before, .ui.olive.basic.elastic.loading.button:before, .ui.olive.basic.elastic.loading.button:after, .ui.olive.elastic.loading.loading.loading:not(.segment):before, .ui.olive.elastic.loading.loading.loading .input > i.icon:before, .ui.olive.elastic.loading.loading.loading.loading > i.icon:before, .ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.olive.loading.loading.loading.loading .input > i.icon:after, .ui.olive.loading.loading.loading.loading > i.icon:after, .ui.olive.loader.loader.loader:after { color: #B5CC18; } .ui.inverted.olive.elastic.loader:before, .ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.olive.elastic.loading.loading.loading > i.icon:before, .ui.inverted.olive.loading.loading.loading.loading:not(.usual):after, .ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.olive.loading.loading.loading.loading > i.icon:after, .ui.inverted.olive.loader.loader.loader:after { color: #D9E778; } .ui.green.elastic.loader.loader:before, .ui.green.basic.elastic.loading.button:before, .ui.green.basic.elastic.loading.button:after, .ui.green.elastic.loading.loading.loading:not(.segment):before, .ui.green.elastic.loading.loading.loading .input > i.icon:before, .ui.green.elastic.loading.loading.loading.loading > i.icon:before, .ui.green.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.green.loading.loading.loading.loading .input > i.icon:after, .ui.green.loading.loading.loading.loading > i.icon:after, .ui.green.loader.loader.loader:after { color: #21BA45; } .ui.inverted.green.elastic.loader:before, .ui.inverted.green.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.green.elastic.loading.loading.loading > i.icon:before, .ui.inverted.green.loading.loading.loading.loading:not(.usual):after, .ui.inverted.green.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.green.loading.loading.loading.loading > i.icon:after, .ui.inverted.green.loader.loader.loader:after { color: #2ECC40; } .ui.teal.elastic.loader.loader:before, .ui.teal.basic.elastic.loading.button:before, .ui.teal.basic.elastic.loading.button:after, .ui.teal.elastic.loading.loading.loading:not(.segment):before, .ui.teal.elastic.loading.loading.loading .input > i.icon:before, .ui.teal.elastic.loading.loading.loading.loading > i.icon:before, .ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.teal.loading.loading.loading.loading .input > i.icon:after, .ui.teal.loading.loading.loading.loading > i.icon:after, .ui.teal.loader.loader.loader:after { color: #00B5AD; } .ui.inverted.teal.elastic.loader:before, .ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.teal.elastic.loading.loading.loading > i.icon:before, .ui.inverted.teal.loading.loading.loading.loading:not(.usual):after, .ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.teal.loading.loading.loading.loading > i.icon:after, .ui.inverted.teal.loader.loader.loader:after { color: #6DFFFF; } .ui.blue.elastic.loader.loader:before, .ui.blue.basic.elastic.loading.button:before, .ui.blue.basic.elastic.loading.button:after, .ui.blue.elastic.loading.loading.loading:not(.segment):before, .ui.blue.elastic.loading.loading.loading .input > i.icon:before, .ui.blue.elastic.loading.loading.loading.loading > i.icon:before, .ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.blue.loading.loading.loading.loading .input > i.icon:after, .ui.blue.loading.loading.loading.loading > i.icon:after, .ui.blue.loader.loader.loader:after { color: #2185D0; } .ui.inverted.blue.elastic.loader:before, .ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.blue.elastic.loading.loading.loading > i.icon:before, .ui.inverted.blue.loading.loading.loading.loading:not(.usual):after, .ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.blue.loading.loading.loading.loading > i.icon:after, .ui.inverted.blue.loader.loader.loader:after { color: #54C8FF; } .ui.violet.elastic.loader.loader:before, .ui.violet.basic.elastic.loading.button:before, .ui.violet.basic.elastic.loading.button:after, .ui.violet.elastic.loading.loading.loading:not(.segment):before, .ui.violet.elastic.loading.loading.loading .input > i.icon:before, .ui.violet.elastic.loading.loading.loading.loading > i.icon:before, .ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.violet.loading.loading.loading.loading .input > i.icon:after, .ui.violet.loading.loading.loading.loading > i.icon:after, .ui.violet.loader.loader.loader:after { color: #6435C9; } .ui.inverted.violet.elastic.loader:before, .ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.violet.elastic.loading.loading.loading > i.icon:before, .ui.inverted.violet.loading.loading.loading.loading:not(.usual):after, .ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.violet.loading.loading.loading.loading > i.icon:after, .ui.inverted.violet.loader.loader.loader:after { color: #A291FB; } .ui.purple.elastic.loader.loader:before, .ui.purple.basic.elastic.loading.button:before, .ui.purple.basic.elastic.loading.button:after, .ui.purple.elastic.loading.loading.loading:not(.segment):before, .ui.purple.elastic.loading.loading.loading .input > i.icon:before, .ui.purple.elastic.loading.loading.loading.loading > i.icon:before, .ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.purple.loading.loading.loading.loading .input > i.icon:after, .ui.purple.loading.loading.loading.loading > i.icon:after, .ui.purple.loader.loader.loader:after { color: #A333C8; } .ui.inverted.purple.elastic.loader:before, .ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.purple.elastic.loading.loading.loading > i.icon:before, .ui.inverted.purple.loading.loading.loading.loading:not(.usual):after, .ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.purple.loading.loading.loading.loading > i.icon:after, .ui.inverted.purple.loader.loader.loader:after { color: #DC73FF; } .ui.pink.elastic.loader.loader:before, .ui.pink.basic.elastic.loading.button:before, .ui.pink.basic.elastic.loading.button:after, .ui.pink.elastic.loading.loading.loading:not(.segment):before, .ui.pink.elastic.loading.loading.loading .input > i.icon:before, .ui.pink.elastic.loading.loading.loading.loading > i.icon:before, .ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.pink.loading.loading.loading.loading .input > i.icon:after, .ui.pink.loading.loading.loading.loading > i.icon:after, .ui.pink.loader.loader.loader:after { color: #E03997; } .ui.inverted.pink.elastic.loader:before, .ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.pink.elastic.loading.loading.loading > i.icon:before, .ui.inverted.pink.loading.loading.loading.loading:not(.usual):after, .ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.pink.loading.loading.loading.loading > i.icon:after, .ui.inverted.pink.loader.loader.loader:after { color: #FF8EDF; } .ui.brown.elastic.loader.loader:before, .ui.brown.basic.elastic.loading.button:before, .ui.brown.basic.elastic.loading.button:after, .ui.brown.elastic.loading.loading.loading:not(.segment):before, .ui.brown.elastic.loading.loading.loading .input > i.icon:before, .ui.brown.elastic.loading.loading.loading.loading > i.icon:before, .ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.brown.loading.loading.loading.loading .input > i.icon:after, .ui.brown.loading.loading.loading.loading > i.icon:after, .ui.brown.loader.loader.loader:after { color: #A5673F; } .ui.inverted.brown.elastic.loader:before, .ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.brown.elastic.loading.loading.loading > i.icon:before, .ui.inverted.brown.loading.loading.loading.loading:not(.usual):after, .ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.brown.loading.loading.loading.loading > i.icon:after, .ui.inverted.brown.loader.loader.loader:after { color: #D67C1C; } .ui.grey.elastic.loader.loader:before, .ui.grey.basic.elastic.loading.button:before, .ui.grey.basic.elastic.loading.button:after, .ui.grey.elastic.loading.loading.loading:not(.segment):before, .ui.grey.elastic.loading.loading.loading .input > i.icon:before, .ui.grey.elastic.loading.loading.loading.loading > i.icon:before, .ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.grey.loading.loading.loading.loading .input > i.icon:after, .ui.grey.loading.loading.loading.loading > i.icon:after, .ui.grey.loader.loader.loader:after { color: #767676; } .ui.inverted.grey.elastic.loader:before, .ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.grey.elastic.loading.loading.loading > i.icon:before, .ui.inverted.grey.loading.loading.loading.loading:not(.usual):after, .ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.grey.loading.loading.loading.loading > i.icon:after, .ui.inverted.grey.loader.loader.loader:after { color: #DCDDDE; } .ui.black.elastic.loader.loader:before, .ui.black.basic.elastic.loading.button:before, .ui.black.basic.elastic.loading.button:after, .ui.black.elastic.loading.loading.loading:not(.segment):before, .ui.black.elastic.loading.loading.loading .input > i.icon:before, .ui.black.elastic.loading.loading.loading.loading > i.icon:before, .ui.black.loading.loading.loading.loading:not(.usual):not(.button):after, .ui.black.loading.loading.loading.loading .input > i.icon:after, .ui.black.loading.loading.loading.loading > i.icon:after, .ui.black.loader.loader.loader:after { color: #1B1C1D; } .ui.inverted.black.elastic.loader:before, .ui.inverted.black.elastic.loading.loading.loading:not(.segment):before, .ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.black.elastic.loading.loading.loading > i.icon:before, .ui.inverted.black.loading.loading.loading.loading:not(.usual):after, .ui.inverted.black.loading.loading.loading.loading .input > i.icon:after, .ui.inverted.black.loading.loading.loading.loading > i.icon:after, .ui.inverted.black.loader.loader.loader:after { color: #545454; } .ui.elastic.loader.loader:before, .ui.elastic.loading.loading.loading:before, .ui.elastic.loading.loading.loading .input > i.icon:before, .ui.elastic.loading.loading.loading > i.icon:before, .ui.loading.loading.loading.loading:not(.usual):after, .ui.loading.loading.loading.loading .input > i.icon:after, .ui.loading.loading.loading.loading > i.icon:after, .ui.loader.loader.loader:after { border-color: currentColor; } .ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before { color: #FFFFFF; } .ui.elastic.basic.loading.button:before, .ui.elastic.basic.loading.button:after { color: #767676; } .ui.double.loading.loading.loading.loading.button:after { border-bottom-color: currentColor; } .ui.loading.loading.loading.loading.loading.loading:after, .ui.loading.loading.loading.loading.loading.loading .input > i.icon:after, .ui.loading.loading.loading.loading.loading.loading > i.icon:after, .ui.loader.loader.loader.loader.loader:after { border-left-color: transparent; border-right-color: transparent; } .ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after, .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after, .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after, .ui.loader.loader.loader.loader.loader.loader:not(.double):after { border-bottom-color: transparent; } .ui.loading.loading.loading.loading.loading.loading.segment:after, .ui.loading.loading.loading.loading.loading.loading.form:after { border-left-color: rgba(0, 0, 0, 0.1); border-right-color: rgba(0, 0, 0, 0.1); } .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { border-bottom-color: rgba(0, 0, 0, 0.1); } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Reveal * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reveal *******************************/ /* Types */ /* Packaged Theme */ /******************************* Reveal *******************************/ /* Types */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reveal *******************************/ .ui.reveal { display: inherit; position: relative !important; font-size: 0; } .ui.reveal > .visible.content { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 3 !important; transition: all 0.5s ease 0.1s; } .ui.reveal > .hidden.content { position: relative !important; z-index: 2 !important; } /* Make sure hovered element is on top of other reveal */ .ui.active.reveal .visible.content, .ui.reveal:hover .visible.content { z-index: 4 !important; } /******************************* Types *******************************/ /******************************* States *******************************/ /******************************* Coupling *******************************/ .ui.reveal > .ui.ribbon.label { z-index: 5; } /******************************* Variations *******************************/ /*-------------- Visible ---------------*/ .ui.visible.reveal { overflow: visible; } /*-------------- Instant ---------------*/ .ui.instant.reveal > .content { transition-delay: 0s !important; } /*-------------- Sizing ---------------*/ .ui.reveal > .content { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Segment * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* Types *******************************/ /* Placeholder */ /* Piled */ /* Circular */ /* Stacked */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Packaged Theme */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* Types *******************************/ /* Placeholder */ /* Piled */ /* Circular */ /* Stacked */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Segment *******************************/ .ui.segment { position: relative; background: #FFFFFF; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0; padding: 1em 1em; border-radius: 0.28571429rem; border: 1px solid rgba(34, 36, 38, 0.15); } .ui.segment:first-child { margin-top: 0; } .ui.segment:last-child { margin-bottom: 0; } /*------------------- Loose Coupling --------------------*/ /* Grid */ .ui.page.grid.segment, .ui.grid > .row > .ui.segment.column, .ui.grid > .ui.segment.column { padding-top: 2em; padding-bottom: 2em; } .ui.grid.segment { margin: 1rem 0; border-radius: 0.28571429rem; } /* Table */ .ui.basic.table.segment { background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui[class*="very basic"].table.segment { padding: 1em 1em; } /* Tab */ .ui.segment.tab:last-child { margin-bottom: 1rem; } /******************************* Types *******************************/ /******************************* States *******************************/ /******************************* Variations *******************************/ /*------------------- Basic --------------------*/ .ui.basic.segment, .ui.segments .ui.basic.segment, .ui.basic.segments { background: none transparent; box-shadow: none; border: none; border-radius: 0; } /*------------------- Colors --------------------*/ .ui.red.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #DB2828; } .ui.orange.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #F2711C; } .ui.yellow.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #FBBD08; } .ui.olive.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #B5CC18; } .ui.green.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #21BA45; } .ui.teal.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #00B5AD; } .ui.blue.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #2185D0; } .ui.violet.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #6435C9; } .ui.purple.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #A333C8; } .ui.pink.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #E03997; } .ui.brown.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #A5673F; } .ui.grey.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #767676; } .ui.black.segment.segment.segment.segment.segment:not(.inverted) { border-top: 2px solid #1B1C1D; } /*------------------- Emphasis --------------------*/ /*------------------- Size --------------------*/ .ui.segments .segment, .ui.segment { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /* Collections */ /*! * # Fomantic-UI - Form * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Input states */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Packaged Theme */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Input states */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Elements *******************************/ /*-------------------- Form ---------------------*/ .ui.form { position: relative; max-width: 100%; } /*-------------------- Content ---------------------*/ .ui.form > p { margin: 1em 0; } /*-------------------- Field ---------------------*/ .ui.form .field { clear: both; margin: 0 0 1em; } .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field { margin-bottom: 0; } .ui.form .fields .field { clear: both; margin: 0; } /*-------------------- Labels ---------------------*/ .ui.form .field > label { display: block; margin: 0 0 0.28571429rem 0; color: #000000; font-size: 0.92857143em; font-weight: bold; text-transform: none; } /*-------------------- Standard Inputs ---------------------*/ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { width: 100%; vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button { height: 1.21428571em; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family: Helvetica, Arial, sans-serif; margin: 0; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #000000; border-radius: 0.28571429rem; box-shadow: 0 0 0 0 transparent inset; transition: color 0.1s ease, border-color 0.1s ease; } /* Text Area */ .ui.input textarea, .ui.form textarea { margin: 0; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571429em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: #000000; border-radius: 0.28571429rem; box-shadow: 0 0 0 0 transparent inset; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; font-family: Helvetica, Arial, sans-serif; line-height: 1.2857; resize: vertical; } .ui.form textarea:not([rows]) { height: 12em; min-height: 8em; max-height: 24em; } .ui.form textarea, .ui.form input[type="checkbox"] { vertical-align: top; } /*-------------------- Checkbox margin ---------------------*/ .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { margin-top: 0.7em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { margin-top: 2.41428571em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { margin-top: 2.21428571em; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { margin-top: 2.61428571em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { margin-top: 0.6em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { margin-top: 0.5em; } .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { margin-top: 0.7em; } /*-------------------------- Input w/ attached Button ---------------------------*/ .ui.form input.attached { width: auto; } /*-------------------- Basic Select ---------------------*/ .ui.form select { display: block; height: auto; width: 100%; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; box-shadow: 0 0 0 0 transparent inset; padding: 0.62em 1em; color: #000000; transition: color 0.1s ease, border-color 0.1s ease; } /*-------------------- Dropdown ---------------------*/ /* Block */ .ui.form .field > .selection.dropdown { min-width: auto; width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { float: right; } /* Inline */ .ui.form .inline.fields .field > .selection.dropdown, .ui.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .ui.form .inline.field > .selection.dropdown > .dropdown.icon { float: none; } /*-------------------- UI Input ---------------------*/ /* Block */ .ui.form .field .ui.input, .ui.form .fields .field .ui.input, .ui.form .wide.field .ui.input { width: 100%; } /* Inline */ .ui.form .inline.fields .field:not(.wide) .ui.input, .ui.form .inline.field:not(.wide) .ui.input { width: auto; vertical-align: middle; } /* Auto Input */ .ui.form .fields .field .ui.input input, .ui.form .field .ui.input input { width: auto; } /* Full Width Input */ .ui.form .ten.fields .ui.input input, .ui.form .nine.fields .ui.input input, .ui.form .eight.fields .ui.input input, .ui.form .seven.fields .ui.input input, .ui.form .six.fields .ui.input input, .ui.form .five.fields .ui.input input, .ui.form .four.fields .ui.input input, .ui.form .three.fields .ui.input input, .ui.form .two.fields .ui.input input, .ui.form .wide.field .ui.input input { flex: 1 0 auto; width: 0; } /*-------------------- Types of Messages ---------------------*/ .ui.form .error.message, .ui.form .error.message:empty { display: none; } .ui.form .info.message, .ui.form .info.message:empty { display: none; } .ui.form .success.message, .ui.form .success.message:empty { display: none; } .ui.form .warning.message, .ui.form .warning.message:empty { display: none; } /* Assumptions */ .ui.form .message:first-child { margin-top: 0; } /*-------------------- Validation Prompt ---------------------*/ .ui.form .field .prompt.label { white-space: normal; background: #FFFFFF !important; border: 1px solid #E0B4B4 !important; color: #9F3A38 !important; } .ui.form .inline.fields .field .prompt, .ui.form .inline.field .prompt { vertical-align: top; margin: -0.25em 0 -0.5em 0.5em; } .ui.form .inline.fields .field .prompt:before, .ui.form .inline.field .prompt:before { border-width: 0 0 1px 1px; bottom: auto; right: auto; top: 50%; left: 0; } /******************************* States *******************************/ /*-------------------- Autofilled ---------------------*/ .ui.form .field.field input:-webkit-autofill { box-shadow: 0 0 0 100px #FFFFF0 inset !important; border-color: #E5DFA1 !important; } /* Focus */ .ui.form .field.field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #FFFFF0 inset !important; border-color: #D5C315 !important; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder { color: #bfbfbf; } .ui.form :-ms-input-placeholder { color: #bfbfbf !important; } .ui.form ::-moz-placeholder { color: #bfbfbf; } .ui.form :focus::-webkit-input-placeholder { color: #737373; } .ui.form :focus:-ms-input-placeholder { color: #737373 !important; } .ui.form :focus::-moz-placeholder { color: #737373; } /*-------------------- Focus ---------------------*/ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } /*-------------------- States ---------------------*/ /* On Form */ .ui.form.error .error.message:not(:empty) { display: block; } .ui.form.error .compact.error.message:not(:empty) { display: inline-block; } .ui.form.error .icon.error.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.error .error.message:not(:empty), .ui.form .field.error .error.message:not(:empty) { display: block; } .ui.form .fields.error .compact.error.message:not(:empty), .ui.form .field.error .compact.error.message:not(:empty) { display: inline-block; } .ui.form .fields.error .icon.error.message:not(:empty), .ui.form .field.error .icon.error.message:not(:empty) { display: flex; } .ui.ui.form .fields.error .field label, .ui.ui.form .field.error label, .ui.ui.form .fields.error .field .input, .ui.ui.form .field.error .input { color: #9F3A38; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { border-color: #9F3A38; color: #FFFFFF; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="datetime-local"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="number"], .ui.form .fields.error .field input[type="password"], .ui.form .fields.error .field input[type="search"], .ui.form .fields.error .field input[type="tel"], .ui.form .fields.error .field input[type="time"], .ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="file"], .ui.form .fields.error .field input[type="url"], .ui.form .field.error textarea, .ui.form .field.error select, .ui.form .field.error input:not([type]), .ui.form .field.error input[type="date"], .ui.form .field.error input[type="datetime-local"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="number"], .ui.form .field.error input[type="password"], .ui.form .field.error input[type="search"], .ui.form .field.error input[type="tel"], .ui.form .field.error input[type="time"], .ui.form .field.error input[type="text"], .ui.form .field.error input[type="file"], .ui.form .field.error input[type="url"] { color: #9F3A38; background: #FFF6F6; border-color: #E0B4B4; border-radius: ''; box-shadow: none; } .ui.form .field.error textarea:focus, .ui.form .field.error select:focus, .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="datetime-local"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="password"]:focus, .ui.form .field.error input[type="search"]:focus, .ui.form .field.error input[type="tel"]:focus, .ui.form .field.error input[type="time"]:focus, .ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="file"]:focus, .ui.form .field.error input[type="url"]:focus { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ .ui.form .field.error .transparent.input input, .ui.form .field.error .transparent.input textarea, .ui.form .field.error input.transparent, .ui.form .field.error textarea.transparent { background-color: #FFF6F6 !important; color: #9F3A38 !important; } /* Autofilled */ .ui.form .error.error input:-webkit-autofill { box-shadow: 0 0 0 100px #FFFAF0 inset !important; border-color: #E0B4B4 !important; } /* Placeholder */ .ui.form .error ::-webkit-input-placeholder { color: #e7bdbc; } .ui.form .error :-ms-input-placeholder { color: #e7bdbc !important; } .ui.form .error ::-moz-placeholder { color: #e7bdbc; } .ui.form .error :focus::-webkit-input-placeholder { color: #da9796; } .ui.form .error :focus:-ms-input-placeholder { color: #da9796 !important; } .ui.form .error :focus::-moz-placeholder { color: #da9796; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item { background: #FFF6F6; color: #9F3A38; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu { border-color: #E0B4B4; } .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, .ui.form .field.error .ui.multiple.selection.dropdown > .label { background-color: #EACBCB; color: #9F3A38; } /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { background-color: #FBE7E7; } /* Selected */ .ui.form .fields.error .field .ui.dropdown .menu .selected.item, .ui.form .field.error .ui.dropdown .menu .selected.item { background-color: #FBE7E7; } /* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item { background-color: #FDCFCF !important; } /*-------------------- Checkbox State ---------------------*/ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: #9F3A38; } .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { background: #FFF6F6; border-color: #E0B4B4; } .ui.form .fields.error .field .checkbox label:after, .ui.form .field.error .checkbox label:after, .ui.form .fields.error .field .checkbox .box:after, .ui.form .field.error .checkbox .box:after { color: #9F3A38; } /* On Form */ .ui.form.info .info.message:not(:empty) { display: block; } .ui.form.info .compact.info.message:not(:empty) { display: inline-block; } .ui.form.info .icon.info.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.info .info.message:not(:empty), .ui.form .field.info .info.message:not(:empty) { display: block; } .ui.form .fields.info .compact.info.message:not(:empty), .ui.form .field.info .compact.info.message:not(:empty) { display: inline-block; } .ui.form .fields.info .icon.info.message:not(:empty), .ui.form .field.info .icon.info.message:not(:empty) { display: flex; } .ui.ui.form .fields.info .field label, .ui.ui.form .field.info label, .ui.ui.form .fields.info .field .input, .ui.ui.form .field.info .input { color: #276F86; } .ui.form .fields.info .field .corner.label, .ui.form .field.info .corner.label { border-color: #276F86; color: #FFFFFF; } .ui.form .fields.info .field textarea, .ui.form .fields.info .field select, .ui.form .fields.info .field input:not([type]), .ui.form .fields.info .field input[type="date"], .ui.form .fields.info .field input[type="datetime-local"], .ui.form .fields.info .field input[type="email"], .ui.form .fields.info .field input[type="number"], .ui.form .fields.info .field input[type="password"], .ui.form .fields.info .field input[type="search"], .ui.form .fields.info .field input[type="tel"], .ui.form .fields.info .field input[type="time"], .ui.form .fields.info .field input[type="text"], .ui.form .fields.info .field input[type="file"], .ui.form .fields.info .field input[type="url"], .ui.form .field.info textarea, .ui.form .field.info select, .ui.form .field.info input:not([type]), .ui.form .field.info input[type="date"], .ui.form .field.info input[type="datetime-local"], .ui.form .field.info input[type="email"], .ui.form .field.info input[type="number"], .ui.form .field.info input[type="password"], .ui.form .field.info input[type="search"], .ui.form .field.info input[type="tel"], .ui.form .field.info input[type="time"], .ui.form .field.info input[type="text"], .ui.form .field.info input[type="file"], .ui.form .field.info input[type="url"] { color: #276F86; background: #F8FFFF; border-color: #A9D5DE; border-radius: ''; box-shadow: none; } .ui.form .field.info textarea:focus, .ui.form .field.info select:focus, .ui.form .field.info input:not([type]):focus, .ui.form .field.info input[type="date"]:focus, .ui.form .field.info input[type="datetime-local"]:focus, .ui.form .field.info input[type="email"]:focus, .ui.form .field.info input[type="number"]:focus, .ui.form .field.info input[type="password"]:focus, .ui.form .field.info input[type="search"]:focus, .ui.form .field.info input[type="tel"]:focus, .ui.form .field.info input[type="time"]:focus, .ui.form .field.info input[type="text"]:focus, .ui.form .field.info input[type="file"]:focus, .ui.form .field.info input[type="url"]:focus { background: #F8FFFF; border-color: #A9D5DE; color: #276F86; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.info select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ .ui.form .field.info .transparent.input input, .ui.form .field.info .transparent.input textarea, .ui.form .field.info input.transparent, .ui.form .field.info textarea.transparent { background-color: #F8FFFF !important; color: #276F86 !important; } /* Autofilled */ .ui.form .info.info input:-webkit-autofill { box-shadow: 0 0 0 100px #F0FAFF inset !important; border-color: #b3e0e0 !important; } /* Placeholder */ .ui.form .info ::-webkit-input-placeholder { color: #98cfe1; } .ui.form .info :-ms-input-placeholder { color: #98cfe1 !important; } .ui.form .info ::-moz-placeholder { color: #98cfe1; } .ui.form .info :focus::-webkit-input-placeholder { color: #70bdd6; } .ui.form .info :focus:-ms-input-placeholder { color: #70bdd6 !important; } .ui.form .info :focus::-moz-placeholder { color: #70bdd6; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.info .field .ui.dropdown, .ui.form .fields.info .field .ui.dropdown .item, .ui.form .field.info .ui.dropdown, .ui.form .field.info .ui.dropdown .text, .ui.form .field.info .ui.dropdown .item { background: #F8FFFF; color: #276F86; } .ui.form .fields.info .field .ui.dropdown, .ui.form .field.info .ui.dropdown { border-color: #A9D5DE !important; } .ui.form .fields.info .field .ui.dropdown:hover, .ui.form .field.info .ui.dropdown:hover { border-color: #A9D5DE !important; } .ui.form .fields.info .field .ui.dropdown:hover .menu, .ui.form .field.info .ui.dropdown:hover .menu { border-color: #A9D5DE; } .ui.form .fields.info .field .ui.multiple.selection.dropdown > .label, .ui.form .field.info .ui.multiple.selection.dropdown > .label { background-color: #cce3ea; color: #276F86; } /* Hover */ .ui.form .fields.info .field .ui.dropdown .menu .item:hover, .ui.form .field.info .ui.dropdown .menu .item:hover { background-color: #e9f2fb; } /* Selected */ .ui.form .fields.info .field .ui.dropdown .menu .selected.item, .ui.form .field.info .ui.dropdown .menu .selected.item { background-color: #e9f2fb; } /* Active */ .ui.form .fields.info .field .ui.dropdown .menu .active.item, .ui.form .field.info .ui.dropdown .menu .active.item { background-color: #cef1fd !important; } /*-------------------- Checkbox State ---------------------*/ .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.info .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box { color: #276F86; } .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before { background: #F8FFFF; border-color: #A9D5DE; } .ui.form .fields.info .field .checkbox label:after, .ui.form .field.info .checkbox label:after, .ui.form .fields.info .field .checkbox .box:after, .ui.form .field.info .checkbox .box:after { color: #276F86; } /* On Form */ .ui.form.success .success.message:not(:empty) { display: block; } .ui.form.success .compact.success.message:not(:empty) { display: inline-block; } .ui.form.success .icon.success.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.success .success.message:not(:empty), .ui.form .field.success .success.message:not(:empty) { display: block; } .ui.form .fields.success .compact.success.message:not(:empty), .ui.form .field.success .compact.success.message:not(:empty) { display: inline-block; } .ui.form .fields.success .icon.success.message:not(:empty), .ui.form .field.success .icon.success.message:not(:empty) { display: flex; } .ui.ui.form .fields.success .field label, .ui.ui.form .field.success label, .ui.ui.form .fields.success .field .input, .ui.ui.form .field.success .input { color: #2C662D; } .ui.form .fields.success .field .corner.label, .ui.form .field.success .corner.label { border-color: #2C662D; color: #FFFFFF; } .ui.form .fields.success .field textarea, .ui.form .fields.success .field select, .ui.form .fields.success .field input:not([type]), .ui.form .fields.success .field input[type="date"], .ui.form .fields.success .field input[type="datetime-local"], .ui.form .fields.success .field input[type="email"], .ui.form .fields.success .field input[type="number"], .ui.form .fields.success .field input[type="password"], .ui.form .fields.success .field input[type="search"], .ui.form .fields.success .field input[type="tel"], .ui.form .fields.success .field input[type="time"], .ui.form .fields.success .field input[type="text"], .ui.form .fields.success .field input[type="file"], .ui.form .fields.success .field input[type="url"], .ui.form .field.success textarea, .ui.form .field.success select, .ui.form .field.success input:not([type]), .ui.form .field.success input[type="date"], .ui.form .field.success input[type="datetime-local"], .ui.form .field.success input[type="email"], .ui.form .field.success input[type="number"], .ui.form .field.success input[type="password"], .ui.form .field.success input[type="search"], .ui.form .field.success input[type="tel"], .ui.form .field.success input[type="time"], .ui.form .field.success input[type="text"], .ui.form .field.success input[type="file"], .ui.form .field.success input[type="url"] { color: #2C662D; background: #FCFFF5; border-color: #A3C293; border-radius: ''; box-shadow: none; } .ui.form .field.success textarea:focus, .ui.form .field.success select:focus, .ui.form .field.success input:not([type]):focus, .ui.form .field.success input[type="date"]:focus, .ui.form .field.success input[type="datetime-local"]:focus, .ui.form .field.success input[type="email"]:focus, .ui.form .field.success input[type="number"]:focus, .ui.form .field.success input[type="password"]:focus, .ui.form .field.success input[type="search"]:focus, .ui.form .field.success input[type="tel"]:focus, .ui.form .field.success input[type="time"]:focus, .ui.form .field.success input[type="text"]:focus, .ui.form .field.success input[type="file"]:focus, .ui.form .field.success input[type="url"]:focus { background: #FCFFF5; border-color: #A3C293; color: #2C662D; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.success select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ .ui.form .field.success .transparent.input input, .ui.form .field.success .transparent.input textarea, .ui.form .field.success input.transparent, .ui.form .field.success textarea.transparent { background-color: #FCFFF5 !important; color: #2C662D !important; } /* Autofilled */ .ui.form .success.success input:-webkit-autofill { box-shadow: 0 0 0 100px #F0FFF0 inset !important; border-color: #bee0b3 !important; } /* Placeholder */ .ui.form .success ::-webkit-input-placeholder { color: #8fcf90; } .ui.form .success :-ms-input-placeholder { color: #8fcf90 !important; } .ui.form .success ::-moz-placeholder { color: #8fcf90; } .ui.form .success :focus::-webkit-input-placeholder { color: #6cbf6d; } .ui.form .success :focus:-ms-input-placeholder { color: #6cbf6d !important; } .ui.form .success :focus::-moz-placeholder { color: #6cbf6d; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.success .field .ui.dropdown, .ui.form .fields.success .field .ui.dropdown .item, .ui.form .field.success .ui.dropdown, .ui.form .field.success .ui.dropdown .text, .ui.form .field.success .ui.dropdown .item { background: #FCFFF5; color: #2C662D; } .ui.form .fields.success .field .ui.dropdown, .ui.form .field.success .ui.dropdown { border-color: #A3C293 !important; } .ui.form .fields.success .field .ui.dropdown:hover, .ui.form .field.success .ui.dropdown:hover { border-color: #A3C293 !important; } .ui.form .fields.success .field .ui.dropdown:hover .menu, .ui.form .field.success .ui.dropdown:hover .menu { border-color: #A3C293; } .ui.form .fields.success .field .ui.multiple.selection.dropdown > .label, .ui.form .field.success .ui.multiple.selection.dropdown > .label { background-color: #cceacc; color: #2C662D; } /* Hover */ .ui.form .fields.success .field .ui.dropdown .menu .item:hover, .ui.form .field.success .ui.dropdown .menu .item:hover { background-color: #e9fbe9; } /* Selected */ .ui.form .fields.success .field .ui.dropdown .menu .selected.item, .ui.form .field.success .ui.dropdown .menu .selected.item { background-color: #e9fbe9; } /* Active */ .ui.form .fields.success .field .ui.dropdown .menu .active.item, .ui.form .field.success .ui.dropdown .menu .active.item { background-color: #dafdce !important; } /*-------------------- Checkbox State ---------------------*/ .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.success .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box { color: #2C662D; } .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before { background: #FCFFF5; border-color: #A3C293; } .ui.form .fields.success .field .checkbox label:after, .ui.form .field.success .checkbox label:after, .ui.form .fields.success .field .checkbox .box:after, .ui.form .field.success .checkbox .box:after { color: #2C662D; } /* On Form */ .ui.form.warning .warning.message:not(:empty) { display: block; } .ui.form.warning .compact.warning.message:not(:empty) { display: inline-block; } .ui.form.warning .icon.warning.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.warning .warning.message:not(:empty), .ui.form .field.warning .warning.message:not(:empty) { display: block; } .ui.form .fields.warning .compact.warning.message:not(:empty), .ui.form .field.warning .compact.warning.message:not(:empty) { display: inline-block; } .ui.form .fields.warning .icon.warning.message:not(:empty), .ui.form .field.warning .icon.warning.message:not(:empty) { display: flex; } .ui.ui.form .fields.warning .field label, .ui.ui.form .field.warning label, .ui.ui.form .fields.warning .field .input, .ui.ui.form .field.warning .input { color: #573A08; } .ui.form .fields.warning .field .corner.label, .ui.form .field.warning .corner.label { border-color: #573A08; color: #FFFFFF; } .ui.form .fields.warning .field textarea, .ui.form .fields.warning .field select, .ui.form .fields.warning .field input:not([type]), .ui.form .fields.warning .field input[type="date"], .ui.form .fields.warning .field input[type="datetime-local"], .ui.form .fields.warning .field input[type="email"], .ui.form .fields.warning .field input[type="number"], .ui.form .fields.warning .field input[type="password"], .ui.form .fields.warning .field input[type="search"], .ui.form .fields.warning .field input[type="tel"], .ui.form .fields.warning .field input[type="time"], .ui.form .fields.warning .field input[type="text"], .ui.form .fields.warning .field input[type="file"], .ui.form .fields.warning .field input[type="url"], .ui.form .field.warning textarea, .ui.form .field.warning select, .ui.form .field.warning input:not([type]), .ui.form .field.warning input[type="date"], .ui.form .field.warning input[type="datetime-local"], .ui.form .field.warning input[type="email"], .ui.form .field.warning input[type="number"], .ui.form .field.warning input[type="password"], .ui.form .field.warning input[type="search"], .ui.form .field.warning input[type="tel"], .ui.form .field.warning input[type="time"], .ui.form .field.warning input[type="text"], .ui.form .field.warning input[type="file"], .ui.form .field.warning input[type="url"] { color: #573A08; background: #FFFAF3; border-color: #C9BA9B; border-radius: ''; box-shadow: none; } .ui.form .field.warning textarea:focus, .ui.form .field.warning select:focus, .ui.form .field.warning input:not([type]):focus, .ui.form .field.warning input[type="date"]:focus, .ui.form .field.warning input[type="datetime-local"]:focus, .ui.form .field.warning input[type="email"]:focus, .ui.form .field.warning input[type="number"]:focus, .ui.form .field.warning input[type="password"]:focus, .ui.form .field.warning input[type="search"]:focus, .ui.form .field.warning input[type="tel"]:focus, .ui.form .field.warning input[type="time"]:focus, .ui.form .field.warning input[type="text"]:focus, .ui.form .field.warning input[type="file"]:focus, .ui.form .field.warning input[type="url"]:focus { background: #FFFAF3; border-color: #C9BA9B; color: #573A08; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.warning select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ .ui.form .field.warning .transparent.input input, .ui.form .field.warning .transparent.input textarea, .ui.form .field.warning input.transparent, .ui.form .field.warning textarea.transparent { background-color: #FFFAF3 !important; color: #573A08 !important; } /* Autofilled */ .ui.form .warning.warning input:-webkit-autofill { box-shadow: 0 0 0 100px #FFFFe0 inset !important; border-color: #e0e0b3 !important; } /* Placeholder */ .ui.form .warning ::-webkit-input-placeholder { color: #edad3e; } .ui.form .warning :-ms-input-placeholder { color: #edad3e !important; } .ui.form .warning ::-moz-placeholder { color: #edad3e; } .ui.form .warning :focus::-webkit-input-placeholder { color: #e39715; } .ui.form .warning :focus:-ms-input-placeholder { color: #e39715 !important; } .ui.form .warning :focus::-moz-placeholder { color: #e39715; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.warning .field .ui.dropdown, .ui.form .fields.warning .field .ui.dropdown .item, .ui.form .field.warning .ui.dropdown, .ui.form .field.warning .ui.dropdown .text, .ui.form .field.warning .ui.dropdown .item { background: #FFFAF3; color: #573A08; } .ui.form .fields.warning .field .ui.dropdown, .ui.form .field.warning .ui.dropdown { border-color: #C9BA9B !important; } .ui.form .fields.warning .field .ui.dropdown:hover, .ui.form .field.warning .ui.dropdown:hover { border-color: #C9BA9B !important; } .ui.form .fields.warning .field .ui.dropdown:hover .menu, .ui.form .field.warning .ui.dropdown:hover .menu { border-color: #C9BA9B; } .ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label, .ui.form .field.warning .ui.multiple.selection.dropdown > .label { background-color: #eaeacc; color: #573A08; } /* Hover */ .ui.form .fields.warning .field .ui.dropdown .menu .item:hover, .ui.form .field.warning .ui.dropdown .menu .item:hover { background-color: #fbfbe9; } /* Selected */ .ui.form .fields.warning .field .ui.dropdown .menu .selected.item, .ui.form .field.warning .ui.dropdown .menu .selected.item { background-color: #fbfbe9; } /* Active */ .ui.form .fields.warning .field .ui.dropdown .menu .active.item, .ui.form .field.warning .ui.dropdown .menu .active.item { background-color: #fdfdce !important; } /*-------------------- Checkbox State ---------------------*/ .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box { color: #573A08; } .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before { background: #FFFAF3; border-color: #C9BA9B; } .ui.form .fields.warning .field .checkbox label:after, .ui.form .field.warning .checkbox label:after, .ui.form .fields.warning .field .checkbox .box:after, .ui.form .field.warning .checkbox .box:after { color: #573A08; } /*-------------------- Disabled ---------------------*/ .ui.form .disabled.fields .field, .ui.form .disabled.field, .ui.form .field :disabled { pointer-events: none; opacity: 0.45; } .ui.form .field.disabled > label, .ui.form .fields.disabled > label { opacity: 0.45; } .ui.form .field.disabled :disabled { opacity: 1; } /*-------------- Loading ---------------*/ .ui.loading.form { position: relative; cursor: default; pointer-events: none; } .ui.loading.form:before { position: absolute; content: ''; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; z-index: 100; } .ui.loading.form.segments:before { border-radius: 0.28571429rem; } .ui.loading.form:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0 0 -1.5em; width: 3em; height: 3em; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: 101; } /******************************* Element Types *******************************/ /*-------------------- Required Field ---------------------*/ .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after, .ui.form label.required:after { margin: -0.2em 0 0 0.2em; content: '*'; color: #DB2828; } .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form label.required:after { display: inline-block; vertical-align: top; } .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { position: absolute; top: 0; left: 100%; } /******************************* Variations *******************************/ /*-------------------- Field Groups ---------------------*/ /* Grouped Vertically */ .ui.form .grouped.fields { display: block; margin: 0 0 1em; } .ui.form .grouped.fields:last-child { margin-bottom: 0; } .ui.form .grouped.fields > label { margin: 0 0 0.28571429rem 0; color: #000000; font-size: 0.92857143em; font-weight: bold; text-transform: none; } .ui.form .grouped.fields .field, .ui.form .grouped.inline.fields .field { display: block; margin: 0.5em 0; padding: 0; } /*-------------------- Fields ---------------------*/ /* Split fields */ .ui.form .fields { display: flex; flex-direction: row; margin: 0 -0.5em 1em; } .ui.form .fields > .field { flex: 0 1 auto; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child { border-left: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field { width: 12.5%; } .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field { width: 11.11111111%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767.98px) { .ui.form .fields { flex-wrap: wrap; } .ui[class*="equal width"].form:not(.unstackable) .fields > .field, .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { width: 100% !important; margin: 0 0 1em; } } /* Sizing Combinations */ .ui.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .one.wide.field { width: 6.25% !important; } .ui.form .two.wide.field { width: 12.5% !important; } .ui.form .three.wide.field { width: 18.75% !important; } .ui.form .four.wide.field { width: 25% !important; } .ui.form .five.wide.field { width: 31.25% !important; } .ui.form .six.wide.field { width: 37.5% !important; } .ui.form .seven.wide.field { width: 43.75% !important; } .ui.form .eight.wide.field { width: 50% !important; } .ui.form .nine.wide.field { width: 56.25% !important; } .ui.form .ten.wide.field { width: 62.5% !important; } .ui.form .eleven.wide.field { width: 68.75% !important; } .ui.form .twelve.wide.field { width: 75% !important; } .ui.form .thirteen.wide.field { width: 81.25% !important; } .ui.form .fourteen.wide.field { width: 87.5% !important; } .ui.form .fifteen.wide.field { width: 93.75% !important; } .ui.form .sixteen.wide.field { width: 100% !important; } /* Swap to full width on mobile */ @media only screen and (max-width: 767.98px) { .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { width: 100% !important; } .ui.form .fields { margin-bottom: 0; } } /*-------------------- Equal Width ---------------------*/ .ui[class*="equal width"].form .fields > .field, .ui.form [class*="equal width"].fields > .field { width: 100%; flex: 1 1 auto; } /*-------------------- Inline Fields ---------------------*/ .ui.form .inline.fields { margin: 0 0 1em; align-items: center; } .ui.form .inline.fields .field { margin: 0; padding: 0 1em 0 0; } /* Inline Label */ .ui.form .inline.fields > label, .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.field > label, .ui.form .inline.field > p { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: baseline; font-size: 0.92857143em; font-weight: bold; color: #000000; text-transform: none; } /* Grouped Inline Label */ .ui.form .inline.fields > label { margin: 0.035714em 1em 0 0; } /* Inline Input */ .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.field > input, .ui.form .inline.field > select { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 1em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child { margin: 0 0.85714286em 0 0; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child { margin: 0; } /* Wide */ .ui.form .inline.fields .wide.field { display: flex; align-items: center; } .ui.form .inline.fields .wide.field > input, .ui.form .inline.fields .wide.field > select { width: 100%; } /*-------------------- Sizes ---------------------*/ .ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu > .item { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Grid * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /*-------------- Compact ---------------*/ /*------------------ Very Compact ------------------*/ /******************************* Legacy *******************************/ /*-------------- Page ---------------*/ /* Legacy (DO NOT USE) */ /* Packaged Theme */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /*-------------- Compact ---------------*/ /*------------------ Very Compact ------------------*/ /******************************* Legacy *******************************/ /*-------------- Page ---------------*/ /* Legacy (DO NOT USE) */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ .ui.grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0; } /*---------------------- Remove Gutters -----------------------*/ .ui.grid { margin-top: -1rem; margin-bottom: -1rem; margin-left: -1rem; margin-right: -1rem; } .ui.relaxed.grid { margin-left: -1.5rem; margin-right: -1.5rem; } .ui[class*="very relaxed"].grid { margin-left: -2.5rem; margin-right: -2.5rem; } /* Preserve Rows Spacing on Consecutive Grids */ .ui.grid + .grid { margin-top: 1rem; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column:not(.row), .ui.grid > .row > .column { position: relative; display: inline-block; width: 6.25%; padding-left: 1rem; padding-right: 1rem; vertical-align: top; } .ui.grid > * { padding-left: 1rem; padding-right: 1rem; } /*------------------- Rows --------------------*/ .ui.grid > .row { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: inherit; align-items: stretch; width: 100% !important; padding: 0; padding-top: 1rem; padding-bottom: 1rem; } /*------------------- Columns --------------------*/ /* Vertical padding when no rows */ .ui.grid > .column:not(.row) { padding-top: 1rem; padding-bottom: 1rem; } .ui.grid > .row > .column { margin-top: 0; margin-bottom: 0; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } /*------------------- Loose Coupling --------------------*/ /* Collapse Margin on Consecutive Grid */ .ui.grid > .ui.grid:first-child { margin-top: 0; } .ui.grid > .ui.grid:last-child { margin-bottom: 0; } /* Segment inside Aligned Grid */ .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .ui.aligned.grid .column > .segment:not(.compact):not(.attached) { width: 100%; } /* Align Dividers with Gutter */ .ui.grid .row + .ui.divider { flex-grow: 1; margin: 1rem 1rem; } .ui.grid .column + .ui.vertical.divider { height: calc(50% - 1rem); } /* Remove Border on Last Horizontal Segment */ .ui.grid > .row > .column:last-child > .horizontal.segment, .ui.grid > .column:last-child > .horizontal.segment { box-shadow: none; } /******************************* Variations *******************************/ /*------------------- Column Count --------------------*/ /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column:not(.row) { width: 100%; } .ui[class*="two column"].grid > .row > .column, .ui[class*="two column"].grid > .column:not(.row) { width: 50%; } .ui[class*="three column"].grid > .row > .column, .ui[class*="three column"].grid > .column:not(.row) { width: 33.33333333%; } .ui[class*="four column"].grid > .row > .column, .ui[class*="four column"].grid > .column:not(.row) { width: 25%; } .ui[class*="five column"].grid > .row > .column, .ui[class*="five column"].grid > .column:not(.row) { width: 20%; } .ui[class*="six column"].grid > .row > .column, .ui[class*="six column"].grid > .column:not(.row) { width: 16.66666667%; } .ui[class*="seven column"].grid > .row > .column, .ui[class*="seven column"].grid > .column:not(.row) { width: 14.28571429%; } .ui[class*="eight column"].grid > .row > .column, .ui[class*="eight column"].grid > .column:not(.row) { width: 12.5%; } .ui[class*="nine column"].grid > .row > .column, .ui[class*="nine column"].grid > .column:not(.row) { width: 11.11111111%; } .ui[class*="ten column"].grid > .row > .column, .ui[class*="ten column"].grid > .column:not(.row) { width: 10%; } .ui[class*="eleven column"].grid > .row > .column, .ui[class*="eleven column"].grid > .column:not(.row) { width: 9.09090909%; } .ui[class*="twelve column"].grid > .row > .column, .ui[class*="twelve column"].grid > .column:not(.row) { width: 8.33333333%; } .ui[class*="thirteen column"].grid > .row > .column, .ui[class*="thirteen column"].grid > .column:not(.row) { width: 7.69230769%; } .ui[class*="fourteen column"].grid > .row > .column, .ui[class*="fourteen column"].grid > .column:not(.row) { width: 7.14285714%; } .ui[class*="fifteen column"].grid > .row > .column, .ui[class*="fifteen column"].grid > .column:not(.row) { width: 6.66666667%; } .ui[class*="sixteen column"].grid > .row > .column, .ui[class*="sixteen column"].grid > .column:not(.row) { width: 6.25%; } /* Row Based Overrides */ .ui.grid > [class*="one column"].row > .column { width: 100% !important; } .ui.grid > [class*="two column"].row > .column { width: 50% !important; } .ui.grid > [class*="three column"].row > .column { width: 33.33333333% !important; } .ui.grid > [class*="four column"].row > .column { width: 25% !important; } .ui.grid > [class*="five column"].row > .column { width: 20% !important; } .ui.grid > [class*="six column"].row > .column { width: 16.66666667% !important; } .ui.grid > [class*="seven column"].row > .column { width: 14.28571429% !important; } .ui.grid > [class*="eight column"].row > .column { width: 12.5% !important; } .ui.grid > [class*="nine column"].row > .column { width: 11.11111111% !important; } .ui.grid > [class*="ten column"].row > .column { width: 10% !important; } .ui.grid > [class*="eleven column"].row > .column { width: 9.09090909% !important; } .ui.grid > [class*="twelve column"].row > .column { width: 8.33333333% !important; } .ui.grid > [class*="thirteen column"].row > .column { width: 7.69230769% !important; } .ui.grid > [class*="fourteen column"].row > .column { width: 7.14285714% !important; } .ui.grid > [class*="fifteen column"].row > .column { width: 6.66666667% !important; } .ui.grid > [class*="sixteen column"].row > .column { width: 6.25% !important; } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > [class*="one wide"].column, .ui.grid > .column.row > [class*="one wide"].column, .ui.grid > [class*="one wide"].column, .ui.column.grid > [class*="one wide"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide"].column, .ui.grid > .column.row > [class*="two wide"].column, .ui.grid > [class*="two wide"].column, .ui.column.grid > [class*="two wide"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide"].column, .ui.grid > .column.row > [class*="three wide"].column, .ui.grid > [class*="three wide"].column, .ui.column.grid > [class*="three wide"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide"].column, .ui.grid > .column.row > [class*="four wide"].column, .ui.grid > [class*="four wide"].column, .ui.column.grid > [class*="four wide"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide"].column, .ui.grid > .column.row > [class*="five wide"].column, .ui.grid > [class*="five wide"].column, .ui.column.grid > [class*="five wide"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide"].column, .ui.grid > .column.row > [class*="six wide"].column, .ui.grid > [class*="six wide"].column, .ui.column.grid > [class*="six wide"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide"].column, .ui.grid > .column.row > [class*="seven wide"].column, .ui.grid > [class*="seven wide"].column, .ui.column.grid > [class*="seven wide"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide"].column, .ui.grid > .column.row > [class*="eight wide"].column, .ui.grid > [class*="eight wide"].column, .ui.column.grid > [class*="eight wide"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide"].column, .ui.grid > .column.row > [class*="nine wide"].column, .ui.grid > [class*="nine wide"].column, .ui.column.grid > [class*="nine wide"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide"].column, .ui.grid > .column.row > [class*="ten wide"].column, .ui.grid > [class*="ten wide"].column, .ui.column.grid > [class*="ten wide"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide"].column, .ui.grid > .column.row > [class*="eleven wide"].column, .ui.grid > [class*="eleven wide"].column, .ui.column.grid > [class*="eleven wide"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide"].column, .ui.grid > .column.row > [class*="twelve wide"].column, .ui.grid > [class*="twelve wide"].column, .ui.column.grid > [class*="twelve wide"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide"].column, .ui.grid > .column.row > [class*="thirteen wide"].column, .ui.grid > [class*="thirteen wide"].column, .ui.column.grid > [class*="thirteen wide"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide"].column, .ui.grid > .column.row > [class*="fourteen wide"].column, .ui.grid > [class*="fourteen wide"].column, .ui.column.grid > [class*="fourteen wide"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide"].column, .ui.grid > .column.row > [class*="fifteen wide"].column, .ui.grid > [class*="fifteen wide"].column, .ui.column.grid > [class*="fifteen wide"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide"].column, .ui.grid > .column.row > [class*="sixteen wide"].column, .ui.grid > [class*="sixteen wide"].column, .ui.column.grid > [class*="sixteen wide"].column { width: 100% !important; } /*---------------------- Width per Device -----------------------*/ /* Mobile Sizing Combinations */ @media only screen and (min-width: 320px) and (max-width: 767.98px) { .ui.grid > .row > [class*="one wide mobile"].column, .ui.grid > .column.row > [class*="one wide mobile"].column, .ui.grid > [class*="one wide mobile"].column, .ui.column.grid > [class*="one wide mobile"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide mobile"].column, .ui.grid > .column.row > [class*="two wide mobile"].column, .ui.grid > [class*="two wide mobile"].column, .ui.column.grid > [class*="two wide mobile"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide mobile"].column, .ui.grid > .column.row > [class*="three wide mobile"].column, .ui.grid > [class*="three wide mobile"].column, .ui.column.grid > [class*="three wide mobile"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide mobile"].column, .ui.grid > .column.row > [class*="four wide mobile"].column, .ui.grid > [class*="four wide mobile"].column, .ui.column.grid > [class*="four wide mobile"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide mobile"].column, .ui.grid > .column.row > [class*="five wide mobile"].column, .ui.grid > [class*="five wide mobile"].column, .ui.column.grid > [class*="five wide mobile"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide mobile"].column, .ui.grid > .column.row > [class*="six wide mobile"].column, .ui.grid > [class*="six wide mobile"].column, .ui.column.grid > [class*="six wide mobile"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide mobile"].column, .ui.grid > .column.row > [class*="seven wide mobile"].column, .ui.grid > [class*="seven wide mobile"].column, .ui.column.grid > [class*="seven wide mobile"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide mobile"].column, .ui.grid > .column.row > [class*="eight wide mobile"].column, .ui.grid > [class*="eight wide mobile"].column, .ui.column.grid > [class*="eight wide mobile"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide mobile"].column, .ui.grid > .column.row > [class*="nine wide mobile"].column, .ui.grid > [class*="nine wide mobile"].column, .ui.column.grid > [class*="nine wide mobile"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide mobile"].column, .ui.grid > .column.row > [class*="ten wide mobile"].column, .ui.grid > [class*="ten wide mobile"].column, .ui.column.grid > [class*="ten wide mobile"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide mobile"].column, .ui.grid > .column.row > [class*="eleven wide mobile"].column, .ui.grid > [class*="eleven wide mobile"].column, .ui.column.grid > [class*="eleven wide mobile"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide mobile"].column, .ui.grid > .column.row > [class*="twelve wide mobile"].column, .ui.grid > [class*="twelve wide mobile"].column, .ui.column.grid > [class*="twelve wide mobile"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide mobile"].column, .ui.grid > .column.row > [class*="thirteen wide mobile"].column, .ui.grid > [class*="thirteen wide mobile"].column, .ui.column.grid > [class*="thirteen wide mobile"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide mobile"].column, .ui.grid > .column.row > [class*="fourteen wide mobile"].column, .ui.grid > [class*="fourteen wide mobile"].column, .ui.column.grid > [class*="fourteen wide mobile"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide mobile"].column, .ui.grid > .column.row > [class*="fifteen wide mobile"].column, .ui.grid > [class*="fifteen wide mobile"].column, .ui.column.grid > [class*="fifteen wide mobile"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide mobile"].column, .ui.grid > .column.row > [class*="sixteen wide mobile"].column, .ui.grid > [class*="sixteen wide mobile"].column, .ui.column.grid > [class*="sixteen wide mobile"].column { width: 100% !important; } } /* Tablet Sizing Combinations */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.grid > .row > [class*="one wide tablet"].column, .ui.grid > .column.row > [class*="one wide tablet"].column, .ui.grid > [class*="one wide tablet"].column, .ui.column.grid > [class*="one wide tablet"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide tablet"].column, .ui.grid > .column.row > [class*="two wide tablet"].column, .ui.grid > [class*="two wide tablet"].column, .ui.column.grid > [class*="two wide tablet"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide tablet"].column, .ui.grid > .column.row > [class*="three wide tablet"].column, .ui.grid > [class*="three wide tablet"].column, .ui.column.grid > [class*="three wide tablet"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide tablet"].column, .ui.grid > .column.row > [class*="four wide tablet"].column, .ui.grid > [class*="four wide tablet"].column, .ui.column.grid > [class*="four wide tablet"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide tablet"].column, .ui.grid > .column.row > [class*="five wide tablet"].column, .ui.grid > [class*="five wide tablet"].column, .ui.column.grid > [class*="five wide tablet"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide tablet"].column, .ui.grid > .column.row > [class*="six wide tablet"].column, .ui.grid > [class*="six wide tablet"].column, .ui.column.grid > [class*="six wide tablet"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide tablet"].column, .ui.grid > .column.row > [class*="seven wide tablet"].column, .ui.grid > [class*="seven wide tablet"].column, .ui.column.grid > [class*="seven wide tablet"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide tablet"].column, .ui.grid > .column.row > [class*="eight wide tablet"].column, .ui.grid > [class*="eight wide tablet"].column, .ui.column.grid > [class*="eight wide tablet"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide tablet"].column, .ui.grid > .column.row > [class*="nine wide tablet"].column, .ui.grid > [class*="nine wide tablet"].column, .ui.column.grid > [class*="nine wide tablet"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide tablet"].column, .ui.grid > .column.row > [class*="ten wide tablet"].column, .ui.grid > [class*="ten wide tablet"].column, .ui.column.grid > [class*="ten wide tablet"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide tablet"].column, .ui.grid > .column.row > [class*="eleven wide tablet"].column, .ui.grid > [class*="eleven wide tablet"].column, .ui.column.grid > [class*="eleven wide tablet"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide tablet"].column, .ui.grid > .column.row > [class*="twelve wide tablet"].column, .ui.grid > [class*="twelve wide tablet"].column, .ui.column.grid > [class*="twelve wide tablet"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide tablet"].column, .ui.grid > .column.row > [class*="thirteen wide tablet"].column, .ui.grid > [class*="thirteen wide tablet"].column, .ui.column.grid > [class*="thirteen wide tablet"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide tablet"].column, .ui.grid > .column.row > [class*="fourteen wide tablet"].column, .ui.grid > [class*="fourteen wide tablet"].column, .ui.column.grid > [class*="fourteen wide tablet"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide tablet"].column, .ui.grid > .column.row > [class*="fifteen wide tablet"].column, .ui.grid > [class*="fifteen wide tablet"].column, .ui.column.grid > [class*="fifteen wide tablet"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide tablet"].column, .ui.grid > .column.row > [class*="sixteen wide tablet"].column, .ui.grid > [class*="sixteen wide tablet"].column, .ui.column.grid > [class*="sixteen wide tablet"].column { width: 100% !important; } } /* Computer/Desktop Sizing Combinations */ @media only screen and (min-width: 992px) { .ui.grid > .row > [class*="one wide computer"].column, .ui.grid > .column.row > [class*="one wide computer"].column, .ui.grid > [class*="one wide computer"].column, .ui.column.grid > [class*="one wide computer"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide computer"].column, .ui.grid > .column.row > [class*="two wide computer"].column, .ui.grid > [class*="two wide computer"].column, .ui.column.grid > [class*="two wide computer"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide computer"].column, .ui.grid > .column.row > [class*="three wide computer"].column, .ui.grid > [class*="three wide computer"].column, .ui.column.grid > [class*="three wide computer"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide computer"].column, .ui.grid > .column.row > [class*="four wide computer"].column, .ui.grid > [class*="four wide computer"].column, .ui.column.grid > [class*="four wide computer"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide computer"].column, .ui.grid > .column.row > [class*="five wide computer"].column, .ui.grid > [class*="five wide computer"].column, .ui.column.grid > [class*="five wide computer"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide computer"].column, .ui.grid > .column.row > [class*="six wide computer"].column, .ui.grid > [class*="six wide computer"].column, .ui.column.grid > [class*="six wide computer"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide computer"].column, .ui.grid > .column.row > [class*="seven wide computer"].column, .ui.grid > [class*="seven wide computer"].column, .ui.column.grid > [class*="seven wide computer"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide computer"].column, .ui.grid > .column.row > [class*="eight wide computer"].column, .ui.grid > [class*="eight wide computer"].column, .ui.column.grid > [class*="eight wide computer"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide computer"].column, .ui.grid > .column.row > [class*="nine wide computer"].column, .ui.grid > [class*="nine wide computer"].column, .ui.column.grid > [class*="nine wide computer"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide computer"].column, .ui.grid > .column.row > [class*="ten wide computer"].column, .ui.grid > [class*="ten wide computer"].column, .ui.column.grid > [class*="ten wide computer"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide computer"].column, .ui.grid > .column.row > [class*="eleven wide computer"].column, .ui.grid > [class*="eleven wide computer"].column, .ui.column.grid > [class*="eleven wide computer"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide computer"].column, .ui.grid > .column.row > [class*="twelve wide computer"].column, .ui.grid > [class*="twelve wide computer"].column, .ui.column.grid > [class*="twelve wide computer"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide computer"].column, .ui.grid > .column.row > [class*="thirteen wide computer"].column, .ui.grid > [class*="thirteen wide computer"].column, .ui.column.grid > [class*="thirteen wide computer"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide computer"].column, .ui.grid > .column.row > [class*="fourteen wide computer"].column, .ui.grid > [class*="fourteen wide computer"].column, .ui.column.grid > [class*="fourteen wide computer"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide computer"].column, .ui.grid > .column.row > [class*="fifteen wide computer"].column, .ui.grid > [class*="fifteen wide computer"].column, .ui.column.grid > [class*="fifteen wide computer"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide computer"].column, .ui.grid > .column.row > [class*="sixteen wide computer"].column, .ui.grid > [class*="sixteen wide computer"].column, .ui.column.grid > [class*="sixteen wide computer"].column { width: 100% !important; } } /* Large Monitor Sizing Combinations */ @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { .ui.grid > .row > [class*="one wide large screen"].column, .ui.grid > .column.row > [class*="one wide large screen"].column, .ui.grid > [class*="one wide large screen"].column, .ui.column.grid > [class*="one wide large screen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide large screen"].column, .ui.grid > .column.row > [class*="two wide large screen"].column, .ui.grid > [class*="two wide large screen"].column, .ui.column.grid > [class*="two wide large screen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide large screen"].column, .ui.grid > .column.row > [class*="three wide large screen"].column, .ui.grid > [class*="three wide large screen"].column, .ui.column.grid > [class*="three wide large screen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide large screen"].column, .ui.grid > .column.row > [class*="four wide large screen"].column, .ui.grid > [class*="four wide large screen"].column, .ui.column.grid > [class*="four wide large screen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide large screen"].column, .ui.grid > .column.row > [class*="five wide large screen"].column, .ui.grid > [class*="five wide large screen"].column, .ui.column.grid > [class*="five wide large screen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide large screen"].column, .ui.grid > .column.row > [class*="six wide large screen"].column, .ui.grid > [class*="six wide large screen"].column, .ui.column.grid > [class*="six wide large screen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide large screen"].column, .ui.grid > .column.row > [class*="seven wide large screen"].column, .ui.grid > [class*="seven wide large screen"].column, .ui.column.grid > [class*="seven wide large screen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide large screen"].column, .ui.grid > .column.row > [class*="eight wide large screen"].column, .ui.grid > [class*="eight wide large screen"].column, .ui.column.grid > [class*="eight wide large screen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide large screen"].column, .ui.grid > .column.row > [class*="nine wide large screen"].column, .ui.grid > [class*="nine wide large screen"].column, .ui.column.grid > [class*="nine wide large screen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide large screen"].column, .ui.grid > .column.row > [class*="ten wide large screen"].column, .ui.grid > [class*="ten wide large screen"].column, .ui.column.grid > [class*="ten wide large screen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide large screen"].column, .ui.grid > .column.row > [class*="eleven wide large screen"].column, .ui.grid > [class*="eleven wide large screen"].column, .ui.column.grid > [class*="eleven wide large screen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide large screen"].column, .ui.grid > .column.row > [class*="twelve wide large screen"].column, .ui.grid > [class*="twelve wide large screen"].column, .ui.column.grid > [class*="twelve wide large screen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide large screen"].column, .ui.grid > .column.row > [class*="thirteen wide large screen"].column, .ui.grid > [class*="thirteen wide large screen"].column, .ui.column.grid > [class*="thirteen wide large screen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide large screen"].column, .ui.grid > .column.row > [class*="fourteen wide large screen"].column, .ui.grid > [class*="fourteen wide large screen"].column, .ui.column.grid > [class*="fourteen wide large screen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide large screen"].column, .ui.grid > .column.row > [class*="fifteen wide large screen"].column, .ui.grid > [class*="fifteen wide large screen"].column, .ui.column.grid > [class*="fifteen wide large screen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide large screen"].column, .ui.grid > .column.row > [class*="sixteen wide large screen"].column, .ui.grid > [class*="sixteen wide large screen"].column, .ui.column.grid > [class*="sixteen wide large screen"].column { width: 100% !important; } } /* Widescreen Sizing Combinations */ @media only screen and (min-width: 1920px) { .ui.grid > .row > [class*="one wide widescreen"].column, .ui.grid > .column.row > [class*="one wide widescreen"].column, .ui.grid > [class*="one wide widescreen"].column, .ui.column.grid > [class*="one wide widescreen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide widescreen"].column, .ui.grid > .column.row > [class*="two wide widescreen"].column, .ui.grid > [class*="two wide widescreen"].column, .ui.column.grid > [class*="two wide widescreen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide widescreen"].column, .ui.grid > .column.row > [class*="three wide widescreen"].column, .ui.grid > [class*="three wide widescreen"].column, .ui.column.grid > [class*="three wide widescreen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide widescreen"].column, .ui.grid > .column.row > [class*="four wide widescreen"].column, .ui.grid > [class*="four wide widescreen"].column, .ui.column.grid > [class*="four wide widescreen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide widescreen"].column, .ui.grid > .column.row > [class*="five wide widescreen"].column, .ui.grid > [class*="five wide widescreen"].column, .ui.column.grid > [class*="five wide widescreen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide widescreen"].column, .ui.grid > .column.row > [class*="six wide widescreen"].column, .ui.grid > [class*="six wide widescreen"].column, .ui.column.grid > [class*="six wide widescreen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide widescreen"].column, .ui.grid > .column.row > [class*="seven wide widescreen"].column, .ui.grid > [class*="seven wide widescreen"].column, .ui.column.grid > [class*="seven wide widescreen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide widescreen"].column, .ui.grid > .column.row > [class*="eight wide widescreen"].column, .ui.grid > [class*="eight wide widescreen"].column, .ui.column.grid > [class*="eight wide widescreen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide widescreen"].column, .ui.grid > .column.row > [class*="nine wide widescreen"].column, .ui.grid > [class*="nine wide widescreen"].column, .ui.column.grid > [class*="nine wide widescreen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide widescreen"].column, .ui.grid > .column.row > [class*="ten wide widescreen"].column, .ui.grid > [class*="ten wide widescreen"].column, .ui.column.grid > [class*="ten wide widescreen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide widescreen"].column, .ui.grid > .column.row > [class*="eleven wide widescreen"].column, .ui.grid > [class*="eleven wide widescreen"].column, .ui.column.grid > [class*="eleven wide widescreen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide widescreen"].column, .ui.grid > .column.row > [class*="twelve wide widescreen"].column, .ui.grid > [class*="twelve wide widescreen"].column, .ui.column.grid > [class*="twelve wide widescreen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide widescreen"].column, .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, .ui.grid > [class*="thirteen wide widescreen"].column, .ui.column.grid > [class*="thirteen wide widescreen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide widescreen"].column, .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, .ui.grid > [class*="fourteen wide widescreen"].column, .ui.column.grid > [class*="fourteen wide widescreen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide widescreen"].column, .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, .ui.grid > [class*="fifteen wide widescreen"].column, .ui.column.grid > [class*="fifteen wide widescreen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide widescreen"].column, .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, .ui.grid > [class*="sixteen wide widescreen"].column, .ui.column.grid > [class*="sixteen wide widescreen"].column { width: 100% !important; } } /*---------------------- Colored -----------------------*/ .ui.grid > .primary.row, .ui.grid > .primary.column, .ui.grid > .row > .primary.column { background-color: #6EBE49; color: #FFFFFF; } .ui.grid > .secondary.row, .ui.grid > .secondary.column, .ui.grid > .row > .secondary.column { background-color: #505050; color: #FFFFFF; } .ui.grid > .red.row, .ui.grid > .red.column, .ui.grid > .row > .red.column { background-color: #DB2828; color: #FFFFFF; } .ui.grid > .orange.row, .ui.grid > .orange.column, .ui.grid > .row > .orange.column { background-color: #F2711C; color: #FFFFFF; } .ui.grid > .yellow.row, .ui.grid > .yellow.column, .ui.grid > .row > .yellow.column { background-color: #FBBD08; color: #FFFFFF; } .ui.grid > .olive.row, .ui.grid > .olive.column, .ui.grid > .row > .olive.column { background-color: #B5CC18; color: #FFFFFF; } .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column { background-color: #21BA45; color: #FFFFFF; } .ui.grid > .teal.row, .ui.grid > .teal.column, .ui.grid > .row > .teal.column { background-color: #00B5AD; color: #FFFFFF; } .ui.grid > .blue.row, .ui.grid > .blue.column, .ui.grid > .row > .blue.column { background-color: #2185D0; color: #FFFFFF; } .ui.grid > .violet.row, .ui.grid > .violet.column, .ui.grid > .row > .violet.column { background-color: #6435C9; color: #FFFFFF; } .ui.grid > .purple.row, .ui.grid > .purple.column, .ui.grid > .row > .purple.column { background-color: #A333C8; color: #FFFFFF; } .ui.grid > .pink.row, .ui.grid > .pink.column, .ui.grid > .row > .pink.column { background-color: #E03997; color: #FFFFFF; } .ui.grid > .brown.row, .ui.grid > .brown.column, .ui.grid > .row > .brown.column { background-color: #A5673F; color: #FFFFFF; } .ui.grid > .grey.row, .ui.grid > .grey.column, .ui.grid > .row > .grey.column { background-color: #767676; color: #FFFFFF; } .ui.grid > .black.row, .ui.grid > .black.column, .ui.grid > .row > .black.column { background-color: #1B1C1D; color: #FFFFFF; } /*---------------------- Equal Width -----------------------*/ .ui[class*="equal width"].grid > .column:not(.row), .ui[class*="equal width"].grid > .row > .column, .ui.grid > [class*="equal width"].row > .column { display: inline-block; flex-grow: 1; } .ui[class*="equal width"].grid > .wide.column, .ui[class*="equal width"].grid > .row > .wide.column, .ui.grid > [class*="equal width"].row > .wide.column { flex-grow: 0; } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767.98px) { .ui.stackable.grid { width: auto; margin-left: 0 !important; margin-right: 0 !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column:not(.row), .ui.grid > .stackable.stackable.stackable.row > .column { width: 100% !important; margin: 0 0 !important; box-shadow: none !important; padding: 1rem 1rem; } .ui.stackable.grid:not(.vertically) > .row { margin: 0; padding: 0; } /* Coupling */ .ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .row > .column { padding-left: 0 !important; padding-right: 0 !important; } /* Don't pad inside segment or nested grid */ .ui.grid .ui.stackable.grid, .ui.segment:not(.vertical) .ui.stackable.page.grid { margin-left: -1rem !important; margin-right: -1rem !important; } /* Divided Stackable */ .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:not(.row):first-child, .ui.stackable.celled.grid > .column:not(.row):first-child { border-top: none !important; } .ui.stackable.celled.grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.celled.grid > .row > .column, .ui.stackable.divided:not(.vertically).grid > .row > .column { border-top: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } } /*---------------------- Only (Device) -----------------------*/ /* These include arbitrary class repetitions for forced specificity */ /* Mobile Only Hide */ @media only screen and (max-width: 767.98px) { .ui[class*="tablet only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Tablet Only Hide */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui[class*="mobile only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Computer Only Hide */ @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Large Screen Only Hide */ @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Widescreen Only Hide */ @media only screen and (min-width: 1920px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } } /******************************* Theme Overrides *******************************/ /* * # Fomantic - Menu * http://github.com/fomantic/Fomantic-UI/ * * * Copyright 2015 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* has to be equal to @circularPadding from label.less */ /* Image Label */ /* Calculates as: @verticalLabel (from label.less) - @labelVerticalPadding (from here) */ /* Logic adopted from label.less */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /*------------------- Inverted dropdowns --------------------*/ /* Packaged Theme */ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* has to be equal to @circularPadding from label.less */ /* Image Label */ /* Calculates as: @verticalLabel (from label.less) - @labelVerticalPadding (from here) */ /* Logic adopted from label.less */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /*------------------- Inverted dropdowns --------------------*/ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Menu ---------------*/ .ui.menu { display: flex; margin: 1rem 0; font-family: Helvetica, Arial, sans-serif; background: #FFFFFF; font-weight: normal; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; min-height: 2.85714286em; } .ui.menu:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .ui.menu:first-child { margin-top: 0; } .ui.menu:last-child { margin-bottom: 0; } /*-------------- Sub-Menu ---------------*/ .ui.menu .menu { margin: 0; } .ui.menu:not(.vertical) > .menu { display: flex; } /*-------------- Item ---------------*/ .ui.menu:not(.vertical) .item { display: flex; align-items: center; } .ui.menu .item { position: relative; vertical-align: middle; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; user-select: none; background: none; padding: 0.92857143em 1.14285714em; text-transform: none; color: #000000; font-weight: normal; transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; } .ui.menu > .item:first-child { border-radius: 0.28571429rem 0 0 0.28571429rem; } /* Border */ .ui.menu .item:before { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: 1px; background: rgba(34, 36, 38, 0.1); } /*-------------- Text Content ---------------*/ .ui.menu .text.item > *, .ui.menu .item > a:not(.ui), .ui.menu .item > p:only-child { user-select: text; line-height: 1.3; } .ui.menu .item > p:first-child { margin-top: 0; } .ui.menu .item > p:last-child { margin-bottom: 0; } /*-------------- Icons ---------------*/ .ui.menu .item > i.icon { opacity: 0.9; float: none; margin: 0 0.35714286em 0 0; } /*-------------- Button ---------------*/ .ui.menu:not(.vertical) .item > .button { position: relative; top: 0; margin: -0.5em 0; padding-bottom: 0.78571429em; padding-top: 0.78571429em; font-size: 1em; } /*---------------- Grid / Container -----------------*/ .ui.menu > .grid, .ui.menu > .container { display: flex; align-items: inherit; flex-direction: inherit; } /*-------------- Inputs ---------------*/ .ui.menu .item > .input { width: 100%; } .ui.menu:not(.vertical) .item > .input { position: relative; top: 0; margin: -0.5em 0; } .ui.menu .item > .input input { font-size: 1em; padding-top: 0.57142857em; padding-bottom: 0.57142857em; } /*-------------- Header ---------------*/ .ui.menu .header.item, .ui.vertical.menu .header.item { margin: 0; background: ''; text-transform: normal; font-weight: bold; } /*-------------- Dropdowns ---------------*/ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0; float: right; margin: 0 0 0 1em; } /* Menu */ .ui.menu .dropdown.item .menu { min-width: calc(100% - 1px); border-radius: 0 0 0.28571429rem 0.28571429rem; background: #FFFFFF; margin: 0 0 0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); flex-direction: column !important; } /* Menu Items */ .ui.menu .ui.dropdown .menu > .item { margin: 0; text-align: left; font-size: 1em !important; padding: 0.78571429em 1.14285714em !important; background: transparent !important; color: #000000 !important; text-transform: none !important; font-weight: normal !important; box-shadow: none !important; transition: none !important; } .ui.menu .ui.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .selected.item { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .active.item { background: rgba(0, 0, 0, 0.03) !important; font-weight: bold !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { display: block; } .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { display: inline-block; font-size: 1em !important; float: none; margin: 0 0.75em 0 0 !important; } /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, .ui.text.menu .dropdown.item > .menu { border-radius: 0.28571429rem; margin-top: 0.35714286em; } /* Pointing */ .ui.menu .pointing.dropdown.item .menu { margin-top: 0.75em; } /* Inverted */ .ui.inverted.menu .search.dropdown.item > .search, .ui.inverted.menu .search.dropdown.item > .text { color: rgba(255, 255, 255, 0.9); } /* Evenly Divided */ .ui.item.menu .dropdown .menu .item { width: 100%; } /*-------------- Labels ---------------*/ .ui.menu .item > .label:not(.floating) { margin-left: 1em; padding: 0.3em 0.78571429em; } .ui.menu .item > .floating.label { padding: 0.3em 0.78571429em; } .ui.menu .item > .label { background: #999999; color: #FFFFFF; } .ui.menu .item > .image.label img { margin: -0.2833em 0.8em -0.2833em -0.8em; height: 1.5666em; } /*-------------- Images ---------------*/ .ui.menu .item > img:not(.ui) { display: inline-block; vertical-align: middle; margin: -0.3em 0; width: 2.5em; } /******************************* Coupling *******************************/ /*-------------- List ---------------*/ /* Menu divider shouldnt apply */ .ui.menu .list .item:before { background: none !important; } /*-------------- Container ---------------*/ @media only screen and (max-width: 767.98px) { .ui.menu > .ui.container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } @media only screen and (min-width: 768px) { .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { border-right: 1px solid rgba(34, 36, 38, 0.1); } } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover { cursor: pointer; background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Pressed ---------------*/ .ui.link.menu .item:active, .ui.menu .link.item:active, .ui.menu a.item:active { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Active ---------------*/ .ui.menu .active.item { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); font-weight: normal; box-shadow: none; } .ui.menu .active.item > i.icon { opacity: 1; } /*-------------- Active Hover ---------------*/ .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /*-------------- Disabled ---------------*/ .ui.ui.menu .item.disabled { cursor: default; background-color: transparent; color: rgba(40, 40, 40, 0.3); pointer-events: none; } /******************************* Types *******************************/ /*------------------ Floated Menu / Item -------------------*/ /* Left Floated */ .ui.menu:not(.vertical) .left.item, .ui.menu:not(.vertical) .left.menu { display: flex; margin-right: auto !important; } /* Right Floated */ .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu { display: flex; margin-left: auto !important; } .ui.menu:not(.vertical) :not(.dropdown) > .left.menu, .ui.menu:not(.vertical) :not(.dropdown) > .right.menu { display: inherit; } /* Center */ .ui.menu:not(.vertical) .center.item, .ui.menu:not(.vertical) .center.menu { display: flex; margin-left: auto !important; margin-right: auto !important; } /* Swapped Borders */ .ui.menu .right.item::before, .ui.menu .right.menu > .item::before { right: auto; left: 0; } /* Remove Outer Borders */ .ui.menu .center.item:last-child::before, .ui.menu .center.menu > .item:last-child::before { display: none; } /*-------------- Secondary ---------------*/ .ui.secondary.menu { background: none; margin-left: -0.35714286em; margin-right: -0.35714286em; border-radius: 0; border: none; box-shadow: none; } /* Item */ .ui.secondary.menu .item { align-self: center; box-shadow: none; border: none; padding: 0.78571429em 0em; margin: 0em 0.92857143em; background: none; transition: color 0.1s ease; border-radius: 0em; } /* No Divider */ .ui.secondary.menu .item:before { display: none !important; } /* Header */ .ui.secondary.menu .header.item { border-radius: 0; border-right: none; background: none transparent; } /* Image */ .ui.secondary.menu .item > img:not(.ui) { margin: 0; } /* Hover */ .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { background: none; color: #000000; } /* Active */ .ui.secondary.menu .active.item { box-shadow: none; background: none; color: #000000; border-radius: 0em; } /* Active Hover */ .ui.secondary.menu .active.item:hover { box-shadow: none; background: none; color: #000000; } /* Inverted */ .ui.secondary.inverted.menu .link.item:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled) { color: rgba(255, 255, 255, 0.7); } .ui.secondary.inverted.menu .dropdown.item:hover, .ui.secondary.inverted.menu .link.item:hover, .ui.secondary.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.secondary.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff; } /* Fix item margins */ .ui.secondary.item.menu { margin-left: 0; margin-right: 0; } .ui.secondary.item.menu .item:last-child { margin-right: 0; } /*-------------- Icon Only ---------------*/ /* Vertical Menu */ .ui.vertical.icon.menu { display: inline-block; width: auto; } /* Item */ .ui.icon.menu .item { height: auto; text-align: center; color: #1B1C1D; } /* Icon */ .ui.icon.menu .item > .icon:not(.dropdown) { margin: 0; opacity: 1; } /* Icon Gylph */ .ui.icon.menu .icon:before { opacity: 1; } /* (x) Item Icon */ .ui.menu .icon.item > .icon { width: auto; margin: 0 auto; } /* Vertical Icon */ .ui.vertical.icon.menu .item > .icon:not(.dropdown) { display: block; opacity: 1; margin: 0 auto; float: none; } /* Inverted */ .ui.inverted.icon.menu .item { color: #FFFFFF; } /******************************* Variations *******************************/ /*-------------- Colors ---------------*/ .ui.ui.menu .primary.active.item, .ui.ui.primary.menu .active.item:hover, .ui.ui.primary.menu .active.item { color: #6EBE49; } .ui.ui.menu .red.active.item, .ui.ui.red.menu .active.item:hover, .ui.ui.red.menu .active.item { color: #DB2828; } .ui.ui.menu .orange.active.item, .ui.ui.orange.menu .active.item:hover, .ui.ui.orange.menu .active.item { color: #F2711C; } .ui.ui.menu .yellow.active.item, .ui.ui.yellow.menu .active.item:hover, .ui.ui.yellow.menu .active.item { color: #FBBD08; } .ui.ui.menu .olive.active.item, .ui.ui.olive.menu .active.item:hover, .ui.ui.olive.menu .active.item { color: #B5CC18; } .ui.ui.menu .green.active.item, .ui.ui.green.menu .active.item:hover, .ui.ui.green.menu .active.item { color: #21BA45; } .ui.ui.menu .teal.active.item, .ui.ui.teal.menu .active.item:hover, .ui.ui.teal.menu .active.item { color: #00B5AD; } .ui.ui.menu .blue.active.item, .ui.ui.blue.menu .active.item:hover, .ui.ui.blue.menu .active.item { color: #2185D0; } .ui.ui.menu .violet.active.item, .ui.ui.violet.menu .active.item:hover, .ui.ui.violet.menu .active.item { color: #6435C9; } .ui.ui.menu .purple.active.item, .ui.ui.purple.menu .active.item:hover, .ui.ui.purple.menu .active.item { color: #A333C8; } .ui.ui.menu .pink.active.item, .ui.ui.pink.menu .active.item:hover, .ui.ui.pink.menu .active.item { color: #E03997; } .ui.ui.menu .brown.active.item, .ui.ui.brown.menu .active.item:hover, .ui.ui.brown.menu .active.item { color: #A5673F; } .ui.ui.menu .grey.active.item, .ui.ui.grey.menu .active.item:hover, .ui.ui.grey.menu .active.item { color: #767676; } .ui.ui.menu .black.active.item, .ui.ui.black.menu .active.item:hover, .ui.ui.black.menu .active.item { color: #1B1C1D; } /*-------------- Inverted ---------------*/ .ui.inverted.menu { border: 0 solid transparent; background: #1B1C1D; box-shadow: none; } /* Menu Item */ .ui.inverted.menu .item, .ui.inverted.menu .item > a:not(.ui) { background: transparent; color: rgba(255, 255, 255, 0.9); } .ui.inverted.menu .item.menu { background: transparent; } /*--- Border ---*/ .ui.inverted.menu .item:before { background: rgba(255, 255, 255, 0.08); } /* Header */ .ui.inverted.menu .header.item { margin: 0; background: transparent; box-shadow: none; } /* Disabled */ .ui.ui.inverted.menu .item.disabled { color: rgba(225, 225, 225, 0.3); } /*--- Hover ---*/ .ui.link.inverted.menu .item:hover, .ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /*--- Pressed ---*/ .ui.inverted.menu a.item:active, .ui.inverted.menu .link.item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /*--- Active ---*/ .ui.inverted.menu .active.item { background: #3D3E3F; color: #ffffff !important; } /*--- Active Hover ---*/ .ui.inverted.menu .active.item:hover { background: #3D3E3F; color: #FFFFFF !important; } /*-------------- Floated ---------------*/ .ui.floated.menu { float: left; margin: 0 0.5rem 0 0; } .ui.floated.menu .item:last-child:before { display: none; } .ui.right.floated.menu { float: right; margin: 0 0 0 0.5rem; } /*-------------- Inverted ---------------*/ .ui.ui.inverted.menu .primary.active.item, .ui.ui.inverted.primary.menu { background-color: #6EBE49; } .ui.inverted.primary.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.primary.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .red.active.item, .ui.ui.inverted.red.menu { background-color: #DB2828; } .ui.inverted.red.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.red.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .orange.active.item, .ui.ui.inverted.orange.menu { background-color: #F2711C; } .ui.inverted.orange.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.orange.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .yellow.active.item, .ui.ui.inverted.yellow.menu { background-color: #FBBD08; } .ui.inverted.yellow.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.yellow.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .olive.active.item, .ui.ui.inverted.olive.menu { background-color: #B5CC18; } .ui.inverted.olive.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.olive.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .green.active.item, .ui.ui.inverted.green.menu { background-color: #21BA45; } .ui.inverted.green.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.green.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .teal.active.item, .ui.ui.inverted.teal.menu { background-color: #00B5AD; } .ui.inverted.teal.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.teal.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .blue.active.item, .ui.ui.inverted.blue.menu { background-color: #2185D0; } .ui.inverted.blue.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.blue.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .violet.active.item, .ui.ui.inverted.violet.menu { background-color: #6435C9; } .ui.inverted.violet.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.violet.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .purple.active.item, .ui.ui.inverted.purple.menu { background-color: #A333C8; } .ui.inverted.purple.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.purple.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .pink.active.item, .ui.ui.inverted.pink.menu { background-color: #E03997; } .ui.inverted.pink.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.pink.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .brown.active.item, .ui.ui.inverted.brown.menu { background-color: #A5673F; } .ui.inverted.brown.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.brown.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .grey.active.item, .ui.ui.inverted.grey.menu { background-color: #767676; } .ui.inverted.grey.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.grey.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.ui.inverted.menu .black.active.item, .ui.ui.inverted.black.menu { background-color: #1B1C1D; } .ui.inverted.black.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.black.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } /*------------------- Evenly Sized --------------------*/ .ui.item.menu, .ui.item.menu .item { width: 100%; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center; justify-content: center; } .ui.attached.item.menu:not(.tabular) { margin: 0 -1px !important; } .ui.item.menu .item:last-child:before { display: none; } .ui.menu.two.item .item { width: 50%; } .ui.menu.three.item .item { width: 33.333%; } .ui.menu.four.item .item { width: 25%; } .ui.menu.five.item .item { width: 20%; } .ui.menu.six.item .item { width: 16.666%; } .ui.menu.seven.item .item { width: 14.285%; } .ui.menu.eight.item .item { width: 12.5%; } .ui.menu.nine.item .item { width: 11.11%; } .ui.menu.ten.item .item { width: 10%; } .ui.menu.eleven.item .item { width: 9.09%; } .ui.menu.twelve.item .item { width: 8.333%; } .ui.inverted.pointing.menu .primary.active.item:after { background-color: #6EBE49; } .ui.inverted.pointing.menu .secondary.active.item:after { background-color: #505050; } .ui.inverted.pointing.menu .red.active.item:after { background-color: #DB2828; } .ui.inverted.pointing.menu .orange.active.item:after { background-color: #F2711C; } .ui.inverted.pointing.menu .yellow.active.item:after { background-color: #FBBD08; } .ui.inverted.pointing.menu .olive.active.item:after { background-color: #B5CC18; } .ui.inverted.pointing.menu .green.active.item:after { background-color: #21BA45; } .ui.inverted.pointing.menu .teal.active.item:after { background-color: #00B5AD; } .ui.inverted.pointing.menu .blue.active.item:after { background-color: #2185D0; } .ui.inverted.pointing.menu .violet.active.item:after { background-color: #6435C9; } .ui.inverted.pointing.menu .purple.active.item:after { background-color: #A333C8; } .ui.inverted.pointing.menu .pink.active.item:after { background-color: #E03997; } .ui.inverted.pointing.menu .brown.active.item:after { background-color: #A5673F; } .ui.inverted.pointing.menu .grey.active.item:after { background-color: #767676; } .ui.inverted.pointing.menu .black.active.item:after { background-color: #1B1C1D; } /*-------------- Sizes ---------------*/ .ui.menu { font-size: 1rem; } .ui.vertical.menu { width: 15rem; } /*------------------- Inverted dropdowns --------------------*/ .ui.menu .ui.inverted.inverted.dropdown.item .menu { background: #1B1C1D; box-shadow: none; } .ui.menu .ui.inverted.dropdown .menu > .item { color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .active.item { background: transparent !important; color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .item:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .selected.item { background: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.8) !important; } /******************************* Theme Overrides *******************************/ .ui.secondary.menu .item { color: #909090; } .ui.secondary.menu .primary.menu .item { border-bottom: 0.21428571em solid transparent; text-transform: uppercase; } .ui.secondary.menu .primary.menu .active.item, .ui.secondary.menu .primary.menu a.item:hover, .ui.secondary.menu .primary.menu .link.item:hover { border-bottom: 0.21428571em solid #6EBE49; } /*! * # Fomantic-UI - Message * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Packaged Theme */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Site Theme */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /* Negative */ /* Info */ /* Warn */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Message *******************************/ .ui.message { position: relative; min-height: 1em; margin: 1em 0; background: #505050; padding: 1em 1.5em; line-height: 1.4285em; color: #000000; transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; border-radius: 0.28571429rem; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.message:first-child { margin-top: 0; } .ui.message:last-child { margin-bottom: 0; } /*-------------- Content ---------------*/ /* Header */ .ui.message .header { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: bold; margin: -0.14285714em 0 0 0; } /* Default font size */ .ui.message .header:not(.ui) { font-size: 1.14285714em; } /* Paragraph */ .ui.message p { opacity: 0.85; margin: 0.75em 0; } .ui.message p:first-child { margin-top: 0; } .ui.message p:last-child { margin-bottom: 0; } .ui.message .header + p { margin-top: 0.25em; } /* List */ .ui.message .list:not(.ui) { text-align: left; padding: 0; opacity: 0.85; list-style-position: inside; margin: 0.5em 0 0; } .ui.message .list:not(.ui):first-child { margin-top: 0; } .ui.message .list:not(.ui):last-child { margin-bottom: 0; } .ui.message .list:not(.ui) li { position: relative; list-style-type: none; margin: 0 0 0.3em 1em; padding: 0; } .ui.message .list:not(.ui) li:before { position: absolute; content: '•'; left: -1em; height: 100%; vertical-align: baseline; } .ui.message .list:not(.ui) li:last-child { margin-bottom: 0; } /* Icon */ .ui.message > .icon { margin-right: 0.6em; } /* Close Icon */ .ui.message > .close.icon { cursor: pointer; position: absolute; margin: 0; top: 0.78575em; right: 0.5em; opacity: 0.7; transition: opacity 0.1s ease; } .ui.message > .close.icon:hover { opacity: 1; } /* First / Last Element */ .ui.message > :first-child { margin-top: 0; } .ui.message > :last-child { margin-bottom: 0; } /******************************* Coupling *******************************/ .ui.dropdown .menu > .message { margin: 0 -1px; } /******************************* States *******************************/ /*-------------- Visible ---------------*/ .ui.visible.visible.visible.visible.message { display: block; } .ui.icon.visible.visible.visible.visible.message { display: flex; } /*-------------- Hidden ---------------*/ .ui.hidden.hidden.hidden.hidden.message { display: none; } /******************************* Variations *******************************/ /*-------------- Colors ---------------*/ /*-------------- Types ---------------*/ .ui.primary.message { background-color: #DFF0FF; color: rgba(255, 255, 255, 0.9); } .ui.primary.message, .ui.attached.primary.message { box-shadow: 0 0 0 1px #6EBE49 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.primary.message .header { color: rgba(242, 242, 242, 0.9); } .ui.secondary.message { background-color: #F4F4F4; color: rgba(255, 255, 255, 0.9); } .ui.secondary.message, .ui.attached.secondary.message { box-shadow: 0 0 0 1px #505050 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.secondary.message .header { color: rgba(242, 242, 242, 0.9); } .ui.red.message { background-color: #FFE8E6; color: #DB2828; } .ui.red.message, .ui.attached.red.message { box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.red.message .header { color: #c82121; } .ui.orange.message { background-color: #FFEDDE; color: #F2711C; } .ui.orange.message, .ui.attached.orange.message { box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.orange.message .header { color: #e7640d; } .ui.yellow.message { background-color: #FFF8DB; color: #B58105; } .ui.yellow.message, .ui.attached.yellow.message { box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.yellow.message .header { color: #9c6f04; } .ui.olive.message { background-color: #FBFDEF; color: #8ABC1E; } .ui.olive.message, .ui.attached.olive.message { box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.olive.message .header { color: #7aa61a; } .ui.green.message { background-color: #E5F9E7; color: #1EBC30; } .ui.green.message, .ui.attached.green.message { box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.green.message .header { color: #1aa62a; } .ui.teal.message { background-color: #E1F7F7; color: #10A3A3; } .ui.teal.message, .ui.attached.teal.message { box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.teal.message .header { color: #0e8c8c; } .ui.blue.message { background-color: #DFF0FF; color: #2185D0; } .ui.blue.message, .ui.attached.blue.message { box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.blue.message .header { color: #1e77ba; } .ui.violet.message { background-color: #EAE7FF; color: #6435C9; } .ui.violet.message, .ui.attached.violet.message { box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.violet.message .header { color: #5a30b5; } .ui.purple.message { background-color: #F6E7FF; color: #A333C8; } .ui.purple.message, .ui.attached.purple.message { box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.purple.message .header { color: #922eb4; } .ui.pink.message { background-color: #FFE3FB; color: #E03997; } .ui.pink.message, .ui.attached.pink.message { box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.pink.message .header { color: #dd238b; } .ui.brown.message { background-color: #F1E2D3; color: #A5673F; } .ui.brown.message, .ui.attached.brown.message { box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.brown.message .header { color: #935b38; } .ui.grey.message { background-color: #F4F4F4; color: #767676; } .ui.grey.message, .ui.attached.grey.message { box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.grey.message .header { color: #696969; } .ui.black.message { background-color: #1B1C1D; color: rgba(255, 255, 255, 0.9); } .ui.black.message .header { color: rgba(255, 255, 255, 0.9); } /*-------------- Sizes ---------------*/ .ui.message { font-size: 1em; } /******************************* Theme Overrides *******************************/ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /*-------------- Types ---------------*/ .ui.message, .ui.attached.message { box-shadow: none; } .ui.message { text-transform: uppercase; } /* Positive */ .ui.positive.message { background-color: #6EBE49; color: #FFFFFF; } .ui.positive.message .header { color: #FFFFFF; } /* Negative */ .ui.negative.message { background-color: #DB2828; color: #FFFFFF; } .ui.negative.message .header { color: #FFFFFF; } /* Info */ .ui.message, .ui.info.message { background-color: #505050; color: #FFFFFF; } .ui.message .header, .ui.info.message .header { color: #FFFFFF; } /* Warning */ .ui.warning.message { background-color: #FBBD08; color: #1B1C1D; } .ui.warning.message .header { color: #1B1C1D; } /* Error */ .ui.error.message { background-color: #DB2828; color: #FFFFFF; } .ui.error.message .header { color: #FFFFFF; } /* Success */ .ui.success.message { background-color: #6EBE49; color: #FFFFFF; } .ui.success.message .header { color: #FFFFFF; } /*! * # Fomantic-UI - Table * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Packaged Theme */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Site Theme */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Table *******************************/ /* Prototype */ .ui.table { width: 100%; background: transparent; margin: 1em 0; border: 0 solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0; text-align: left; vertical-align: middle; color: #000000; border-collapse: separate; border-spacing: 0; } .ui.table:first-child { margin-top: 0; } .ui.table:last-child { margin-bottom: 0; } .ui.table > thead, .ui.table > tbody { text-align: inherit; vertical-align: inherit; } /******************************* Parts *******************************/ /* Table Content */ .ui.table th, .ui.table td { transition: background 0.1s ease, color 0.1s ease; } /* Headers */ .ui.table > thead { box-shadow: none; } .ui.table > thead > tr > th { cursor: auto; background: transparent; text-align: inherit; color: #000000; padding: 0.92857143em 1.14285714em; vertical-align: inherit; font-style: none; font-weight: normal; text-transform: uppercase; border-bottom: 0; border-left: none; } .ui.table > thead > tr > th:first-child { border-left: none; } .ui.table > thead > tr:first-child > th:first-child { border-radius: 0 0 0 0; } .ui.table > thead > tr:first-child > th:last-child { border-radius: 0 0 0 0; } .ui.table > thead > tr:first-child > th:only-child { border-radius: 0 0 0 0; } /* Footer */ .ui.table > tfoot { box-shadow: none; } .ui.table > tfoot > tr > th, .ui.table > tfoot > tr > td { cursor: auto; border-top: 1px solid rgba(34, 36, 38, 0.15); background: transparent; text-align: inherit; color: #000000; padding: 1.14285714em 1.14285714em; vertical-align: middle; font-style: normal; font-weight: normal; text-transform: none; } .ui.table > tfoot > tr > th:first-child, .ui.table > tfoot > tr > td:first-child { border-left: none; } .ui.table > tfoot > tr:first-child > th:first-child, .ui.table > tfoot > tr:first-child > td:first-child { border-radius: 0 0 0 0; } .ui.table > tfoot > tr:first-child > th:last-child, .ui.table > tfoot > tr:first-child > td:last-child { border-radius: 0 0 0 0; } .ui.table > tfoot > tr:first-child > th:only-child, .ui.table > tfoot > tr:first-child > td:only-child { border-radius: 0 0 0 0; } /* Table Row */ .ui.table > tr > td, .ui.table > tbody > tr > td { border-top: 0; } .ui.table > tr:first-child > td, .ui.table > tbody > tr:first-child > td { border-top: none; } /* Repeated tbody */ .ui.table > tbody + tbody tr:first-child > td { border-top: 0; } /* Table Cells */ .ui.table > tbody > tr > td, .ui.table > tr > td { padding: 1.14285714em 1.14285714em; text-align: inherit; } /* Icons */ .ui.table > .icon { vertical-align: baseline; } .ui.table > .icon:only-child { margin: 0; } /* Table Segment */ .ui.table.segment { padding: 0; } .ui.table.segment:after { display: none; } .ui.table.segment.stacked:after { display: block; } /* Responsive */ @media only screen and (max-width: 767.98px) { .ui.table:not(.unstackable) { width: 100%; padding: 0; } .ui.table:not(.unstackable) > thead, .ui.table:not(.unstackable) > thead > tr, .ui.table:not(.unstackable) > tfoot, .ui.table:not(.unstackable) > tfoot > tr, .ui.table:not(.unstackable) > tbody, .ui.table:not(.unstackable) > tr, .ui.table:not(.unstackable) > tbody > tr, .ui.table:not(.unstackable) > tr > th, .ui.table:not(.unstackable) > thead > tr > th, .ui.table:not(.unstackable) > tbody > tr > th, .ui.table:not(.unstackable) > tfoot > tr > th, .ui.table:not(.unstackable) > tr > td, .ui.table:not(.unstackable) > tbody > tr > td, .ui.table:not(.unstackable) > tfoot > tr > td { display: block !important; width: auto !important; } .ui.table:not(.unstackable) > thead { display: block; } .ui.table:not(.unstackable) > tfoot { display: block; } .ui.ui.ui.ui.table:not(.unstackable) > tr, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui.ui.ui.ui.table:not(.unstackable) > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tr > td, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td, .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td { background: none; border: none; padding: 0.25em 0.75em; box-shadow: none; } .ui.table:not(.unstackable) > tr > th:first-child, .ui.table:not(.unstackable) > thead > tr > th:first-child, .ui.table:not(.unstackable) > tbody > tr > th:first-child, .ui.table:not(.unstackable) > tfoot > tr > th:first-child, .ui.table:not(.unstackable) > tr > td:first-child, .ui.table:not(.unstackable) > tbody > tr > td:first-child, .ui.table:not(.unstackable) > tfoot > tr > td:first-child { font-weight: bold; } /* Definition Table */ .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { box-shadow: none !important; } } /******************************* Coupling *******************************/ /* UI Image */ .ui.table .collapsing .image, .ui.table .collapsing .image img { max-width: none; } /******************************* Types *******************************/ /*-------------- Complex ---------------*/ /******************************* States *******************************/ /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ @media only screen and (max-width: 991.98px) { .ui[class*="tablet stackable"].table, .ui[class*="tablet stackable"].table > thead, .ui[class*="tablet stackable"].table > thead > tr, .ui[class*="tablet stackable"].table > tfoot, .ui[class*="tablet stackable"].table > tfoot > tr, .ui[class*="tablet stackable"].table > tbody, .ui[class*="tablet stackable"].table > tbody > tr, .ui[class*="tablet stackable"].table > tr, .ui[class*="tablet stackable"].table > thead > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > th, .ui[class*="tablet stackable"].table > tfoot > tr > th, .ui[class*="tablet stackable"].table > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > td, .ui[class*="tablet stackable"].table > tfoot > tr > td, .ui[class*="tablet stackable"].table > tr > td { display: block !important; width: 100% !important; } .ui[class*="tablet stackable"].table { padding: 0; } .ui[class*="tablet stackable"].table > thead { display: block; } .ui[class*="tablet stackable"].table > tfoot { display: block; } .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui[class*="tablet stackable"].table > thead > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > th, .ui[class*="tablet stackable"].table > tfoot > tr > th, .ui[class*="tablet stackable"].table > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > td, .ui[class*="tablet stackable"].table > tfoot > tr > td, .ui[class*="tablet stackable"].table > tr > td { background: none; border: none !important; padding: 0.25em 0.75em; box-shadow: none; } } /*-------------- Text Alignment ---------------*/ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"] { text-align: left; } .ui.table[class*="center aligned"], .ui.table [class*="center aligned"] { text-align: center; } .ui.table[class*="right aligned"], .ui.table [class*="right aligned"] { text-align: right; } /*------------------ Vertical Alignment ------------------*/ .ui.table[class*="top aligned"], .ui.table [class*="top aligned"] { vertical-align: top; } .ui.table[class*="middle aligned"], .ui.table [class*="middle aligned"] { vertical-align: middle; } .ui.table[class*="bottom aligned"], .ui.table [class*="bottom aligned"] { vertical-align: bottom; } /*-------------- Single Line ---------------*/ .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; } /*------------------- Colors --------------------*/ .ui.primary.table { border-top: 0.2em solid #6EBE49; } .ui.ui.ui.ui.table tr.primary:not(.marked), .ui.ui.table td.primary:not(.marked) { background: #ddf4ff; color: rgba(255, 255, 255, 0.9); } .ui.secondary.table { border-top: 0.2em solid #505050; } .ui.ui.ui.ui.table tr.secondary:not(.marked), .ui.ui.table td.secondary:not(.marked) { background: #dddddd; color: rgba(255, 255, 255, 0.9); } .ui.red.table { border-top: 0.2em solid #DB2828; } .ui.ui.ui.ui.table tr.red:not(.marked), .ui.ui.table td.red:not(.marked) { background: #ffe1df; color: #DB2828; } .ui.orange.table { border-top: 0.2em solid #F2711C; } .ui.ui.ui.ui.table tr.orange:not(.marked), .ui.ui.table td.orange:not(.marked) { background: #ffe7d1; color: #F2711C; } .ui.yellow.table { border-top: 0.2em solid #FBBD08; } .ui.ui.ui.ui.table tr.yellow:not(.marked), .ui.ui.table td.yellow:not(.marked) { background: #fff9d2; color: #B58105; } .ui.olive.table { border-top: 0.2em solid #B5CC18; } .ui.ui.ui.ui.table tr.olive:not(.marked), .ui.ui.table td.olive:not(.marked) { background: #f7fae4; color: #8ABC1E; } .ui.green.table { border-top: 0.2em solid #21BA45; } .ui.ui.ui.ui.table tr.green:not(.marked), .ui.ui.table td.green:not(.marked) { background: #d5f5d9; color: #1EBC30; } .ui.teal.table { border-top: 0.2em solid #00B5AD; } .ui.ui.ui.ui.table tr.teal:not(.marked), .ui.ui.table td.teal:not(.marked) { background: #e2ffff; color: #10A3A3; } .ui.blue.table { border-top: 0.2em solid #2185D0; } .ui.ui.ui.ui.table tr.blue:not(.marked), .ui.ui.table td.blue:not(.marked) { background: #ddf4ff; color: #2185D0; } .ui.violet.table { border-top: 0.2em solid #6435C9; } .ui.ui.ui.ui.table tr.violet:not(.marked), .ui.ui.table td.violet:not(.marked) { background: #ece9fe; color: #6435C9; } .ui.purple.table { border-top: 0.2em solid #A333C8; } .ui.ui.ui.ui.table tr.purple:not(.marked), .ui.ui.table td.purple:not(.marked) { background: #f8e3ff; color: #A333C8; } .ui.pink.table { border-top: 0.2em solid #E03997; } .ui.ui.ui.ui.table tr.pink:not(.marked), .ui.ui.table td.pink:not(.marked) { background: #ffe8f9; color: #E03997; } .ui.brown.table { border-top: 0.2em solid #A5673F; } .ui.ui.ui.ui.table tr.brown:not(.marked), .ui.ui.table td.brown:not(.marked) { background: #f7e5d2; color: #A5673F; } .ui.grey.table { border-top: 0.2em solid #767676; } .ui.ui.ui.ui.table tr.grey:not(.marked), .ui.ui.table td.grey:not(.marked) { background: #DCDDDE; color: #767676; } .ui.black.table { border-top: 0.2em solid #1B1C1D; } .ui.ui.ui.ui.table tr.black:not(.marked), .ui.ui.table td.black:not(.marked) { background: #545454; color: #FFFFFF; } /*-------------- Column Count ---------------*/ /* Grid Based */ .ui.one.column.table td { width: 100%; } .ui.two.column.table td { width: 50%; } .ui.three.column.table td { width: 33.33333333%; } .ui.four.column.table td { width: 25%; } .ui.five.column.table td { width: 20%; } .ui.six.column.table td { width: 16.66666667%; } .ui.seven.column.table td { width: 14.28571429%; } .ui.eight.column.table td { width: 12.5%; } .ui.nine.column.table td { width: 11.11111111%; } .ui.ten.column.table td { width: 10%; } .ui.eleven.column.table td { width: 9.09090909%; } .ui.twelve.column.table td { width: 8.33333333%; } .ui.thirteen.column.table td { width: 7.69230769%; } .ui.fourteen.column.table td { width: 7.14285714%; } .ui.fifteen.column.table td { width: 6.66666667%; } .ui.sixteen.column.table td { width: 6.25%; } /* Column Width */ .ui.table th.one.wide, .ui.table td.one.wide { width: 6.25%; } .ui.table th.two.wide, .ui.table td.two.wide { width: 12.5%; } .ui.table th.three.wide, .ui.table td.three.wide { width: 18.75%; } .ui.table th.four.wide, .ui.table td.four.wide { width: 25%; } .ui.table th.five.wide, .ui.table td.five.wide { width: 31.25%; } .ui.table th.six.wide, .ui.table td.six.wide { width: 37.5%; } .ui.table th.seven.wide, .ui.table td.seven.wide { width: 43.75%; } .ui.table th.eight.wide, .ui.table td.eight.wide { width: 50%; } .ui.table th.nine.wide, .ui.table td.nine.wide { width: 56.25%; } .ui.table th.ten.wide, .ui.table td.ten.wide { width: 62.5%; } .ui.table th.eleven.wide, .ui.table td.eleven.wide { width: 68.75%; } .ui.table th.twelve.wide, .ui.table td.twelve.wide { width: 75%; } .ui.table th.thirteen.wide, .ui.table td.thirteen.wide { width: 81.25%; } .ui.table th.fourteen.wide, .ui.table td.fourteen.wide { width: 87.5%; } .ui.table th.fifteen.wide, .ui.table td.fifteen.wide { width: 93.75%; } .ui.table th.sixteen.wide, .ui.table td.sixteen.wide { width: 100%; } /*-------------- Basic ---------------*/ .ui.basic.table { background: transparent; border: 0 solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.table > thead, .ui.basic.table > tfoot { box-shadow: none; } .ui.basic.table > thead > tr > th, .ui.basic.table > tbody > tr > th, .ui.basic.table > tfoot > tr > th, .ui.basic.table > tr > th { background: transparent; border-left: none; } .ui.basic.table > tbody > tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ui.basic.table > tbody > tr > td, .ui.basic.table > tfoot > tr > td, .ui.basic.table > tr > td { background: transparent; } /* Very Basic */ .ui[class*="very basic"].table { border: none; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { padding: ''; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { padding-left: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child { padding-right: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { padding-top: 0; } /*-------------- Celled ---------------*/ .ui.celled.table > tr > th, .ui.celled.table > thead > tr > th, .ui.celled.table > tbody > tr > th, .ui.celled.table > tfoot > tr > th, .ui.celled.table > tr > td, .ui.celled.table > tbody > tr > td, .ui.celled.table > tfoot > tr > td { border-left: 1px solid #F9FAFB; } .ui.celled.table > tr > th:first-child, .ui.celled.table > thead > tr > th:first-child, .ui.celled.table > tbody > tr > th:first-child, .ui.celled.table > tfoot > tr > th:first-child, .ui.celled.table > tr > td:first-child, .ui.celled.table > tbody > tr > td:first-child, .ui.celled.table > tfoot > tr > td:first-child { border-left: none; } /*-------------- Sizes ---------------*/ /* Standard */ .ui.table { font-size: 1em; } .ui.table thead tr th { border-bottom: solid 2px #767676 !important; text-transform: uppercase; color: #909090; } .ui.table thead tr th * { text-transform: uppercase; } .ui.table tbody tr:hover { cursor: pointer; } .ui.table tbody tr td { border-bottom: solid 1px #ccc !important; text-transform: uppercase; } .ui.table tbody tr td .lowercase { text-transform: lowercase !important; } .ui.table tbody tr td.image:not(.ui) img { width: 7em; max-height: 7em; object-fit: cover; object-position: center; border-radius: 0.28571429rem; } .ui.table tbody tr td.header:not(.ui) { font-weight: bold; text-transform: none; } .ui.table tbody tr td ul.actions { margin: 0; padding: 0; } .ui.table tbody tr td ul.actions li { display: inline-block; margin-right: 1em; } .ui.table tbody tr td ul.actions li button { font-weight: bold; text-transform: uppercase; } .ui.table tbody tr td ul.actions li:last-child { margin-right: 0; } /* Views */ /*! * # Fomantic-UI - Card * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Horizontal */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Inverted */ /* Packaged Theme */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Horizontal */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Inverted */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* Card */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Card ---------------*/ .ui.cards > .card, .ui.card { max-width: 100%; position: relative; display: flex; flex-direction: column; width: 255px; min-height: 0; background: #FFFFFF; padding: 0; border: 0.75em solid #F5F8FA; border-radius: 0.28571429rem; box-shadow: none, 0 0 0 1px #D4D4D5; transition: box-shadow 0.1s ease, transform 0.1s ease; z-index: ''; word-wrap: break-word; } .ui.card { margin: 1em 0; } .ui.cards > .card a, .ui.card a { cursor: pointer; } .ui.card:first-child { margin-top: 0; } .ui.card:last-child { margin-bottom: 0; } /*-------------- Cards ---------------*/ .ui.cards { display: flex; margin: -0.875em -0.5em; flex-wrap: wrap; } .ui.cards > .card { display: flex; margin: 0.875em auto; float: none; } /* Clearing */ .ui.cards:after, .ui.card:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } /* Consecutive Card Groups Preserve Row Spacing */ .ui.cards ~ .ui.cards { margin-top: 0.875em; } /*-------------- Rounded Edges ---------------*/ .ui.cards > .card > :first-child, .ui.card > :first-child { border-radius: 0.28571429rem 0.28571429rem 0 0 !important; border-top: none !important; } .ui.cards > .card > :last-child, .ui.card > :last-child { border-radius: 0 0 0.28571429rem 0.28571429rem !important; } .ui.cards > .card > :only-child, .ui.card > :only-child { border-radius: 0.28571429rem !important; } /*-------------- Images ---------------*/ .ui.cards > .card > .image, .ui.card > .image { position: relative; display: block; flex: 0 0 auto; padding: 0; background: rgba(0, 0, 0, 0.05); } .ui.cards > .card > .image > img, .ui.card > .image > img { display: block; width: 100%; height: auto; border-radius: inherit; } .ui.cards > .card > .image:not(.ui) > img, .ui.card > .image:not(.ui) > img { border: none; } /*-------------- Content ---------------*/ .ui.cards > .card > .content, .ui.card > .content { flex-grow: 1; border: none; border-top: 0; background: none; margin: 0; padding: 1em 1em; box-shadow: none; font-size: 0.9em; border-radius: 0; } .ui.cards > .card > .content:after, .ui.card > .content:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.cards > .card > .content > .header, .ui.card > .content > .header { display: block; margin: ''; font-family: Helvetica, Arial, sans-serif; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) { font-weight: bold; font-size: 1.28571429em; margin-top: -0.21425em; line-height: 1.28571429em; } .ui.cards > .card > .content > .meta + .description, .ui.cards > .card > .content > .header + .description, .ui.card > .content > .meta + .description, .ui.card > .content > .header + .description { margin-top: 0.5em; } /*---------------- Floated Content -----------------*/ .ui.cards > .card [class*="left floated"], .ui.card [class*="left floated"] { float: left; } .ui.cards > .card [class*="right floated"], .ui.card [class*="right floated"] { float: right; } /*-------------- Aligned ---------------*/ .ui.cards > .card [class*="left aligned"], .ui.card [class*="left aligned"] { text-align: left; } .ui.cards > .card [class*="center aligned"], .ui.card [class*="center aligned"] { text-align: center; } .ui.cards > .card [class*="right aligned"], .ui.card [class*="right aligned"] { text-align: right; } /*-------------- Content Image ---------------*/ .ui.cards > .card .content img, .ui.card .content img { display: inline-block; vertical-align: middle; width: ''; } .ui.cards > .card img.avatar, .ui.cards > .card .avatar img, .ui.card img.avatar, .ui.card .avatar img { width: 2em; height: 2em; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.cards > .card > .content > .description, .ui.card > .content > .description { clear: both; color: rgba(0, 0, 0, 0.68); } /*-------------- Paragraph ---------------*/ .ui.cards > .card > .content p, .ui.card > .content p { margin: 0 0 0.5em; } .ui.cards > .card > .content p:last-child, .ui.card > .content p:last-child { margin-bottom: 0; } /*-------------- Meta ---------------*/ .ui.cards > .card .meta, .ui.card .meta { font-size: 1em; color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta *, .ui.card .meta * { margin-right: 0.3em; } .ui.cards > .card .meta :last-child, .ui.card .meta :last-child { margin-right: 0; } .ui.cards > .card .meta [class*="right floated"], .ui.card .meta [class*="right floated"] { margin-right: 0; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.cards > .card > .content a:not(.ui), .ui.card > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.cards > .card > .content a:not(.ui):hover, .ui.card > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.cards > .card > .content > a.header, .ui.card > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.cards > .card > .content > a.header:hover, .ui.card > .content > a.header:hover { color: #6EBE49; } /* Meta */ .ui.cards > .card .meta > a:not(.ui), .ui.card .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta > a:not(.ui):hover, .ui.card .meta > a:not(.ui):hover { color: #000000; } /*-------------- Buttons ---------------*/ .ui.cards > .card > .buttons, .ui.card > .buttons, .ui.cards > .card > .button, .ui.card > .button { margin: 0 -1px; width: calc(100% + 2px); } .ui.cards > .card > .buttons:last-child, .ui.card > .buttons:last-child, .ui.cards > .card > .button:last-child, .ui.card > .button:last-child { margin-bottom: -1px; } /*-------------- Dimmer ---------------*/ .ui.cards > .card .dimmer, .ui.card .dimmer { background-color: ''; z-index: 10; } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.cards > .card > .content .star.icon, .ui.card > .content .star.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .star.icon:hover, .ui.card > .content .star.icon:hover { opacity: 1; color: #FFB70A; } .ui.cards > .card > .content .active.star.icon, .ui.card > .content .active.star.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.cards > .card > .content .like.icon, .ui.card > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .like.icon:hover, .ui.card > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.cards > .card > .content .active.like.icon, .ui.card > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.cards > .card > .extra, .ui.card > .extra { max-width: 100%; min-height: 0 !important; flex-grow: 0; border-top: 0 !important; position: static; background: none; width: auto; margin: 0 0; padding: 0.75em 1em; top: 0; left: 0; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; } .ui.cards > .card > .extra a:not(.ui), .ui.card > .extra a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover { color: #6EBE49; } /******************************* Variations *******************************/ /*------------------- Colors --------------------*/ .ui.primary.cards > .card, .ui.cards > .primary.card, .ui.primary.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6EBE49, none; } .ui.primary.cards > .card:hover, .ui.cards > .primary.card:hover, .ui.primary.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #60b539, 0 1px 3px 0 #BCBDBD; } .ui.secondary.cards > .card, .ui.cards > .secondary.card, .ui.secondary.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #505050, none; } .ui.secondary.cards > .card:hover, .ui.cards > .secondary.card:hover, .ui.secondary.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5d5d5d, 0 1px 3px 0 #BCBDBD; } .ui.red.cards > .card, .ui.cards > .red.card, .ui.red.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, none; } .ui.red.cards > .card:hover, .ui.cards > .red.card:hover, .ui.red.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD; } .ui.orange.cards > .card, .ui.cards > .orange.card, .ui.orange.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, none; } .ui.orange.cards > .card:hover, .ui.cards > .orange.card:hover, .ui.orange.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD; } .ui.yellow.cards > .card, .ui.cards > .yellow.card, .ui.yellow.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, none; } .ui.yellow.cards > .card:hover, .ui.cards > .yellow.card:hover, .ui.yellow.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD; } .ui.olive.cards > .card, .ui.cards > .olive.card, .ui.olive.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, none; } .ui.olive.cards > .card:hover, .ui.cards > .olive.card:hover, .ui.olive.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD; } .ui.green.cards > .card, .ui.cards > .green.card, .ui.green.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, none; } .ui.green.cards > .card:hover, .ui.cards > .green.card:hover, .ui.green.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD; } .ui.teal.cards > .card, .ui.cards > .teal.card, .ui.teal.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, none; } .ui.teal.cards > .card:hover, .ui.cards > .teal.card:hover, .ui.teal.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD; } .ui.blue.cards > .card, .ui.cards > .blue.card, .ui.blue.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, none; } .ui.blue.cards > .card:hover, .ui.cards > .blue.card:hover, .ui.blue.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; } .ui.violet.cards > .card, .ui.cards > .violet.card, .ui.violet.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, none; } .ui.violet.cards > .card:hover, .ui.cards > .violet.card:hover, .ui.violet.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD; } .ui.purple.cards > .card, .ui.cards > .purple.card, .ui.purple.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, none; } .ui.purple.cards > .card:hover, .ui.cards > .purple.card:hover, .ui.purple.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD; } .ui.pink.cards > .card, .ui.cards > .pink.card, .ui.pink.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, none; } .ui.pink.cards > .card:hover, .ui.cards > .pink.card:hover, .ui.pink.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD; } .ui.brown.cards > .card, .ui.cards > .brown.card, .ui.brown.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, none; } .ui.brown.cards > .card:hover, .ui.cards > .brown.card:hover, .ui.brown.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD; } .ui.grey.cards > .card, .ui.cards > .grey.card, .ui.grey.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, none; } .ui.grey.cards > .card:hover, .ui.cards > .grey.card:hover, .ui.grey.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD; } .ui.black.cards > .card, .ui.cards > .black.card, .ui.black.card { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, none; } .ui.black.cards > .card:hover, .ui.cards > .black.card:hover, .ui.black.card:hover { box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; } /*-------------- Card Count ---------------*/ .ui.one.cards { margin-left: 0; margin-right: 0; } .ui.one.cards > .card { width: 100%; } .ui.two.cards { margin-left: -1em; margin-right: -1em; } .ui.two.cards > .card { width: calc(50% - 2em); margin-left: 1em; margin-right: 1em; } .ui.three.cards { margin-left: -1em; margin-right: -1em; } .ui.three.cards > .card { width: calc(33.33333333333333% - 2em); margin-left: 1em; margin-right: 1em; } .ui.four.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.four.cards > .card { width: calc(25% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.five.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.five.cards > .card { width: calc(20% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.six.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.six.cards > .card { width: calc(16.666666666666664% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.seven.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.seven.cards > .card { width: calc(14.285714285714285% - 1em); margin-left: 0.5em; margin-right: 0.5em; } .ui.eight.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.eight.cards > .card { width: calc(12.5% - 1em); margin-left: 0.5em; margin-right: 0.5em; font-size: 11px; } .ui.nine.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.nine.cards > .card { width: calc(11.11111111111111% - 1em); margin-left: 0.5em; margin-right: 0.5em; font-size: 10px; } .ui.ten.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.ten.cards > .card { width: calc(10% - 1em); margin-left: 0.5em; margin-right: 0.5em; } /*-------------- Size ---------------*/ .ui.cards > .card { font-size: 0.9em; } /******************************* Theme Overrides *******************************/ /******************************* CARD User Variable Overrides *******************************/ .ui.card .grid .column { margin-right: 0 !important; padding: 0; } .ui.card .image img { object-fit: cover; object-position: center; max-height: 15em; } .ui.card h3.header:not(.ui) { margin: 1em 0 2em 0 !important; font-weight: normal !important; float: left; width: 100%; } .ui.card h3.header:not(.ui):hover { color: #000000 !important; } .ui.card h3.header:not(.ui) a { text-overflow: ellipsis; overflow: hidden; width: 100%; float: left; padding-bottom: 0.25em; word-wrap: break-word; } .ui.card .meta { text-align: left; text-transform: uppercase; } .ui.card .meta .property { float: left; } .ui.card .meta .property.two { width: 48%; } .ui.card .meta .property.three { width: 32%; } .ui.card .meta .property .value { width: 100%; float: left; margin-top: 0.5em; } .ui.card .meta span { color: #000000; } .ui.card .extra { margin-bottom: 2em !important; } .ui.card .extra .divider { margin-top: 0.5rem; } .ui.card .extra .link.button { text-transform: uppercase; font-size: 1em; } .ui.card .extra .center.aligned * { text-align: center; } .ui.card .extra .right.aligned * { text-align: right; } .ui.card .extra .action { margin-right: 0.8em; } .ui.card .extra .action:last-child { margin-right: 0em; } /*! * # Fomantic-UI - Item * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Inverted */ /* Packaged Theme */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Inverted */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Item ---------------*/ .ui.items > .item { display: flex; margin: 1em 0; width: 100%; min-height: 0; background: transparent; padding: 0; border: none; border-radius: 0; box-shadow: none; transition: box-shadow 0.1s ease; z-index: ''; } .ui.items > .item a { cursor: pointer; } /*-------------- Items ---------------*/ .ui.items { margin: 1.5em 0; } .ui.items:first-child { margin-top: 0 !important; } .ui.items:last-child { margin-bottom: 0 !important; } /*-------------- Item ---------------*/ .ui.items > .item:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item:first-child { margin-top: 0; } .ui.items > .item:last-child { margin-bottom: 0; } /*-------------- Images ---------------*/ .ui.items > .item > .image { position: relative; flex: 0 0 auto; display: block; float: none; margin: 0; padding: 0; max-height: ''; align-self: start; } .ui.items > .item > .image > img { display: block; width: 100%; height: auto; border-radius: 0.125rem; border: none; } .ui.items > .item > .image:only-child > img { border-radius: 0; } /*-------------- Content ---------------*/ .ui.items > .item > .content { display: block; flex: 1 1 auto; background: none; color: #000000; margin: 0; padding: 0; box-shadow: none; font-size: 1em; border: none; border-radius: 0; } .ui.items > .item > .content:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item > .image + .content { min-width: 0; width: auto; display: block; margin-left: 0; align-self: start; padding-left: 1.5em; } .ui.items > .item > .content > .header { display: inline-block; margin: -0.21425em 0 0; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.items > .item > .content > .header:not(.ui) { font-size: 1.28571429em; } /*-------------- Floated ---------------*/ .ui.items > .item [class*="left floated"] { float: left; } .ui.items > .item [class*="right floated"] { float: right; } /*-------------- Content Image ---------------*/ .ui.items > .item .content img { align-self: center; width: ''; } .ui.items > .item img.avatar, .ui.items > .item .avatar img { width: ''; height: ''; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.items > .item > .content > .description { margin-top: 0.6em; max-width: auto; font-size: 1em; line-height: 1.4285em; color: #000000; } /*-------------- Paragraph ---------------*/ .ui.items > .item > .content p { margin: 0 0 0.5em; } .ui.items > .item > .content p:last-child { margin-bottom: 0; } /*-------------- Meta ---------------*/ .ui.items > .item .meta { margin: 0.5em 0 0.5em; font-size: 1em; line-height: 1em; color: rgba(0, 0, 0, 0.6); } .ui.items > .item .meta * { margin-right: 0.3em; } .ui.items > .item .meta :last-child { margin-right: 0; } .ui.items > .item .meta [class*="right floated"] { margin-right: 0; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.items > .item > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.items > .item > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.items > .item > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > a.header:hover { color: #6EBE49; } /* Meta */ .ui.items > .item .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta > a:not(.ui):hover { color: #000000; } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.items > .item > .content .favorite.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .favorite.icon:hover { opacity: 1; color: #FFB70A; } .ui.items > .item > .content .active.favorite.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.items > .item > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.items > .item > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.items > .item .extra { display: block; position: relative; background: none; margin: 0.5rem 0 0; width: 100%; padding: 0 0 0; top: 0; left: 0; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; border-top: none; } .ui.items > .item .extra > * { margin: 0.25rem 0.5rem 0.25rem 0; } .ui.items > .item .extra > [class*="right floated"] { margin: 0.25rem 0 0.25rem 0.5rem; } .ui.items > .item .extra:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } /******************************* Responsive *******************************/ /* Default Image Width */ .ui.items > .item > .image:not(.ui) { width: 175px; } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.items > .item { margin: 1em 0; } .ui.items > .item > .image:not(.ui) { width: 150px; } .ui.items > .item > .image + .content { display: block; padding: 0 0 0 1em; } } /* Mobile Only */ @media only screen and (max-width: 767.98px) { .ui.items:not(.unstackable) > .item { flex-direction: column; margin: 2em 0; } .ui.items:not(.unstackable) > .item > .image { display: block; margin-left: auto; margin-right: auto; } .ui.items:not(.unstackable) > .item > .image, .ui.items:not(.unstackable) > .item > .image > img { max-width: 100% !important; width: auto !important; max-height: 250px !important; } .ui.items:not(.unstackable) > .item > .image + .content { display: block; padding: 1.5em 0 0; } } /******************************* Variations *******************************/ /*-------------- Size ---------------*/ .ui.items > .item { font-size: 1em; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Statistic * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Stackable */ /* Size */ /* Packaged Theme */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Stackable */ /* Size */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Statistic *******************************/ /* Standalone */ .ui.statistic { display: inline-flex; flex-direction: column; margin: 1em 0; max-width: none; } .ui.statistic + .ui.statistic { margin: 0 0 0 1.5em; } .ui.statistic:first-child { margin-top: 0; } .ui.statistic:last-child { margin-bottom: 0; } /******************************* Group *******************************/ /* Grouped */ .ui.statistics { display: flex; align-items: flex-start; flex-wrap: wrap; } .ui.statistics > .statistic { display: inline-flex; flex: 0 1 auto; flex-direction: column; margin: 0 1.5em 1em; max-width: none; } .ui.statistics { display: flex; margin: 1em -1.5em -1em; } /* Clearing */ .ui.statistics:after { display: block; content: ' '; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.statistics:first-child { margin-top: 0; } /******************************* Content *******************************/ /*-------------- Value ---------------*/ .ui.statistics .statistic > .value, .ui.statistic > .value { font-family: Helvetica, Arial, sans-serif; font-size: 4rem; font-weight: normal; line-height: 1em; color: #1B1C1D; text-transform: uppercase; text-align: center; } /*-------------- Label ---------------*/ .ui.statistics .statistic > .label, .ui.statistic > .label { font-family: Helvetica, Arial, sans-serif; font-size: 1em; font-weight: bold; color: #000000; text-transform: uppercase; text-align: center; } /* Top Label */ .ui.statistics .statistic > .label ~ .value, .ui.statistic > .label ~ .value { margin-top: 0; } /* Bottom Label */ .ui.statistics .statistic > .value ~ .label, .ui.statistic > .value ~ .label { margin-top: 0; } /******************************* Types *******************************/ /*-------------- Icon Value ---------------*/ .ui.statistics .statistic > .value .icon, .ui.statistic > .value .icon { opacity: 1; width: auto; margin: 0; } /*-------------- Text Value ---------------*/ .ui.statistics .statistic > .text.value, .ui.statistic > .text.value { line-height: 1em; min-height: 2em; font-weight: bold; text-align: center; } .ui.statistics .statistic > .text.value + .label, .ui.statistic > .text.value + .label { text-align: center; } /*-------------- Image Value ---------------*/ .ui.statistics .statistic > .value img, .ui.statistic > .value img { max-height: 3rem; vertical-align: baseline; } /******************************* Variations *******************************/ /*-------------- Count ---------------*/ .ui.ten.statistics { margin: 0 0 -1em; } .ui.ten.statistics .statistic { min-width: 10%; margin: 0 0 1em; } .ui.nine.statistics { margin: 0 0 -1em; } .ui.nine.statistics .statistic { min-width: 11.11111111%; margin: 0 0 1em; } .ui.eight.statistics { margin: 0 0 -1em; } .ui.eight.statistics .statistic { min-width: 12.5%; margin: 0 0 1em; } .ui.seven.statistics { margin: 0 0 -1em; } .ui.seven.statistics .statistic { min-width: 14.28571429%; margin: 0 0 1em; } .ui.six.statistics { margin: 0 0 -1em; } .ui.six.statistics .statistic { min-width: 16.66666667%; margin: 0 0 1em; } .ui.five.statistics { margin: 0 0 -1em; } .ui.five.statistics .statistic { min-width: 20%; margin: 0 0 1em; } .ui.four.statistics { margin: 0 0 -1em; } .ui.four.statistics .statistic { min-width: 25%; margin: 0 0 1em; } .ui.three.statistics { margin: 0 0 -1em; } .ui.three.statistics .statistic { min-width: 33.33333333%; margin: 0 0 1em; } .ui.two.statistics { margin: 0 0 -1em; } .ui.two.statistics .statistic { min-width: 50%; margin: 0 0 1em; } .ui.one.statistics { margin: 0 0 -1em; } .ui.one.statistics .statistic { min-width: 100%; margin: 0 0 1em; } /*-------------- Colors ---------------*/ .ui.primary.statistics .statistic > .value, .ui.statistics .primary.statistic > .value, .ui.primary.statistic > .value { color: #6EBE49; } .ui.secondary.statistics .statistic > .value, .ui.statistics .secondary.statistic > .value, .ui.secondary.statistic > .value { color: #505050; } .ui.red.statistics .statistic > .value, .ui.statistics .red.statistic > .value, .ui.red.statistic > .value { color: #DB2828; } .ui.orange.statistics .statistic > .value, .ui.statistics .orange.statistic > .value, .ui.orange.statistic > .value { color: #F2711C; } .ui.yellow.statistics .statistic > .value, .ui.statistics .yellow.statistic > .value, .ui.yellow.statistic > .value { color: #FBBD08; } .ui.olive.statistics .statistic > .value, .ui.statistics .olive.statistic > .value, .ui.olive.statistic > .value { color: #B5CC18; } .ui.green.statistics .statistic > .value, .ui.statistics .green.statistic > .value, .ui.green.statistic > .value { color: #21BA45; } .ui.teal.statistics .statistic > .value, .ui.statistics .teal.statistic > .value, .ui.teal.statistic > .value { color: #00B5AD; } .ui.blue.statistics .statistic > .value, .ui.statistics .blue.statistic > .value, .ui.blue.statistic > .value { color: #2185D0; } .ui.violet.statistics .statistic > .value, .ui.statistics .violet.statistic > .value, .ui.violet.statistic > .value { color: #6435C9; } .ui.purple.statistics .statistic > .value, .ui.statistics .purple.statistic > .value, .ui.purple.statistic > .value { color: #A333C8; } .ui.pink.statistics .statistic > .value, .ui.statistics .pink.statistic > .value, .ui.pink.statistic > .value { color: #E03997; } .ui.brown.statistics .statistic > .value, .ui.statistics .brown.statistic > .value, .ui.brown.statistic > .value { color: #A5673F; } .ui.grey.statistics .statistic > .value, .ui.statistics .grey.statistic > .value, .ui.grey.statistic > .value { color: #767676; } .ui.black.statistics .statistic > .value, .ui.statistics .black.statistic > .value, .ui.black.statistic > .value { color: #1B1C1D; } /*-------------- Sizes ---------------*/ /* Medium */ .ui.statistics .statistic > .value, .ui.statistic > .value { font-size: 4rem; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value { font-size: 3rem; } .ui.statistics .statistic > .text.value, .ui.statistic > .text.value { font-size: 2rem; } .ui.mini.statistics .statistic > .value, .ui.mini.statistic > .value { font-size: 1.5rem; } .ui.mini.horizontal.statistics .statistic > .value, .ui.mini.horizontal.statistic > .value { font-size: 1.5rem; } .ui.mini.statistics .statistic > .text.value, .ui.mini.statistic > .text.value { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /* Modules */ /*! * # Fomantic-UI - Accordion * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Packaged Theme */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Site Theme */ /******************************* Theme Variables *******************************/ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Accordion *******************************/ .ui.accordion, .ui.accordion .accordion { max-width: 100%; } .ui.accordion .accordion { margin: 1em 0 0; padding: 0; } /* Title */ .ui.accordion .title, .ui.accordion .accordion .title { cursor: pointer; } /* Default Styling */ .ui.accordion .title:not(.ui) { padding: 0.5em 0; font-family: Helvetica, Arial, sans-serif; font-size: 0.9em; color: #000000; } /* Default Styling */ .ui.accordion:not(.styled) .title ~ .content:not(.ui), .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { margin: ''; padding: 0.5em 0 1em; } .ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { padding-bottom: 0; } /* Arrow */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { display: inline-block; float: none; opacity: 1; width: 1.25em; height: 1em; margin: 0 0.25rem 0 0; padding: 0; font-size: 1em; transition: transform 0.1s ease, opacity 0.1s ease; vertical-align: baseline; transform: none; } /*-------------- Coupling ---------------*/ /* Menu */ .ui.accordion.menu .item .title { display: block; padding: 0; } .ui.accordion.menu .item .title > .dropdown.icon { float: right; margin: 0.21425em 0 0 1em; transform: rotate(180deg); } /* Header */ .ui.accordion .ui.header .dropdown.icon { font-size: 1em; margin: 0 0.25rem 0 0; } /******************************* States *******************************/ .ui.accordion .active.title .dropdown.icon, .ui.accordion .accordion .active.title .dropdown.icon { transform: rotate(90deg); } .ui.accordion.menu .item .active.title > .dropdown.icon { transform: rotate(90deg); } /******************************* Types *******************************/ /*-------------- Styled ---------------*/ .ui.styled.accordion { width: 600px; } .ui.styled.accordion, .ui.styled.accordion .accordion { border-radius: none; background: none; box-shadow: none; } .ui.styled.accordion .title, .ui.styled.accordion .accordion .title { margin: 0em 1em; padding: 0.75em 0em 0.5em 0em; color: rgba(0, 0, 0, 0.4); font-weight: normal; border-top: 1px solid rgba(34, 36, 38, 0.15); transition: background 0.1s ease, color 0.1s ease; } .ui.styled.accordion > .title:first-child, .ui.styled.accordion .accordion .title:first-child { border-top: none; } /* Content */ .ui.styled.accordion .content, .ui.styled.accordion .accordion .content { margin: 0; padding: 0.5em 1em 1.5em; } .ui.styled.accordion .accordion .content { margin: 0; padding: 0.5em 1em 1.5em; } /* Hover */ .ui.styled.accordion .title:hover, .ui.styled.accordion .active.title, .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title { background: transparent; color: #000000; } .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title { background: transparent; color: #000000; } /* Active */ .ui.styled.accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } .ui.styled.accordion .accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } /******************************* States *******************************/ /*-------------- Not Active ---------------*/ .ui.accordion .title ~ .content:not(.active), .ui.accordion .accordion .title ~ .content:not(.active) { display: none; } /******************************* Variations *******************************/ /*-------------- Fluid ---------------*/ .ui.fluid.accordion, .ui.fluid.accordion .accordion { width: 100%; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Accordion'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } /* Dropdown Icon */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { font-family: Accordion; line-height: 1; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.accordion .title .dropdown.icon:before, .ui.accordion .accordion .title .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } /******************************* Theme Overrides *******************************/ .ui.styled.accordion > .title:first-child { border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.styled.accordion .title.right .dropdown.icon, .ui.styled.accordion .accordion .title.right .dropdown.icon { float: right; } .ui.styled.accordion .active.title .dropdown.icon, .ui.styled.accordion .accordion .active.title .dropdown.icon { color: #6EBE49; } .ui.styled.accordion.menu .item .active.title > .dropdown.icon { color: #6EBE49; } /*! * # Fomantic-UI - Calendar * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Calendar *******************************/ /* Packaged Theme */ /******************************* Calendar *******************************/ /* Site Theme */ /******************************* Calendar Theme *******************************/ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Popup *******************************/ .ui.calendar .ui.popup { max-width: none; padding: 0; border: none; user-select: none; } /******************************* Calendar *******************************/ .ui.calendar .calendar:focus { outline: 0; } /******************************* Grid *******************************/ .ui.calendar .ui.popup .ui.grid { display: block; white-space: nowrap; } .ui.calendar .ui.popup .ui.grid > .column { width: auto; } /******************************* Table *******************************/ .ui.calendar .ui.table.year, .ui.calendar .ui.table.month, .ui.calendar .ui.table.minute { min-width: 15em; } .ui.calendar .ui.table.day { min-width: 18em; } .ui.calendar .ui.table.day.andweek { min-width: 22em; } .ui.calendar .ui.table.hour { min-width: 20em; } .ui.calendar .ui.table tr th, .ui.calendar .ui.table tr td { padding: 0.5em; white-space: nowrap; } .ui.calendar .ui.table tr th { border-left: none; } .ui.calendar .ui.table tr th .icon { margin: 0; } .ui.calendar .ui.table tr:first-child th { position: relative; padding-left: 0; padding-right: 0; } .ui.calendar .ui.table.day tr:first-child th { border: none; } .ui.calendar .ui.table.day tr:nth-child(2) th { padding-top: 0.2em; padding-bottom: 0.3em; } .ui.calendar .ui.table tr td { padding-left: 0.1em; padding-right: 0.1em; } .ui.calendar .ui.table tr .link { cursor: pointer; } .ui.calendar .ui.table tr .prev.link { width: 14.28571429%; position: absolute; left: 0; } .ui.calendar .ui.table tr .next.link { width: 14.28571429%; position: absolute; right: 0; } .ui.calendar .ui.table tr .disabled { pointer-events: auto; cursor: default; color: rgba(40, 40, 40, 0.3); } .ui.calendar .ui.table tr .adjacent:not(.disabled) { color: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.03); } /*-------------- States ---------------*/ .ui.calendar .ui.table tr td.today { font-weight: bold; } .ui.calendar .ui.table tr td.range { background: #6EBE49; color: #FFFFFF; box-shadow: none; } .ui.calendar .ui.table.inverted tr td.range { background: rgba(255, 255, 255, 0.08); color: #ffffff; box-shadow: none; } .ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus, .ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus { box-shadow: inset 0 0 0 1px #6EBE49; } .ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus, .ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus { box-shadow: inset 0 0 0 1px #85B7D9; } /******************************* States *******************************/ /*-------------------- Disabled ---------------------*/ .ui.disabled.calendar { opacity: 0.45; } .ui.disabled.calendar > .input, .ui.disabled.calendar .ui.table tr .link { pointer-events: none; } /******************************* Theme Overrides *******************************/ /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Checkbox * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Inverted */ /* Packaged Theme */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Inverted */ /* Site Theme */ /******************************* Checkbox *******************************/ /* Label */ /* Checkbox */ /* Checkbox Border */ /* Focused Checkbox */ /* Radio */ /* Focused Radio */ /* Slider */ /* Focused Slider */ /* Hover Slider */ /* Toggle */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Checkbox *******************************/ /*-------------- Content ---------------*/ .ui.checkbox { position: relative; display: inline-block; backface-visibility: hidden; outline: none; vertical-align: baseline; font-style: normal; min-height: 17px; font-size: 1em; line-height: 17px; min-width: 17px; } /* HTML Checkbox */ .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"] { cursor: pointer; position: absolute; top: 0; left: 0; opacity: 0 !important; outline: none; z-index: 3; width: 17px; height: 17px; } /*-------------- Box ---------------*/ /* .box selector is deprecated and will be removed in v3 */ .ui.checkbox label, .ui.checkbox .box { cursor: auto; position: relative; display: block; padding-left: 1.85714em; outline: none; font-size: 1em; } .ui.checkbox label:before, .ui.checkbox .box:before { position: absolute; top: 0; left: 0; width: 17px; height: 17px; content: ''; background: #FFFFFF; border-radius: 0.21428571rem; transition: none; border: 1px solid rgba(34, 36, 38, 0.15); } /*-------------- Checkmark ---------------*/ .ui.checkbox label:after, .ui.checkbox .box:after { position: absolute; font-size: 14px; top: 0; left: 0; width: 17px; height: 17px; text-align: center; opacity: 0; color: #000000; transition: none; } /*-------------- Label ---------------*/ /* Inside */ .ui.checkbox label, .ui.checkbox + label, .ui.checkbox .box, .ui.checkbox + .box { color: rgba(0, 0, 0, 0.4); transition: color 0.1s ease; } /* Outside */ .ui.checkbox + label, .ui.checkbox + .box { vertical-align: middle; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.checkbox label:hover::before, .ui.checkbox .box:hover::before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.15); } .ui.checkbox label:hover, .ui.checkbox + label:hover, .ui.checkbox .box:hover, .ui.checkbox + .box:hover { color: rgba(0, 0, 0, 0.8); } /*-------------- Down ---------------*/ .ui.checkbox label:active::before, .ui.checkbox .box:active::before { background: #F9FAFB; border-color: #6EBE49; } .ui.checkbox label:active::after, .ui.checkbox .box:active::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:active ~ label { color: rgba(0, 0, 0, 0.95); } /*-------------- Focus ---------------*/ .ui.checkbox input:focus ~ label:before, .ui.checkbox input:focus ~ .box:before { background: #FFFFFF; border-color: #6EBE49; } .ui.checkbox input:focus ~ label:after, .ui.checkbox input:focus ~ .box:after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:focus ~ label, .ui.checkbox input:focus ~ .box { color: #000000; } /*-------------- Active ---------------*/ .ui.checkbox input:checked ~ label:before, .ui.checkbox input:checked ~ .box:before { background: #FFFFFF; border-color: #6EBE49; } .ui.checkbox input:checked ~ label:after, .ui.checkbox input:checked ~ .box:after { opacity: 1; color: #6EBE49; } /*-------------- Indeterminate ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate ~ label:before, .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before { background: #FFFFFF; border-color: #6EBE49; } .ui.checkbox input:not([type=radio]):indeterminate ~ label:after, .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after { opacity: 1; color: #6EBE49; } .ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label:before { background: rgba(0, 0, 0, 0.15); } .ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after { left: 1.075rem; } /*-------------- Active Focus ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .ui.checkbox input:checked:focus ~ label:before, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .ui.checkbox input:checked:focus ~ .box:before { background: #FFFFFF; border-color: #6EBE49; } .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, .ui.checkbox input:checked:focus ~ label:after, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .ui.checkbox input:checked:focus ~ .box:after { color: #6EBE49; } /*-------------- Read-Only ---------------*/ .ui.read-only.checkbox, .ui.read-only.checkbox label { cursor: default; } /*-------------- Disabled ---------------*/ .ui.disabled.checkbox label, .ui.checkbox input[disabled] ~ label, .ui.disabled.checkbox .box, .ui.checkbox input[disabled] ~ .box { cursor: default !important; opacity: 0.5; color: #000000; } /*-------------- Hidden ---------------*/ /* Initialized checkbox moves input below element to prevent manually triggering */ .ui.checkbox input.hidden { z-index: -1; } /* Selectable Label */ .ui.checkbox input.hidden + label { cursor: pointer; user-select: none; } /******************************* Types *******************************/ /*-------------- Radio ---------------*/ .ui.radio.checkbox { min-height: 15px; } .ui.radio.checkbox label, .ui.radio.checkbox .box { padding-left: 1.85714em; } /* Box */ .ui.radio.checkbox label:before, .ui.radio.checkbox .box:before { content: ''; transform: none; width: 15px; height: 15px; border-radius: 500rem; top: 1px; left: 0; } /* Bullet */ .ui.radio.checkbox label:after, .ui.radio.checkbox .box:after { border: none; content: '' !important; line-height: 15px; top: 1px; left: 0; width: 15px; height: 15px; border-radius: 500rem; transform: scale(0.46666667); background-color: #000000; } /* Focus */ .ui.radio.checkbox input:focus ~ label:before, .ui.radio.checkbox input:focus ~ .box:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus ~ label:after, .ui.radio.checkbox input:focus ~ .box:after { background-color: rgba(0, 0, 0, 0.95); } /* Indeterminate */ .ui.radio.checkbox input:indeterminate ~ label:after, .ui.radio.checkbox input:indeterminate ~ .box:after { opacity: 0; } /* Active */ .ui.radio.checkbox input:checked ~ label:before, .ui.radio.checkbox input:checked ~ .box:before { background-color: #FFFFFF; } .ui.radio.checkbox input:checked ~ label:after, .ui.radio.checkbox input:checked ~ .box:after { background-color: #6EBE49; } /* Active Focus */ .ui.radio.checkbox input:focus:checked ~ label:before, .ui.radio.checkbox input:focus:checked ~ .box:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus:checked ~ label:after, .ui.radio.checkbox input:focus:checked ~ .box:after { background-color: #60b539; } /*-------------- Slider ---------------*/ .ui.slider.checkbox { min-height: 1.25rem; } /* Input */ .ui.slider.checkbox input { width: 3.5rem; height: 1.25rem; } /* Label */ .ui.slider.checkbox label, .ui.slider.checkbox .box { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); } /* Line */ .ui.slider.checkbox label:before, .ui.slider.checkbox .box:before { display: block; position: absolute; content: ''; transform: none; border: none !important; left: 0; z-index: 1; top: 0.4rem; background-color: rgba(34, 36, 38, 0.15); width: 3.5rem; height: 0.21428571rem; border-radius: 500rem; transition: background 0.3s ease; } /* Handle */ .ui.slider.checkbox label:after, .ui.slider.checkbox .box:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0; transform: none; border-radius: 500rem; transition: left 0.3s ease; } /* Focus */ .ui.slider.checkbox input:focus ~ label:before, .ui.slider.checkbox input:focus ~ .box:before { background-color: #6EBE49; border: none; } /* Hover */ .ui.slider.checkbox label:hover, .ui.slider.checkbox .box:hover { color: rgba(0, 0, 0, 0.8); } .ui.slider.checkbox label:hover::before, .ui.slider.checkbox .box:hover::before { background: rgba(34, 36, 38, 0.15); } /* Active */ .ui.slider.checkbox input:checked ~ label, .ui.slider.checkbox input:checked ~ .box { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:checked ~ label:before, .ui.slider.checkbox input:checked ~ .box:before { background-color: #6EBE49 !important; } .ui.slider.checkbox input:checked ~ label:after, .ui.slider.checkbox input:checked ~ .box:after { left: 2rem; } /* Active Focus */ .ui.slider.checkbox input:focus:checked ~ label, .ui.slider.checkbox input:focus:checked ~ .box { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:focus:checked ~ label:before, .ui.slider.checkbox input:focus:checked ~ .box:before { background-color: #60b539 !important; } /*-------------- Toggle ---------------*/ .ui.toggle.checkbox { min-height: 1.5rem; } /* Input */ .ui.toggle.checkbox input { width: 3.5rem; height: 1.5rem; } /* Label */ .ui.toggle.checkbox label, .ui.toggle.checkbox .box { min-height: 1.5rem; padding-left: 4.5rem; color: rgba(0, 0, 0, 0.4); } .ui.toggle.checkbox label, .ui.toggle.checkbox .box { padding-top: 0.15em; } /* Switch */ .ui.toggle.checkbox label:before, .ui.toggle.checkbox .box:before { display: block; position: absolute; content: ''; z-index: 1; transform: none; border: none; top: 0; background: rgba(0, 0, 0, 0.05); box-shadow: none; width: 3.5rem; height: 1.5rem; border-radius: 500rem; } /* Handle */ .ui.toggle.checkbox label:after, .ui.toggle.checkbox .box:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 0; left: 0; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ label:after, .ui.toggle.checkbox input ~ .box:after { left: -0.05rem; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } /* Focus */ .ui.toggle.checkbox input:focus ~ label:before, .ui.toggle.checkbox input:focus ~ .box:before { background-color: #6EBE49; border: none; } /* Hover */ .ui.toggle.checkbox label:hover::before, .ui.toggle.checkbox .box:hover::before { background-color: rgba(0, 0, 0, 0.05); border: none; } /* Active */ .ui.toggle.checkbox input:checked ~ label, .ui.toggle.checkbox input:checked ~ .box { color: rgba(0, 0, 0, 0.4) !important; } .ui.toggle.checkbox input:checked ~ label:before, .ui.toggle.checkbox input:checked ~ .box:before { background-color: #6EBE49 !important; } .ui.toggle.checkbox input:checked ~ label:after, .ui.toggle.checkbox input:checked ~ .box:after { left: 2.15rem; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } /* Active Focus */ .ui.toggle.checkbox input:focus:checked ~ label, .ui.toggle.checkbox input:focus:checked ~ .box { color: rgba(0, 0, 0, 0.4) !important; } .ui.toggle.checkbox input:focus:checked ~ label:before, .ui.toggle.checkbox input:focus:checked ~ .box:before { background-color: #6EBE49 !important; } /******************************* Variations *******************************/ /*-------------- Fitted ---------------*/ .ui.fitted.checkbox label, .ui.fitted.checkbox .box { padding-left: 0 !important; } .ui.fitted.toggle.checkbox { width: 3.5rem; } .ui.fitted.slider.checkbox { width: 3.5rem; } /*-------------- Inverted ---------------*/ .ui.inverted.checkbox label, .ui.inverted.checkbox + label, .ui.inverted.checkbox .box { color: rgba(255, 255, 255, 0.9) !important; } /* Hover */ .ui.inverted.checkbox label:hover, .ui.inverted.checkbox .box:hover { color: #ffffff !important; } .ui.inverted.checkbox label:hover::before, .ui.inverted.checkbox .box:hover::before { border-color: rgba(34, 36, 38, 0.5); } /*Slider Label */ .ui.inverted.slider.checkbox label, .ui.inverted.slider.checkbox .box { color: rgba(255, 255, 255, 0.5); } /* Slider Line */ .ui.inverted.slider.checkbox label:before, .ui.inverted.slider.checkbox .box:before { background-color: rgba(255, 255, 255, 0.5) !important; } /* Slider Hover */ .ui.inverted.slider.checkbox label:hover::before, .ui.inverted.slider.checkbox .box:hover::before { background: rgba(255, 255, 255, 0.7) !important; } /* Slider Active */ .ui.inverted.slider.checkbox input:checked ~ label, .ui.inverted.slider.checkbox input:checked ~ .box { color: #ffffff !important; } .ui.inverted.slider.checkbox input:checked ~ label:before, .ui.inverted.slider.checkbox input:checked ~ .box:before { background-color: rgba(255, 255, 255, 0.8) !important; } /* Slider Active Focus */ .ui.inverted.slider.checkbox input:focus:checked ~ label, .ui.inverted.slider.checkbox input:focus:checked ~ .box { color: #ffffff !important; } .ui.inverted.slider.checkbox input:focus:checked ~ label:before, .ui.inverted.slider.checkbox input:focus:checked ~ .box:before { background-color: rgba(255, 255, 255, 0.8) !important; } /* Toggle Switch */ .ui.inverted.toggle.checkbox label:before, .ui.inverted.toggle.checkbox .box:before { background-color: rgba(255, 255, 255, 0.9) !important; } /* Toggle Hover */ .ui.inverted.toggle.checkbox label:hover::before, .ui.inverted.toggle.checkbox .box:hover::before { background: #ffffff !important; } /* Toggle Active */ .ui.inverted.toggle.checkbox input:checked ~ label, .ui.inverted.toggle.checkbox input:checked ~ .box { color: #ffffff !important; } .ui.inverted.toggle.checkbox input:checked ~ label:before, .ui.inverted.toggle.checkbox input:checked ~ .box:before { background-color: #6EBE49 !important; } /* Toggle Active Focus */ .ui.inverted.toggle.checkbox input:focus:checked ~ label, .ui.inverted.toggle.checkbox input:focus:checked ~ .box { color: #ffffff !important; } .ui.inverted.toggle.checkbox input:focus:checked ~ label:before, .ui.inverted.toggle.checkbox input:focus:checked ~ .box:before { background-color: #6EBE49 !important; } /*-------------------- Size ---------------------*/ .ui.mini.checkbox { font-size: 0.78571429em; } .ui.tiny.checkbox { font-size: 0.85714286em; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Checkbox'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); } /* Checkmark */ .ui.checkbox label:after, .ui.checkbox .box:after, .ui.checkbox .box:after { font-family: 'Checkbox'; } /* Checked */ .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after, .ui.checkbox input:checked ~ .box:after { content: '\e800'; } /* Indeterminate */ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after { font-size: 12px; content: '\e801'; } /* UTF Reference .check:before { content: '\e800'; } .dash:before { content: '\e801'; } .plus:before { content: '\e802'; } */ /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Checkbox'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); } /* Checkmark */ .ui.checkbox label:after, .ui.checkbox .box:after, .ui.checkbox .box:after { font-family: 'Checkbox'; } /* Checked */ .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after, .ui.checkbox input:checked ~ .box:after { content: '\e800'; } .ui.checkbox input:checked ~ .box, .ui.checkbox input:checked ~ label, .ui.checkbox input:checked ~ .box { color: #000000 !important; } /* Indeterminate */ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after { font-size: 12px; content: '\e801'; } /* Toggle Hover */ .ui.toggle.checkbox .box:hover, .ui.toggle.checkbox label:hover, .ui.toggle.checkbox .box:hover { color: #000000; } /* UTF Reference .check:before { content: '\e800'; } .dash:before { content: '\e801'; } .plus:before { content: '\e802'; } */ /*! * # Fomantic-UI - Dimmer * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Intensity */ /* Packaged Theme */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Intensity */ /* Site Theme */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Intensity */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dimmer *******************************/ .dimmable:not(body) { position: relative; } .ui.dimmer { display: none; position: absolute; top: 0 !important; left: 0 !important; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 40px; background-color: rgba(0, 0, 0, 0.85); opacity: 0; line-height: 1; animation-fill-mode: both; animation-duration: 0.5s; transition: background-color 0.5s linear; flex-direction: column; align-items: center; justify-content: center; user-select: none; will-change: opacity; z-index: 1000; } /* Dimmer Content */ .ui.dimmer > .content { user-select: text; color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer:not(.page) { border-radius: inherit; } /* Scrollbars */ .ui.dimmer:not(.inverted)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* States *******************************/ /* Animating */ .animating.dimmable:not(body), .dimmed.dimmable:not(body) { overflow: hidden; } /* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer { display: flex; opacity: 1; } /******************************* Variations *******************************/ /*-------------- Page ---------------*/ .ui.page.dimmer { position: fixed; transform-style: ''; perspective: 2000px; transform-origin: center center; } body.animating.in.dimmable, body.dimmed.dimmable { overflow: hidden; } body.dimmable > .dimmer { position: fixed; } /******************************* Theme Overrides *******************************/ /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Dropdown * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dropdown *******************************/ /*------------------- Element --------------------*/ /*------------------- Content --------------------*/ /* Icon */ /* Current Text */ /* Menu */ /* Text */ /* Menu Item */ /* Sub Menu */ /* Menu Header */ /* Menu Divider */ /* Menu Input */ /* Menu Image */ /* Item Sub-Element */ /* Sub-Menu Dropdown Icon */ /* Description */ /* Message */ /* Floated Content */ /*------------------- Types --------------------*/ /*------------ Selection --------------*/ /* */ /* Responsive */ /* Derived */ /* 1px / em size */ /* Hover */ /* Focus */ /* Visible */ /* Visible Hover */ /*-------------- Search --------------*/ /* Search Selection */ /* Inline */ /*-------------- Multiple --------------*/ /* Split Actual Padding Between Child and Parent (allows for label spacing) */ /* Child Elements */ /* Dropdown Icon */ /* Selection Label */ /* Logic adopted from label.less */ /*------------------- States --------------------*/ /* Hovered */ /* Default Text */ /* Loading */ /* Active Menu Item */ /* Selected */ /* Clearable */ /*------------------- Variations --------------------*/ /* Scrolling */ /* 0 / em size */ /* Upward */ /* Flyout Direction */ /* Left */ /* Simple */ /* Floating */ /* Pointing */ /* Pointing Upward */ /*-------------- Inverted ---------------*/ /* General rules and basic dropdowns */ /* Selection */ /* Multiple */ /*@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.06); @invertedLabelBackgroundImage: none; @invertedLabelColor: rgba(255, 255, 255, 0.6); @invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0.16) inset; @invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.12); @invertedLabelHoverBackgroundImage: none; @invertedLabelHoverTextColor: rgba(255, 255, 255, 0.7);*/ /* Site Theme */ /******************************* Dropdown *******************************/ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dropdown *******************************/ .ui.dropdown { cursor: pointer; position: relative; display: inline-block; outline: none; text-align: left; transition: box-shadow 0.1s ease, width 0.1s ease; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /******************************* Content *******************************/ /*-------------- Menu ---------------*/ .ui.dropdown .menu { cursor: auto; position: absolute; display: none; outline: none; top: 100%; min-width: max-content; margin: 0; padding: 0 0; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; transition: opacity 0.1s ease; z-index: 11; will-change: transform, opacity; } .ui.dropdown .menu > * { white-space: nowrap; } /*-------------- Hidden Input ---------------*/ .ui.dropdown > input:not(.search):first-child, .ui.dropdown > select { display: none !important; } /*-------------- Dropdown Icon ---------------*/ .ui.dropdown:not(.labeled) > .dropdown.icon { position: relative; width: auto; font-size: 0.85714286em; margin: 0 0 0 1em; } .ui.dropdown .menu > .item .dropdown.icon { width: auto; float: right; margin: 0em 0 0 1em; } .ui.dropdown .menu > .item .dropdown.icon + .text { margin-right: 1em; } /*-------------- Text ---------------*/ .ui.dropdown > .text { display: inline-block; transition: none; } /*-------------- Menu Item ---------------*/ .ui.dropdown .menu > .item { position: relative; cursor: pointer; display: block; border: none; height: auto; min-height: 2.57142857rem; text-align: left; border-top: none; line-height: 1em; font-size: 1rem; color: #000000; padding: 0.78571429rem 1.14285714rem !important; text-transform: none; font-weight: normal; box-shadow: none; -webkit-touch-callout: none; } .ui.dropdown .menu > .item:first-child { border-top-width: 0; } /*-------------- Floated Content ---------------*/ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"] { float: right !important; margin-right: 0 !important; margin-left: 1em !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"] { float: left !important; margin-left: 0 !important; margin-right: 1em !important; } .ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated { margin-top: 0em; } /*-------------- Menu Divider ---------------*/ .ui.dropdown .menu > .header { margin: 1rem 0 0.75rem; padding: 0 1.14285714rem; font-weight: bold; text-transform: uppercase; } .ui.dropdown .menu > .header:not(.ui) { color: rgba(0, 0, 0, 0.85); font-size: 0.78571429em; } .ui.dropdown .menu > .divider { border-top: 1px solid rgba(34, 36, 38, 0.1); height: 0; margin: 0.5em 0; } .ui.dropdown .menu > .horizontal.divider { border-top: none; } .ui.dropdown.dropdown .menu > .input { width: auto; display: flex; margin: 1.14285714rem 0.78571429rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input { margin-top: 0; } .ui.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 1em; } .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label { padding-top: 0.5em; padding-bottom: 0.5em; } /*----------------- Item Description -------------------*/ .ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description { float: right; margin: 0 0 0 1em; color: rgba(0, 0, 0, 0.4); } /*----------------- Message -------------------*/ .ui.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; font-weight: normal; } .ui.dropdown .menu > .message:not(.ui) { color: rgba(0, 0, 0, 0.4); } /*-------------- Sub Menu ---------------*/ .ui.dropdown .menu .menu { top: 0; left: 100%; right: auto; margin: 0 0 0 -0.5em !important; border-radius: 0.28571429rem !important; z-index: 21 !important; } /* Hide Arrow */ .ui.dropdown .menu .menu:after { display: none; } /*-------------- Sub Elements ---------------*/ /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image { margin-top: 0em; } .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-top: 0em; } .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-left: 0; float: none; margin-right: 0.78571429rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image:not(.icon), .ui.dropdown .menu > .item > .image:not(.icon), .ui.dropdown .menu > .item > img { display: inline-block; vertical-align: top; width: auto; margin-top: -0.5em; margin-bottom: -0.5em; max-height: 2em; } /******************************* Coupling *******************************/ /*-------------- Menu ---------------*/ /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before { display: none; } /* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item { border-left: none; } /* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.menu .right.dropdown.item .menu, .ui.buttons > .ui.dropdown:last-child .menu { left: auto; right: 0; } /******************************* Types *******************************/ select.ui.dropdown { height: 38px; padding: 0.5em; border: 1px solid rgba(34, 36, 38, 0.15); visibility: visible; } /* Clearable Selection */ .ui.dropdown > .remove.icon { cursor: pointer; font-size: 0.85714286em; margin: -0.78571429em; padding: 0.91666667em; right: 3em; top: 0.78571429em; position: absolute; opacity: 0.6; z-index: 3; } .ui.clearable.dropdown .text, .ui.clearable.dropdown a:last-of-type { margin-right: 1.5em; } .ui.dropdown select.noselection ~ .remove.icon, .ui.dropdown input[value=''] ~ .remove.icon, .ui.dropdown input:not([value]) ~ .remove.icon, .ui.dropdown.loading > .remove.icon { display: none; } /******************************* States *******************************/ /*-------------------- Active ----------------------*/ /* Menu Item Active */ .ui.dropdown .menu .active.item { background: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); box-shadow: none; z-index: 12; } /*-------------------- Hover ----------------------*/ /* Menu Item Hover */ .ui.dropdown .menu > .item:hover { background: #6EBE49; color: #FFFFFF; z-index: 13; } /*-------------------- Default Text ----------------------*/ .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text { color: #bfbfbf; } .ui.dropdown:not(.button) > input:focus ~ .default.text, .ui.default.dropdown:not(.button) > input:focus ~ .text { color: #737373; } /*-------------------- Keyboard Select ----------------------*/ /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------------- Search Filtered ----------------------*/ /* Filtered Item */ .ui.dropdown > .filtered.text { visibility: hidden; } .ui.dropdown .filtered.item { display: none !important; } /******************************* Variations *******************************/ /*-------------- Direction ---------------*/ /* Flyout Direction */ .ui.dropdown .menu { left: 0; } /* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu { left: 100% !important; right: auto !important; border-radius: 0.28571429rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0 0 0; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0 0 0; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; margin-right: 0; } /*-------------- Columnar ---------------*/ .ui.dropdown[class*="two column"] > .menu > .item { display: inline-block; width: 50%; } .ui.dropdown[class*="three column"] > .menu > .item { display: inline-block; width: 33%; } .ui.dropdown[class*="four column"] > .menu > .item { display: inline-block; width: 25%; } .ui.dropdown[class*="five column"] > .menu > .item { display: inline-block; width: 20%; } /*-------------------- Sizes ---------------------*/ .ui.dropdown, .ui.dropdown .menu > .item { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.dropdown > .dropdown.icon { width: auto; } .ui.dropdown > .dropdown.icon:before { content: '\f0d7'; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before { content: "\f0d9" /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da" /*rtl:"\f0d9"*/; } /* Icons for Reference .dropdown.down.icon { content: "\f0d7"; } .dropdown.up.icon { content: "\f0d8"; } .dropdown.left.icon { content: "\f0d9"; } .dropdown.icon.icon { content: "\f0da"; } */ /******************************* Theme Overrides *******************************/ .ui.selection.dropdown > .dropdown.icon { color: #6EBE49; } /*! * # Fomantic-UI - Modal * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Aligned */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /*------------------- Inverted --------------------*/ /* Packaged Theme */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Aligned */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /*------------------- Inverted --------------------*/ /* Site Theme */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Aligned */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /*------------------- Inverted --------------------*/ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Modal *******************************/ .ui.modal { position: absolute; display: none; z-index: 1001; text-align: left; background: #FFFFFF; border: none; box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); transform-origin: 50% 25%; flex: 0 0 auto; border-radius: 0.28571429rem; user-select: text; will-change: top, left, margin, transform, opacity; } .ui.modal > :first-child:not(.icon):not(.dimmer), .ui.modal > .icon:first-child + *, .ui.modal > .dimmer:first-child + *:not(.icon), .ui.modal > .dimmer:first-child + .icon + * { border-top-left-radius: 0.28571429rem; border-top-right-radius: 0.28571429rem; } .ui.modal > :last-child { border-bottom-left-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } /******************************* Content *******************************/ /*-------------- Close ---------------*/ .ui.modal > .close { cursor: pointer; position: absolute; top: -2.5rem; right: -2.5rem; z-index: 1; opacity: 0.8; font-size: 1.25em; color: #FFFFFF; width: 2.25rem; height: 2.25rem; padding: 0.625rem 0 0 0; } .ui.modal > .close:hover { opacity: 1; } /*-------------- Header ---------------*/ .ui.modal > .header { display: block; font-family: Helvetica, Arial, sans-serif; background: #FFFFFF; margin: 0; padding: 1.25rem 1.5rem; box-shadow: none; color: rgba(0, 0, 0, 0.85); border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.modal > .header:not(.ui) { font-size: 1.42857143rem; line-height: 1.28571429em; font-weight: bold; } /*-------------- Content ---------------*/ .ui.modal > .content { display: block; width: 100%; font-size: 1em; line-height: 1.4; padding: 1.5rem; background: #FFFFFF; } .ui.modal > .image.content { display: flex; flex-direction: row; } /* Image */ .ui.modal > .content > .image { display: block; flex: 0 1 auto; width: ''; align-self: start; max-width: 100%; } .ui.modal > [class*="top aligned"] { align-self: start; } .ui.modal > [class*="middle aligned"] { align-self: center; } .ui.modal > [class*="stretched"] { align-self: stretch; } /* Description */ .ui.modal > .content > .description { display: block; flex: 1 0 auto; min-width: 0; align-self: start; } .ui.modal > .content > .icon + .description, .ui.modal > .content > .image + .description { flex: 0 1 auto; min-width: ''; width: auto; padding-left: 2em; } /*rtl:ignore*/ .ui.modal > .content > .image > i.icon { margin: 0; opacity: 1; width: auto; line-height: 1; font-size: 8rem; } /*-------------- Actions ---------------*/ .ui.modal > .actions { background: #F9FAFB; padding: 1rem 1rem; border-top: 1px solid rgba(34, 36, 38, 0.15); text-align: right; } .ui.modal .actions > .button { margin-left: 0.75em; } .ui.basic.modal > .actions { border-top: none; } /*------------------- Responsive --------------------*/ /* Modal Width */ @media only screen and (max-width: 767.98px) { .ui.modal:not(.fullscreen) { width: 95%; margin: 0 0 0 0; } } @media only screen and (min-width: 768px) { .ui.modal:not(.fullscreen) { width: 88%; margin: 0 0 0 0; } } @media only screen and (min-width: 992px) { .ui.modal:not(.fullscreen) { width: 850px; margin: 0 0 0 0; } } @media only screen and (min-width: 1200px) { .ui.modal:not(.fullscreen) { width: 900px; margin: 0 0 0 0; } } @media only screen and (min-width: 1920px) { .ui.modal:not(.fullscreen) { width: 950px; margin: 0 0 0 0; } } /* Tablet and Mobile */ @media only screen and (max-width: 991.98px) { .ui.modal > .header { padding-right: 2.25rem; } .ui.modal > .close { top: 1.0535rem; right: 1rem; color: #000000; } } /* Mobile */ @media only screen and (max-width: 767.98px) { .ui.modal > .header { padding: 0.75rem 1rem !important; padding-right: 2.25rem !important; } .ui.overlay.fullscreen.modal > .content.content.content { min-height: calc(100vh - 8.1rem); } .ui.overlay.fullscreen.modal > .scrolling.content.content.content { max-height: calc(100vh - 8.1rem); } .ui.modal > .content { display: block; padding: 1rem !important; } .ui.modal > .close { top: 0.5rem !important; right: 0.5rem !important; } /*rtl:ignore*/ .ui.modal .image.content { flex-direction: column; } .ui.modal .content > .image { display: block; max-width: 100%; margin: 0 auto !important; text-align: center; padding: 0 0 1rem !important; } .ui.modal > .content > .image > i.icon { font-size: 5rem; text-align: center; } /*rtl:ignore*/ .ui.modal .content > .description { display: block; width: 100% !important; margin: 0 !important; padding: 1rem 0 !important; box-shadow: none; } /* Let Buttons Stack */ .ui.modal > .actions { padding: 1rem 1rem 0rem !important; } .ui.modal .actions > .buttons, .ui.modal .actions > .button { margin-bottom: 1rem; } } /*-------------- Coupling ---------------*/ .ui.inverted.dimmer > .ui.modal { box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); } /******************************* Types *******************************/ /******************************* States *******************************/ .ui.loading.modal { display: block; visibility: hidden; z-index: -1; } .ui.active.modal { display: block; } /******************************* Variations *******************************/ /*-------------- Size ---------------*/ .ui.modal { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Popup * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Packaged Theme */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0; right: 0; /* Fixes content being squished when inline (moz only) */ min-width: min-content; z-index: 1900; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: 250px; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: #000000; border-radius: 0.28571429rem; box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); } .ui.popup > .header { padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 1.14285714em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content { padding-top: 0.5em; } .ui.popup:before { position: absolute; content: ''; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; transform: rotate(45deg); z-index: 1901; box-shadow: 1px 1px 0 0 #bababc; } /******************************* Types *******************************/ /*-------------- Tooltip ---------------*/ /* Content */ [data-tooltip] { position: relative; } /* Arrow */ [data-tooltip]:before { pointer-events: none; position: absolute; content: ''; font-size: 1rem; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; transform: rotate(45deg); z-index: 1901; box-shadow: 1px 1px 0 0 #bababc; } /* Popup */ [data-tooltip]:after { pointer-events: none; content: attr(data-tooltip); position: absolute; text-transform: none; text-align: left; white-space: nowrap; font-size: 1rem; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: none; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: #000000; border-radius: 0.28571429rem; box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); z-index: 1900; } /* Default Position (Top Center) */ [data-tooltip]:not([data-position]):before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } [data-tooltip]:not([data-position]):after { left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 0.5em; } /* Animation */ [data-tooltip]:before, [data-tooltip]:after { pointer-events: none; visibility: hidden; opacity: 0; transition: transform 0.1s ease, opacity 0.1s ease; } [data-tooltip]:before { transform: rotate(45deg) scale(0) !important; transform-origin: center top; } [data-tooltip]:after { transform-origin: center bottom; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; pointer-events: auto; opacity: 1; } [data-tooltip]:hover:before { transform: rotate(45deg) scale(1) !important; } /* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after { transform: translateX(-50%) scale(0) !important; } [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after { transform: translateX(-50%) scale(1) !important; } [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after { transform: translateY(-50%) scale(0) !important; } [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after { transform: translateY(-50%) scale(1) !important; } [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after { transform: scale(0) !important; } [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after { transform: scale(1) !important; } [data-tooltip][data-variation~="fixed"]:after { white-space: normal; width: 250px; } [data-tooltip][data-variation*="wide fixed"]:after { width: 350px; } [data-tooltip][data-variation*="very wide fixed"]:after { width: 550px; } @media only screen and (max-width: 767.98px) { [data-tooltip][data-variation~="fixed"]:after { width: 250px; } } /*-------------- Inverted ---------------*/ /* Arrow */ [data-tooltip][data-inverted]:before { box-shadow: none !important; } /* Arrow Position */ [data-tooltip][data-inverted]:before { background: #1B1C1D; } /* Popup */ [data-tooltip][data-inverted]:after { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } [data-tooltip][data-inverted]:after .header { background: none; color: #FFFFFF; } /*-------------- Position ---------------*/ [data-position~="top"][data-tooltip]:before { background: #FFFFFF; } /* Top Center */ [data-position="top center"][data-tooltip]:after { top: auto; right: auto; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 0.5em; } [data-position="top center"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Left */ [data-position="top left"][data-tooltip]:after { top: auto; right: auto; left: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top left"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Right */ [data-position="top right"][data-tooltip]:after { top: auto; left: auto; right: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top right"][data-tooltip]:before { top: auto; left: auto; bottom: 100%; right: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } [data-position~="bottom"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px -1px 0 0 #bababc; } /* Bottom Center */ [data-position="bottom center"][data-tooltip]:after { bottom: auto; right: auto; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.5em; } [data-position="bottom center"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Left */ [data-position="bottom left"][data-tooltip]:after { left: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom left"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 1em; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Right */ [data-position="bottom right"][data-tooltip]:after { right: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom right"][data-tooltip]:before { bottom: auto; left: auto; top: 100%; right: 1em; margin-left: -0.14285714rem; margin-top: 0.07142857rem; } /* Left Center */ [data-position="left center"][data-tooltip]:after { right: 100%; top: 50%; margin-right: 0.5em; transform: translateY(-50%); } [data-position="left center"][data-tooltip]:before { right: 100%; top: 50%; margin-top: -0.14285714rem; margin-right: -0.07142857rem; background: #FFFFFF; box-shadow: 1px -1px 0 0 #bababc; } /* Right Center */ [data-position="right center"][data-tooltip]:after { left: 100%; top: 50%; margin-left: 0.5em; transform: translateY(-50%); } [data-position="right center"][data-tooltip]:before { left: 100%; top: 50%; margin-top: -0.07142857rem; margin-left: 0.14285714rem; background: #FFFFFF; box-shadow: -1px 1px 0 0 #bababc; } /* Inverted Arrow Color */ [data-inverted][data-position~="bottom"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px -1px 0 0 #bababc; } [data-inverted][data-position="left center"][data-tooltip]:before { background: #1B1C1D; box-shadow: 1px -1px 0 0 #bababc; } [data-inverted][data-position="right center"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px 1px 0 0 #bababc; } [data-inverted][data-position~="top"][data-tooltip]:before { background: #1B1C1D; } [data-position~="bottom"][data-tooltip]:before { transform-origin: center bottom; } [data-position~="bottom"][data-tooltip]:after { transform-origin: center top; } [data-position="left center"][data-tooltip]:before { transform-origin: top center; } [data-position="left center"][data-tooltip]:after { transform-origin: right center; } [data-position="right center"][data-tooltip]:before { transform-origin: right center; } [data-position="right center"][data-tooltip]:after { transform-origin: left center; } /*-------------- Basic ---------------*/ [data-tooltip][data-variation~="basic"]:before { display: none; } /*-------------- Spacing ---------------*/ .ui.popup { margin: 0; } /* Extending from Top */ .ui.top.popup { margin: 0 0 0.71428571em; } .ui.top.left.popup { transform-origin: left bottom; } .ui.top.center.popup { transform-origin: center bottom; } .ui.top.right.popup { transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup { margin: 0 0.71428571em 0 0; transform-origin: right 50%; } .ui.right.center.popup { margin: 0 0 0 0.71428571em; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup { margin: 0.71428571em 0 0; } .ui.bottom.left.popup { transform-origin: left top; } .ui.bottom.center.popup { transform-origin: center top; } .ui.bottom.right.popup { transform-origin: right top; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: -0.30714286em; top: -0.30714286em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 0 0 #bababc; } .ui.bottom.left.popup { margin-left: 0; } /*rtl:rename*/ .ui.bottom.left.popup:before { top: -0.30714286em; left: 1em; right: auto; bottom: auto; margin-left: 0; box-shadow: -1px -1px 0 0 #bababc; } .ui.bottom.right.popup { margin-right: 0; } /*rtl:rename*/ .ui.bottom.right.popup:before { top: -0.30714286em; right: 1em; bottom: auto; left: auto; margin-left: 0; box-shadow: -1px -1px 0 0 #bababc; } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: -0.30714286em; left: 50%; margin-left: -0.30714286em; } .ui.top.left.popup { margin-left: 0; } /*rtl:rename*/ .ui.top.left.popup:before { bottom: -0.30714286em; left: 1em; top: auto; right: auto; margin-left: 0; } .ui.top.right.popup { margin-right: 0; } /*rtl:rename*/ .ui.top.right.popup:before { bottom: -0.30714286em; right: 1em; top: auto; left: auto; margin-left: 0; } /*--- Left Center ---*/ /*rtl:rename*/ .ui.left.center.popup:before { top: 50%; right: -0.30714286em; bottom: auto; left: auto; margin-top: -0.30714286em; box-shadow: 1px -1px 0 0 #bababc; } /*--- Right Center ---*/ /*rtl:rename*/ .ui.right.center.popup:before { top: 50%; left: -0.30714286em; bottom: auto; right: auto; margin-top: -0.30714286em; box-shadow: -1px 1px 0 0 #bababc; } .ui.right.center.popup:before, .ui.left.center.popup:before { background: #FFFFFF; } /* Arrow Color By Location */ .ui.bottom.popup:before { background: #FFFFFF; } .ui.top.popup:before { background: #FFFFFF; } /* Inverted Arrow Color */ .ui.inverted.bottom.popup:before { background: #1B1C1D; } .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before { background: #1B1C1D; } .ui.inverted.top.popup:before { background: #1B1C1D; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) { width: calc(100% + 1.75rem); margin: -0.7rem -0.875rem; } /******************************* States *******************************/ .ui.loading.popup { display: block; visibility: hidden; z-index: -1; } .ui.animating.popup, .ui.visible.popup { display: block; } .ui.visible.popup { transform: translateZ(0); backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } .ui.fixed.popup { width: 250px; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: 350px; } .ui.wide.popup.fixed { width: 350px; } .ui[class*="very wide"].popup { max-width: 550px; } .ui[class*="very wide"].popup.fixed { width: 550px; } @media only screen and (max-width: 767.98px) { .ui.wide.popup, .ui[class*="very wide"].popup { max-width: 250px; } .ui.wide.popup.fixed, .ui[class*="very wide"].popup.fixed { width: 250px; } } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } .ui.inverted.popup .header { background-color: none; color: #FFFFFF; } .ui.inverted.popup:before { background-color: #1B1C1D; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.popup { font-size: 1rem; } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Search * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Search *******************************/ /* Search Prompt */ /* Mobile */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Packaged Theme */ /******************************* Search *******************************/ /* Search Prompt */ /* Mobile */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Search *******************************/ .ui.search { position: relative; } .ui.search > .prompt { margin: 0; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-shadow: none; font-style: normal; font-weight: normal; line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #000000; box-shadow: 0 0 0 0 transparent inset; transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; } .ui.search .prompt { border-radius: 500rem; } /*-------------- Icon ---------------*/ .ui.search .prompt ~ .search.icon { cursor: pointer; } /*-------------- Results ---------------*/ .ui.search > .results { display: none; position: absolute; top: 100%; left: 0; transform-origin: center top; white-space: normal; text-align: left; text-transform: none; background: #FFFFFF; margin-top: 0.5em; width: 18em; border-radius: 0.28571429rem; box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); border: 1px solid #D4D4D5; z-index: 998; } .ui.search > .results > :first-child { border-radius: 0.28571429rem 0.28571429rem 0 0; } .ui.search > .results > :last-child { border-radius: 0 0 0.28571429rem 0.28571429rem; } /*-------------- Result ---------------*/ .ui.search > .results .result { cursor: pointer; display: block; overflow: hidden; font-size: 1em; padding: 0.85714286em 1.14285714em; color: #000000; line-height: 1.33; border-bottom: 1px solid rgba(34, 36, 38, 0.1); } .ui.search > .results .result:last-child { border-bottom: none !important; } /* Image */ .ui.search > .results .result .image { float: right; overflow: hidden; background: none; width: 5em; height: 3em; border-radius: 0.25em; } .ui.search > .results .result .image img { display: block; width: auto; height: 100%; } /*-------------- Info ---------------*/ .ui.search > .results .result .image + .content { margin: 0 6em 0 0; } .ui.search > .results .result .title { margin: -0.14285714em 0 0; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 1em; color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result .description { margin-top: 0; font-size: 0.92857143em; color: rgba(0, 0, 0, 0.4); } .ui.search > .results .result .price { float: right; color: #21BA45; } /*-------------- Message ---------------*/ .ui.search > .results > .message { padding: 1em 1em; } .ui.search > .results > .message .header { font-family: Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: bold; color: #000000; } .ui.search > .results > .message .description { margin-top: 0.25rem; font-size: 1em; color: #000000; } /* View All Results */ .ui.search > .results > .action { display: block; border-top: none; background: #F3F4F5; padding: 0.92857143em 1em; color: #000000; font-weight: bold; text-align: center; } /******************************* States *******************************/ /*-------------------- Focus ---------------------*/ .ui.search > .prompt:focus { border-color: rgba(34, 36, 38, 0.35); background: #FFFFFF; color: rgba(0, 0, 0, 0.95); } /*-------------- Hover ---------------*/ .ui.search > .results .result:hover, .ui.category.search > .results .category .result:hover { background: #F9FAFB; } .ui.search .action:hover:not(div) { background: #E0E0E0; } /*-------------- Active ---------------*/ .ui.search > .results .result.active, .ui.category.search > .results .category .result.active { position: relative; border-left-color: rgba(34, 36, 38, 0.1); background: #F3F4F5; box-shadow: none; } .ui.search > .results .result.active .title { color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result.active .description { color: rgba(0, 0, 0, 0.85); } /******************************* Types *******************************/ /******************************* Variations *******************************/ /*-------------- Fluid ---------------*/ /*-------------- Sizes ---------------*/ .ui.search { font-size: 1em; } /*-------------- Mobile ---------------*/ @media only screen and (max-width: 767.98px) { .ui.search .results { max-width: calc(100vw - 2rem); } } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Sidebar * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Packaged Theme */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Site Theme */ .ui.sidebar { background-color: #FFFFFF; } /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Sidebar *******************************/ /* Sidebar Menu */ .ui.sidebar { position: fixed; top: 0; left: 0; backface-visibility: hidden; transition: none; will-change: transform; transform: translate3d(0, 0, 0); visibility: hidden; -webkit-overflow-scrolling: touch; height: 100% !important; max-height: 100%; border-radius: 0 !important; margin: 0 !important; overflow-y: auto !important; z-index: 102; } /* GPU Layers for Child Elements */ .ui.sidebar > * { backface-visibility: hidden; } /*-------------- Direction ---------------*/ .ui.left.sidebar { right: auto; left: 0; transform: translate3d(-100%, 0, 0); } .ui.right.sidebar { right: 0 !important; left: auto !important; transform: translate3d(100%, 0, 0); } .ui.top.sidebar, .ui.bottom.sidebar { width: 100% !important; height: auto !important; } .ui.top.sidebar { top: 0 !important; bottom: auto !important; transform: translate3d(0, -100%, 0); } .ui.bottom.sidebar { top: auto !important; bottom: 0 !important; transform: translate3d(0, 100%, 0); } /*-------------- Pushable ---------------*/ .pushable { height: 100%; overflow-x: hidden; padding: 0 !important; } /* Whole Page */ body.pushable { background: #545454; } body.pushable.dimmed { background: inherit; } /* Page Context */ .pushable:not(body) { transform: translate3d(0, 0, 0); } .pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, .pushable:not(body) > .pusher:after { position: absolute; } /*-------------- Fixed ---------------*/ .pushable > .fixed { position: fixed; backface-visibility: hidden; transition: transform 500ms ease; will-change: transform; z-index: 101; } /*-------------- Page ---------------*/ .pushable > .pusher { position: relative; backface-visibility: hidden; overflow: hidden; min-height: 100%; transition: transform 500ms ease; z-index: 2; /* Pusher should inherit background from context */ background: inherit; } body.pushable > .pusher { background: #F5F8FA; } /*-------------- Dimmer ---------------*/ .pushable > .pusher:after { position: fixed; top: 0; right: 0; content: ''; background-color: rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; transition: opacity 500ms; will-change: opacity; z-index: 1000; } /*-------------- Coupling ---------------*/ .ui.sidebar.menu .item { border-radius: 0 !important; } /******************************* States *******************************/ /*-------------- Dimmed ---------------*/ .pushable > .pusher.dimmed:after { width: 100% !important; height: 100% !important; opacity: 1 !important; } /*-------------- Animating ---------------*/ .ui.animating.sidebar { visibility: visible; } /*-------------- Visible ---------------*/ .ui.visible.sidebar { visibility: visible; transform: translate3d(0, 0, 0); } /* Shadow Direction */ .ui.left.visible.sidebar, .ui.right.visible.sidebar { box-shadow: 0 0 20px rgba(34, 36, 38, 0.15); } .ui.top.visible.sidebar, .ui.bottom.visible.sidebar { box-shadow: 0 0 20px rgba(34, 36, 38, 0.15); } /* Visible On Load */ .ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher { transform: translate3d(260px, 0, 0); } .ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher { transform: translate3d(-260px, 0, 0); } .ui.visible.top.sidebar ~ .fixed, .ui.visible.top.sidebar ~ .pusher { transform: translate3d(0, 36px, 0); } .ui.visible.bottom.sidebar ~ .fixed, .ui.visible.bottom.sidebar ~ .pusher { transform: translate3d(0, -36px, 0); } /* opposite sides visible forces content overlay */ .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { transform: translate3d(0, 0, 0); } /*-------------- iOS ---------------*/ /******************************* Variations *******************************/ /*-------------- Width ---------------*/ /* Left / Right */ .ui.thin.left.sidebar, .ui.thin.right.sidebar { width: 150px; } .ui[class*="very thin"].left.sidebar, .ui[class*="very thin"].right.sidebar { width: 60px; } .ui.left.sidebar, .ui.right.sidebar { width: 260px; } .ui.wide.left.sidebar, .ui.wide.right.sidebar { width: 350px; } .ui[class*="very wide"].left.sidebar, .ui[class*="very wide"].right.sidebar { width: 475px; } /* Left Visible */ .ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher { transform: translate3d(150px, 0, 0); } .ui.visible[class*="very thin"].left.sidebar ~ .fixed, .ui.visible[class*="very thin"].left.sidebar ~ .pusher { transform: translate3d(60px, 0, 0); } .ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher { transform: translate3d(350px, 0, 0); } .ui.visible[class*="very wide"].left.sidebar ~ .fixed, .ui.visible[class*="very wide"].left.sidebar ~ .pusher { transform: translate3d(475px, 0, 0); } /* Right Visible */ .ui.visible.thin.right.sidebar ~ .fixed, .ui.visible.thin.right.sidebar ~ .pusher { transform: translate3d(-150px, 0, 0); } .ui.visible[class*="very thin"].right.sidebar ~ .fixed, .ui.visible[class*="very thin"].right.sidebar ~ .pusher { transform: translate3d(-60px, 0, 0); } .ui.visible.wide.right.sidebar ~ .fixed, .ui.visible.wide.right.sidebar ~ .pusher { transform: translate3d(-350px, 0, 0); } .ui.visible[class*="very wide"].right.sidebar ~ .fixed, .ui.visible[class*="very wide"].right.sidebar ~ .pusher { transform: translate3d(-475px, 0, 0); } /******************************* Animations *******************************/ /*-------------- Overlay ---------------*/ /* Set-up */ .ui.overlay.sidebar { z-index: 102; } /* Initial */ .ui.left.overlay.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.overlay.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.overlay.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.overlay.sidebar { transform: translate3d(0%, 100%, 0); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar { transition: transform 500ms ease; } /* End - Sidebar */ .ui.visible.left.overlay.sidebar { transform: translate3d(0%, 0, 0); } .ui.visible.right.overlay.sidebar { transform: translate3d(0%, 0, 0); } .ui.visible.top.overlay.sidebar { transform: translate3d(0%, 0, 0); } .ui.visible.bottom.overlay.sidebar { transform: translate3d(0%, 0, 0); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher { transform: none !important; } /*-------------- Push ---------------*/ /* Initial */ .ui.push.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.push.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.push.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.push.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.push.sidebar { transform: translate3d(0%, 100%, 0); } /* End */ .ui.visible.push.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Uncover ---------------*/ /* Initial */ .ui.uncover.sidebar { transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar { transform: translate3d(0, 0, 0); transition: transform 500ms ease; } /*-------------- Slide Along ---------------*/ /* Initial */ .ui.slide.along.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.along.sidebar { transform: translate3d(-50%, 0, 0); } .ui.right.slide.along.sidebar { transform: translate3d(50%, 0, 0); } .ui.top.slide.along.sidebar { transform: translate3d(0, -50%, 0); } .ui.bottom.slide.along.sidebar { transform: translate3d(0%, 50%, 0); } /* Animation */ .ui.animating.slide.along.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Slide Out ---------------*/ /* Initial */ .ui.slide.out.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.out.sidebar { transform: translate3d(50%, 0, 0); } .ui.right.slide.out.sidebar { transform: translate3d(-50%, 0, 0); } .ui.top.slide.out.sidebar { transform: translate3d(0%, 50%, 0); } .ui.bottom.slide.out.sidebar { transform: translate3d(0%, -50%, 0); } /* Animation */ .ui.animating.slide.out.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Scale Down ---------------*/ /* Initial */ .ui.scale.down.sidebar { transition: transform 500ms ease; z-index: 102; } .ui.left.scale.down.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.scale.down.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.scale.down.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.scale.down.sidebar { transform: translate3d(0%, 100%, 0); } /* Pusher - Initial */ .ui.scale.down.left.sidebar ~ .pusher { transform-origin: 75% 50%; } .ui.scale.down.right.sidebar ~ .pusher { transform-origin: 25% 50%; } .ui.scale.down.top.sidebar ~ .pusher { transform-origin: 50% 75%; } .ui.scale.down.bottom.sidebar ~ .pusher { transform-origin: 50% 25%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar { transition: transform 500ms ease; } .ui.visible.scale.down.sidebar ~ .pusher, .ui.animating.scale.down.sidebar ~ .pusher { display: block !important; width: 100%; height: 100%; overflow: hidden !important; } /* End */ .ui.visible.scale.down.sidebar { transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher { transform: scale(0.75); } /******************************* Theme Overrides *******************************/ /*! * # Fomantic-UI - Transition * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Light Colored Text ---*/ /*--- Hovered Colored Text ---*/ /*--- Colored Border ---*/ /*--- Shadows ---*/ /* Inverted */ /* Box Shadows */ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*--- Tertiary ---*/ /*--- Bright ---*/ /******************************* States shared in Form-related components *******************************/ /* Form state*/ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /* * Asset Share Commons * * Copyright [2017] Adobe * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /******************************* Theme Variables *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Modal */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Loading */ /* Emojis */ /* Below is a condensed list of variables for easy updating of the theme */ /* Color Palette */ /* Custom Neutrals */ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Text */ /* Backgrounds */ /* Links */ /* Buttons */ /* must be a value to prevent variable recursion*/ /* Filters (Checkboxes,radio buttons, toggle, slider, dropdown, accordion colors)*/ /* Label */ /* Menu */ /* Message */ /* Resource Paths */ /* For source only. Modified in gulp for dist */ /*------------------- Seagate Colors --------------------*/ /*--- Primary Green ---*/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Transition *******************************/ /* Packaged Theme */ /******************************* Transition *******************************/ /* Site Theme */ /*------------------------- Central Color Map -------------------------*/ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /* Site Theme */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Transitions *******************************/ .transition { animation-iteration-count: 1; animation-duration: 300ms; animation-timing-function: ease; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { backface-visibility: hidden; visibility: visible !important; } /* Hidden */ .hidden.transition { display: none; visibility: hidden; } /* Visible */ .visible.transition { display: block !important; visibility: visible !important; /* backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;*/ } /******************************* Variations *******************************/ /******************************* Transitions *******************************/ /* Some transitions adapted from Animate CSS https://github.com/daneden/animate.css Additional transitions adapted from Glide by Nick Pettit - https://github.com/nickpettit/glide */ /*-------------- Browse ---------------*/ .transition.browse { animation-duration: 500ms; } .transition.browse.in { animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { animation-name: browseOutLeft; } .transition.browse.right.out { animation-name: browseOutRight; } /* In */ @keyframes browseIn { 0% { transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @keyframes browseOutLeft { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { transform-origin: top center; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { animation-name: dropIn; } .drop.transition.out { animation-name: dropOut; } /* Drop */ @keyframes dropIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes dropOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { animation-name: fadeIn; } .transition[class*="fade up"].in { animation-name: fadeInUp; } .transition[class*="fade down"].in { animation-name: fadeInDown; } .transition[class*="fade left"].in { animation-name: fadeInLeft; } .transition[class*="fade right"].in { animation-name: fadeInRight; } .transition.fade.out { animation-name: fadeOut; } .transition[class*="fade up"].out { animation-name: fadeOutUp; } .transition[class*="fade down"].out { animation-name: fadeOutDown; } .transition[class*="fade left"].out { animation-name: fadeOutLeft; } .transition[class*="fade right"].out { animation-name: fadeOutRight; } /* In */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(-10%); } 100% { opacity: 1; transform: translateX(0%); } } /* Out */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(5%); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(-5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(5%); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { animation-duration: 600ms; } .horizontal.flip.transition.in { animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { animation-name: horizontalFlipOut; } .vertical.flip.transition.in { animation-name: verticalFlipIn; } .vertical.flip.transition.out { animation-name: verticalFlipOut; } /* In */ @keyframes horizontalFlipIn { 0% { transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @keyframes horizontalFlipOut { 0% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { animation-name: scaleIn; } .scale.transition.out { animation-name: scaleOut; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Out */ @keyframes scaleOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { animation-duration: 0.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { animation-name: flyIn; } .transition[class*="fly up"].in { animation-name: flyInUp; } .transition[class*="fly down"].in { animation-name: flyInDown; } .transition[class*="fly left"].in { animation-name: flyInLeft; } .transition[class*="fly right"].in { animation-name: flyInRight; } /* Outward */ .transition.fly.out { animation-name: flyOut; } .transition[class*="fly up"].out { animation-name: flyOutUp; } .transition[class*="fly down"].out { animation-name: flyOutDown; } .transition[class*="fly left"].out { animation-name: flyOutLeft; } .transition[class*="fly right"].out { animation-name: flyOutRight; } /* In */ @keyframes flyIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes flyInUp { 0% { opacity: 0; transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes flyInDown { 0% { opacity: 0; transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } @keyframes flyInRight { 0% { opacity: 0; transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } /* Out */ @keyframes flyOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOutUp { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @keyframes flyOutDown { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes flyOutRight { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { animation-name: slideInY; transform-origin: top center; } .transition[class*="slide up"].in { animation-name: slideInY; transform-origin: bottom center; } .transition[class*="slide left"].in { animation-name: slideInX; transform-origin: center right; } .transition[class*="slide right"].in { animation-name: slideInX; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { animation-name: slideOutY; transform-origin: top center; } .transition[class*="slide up"].out { animation-name: slideOutY; transform-origin: bottom center; } .transition[class*="slide left"].out { animation-name: slideOutX; transform-origin: center right; } .transition[class*="slide right"].out { animation-name: slideOutX; transform-origin: center left; } /* In */ @keyframes slideInY { 0% { opacity: 0; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } } @keyframes slideInX { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } /* Out */ @keyframes slideOutY { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } } @keyframes slideOutX { 0% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { animation-duration: 800ms; } .transition[class*="swing down"].in { animation-name: swingInX; transform-origin: top center; } .transition[class*="swing up"].in { animation-name: swingInX; transform-origin: bottom center; } .transition[class*="swing left"].in { animation-name: swingInY; transform-origin: center right; } .transition[class*="swing right"].in { animation-name: swingInY; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { animation-name: swingOutX; transform-origin: top center; } .transition[class*="swing up"].out { animation-name: swingOutX; transform-origin: bottom center; } .transition[class*="swing left"].out { animation-name: swingOutY; transform-origin: center right; } .transition[class*="swing right"].out { animation-name: swingOutY; transform-origin: center left; } /* In */ @keyframes swingInX { 0% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateX(15deg); } 80% { transform: perspective(1000px) rotateX(-7.5deg); } 100% { transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInY { 0% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateY(-17.5deg); } 80% { transform: perspective(1000px) rotateY(7.5deg); } 100% { transform: perspective(1000px) rotateY(0deg); } } /* Out */ @keyframes swingOutX { 0% { transform: perspective(1000px) rotateX(0deg); } 40% { transform: perspective(1000px) rotateX(-7.5deg); } 60% { transform: perspective(1000px) rotateX(17.5deg); } 80% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutY { 0% { transform: perspective(1000px) rotateY(0deg); } 40% { transform: perspective(1000px) rotateY(7.5deg); } 60% { transform: perspective(1000px) rotateY(-10deg); } 80% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /*-------------- Zoom ---------------*/ .transition.zoom.in { animation-name: zoomIn; } .transition.zoom.out { animation-name: zoomOut; } @keyframes zoomIn { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(0); } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { animation-duration: 750ms; animation-name: flash; } .shake.transition { animation-duration: 750ms; animation-name: shake; } .bounce.transition { animation-duration: 750ms; animation-name: bounce; } .tada.transition { animation-duration: 750ms; animation-name: tada; } .pulse.transition { animation-duration: 500ms; animation-name: pulse; } .jiggle.transition { animation-duration: 750ms; animation-name: jiggle; } .transition.glow { animation-duration: 2000ms; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .transition.glow { animation-name: glow; } /* Flash */ @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /* Bounce */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /* Tada */ @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } /* Pulse */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Jiggle */ @keyframes jiggle { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } /* Glow */ @keyframes glow { 0% { background-color: #FCFCFD; } 30% { background-color: #FFF6CD; } 100% { background-color: #FCFCFD; } }