diff options
Diffstat (limited to 'afb-client/bower_components/foundation-apps/dist/css/foundation-apps.css')
| -rwxr-xr-x | afb-client/bower_components/foundation-apps/dist/css/foundation-apps.css | 6146 |
1 files changed, 6146 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/dist/css/foundation-apps.css b/afb-client/bower_components/foundation-apps/dist/css/foundation-apps.css new file mode 100755 index 0000000..8e9b0c9 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/dist/css/foundation-apps.css @@ -0,0 +1,6146 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, canvas, progress, video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, kbd, pre, samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, input, optgroup, select, textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, html input[type="button"], input[type="reset"], input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + /* 2 */ + box-sizing: content-box; } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, th { + padding: 0; } + +meta.foundation-version { + font-family: "1.1.0"; } + +meta.foundation-mq { + font-family: "small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem"; } + +/* + GLOBAL + ------ + + Global styles and settings for Foundation for Apps are stored here. This file must always + be imported, no matter what. + + Includes: + - +*/ +html, body { + height: 100%; + font-size: 100%; } + +html { + box-sizing: border-box; } + +*, *:before, *:after { + box-sizing: inherit; } + +body { + background: #fff; + color: #222; + padding: 0; + margin: 0; + font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; + font-weight: normal; + font-style: normal; + line-height: 1; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +img { + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + display: inline-block; + vertical-align: middle; } + +a, [ui-sref], [zf-open], [zf-close], [zf-toggle] { + cursor: pointer; } + +#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { + max-width: none !important; } + +.padding { + padding: 1rem; } + +.iconic { + width: 1rem; + height: 1rem; + vertical-align: middle; } + a > .iconic { + margin-top: -2px; + margin-right: 0.25rem; } + a > .iconic * { + fill: #00558b; + stroke: #00558b; } + a > .iconic *.iconic-property-accent { + fill: #00558b; + stroke: #00558b; } + +.iconic * { + fill: #00558b; + stroke: #00558b; } + .iconic *.iconic-property-accent { + fill: #00558b; + stroke: #00558b; } + +.iconic-color-primary * { + fill: #00558b; + stroke: #00558b; } + .iconic-color-primary *.iconic-property-accent { + fill: #00558b; + stroke: #00558b; } + +.iconic-color-success * { + fill: #43AC6A; + stroke: #43AC6A; } + .iconic-color-success *.iconic-property-accent { + fill: #43AC6A; + stroke: #43AC6A; } + +.iconic-color-warning * { + fill: #F08A24; + stroke: #F08A24; } + .iconic-color-warning *.iconic-property-accent { + fill: #F08A24; + stroke: #F08A24; } + +.iconic-color-alert * { + fill: #F04124; + stroke: #F04124; } + .iconic-color-alert *.iconic-property-accent { + fill: #F04124; + stroke: #F04124; } + +.iconic-color-dark * { + fill: #232323; + stroke: #232323; } + .iconic-color-dark *.iconic-property-accent { + fill: #232323; + stroke: #232323; } + +.iconic-color-secondary * { + fill: #f1f1f1; + stroke: #f1f1f1; } + .iconic-color-secondary *.iconic-property-accent { + fill: #f1f1f1; + stroke: #f1f1f1; } + +/* + ACTION SHEET + ------------ + + A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices. +*/ +/* + Styles for the list inside an action sheet. + Don't include this mixin if you want to build custom controls inside the sheet. +*/ +/* + Styles for the action sheet container. Action sheets pin to the top or bottom of the screen. +*/ +.action-sheet-container { + position: relative; + display: inline-block; } + .action-sheet-container .button { + margin-left: 0; + margin-right: 0; } + +.action-sheet { + position: fixed; + left: 0; + z-index: 1000; + width: 100%; + padding: 1rem; + background: white; + text-align: center; + transition-property: -webkit-transform opacity; + transition-property: transform opacity; + transition-duration: 0.25s; + transition-timing-function: ease-out; + box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25); + bottom: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); } + .action-sheet.is-active { + -webkit-transform: translateY(0%); + transform: translateY(0%); } + .action-sheet ul { + margin: -1rem; + margin-top: 0; + list-style-type: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .action-sheet ul:first-child { + margin-top: -1rem; } + .action-sheet ul:first-child li:first-child { + border-top: 0; } + .action-sheet ul a { + display: block; + padding: 0.8rem; + line-height: 1; + color: #000; + border-top: 1px solid #ccc; } + .action-sheet ul a:hover { + color: #000; + background: #f2f2f2; } + .action-sheet ul .alert > a { + color: #F04124; } + .action-sheet ul .disabled > a { + pointer-events: none; + color: #999; } + @media only screen and (min-width: 40em) { + .action-sheet { + /* + Core styles + */ + position: absolute; + left: 50%; + width: 300px; + border-radius: 4px; + opacity: 0; + pointer-events: none; + /* + Menu shadow + */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + /* + Active state + */ + /* + Menu tail + */ + /* + Positioning + */ + top: auto; + bottom: 0; + -webkit-transform: translateX(-50%) translateY(110%); + transform: translateX(-50%) translateY(110%); } + .action-sheet.is-active { + opacity: 1; + pointer-events: auto; } + .action-sheet::before, .action-sheet::after { + content: ''; + position: absolute; + left: 50%; + display: block; + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + margin-left: -10px; } + .action-sheet.is-active { + -webkit-transform: translateX(-50%) translateY(100%); + transform: translateX(-50%) translateY(100%); } + .action-sheet::before, .action-sheet::after { + top: -10px; + bottom: auto; + border-top: 0; + border-bottom: 10px solid white; } + .action-sheet::before { + top: -12px; + border-bottom-color: rgba(0, 0, 0, 0.15); } + .action-sheet.top { + /* + Core styles + */ + position: absolute; + left: 50%; + width: 300px; + border-radius: 4px; + opacity: 0; + pointer-events: none; + /* + Menu shadow + */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + /* + Active state + */ + /* + Menu tail + */ + /* + Positioning + */ + top: 0; + bottom: auto; + -webkit-transform: translateX(-50%) translateY(-120%); + transform: translateX(-50%) translateY(-120%); } + .action-sheet.top.is-active { + opacity: 1; + pointer-events: auto; } + .action-sheet.top::before, .action-sheet.top::after { + content: ''; + position: absolute; + left: 50%; + display: block; + width: 0px; + height: 0px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + margin-left: -10px; } + .action-sheet.top.is-active { + -webkit-transform: translateX(-50%) translateY(-110%); + transform: translateX(-50%) translateY(-110%); } + .action-sheet.top::before, .action-sheet.top::after { + top: auto; + bottom: -10px; + border-top: 10px solid white; + border-bottom: 0; } + .action-sheet.top::before { + bottom: -12px; + border-top-color: rgba(0, 0, 0, 0.15); } } + .action-sheet.primary { + background: #00558b; + color: #fff; + border: 0; } + .action-sheet.primary::before { + display: none; } + .action-sheet.primary::before, .action-sheet.primary::after { + border-top-color: #00558b; } + .action-sheet.primary.top::before, .action-sheet.primary.top::after { + border-bottom-color: #00558b; } + .action-sheet.primary ul { + margin: -1rem; + margin-top: 0; + list-style-type: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .action-sheet.primary ul:first-child { + margin-top: -1rem; } + .action-sheet.primary ul:first-child li:first-child { + border-top: 0; } + .action-sheet.primary ul a { + display: block; + padding: 0.8rem; + line-height: 1; + color: #fff; + border-top: 1px solid #006cb0; } + .action-sheet.primary ul a:hover { + color: #fff; + background: #00609e; } + .action-sheet.primary ul .alert > a { + color: #F04124; } + .action-sheet.primary ul .disabled > a { + pointer-events: none; + color: #999; } + .action-sheet.dark { + background: #232323; + color: #fff; + border: 0; } + .action-sheet.dark::before { + display: none; } + .action-sheet.dark::before, .action-sheet.dark::after { + border-top-color: #232323; } + .action-sheet.dark.top::before, .action-sheet.dark.top::after { + border-bottom-color: #232323; } + .action-sheet.dark ul { + margin: -1rem; + margin-top: 0; + list-style-type: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .action-sheet.dark ul:first-child { + margin-top: -1rem; } + .action-sheet.dark ul:first-child li:first-child { + border-top: 0; } + .action-sheet.dark ul a { + display: block; + padding: 0.8rem; + line-height: 1; + color: #fff; + border-top: 1px solid #393939; } + .action-sheet.dark ul a:hover { + color: #fff; + background: #2e2e2e; } + .action-sheet.dark ul .alert > a { + color: #F04124; } + .action-sheet.dark ul .disabled > a { + pointer-events: none; + color: #999; } + +/* + BLOCK LIST + ---------- + + A generic list component that can accomodate a variety of styles and controls. + + Features: + - Icons + - Labels + - Chevrons + - Text fields + - Dropdown menus + - Checkbox/radio inputs +*/ +/* + Adds styles for a block list container. + + $font-size: global font size for the list. + $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element. +*/ +.block-list { + margin-bottom: 1rem; + line-height: 1; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + .block-list, .block-list ul { + list-style-type: none; } + .block-list ul { + margin-left: 0; } + +/* + Styles block list headers on the selector you include this mixin in (normally a <header>). + + $color - color of the header. + $font-size - font size of the header. + $offset - left margin to add to the header, to line it up with the list items. +*/ +/* + Styles block list items on the selector you include this mixin in (normally an <li>). + + $color - color of items. + $color-hover - color of items on hover. + $background - background of items. + $background-hover - background of items on hover. + $border - border between items. + $padding - padding on items. +*/ +/* + Adds label styles to the class you include this mixin in. + + $color - color of the label. + $left-class - extra class to flip the orientation of the label. + $left-padding - left padding to use for left-hand labels. +*/ +/* + Adds support for chevrons, which appear on the right-hand side of the item. + + $color - color of the chevron. + $padding - include the global padding of block list items here. +*/ +/* + Adds icon styles. Call this mixin on a block list container. + + $size - size of the icon as a percentage (decimal) of the list item's height. + $item-selector - overrides the 'li' selector used for list items. +*/ +/* + Adds support for text fields, select menus, and checkbox/radio groups in block lists. + + $color - color of select menu arrow. + $background-hover - color of select menu when hovered over. + $padding - include the global padding of block list items here. + $dropdown-class - class to use for list items that contain a dropdown. + $switch-class - class to use for switches inside list items. +*/ +.block-list { + font-size: 1rem; + margin-left: -1rem; + margin-right: -1rem; } + .block-list input[type="text"], .block-list input[type="password"], .block-list input[type="date"], .block-list input[type="datetime"], .block-list input[type="datetime-local"], .block-list input[type="month"], .block-list input[type="week"], .block-list input[type="email"], .block-list input[type="number"], .block-list input[type="search"], .block-list input[type="tel"], .block-list input[type="time"], .block-list input[type="url"], .block-list input[type="color"], .block-list textarea { + margin: 0; + border: 0; + line-height: 1; + height: auto; + padding: 0.8rem 1rem; + color: inherit; } + .block-list input[type="text"]:hover, .block-list input[type="text"]:focus, .block-list input[type="password"]:hover, .block-list input[type="password"]:focus, .block-list input[type="date"]:hover, .block-list input[type="date"]:focus, .block-list input[type="datetime"]:hover, .block-list input[type="datetime"]:focus, .block-list input[type="datetime-local"]:hover, .block-list input[type="datetime-local"]:focus, .block-list input[type="month"]:hover, .block-list input[type="month"]:focus, .block-list input[type="week"]:hover, .block-list input[type="week"]:focus, .block-list input[type="email"]:hover, .block-list input[type="email"]:focus, .block-list input[type="number"]:hover, .block-list input[type="number"]:focus, .block-list input[type="search"]:hover, .block-list input[type="search"]:focus, .block-list input[type="tel"]:hover, .block-list input[type="tel"]:focus, .block-list input[type="time"]:hover, .block-list input[type="time"]:focus, .block-list input[type="url"]:hover, .block-list input[type="url"]:focus, .block-list input[type="color"]:hover, .block-list input[type="color"]:focus, .block-list textarea:hover, .block-list textarea:focus { + border: 0; } + .block-list li > input[type="checkbox"], .block-list li > input[type="radio"] { + position: absolute; + left: -9999px; } + .block-list li > input[type="checkbox"] + label, .block-list li > input[type="radio"] + label { + display: block; + font-size: 1rem; + margin: 0; } + .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before { + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" viewBox="0 0 32 32"><path fill="black" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm6.906 8.875l2.219 2.031-12.063 13.281-6.188-6.188 2.125-2.125 3.938 3.938 9.969-10.938z"/></svg>'); + content: ''; + background-size: 100% 100%; + width: 1.5em; + height: 1.5em; + color: #00558b; + float: right; + pointer-events: none; + margin-top: -0.25em; } + @media screen and (min-width: 0\0) { + .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrMl0FugzAQRY3TRZeoFyhVL0BOkGTXJezaHZwguUnECaCrdFd6gqQnCN11Uyk5QekNOlONJWMVGMCgfGlkEIY3HnsG2xFM3d96PjQB2AJsWdPtAPYOln+dTwXnuw4DHEGzBvNFN6EDCTiS9XIAwB40acNoucKoxODIie0AwAOCu8KOSnIiNx/MakK+A7sW9oTferxx3fP3T1nURoBG/irGVahHwjHm/Ggx7E3TMVdrQmoP0gngghhpZQ3QvG/EdPLUelARWI8Aycjq9Md0qMIdbcNhjmOKLoY7quk3l1Rebeqg4AwFkmq7LWGOh1pmNY0etZAWSq0OX8HoS4JvWuCopbSY26EGR/CW86K0BF+pwkLwlPuyHJhOCl5oe4ZtF++vOqST+GdOYwO+71pN2VNAjmQGPCe42weuHDg0PI8olUwnYrXTGQJH9gxq8l1LKvrQx4O6/YY32Kp/ugb3ey7gZ4xAzuhYiYTxB/UHZFAuaREVXZ2g6yFlvEC2yoKEmbsRZYNgVLk2JeaOaG+xLHN+WCszDWMqLGOrJFa1DlApjSdwoHJGqGzLIb0+cas0wh5Bh780ngswx8GJD7h8sHg2wLA/mfDLPZpdxOF0quP5rwADAAFIzSRvu1m5AAAAAElFTkSuQmCC'); } } + .block-list .with-dropdown { + color: inherit; } + .block-list .with-dropdown select { + -webkit-appearance: none; + -moz-appearance: none; + outline: 0; + background: 0; + border: 0; + height: auto; + padding: 0.8rem 1rem; + margin: 0; + font-size: 1em; + line-height: 1; + color: inherit; + background-color: transparent; } + .block-list .switch { + position: absolute; + top: 50%; + right: 1rem; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } + .block-list.with-icons li > a, .block-list.with-icons li > span, .block-list.with-icons li > label { + padding-left: 2.8rem; } + .block-list.with-icons li img, .block-list.with-icons li .iconic { + position: absolute; + top: 0.26rem; + left: 0.26rem; + width: 2.08rem; + height: 2.08rem; + border-radius: 8px; + pointer-events: none; } + .block-list header { + margin-top: 1em; + color: #666666; + font-weight: bold; + margin-bottom: 0.5em; + margin-left: 1rem; + font-size: 0.8em; + cursor: default; + text-transform: uppercase; } + .block-list li { + position: relative; + border-bottom: 1px solid #d0d0d0; } + .block-list li:first-child { + border-top: 1px solid #d0d0d0; } + .block-list li > a, .block-list li > span, .block-list li > label { + display: block; + padding: 0.8rem 1rem; + padding-left: 1rem; + color: #000; + line-height: 1; } + .block-list li > span { + cursor: default; } + .block-list li > a, .block-list li > label { + cursor: pointer; } + .block-list li > a:hover, .block-list li > label:hover { + color: #000; } + .block-list li > a:hover, .block-list li > label:hover, .block-list li select:hover { + background: #f4f4f4; } + .block-list li.caution > a, .block-list li.caution > a:hover { + color: #F04124; } + .block-list li.disabled > a { + cursor: default; } + .block-list li.disabled > a, .block-list li.disabled > a:hover { + color: #999; } + .block-list li.disabled > a:hover { + background: transparent; } + .block-list li.with-chevron::after { + content: '\203A'; + display: block; + position: absolute; + right: 1rem; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + font-weight: bold; + color: #666666; + font-size: 2em; } + .block-list li.with-chevron .block-list-label { + padding-right: 1.5rem; } + .block-list li .block-list-label { + display: inline-block; + float: right; + padding: 0; + color: #999999; + pointer-events: none; } + .block-list li .block-list-label.left { + margin-left: 0.8rem; + float: none; } + +.button, .button-group > li > a, .button-group > li > label, .button-group > li > button { + display: inline-block; + border: 0; + text-align: center; + line-height: 1; + cursor: pointer; + -webkit-appearance: none; + -webkit-font-smoothing: antialiased; + transition: background 0.25s ease-out; + vertical-align: middle; + padding: 0.85em 1em; + margin: 0 1rem 1rem 0; + font-size: 0.9rem; + border-radius: 0; } + +.button { + font-size: 0.9rem; + display: inline-block; + width: auto; + margin: 0 1rem 1rem 0; + background: #00558b; + color: #fff; } + .button .iconic { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.25em; + margin-top: -2px; } + .button:hover, .button:focus { + background: #004876; + color: #fff; } + .button .iconic * { + fill: #fff; + stroke: #fff; } + .button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button.tiny { + font-size: 0.63rem; } + .button.tiny .iconic { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.25em; + margin-top: -2px; } + .button.small { + font-size: 0.72rem; } + .button.small .iconic { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.25em; + margin-top: -2px; } + .button.large { + font-size: 1.17rem; } + .button.large .iconic { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.25em; + margin-top: -2px; } + .button.expand { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; } + .button.secondary { + background: #f1f1f1; + color: #000; } + .button.secondary:hover, .button.secondary:focus { + background: #cdcdcd; + color: #000; } + .button.secondary .iconic * { + fill: #000; + stroke: #000; } + .button.secondary .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .button.success { + background: #43AC6A; + color: #fff; } + .button.success:hover, .button.success:focus { + background: #39925a; + color: #fff; } + .button.success .iconic * { + fill: #fff; + stroke: #fff; } + .button.success .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button.warning { + background: #F08A24; + color: #fff; } + .button.warning:hover, .button.warning:focus { + background: #dc750f; + color: #fff; } + .button.warning .iconic * { + fill: #fff; + stroke: #fff; } + .button.warning .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button.alert { + background: #F04124; + color: #fff; } + .button.alert:hover, .button.alert:focus { + background: #dc2c0f; + color: #fff; } + .button.alert .iconic * { + fill: #fff; + stroke: #fff; } + .button.alert .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button.info { + background: #A0D3E8; + color: #000; } + .button.info:hover, .button.info:focus { + background: #71bddd; + color: #000; } + .button.info .iconic * { + fill: #000; + stroke: #000; } + .button.info .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .button.dark { + background: #232323; + color: #fff; } + .button.dark:hover, .button.dark:focus { + background: #1e1e1e; + color: #fff; } + .button.dark .iconic * { + fill: #fff; + stroke: #fff; } + .button.dark .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button.hollow { + border: 1px solid #00558b; + background: transparent; + color: #00558b; } + .button.hollow:hover, .button.hollow:focus { + border-color: #008ee8; + background: transparent; + color: #008ee8; } + .button.hollow .iconic * { + fill: #00558b; + stroke: #00558b; } + .button.hollow .iconic *.iconic-property-accent { + fill: #00558b; + stroke: #00558b; } + .button.hollow:hover .iconic * { + fill: #008ee8; + stroke: #008ee8; } + .button.hollow:hover .iconic *.iconic-property-accent { + fill: #008ee8; + stroke: #008ee8; } + .button.hollow.secondary { + border: 1px solid #f1f1f1; + background: transparent; + color: #f1f1f1; } + .button.hollow.secondary:hover, .button.hollow.secondary:focus { + border-color: #f4f4f4; + background: transparent; + color: #f4f4f4; } + .button.hollow.secondary .iconic * { + fill: #f1f1f1; + stroke: #f1f1f1; } + .button.hollow.secondary .iconic *.iconic-property-accent { + fill: #f1f1f1; + stroke: #f1f1f1; } + .button.hollow.secondary:hover .iconic * { + fill: #f4f4f4; + stroke: #f4f4f4; } + .button.hollow.secondary:hover .iconic *.iconic-property-accent { + fill: #f4f4f4; + stroke: #f4f4f4; } + .button.hollow.success { + border: 1px solid #43AC6A; + background: transparent; + color: #43AC6A; } + .button.hollow.success:hover, .button.hollow.success:focus { + border-color: #6dc68e; + background: transparent; + color: #6dc68e; } + .button.hollow.success .iconic * { + fill: #43AC6A; + stroke: #43AC6A; } + .button.hollow.success .iconic *.iconic-property-accent { + fill: #43AC6A; + stroke: #43AC6A; } + .button.hollow.success:hover .iconic * { + fill: #6dc68e; + stroke: #6dc68e; } + .button.hollow.success:hover .iconic *.iconic-property-accent { + fill: #6dc68e; + stroke: #6dc68e; } + .button.hollow.warning { + border: 1px solid #F08A24; + background: transparent; + color: #F08A24; } + .button.hollow.warning:hover, .button.hollow.warning:focus { + border-color: #f4a75b; + background: transparent; + color: #f4a75b; } + .button.hollow.warning .iconic * { + fill: #F08A24; + stroke: #F08A24; } + .button.hollow.warning .iconic *.iconic-property-accent { + fill: #F08A24; + stroke: #F08A24; } + .button.hollow.warning:hover .iconic * { + fill: #f4a75b; + stroke: #f4a75b; } + .button.hollow.warning:hover .iconic *.iconic-property-accent { + fill: #f4a75b; + stroke: #f4a75b; } + .button.hollow.alert { + border: 1px solid #F04124; + background: transparent; + color: #F04124; } + .button.hollow.alert:hover, .button.hollow.alert:focus { + border-color: #f4715b; + background: transparent; + color: #f4715b; } + .button.hollow.alert .iconic * { + fill: #F04124; + stroke: #F04124; } + .button.hollow.alert .iconic *.iconic-property-accent { + fill: #F04124; + stroke: #F04124; } + .button.hollow.alert:hover .iconic * { + fill: #f4715b; + stroke: #f4715b; } + .button.hollow.alert:hover .iconic *.iconic-property-accent { + fill: #f4715b; + stroke: #f4715b; } + .button.hollow.info { + border: 1px solid #A0D3E8; + background: transparent; + color: #A0D3E8; } + .button.hollow.info:hover, .button.hollow.info:focus { + border-color: #b8deee; + background: transparent; + color: #b8deee; } + .button.hollow.info .iconic * { + fill: #A0D3E8; + stroke: #A0D3E8; } + .button.hollow.info .iconic *.iconic-property-accent { + fill: #A0D3E8; + stroke: #A0D3E8; } + .button.hollow.info:hover .iconic * { + fill: #b8deee; + stroke: #b8deee; } + .button.hollow.info:hover .iconic *.iconic-property-accent { + fill: #b8deee; + stroke: #b8deee; } + .button.hollow.dark { + border: 1px solid #232323; + background: transparent; + color: #232323; } + .button.hollow.dark:hover, .button.hollow.dark:focus { + border-color: #5a5a5a; + background: transparent; + color: #5a5a5a; } + .button.hollow.dark .iconic * { + fill: #232323; + stroke: #232323; } + .button.hollow.dark .iconic *.iconic-property-accent { + fill: #232323; + stroke: #232323; } + .button.hollow.dark:hover .iconic * { + fill: #5a5a5a; + stroke: #5a5a5a; } + .button.hollow.dark:hover .iconic *.iconic-property-accent { + fill: #5a5a5a; + stroke: #5a5a5a; } + .button.disabled { + opacity: 0.5; + cursor: default; + pointer-events: none; } + +.button-group { + margin: 0; + margin-bottom: 1rem; + list-style-type: none; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + border-radius: 0; + overflow: hidden; + font-size: 0.9rem; } + .button-group > li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .button-group > li > a, .button-group > li > label, .button-group > li > button { + border-radius: 0; + font-size: inherit; + display: block; + margin: 0; } + .button-group > li > input + label { + margin-left: 0; } + .button-group > li:not(:last-child) > a, .button-group > li:not(:last-child) > label, .button-group > li:not(:last-child) > button { + border-right: 1px solid #004068; } + .button-group .iconic { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.25em; + margin-top: -2px; } + +.button-group.segmented, .button-group.segmented.secondary, .button-group.segmented.success, .button-group.segmented.warning, .button-group.segmented.alert { + border: 1px solid #00558b; + transition-property: background color; } + .button-group.segmented > li > input[type="radio"] { + position: absolute; + left: -9999px; } + .button-group.segmented > li > a, .button-group.segmented.secondary > li > a, .button-group.segmented.success > li > a, .button-group.segmented.warning > li > a, .button-group.segmented.alert > li > a, .button-group.segmented > li > label, .button-group.segmented.secondary > li > label, .button-group.segmented.success > li > label, .button-group.segmented.warning > li > label, .button-group.segmented.alert > li > label, .button-group.segmented > li > button, .button-group.segmented.secondary > li > button, .button-group.segmented.success > li > button, .button-group.segmented.warning > li > button, .button-group.segmented.alert > li > button { + margin-right: 0; + background: transparent; } + +.button-group { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + border-radius: 0; } + .button-group > li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .button-group > li > a, .button-group > li > label, .button-group > li > button { + background: #00558b; + color: #fff; + border-color: #004876; } + .button-group > li > a:hover, .button-group > li > a:focus, .button-group > li > label:hover, .button-group > li > label:focus, .button-group > li > button:hover, .button-group > li > button:focus { + background: #004876; + color: #fff; } + .button-group > li > a .iconic *, .button-group > li > label .iconic *, .button-group > li > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group > li > a .iconic *.iconic-property-accent, .button-group > li > label .iconic *.iconic-property-accent, .button-group > li > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group > li.is-active > a, .button-group > li.is-active > label, .button-group > li.is-active > button { + background: #004876; } + .button-group.secondary > li > a, .button-group.secondary > li > label, .button-group.secondary > li > button { + background: #f1f1f1; + color: #000; + border-color: #cdcdcd; } + .button-group.secondary > li > a:hover, .button-group.secondary > li > a:focus, .button-group.secondary > li > label:hover, .button-group.secondary > li > label:focus, .button-group.secondary > li > button:hover, .button-group.secondary > li > button:focus { + background: #cdcdcd; + color: #000; } + .button-group.secondary > li > a .iconic *, .button-group.secondary > li > label .iconic *, .button-group.secondary > li > button .iconic * { + fill: #000; + stroke: #000; } + .button-group.secondary > li > a .iconic *.iconic-property-accent, .button-group.secondary > li > label .iconic *.iconic-property-accent, .button-group.secondary > li > button .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .button-group.secondary > li.is-active > a, .button-group.secondary > li.is-active > label, .button-group.secondary > li.is-active > button { + background: #cdcdcd; } + .button-group.success > li > a, .button-group.success > li > label, .button-group.success > li > button { + background: #43AC6A; + color: #fff; + border-color: #39925a; } + .button-group.success > li > a:hover, .button-group.success > li > a:focus, .button-group.success > li > label:hover, .button-group.success > li > label:focus, .button-group.success > li > button:hover, .button-group.success > li > button:focus { + background: #39925a; + color: #fff; } + .button-group.success > li > a .iconic *, .button-group.success > li > label .iconic *, .button-group.success > li > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.success > li > a .iconic *.iconic-property-accent, .button-group.success > li > label .iconic *.iconic-property-accent, .button-group.success > li > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.success > li.is-active > a, .button-group.success > li.is-active > label, .button-group.success > li.is-active > button { + background: #39925a; } + .button-group.warning > li > a, .button-group.warning > li > label, .button-group.warning > li > button { + background: #F08A24; + color: #fff; + border-color: #dc750f; } + .button-group.warning > li > a:hover, .button-group.warning > li > a:focus, .button-group.warning > li > label:hover, .button-group.warning > li > label:focus, .button-group.warning > li > button:hover, .button-group.warning > li > button:focus { + background: #dc750f; + color: #fff; } + .button-group.warning > li > a .iconic *, .button-group.warning > li > label .iconic *, .button-group.warning > li > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.warning > li > a .iconic *.iconic-property-accent, .button-group.warning > li > label .iconic *.iconic-property-accent, .button-group.warning > li > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.warning > li.is-active > a, .button-group.warning > li.is-active > label, .button-group.warning > li.is-active > button { + background: #dc750f; } + .button-group.alert > li > a, .button-group.alert > li > label, .button-group.alert > li > button { + background: #F04124; + color: #fff; + border-color: #dc2c0f; } + .button-group.alert > li > a:hover, .button-group.alert > li > a:focus, .button-group.alert > li > label:hover, .button-group.alert > li > label:focus, .button-group.alert > li > button:hover, .button-group.alert > li > button:focus { + background: #dc2c0f; + color: #fff; } + .button-group.alert > li > a .iconic *, .button-group.alert > li > label .iconic *, .button-group.alert > li > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.alert > li > a .iconic *.iconic-property-accent, .button-group.alert > li > label .iconic *.iconic-property-accent, .button-group.alert > li > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.alert > li.is-active > a, .button-group.alert > li.is-active > label, .button-group.alert > li.is-active > button { + background: #dc2c0f; } + .button-group > li.secondary > a, .button-group > li.secondary > label, .button-group > li.secondary > button { + background: #f1f1f1; + color: #000; + border-color: #f1f1f1; } + .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus { + background: #cdcdcd; + color: #000; } + .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus { + border-color: #b5b5b5; } + .button-group > li.secondary > a .iconic *, .button-group > li.secondary > label .iconic *, .button-group > li.secondary > button .iconic * { + fill: #000; + stroke: #000; } + .button-group > li.secondary > a .iconic *.iconic-property-accent, .button-group > li.secondary > label .iconic *.iconic-property-accent, .button-group > li.secondary > button .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .button-group > li.success > a, .button-group > li.success > label, .button-group > li.success > button { + background: #43AC6A; + color: #fff; + border-color: #43AC6A; } + .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus { + background: #39925a; + color: #fff; } + .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus { + border-color: #32814f; } + .button-group > li.success > a .iconic *, .button-group > li.success > label .iconic *, .button-group > li.success > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group > li.success > a .iconic *.iconic-property-accent, .button-group > li.success > label .iconic *.iconic-property-accent, .button-group > li.success > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group > li.warning > a, .button-group > li.warning > label, .button-group > li.warning > button { + background: #F08A24; + color: #fff; + border-color: #F08A24; } + .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus { + background: #dc750f; + color: #fff; } + .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus { + border-color: #c2670d; } + .button-group > li.warning > a .iconic *, .button-group > li.warning > label .iconic *, .button-group > li.warning > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group > li.warning > a .iconic *.iconic-property-accent, .button-group > li.warning > label .iconic *.iconic-property-accent, .button-group > li.warning > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group > li.alert > a, .button-group > li.alert > label, .button-group > li.alert > button { + background: #F04124; + color: #fff; + border-color: #F04124; } + .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus { + background: #dc2c0f; + color: #fff; } + .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus { + border-color: #c2270d; } + .button-group > li.alert > a .iconic *, .button-group > li.alert > label .iconic *, .button-group > li.alert > button .iconic * { + fill: #fff; + stroke: #fff; } + .button-group > li.alert > a .iconic *.iconic-property-accent, .button-group > li.alert > label .iconic *.iconic-property-accent, .button-group > li.alert > button .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.segmented { + border-color: #00558b; } + .button-group.segmented > li > a, .button-group.segmented > li > label, .button-group.segmented > li > button { + border-color: #00558b; + color: #00558b; } + .button-group.segmented > li > a:hover, .button-group.segmented > li > label:hover, .button-group.segmented > li > button:hover { + background: rgba(0, 85, 139, 0.25); + color: #00558b; } + .button-group.segmented > li > a .iconic *, .button-group.segmented > li > label .iconic *, .button-group.segmented > li > button .iconic * { + fill: #00558b; + stroke: #00558b; } + .button-group.segmented > li > a .iconic *.iconic-property-accent, .button-group.segmented > li > label .iconic *.iconic-property-accent, .button-group.segmented > li > button .iconic *.iconic-property-accent { + fill: #00558b; + stroke: #00558b; } + .button-group.segmented > li.is-active > a, .button-group.segmented > li.is-active > a:hover, .button-group.segmented > li > input:checked + label, .button-group.segmented > li > input:checked + label:hover { + background: #00558b; + color: #fff; } + .button-group.segmented > li.is-active > a .iconic *, .button-group.segmented > li > input:checked + label .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.segmented > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented > li > input:checked + label .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.segmented.secondary { + border-color: #f1f1f1; } + .button-group.segmented.secondary > li > a, .button-group.segmented.secondary > li > label, .button-group.segmented.secondary > li > button { + border-color: #f1f1f1; + color: #f1f1f1; } + .button-group.segmented.secondary > li > a:hover, .button-group.segmented.secondary > li > label:hover, .button-group.segmented.secondary > li > button:hover { + background: rgba(241, 241, 241, 0.25); + color: #f1f1f1; } + .button-group.segmented.secondary > li > a .iconic *, .button-group.segmented.secondary > li > label .iconic *, .button-group.segmented.secondary > li > button .iconic * { + fill: #f1f1f1; + stroke: #f1f1f1; } + .button-group.segmented.secondary > li > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > label .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > button .iconic *.iconic-property-accent { + fill: #f1f1f1; + stroke: #f1f1f1; } + .button-group.segmented.secondary > li.is-active > a, .button-group.segmented.secondary > li.is-active > a:hover, .button-group.segmented.secondary > li > input:checked + label, .button-group.segmented.secondary > li > input:checked + label:hover { + background: #f1f1f1; + color: #000; } + .button-group.segmented.secondary > li.is-active > a .iconic *, .button-group.segmented.secondary > li > input:checked + label .iconic * { + fill: #000; + stroke: #000; } + .button-group.segmented.secondary > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > input:checked + label .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .button-group.segmented.success { + border-color: #43AC6A; } + .button-group.segmented.success > li > a, .button-group.segmented.success > li > label, .button-group.segmented.success > li > button { + border-color: #43AC6A; + color: #43AC6A; } + .button-group.segmented.success > li > a:hover, .button-group.segmented.success > li > label:hover, .button-group.segmented.success > li > button:hover { + background: rgba(67, 172, 106, 0.25); + color: #43AC6A; } + .button-group.segmented.success > li > a .iconic *, .button-group.segmented.success > li > label .iconic *, .button-group.segmented.success > li > button .iconic * { + fill: #43AC6A; + stroke: #43AC6A; } + .button-group.segmented.success > li > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > label .iconic *.iconic-property-accent, .button-group.segmented.success > li > button .iconic *.iconic-property-accent { + fill: #43AC6A; + stroke: #43AC6A; } + .button-group.segmented.success > li.is-active > a, .button-group.segmented.success > li.is-active > a:hover, .button-group.segmented.success > li > input:checked + label, .button-group.segmented.success > li > input:checked + label:hover { + background: #43AC6A; + color: #fff; } + .button-group.segmented.success > li.is-active > a .iconic *, .button-group.segmented.success > li > input:checked + label .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.segmented.success > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > input:checked + label .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.segmented.warning { + border-color: #F08A24; } + .button-group.segmented.warning > li > a, .button-group.segmented.warning > li > label, .button-group.segmented.warning > li > button { + border-color: #F08A24; + color: #F08A24; } + .button-group.segmented.warning > li > a:hover, .button-group.segmented.warning > li > label:hover, .button-group.segmented.warning > li > button:hover { + background: rgba(240, 138, 36, 0.25); + color: #F08A24; } + .button-group.segmented.warning > li > a .iconic *, .button-group.segmented.warning > li > label .iconic *, .button-group.segmented.warning > li > button .iconic * { + fill: #F08A24; + stroke: #F08A24; } + .button-group.segmented.warning > li > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > label .iconic *.iconic-property-accent, .button-group.segmented.warning > li > button .iconic *.iconic-property-accent { + fill: #F08A24; + stroke: #F08A24; } + .button-group.segmented.warning > li.is-active > a, .button-group.segmented.warning > li.is-active > a:hover, .button-group.segmented.warning > li > input:checked + label, .button-group.segmented.warning > li > input:checked + label:hover { + background: #F08A24; + color: #fff; } + .button-group.segmented.warning > li.is-active > a .iconic *, .button-group.segmented.warning > li > input:checked + label .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.segmented.warning > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > input:checked + label .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.segmented.alert { + border-color: #F04124; } + .button-group.segmented.alert > li > a, .button-group.segmented.alert > li > label, .button-group.segmented.alert > li > button { + border-color: #F04124; + color: #F04124; } + .button-group.segmented.alert > li > a:hover, .button-group.segmented.alert > li > label:hover, .button-group.segmented.alert > li > button:hover { + background: rgba(240, 65, 36, 0.25); + color: #F04124; } + .button-group.segmented.alert > li > a .iconic *, .button-group.segmented.alert > li > label .iconic *, .button-group.segmented.alert > li > button .iconic * { + fill: #F04124; + stroke: #F04124; } + .button-group.segmented.alert > li > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > label .iconic *.iconic-property-accent, .button-group.segmented.alert > li > button .iconic *.iconic-property-accent { + fill: #F04124; + stroke: #F04124; } + .button-group.segmented.alert > li.is-active > a, .button-group.segmented.alert > li.is-active > a:hover, .button-group.segmented.alert > li > input:checked + label, .button-group.segmented.alert > li > input:checked + label:hover { + background: #F04124; + color: #fff; } + .button-group.segmented.alert > li.is-active > a .iconic *, .button-group.segmented.alert > li > input:checked + label .iconic * { + fill: #fff; + stroke: #fff; } + .button-group.segmented.alert > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > input:checked + label .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .button-group.tiny { + font-size: 0.63rem; } + .button-group.small { + font-size: 0.72rem; } + .button-group.large { + font-size: 1.17rem; } + .button-group.expand { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .button-group.expand > li { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } + .button-group.expand > li > a, .button-group.expand > li > label, .button-group.expand > li > button { + display: block; + width: 100%; + margin-left: 0; + margin-right: 0; } + .button-group li.disabled > a, .button-group li.disabled > label, .button-group li.disabled > button { + opacity: 0.5; + cursor: default; + pointer-events: none; } + +/* + Cards + + Structure: + + titles + lists +*/ +.card { + border: 1px solid #ededed; + margin-bottom: 0.5rem; + background: #fff; + color: #000; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { + color: inherit; } + .card ul { + margin-bottom: 0; } + .card img { + width: 100%; } + .card.primary { + border: 0; + margin-bottom: 0.5rem; + background: #00558b; + color: #fff; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card.primary h1, .card.primary h2, .card.primary h3, .card.primary h4, .card.primary h5, .card.primary h6 { + color: inherit; } + .card.primary ul { + margin-bottom: 0; } + .card.primary img { + width: 100%; } + .card.primary .card-divider { + background: #0065a5; + padding: 1rem; } + .card.success { + border: 0; + margin-bottom: 0.5rem; + background: #43AC6A; + color: #fff; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card.success h1, .card.success h2, .card.success h3, .card.success h4, .card.success h5, .card.success h6 { + color: inherit; } + .card.success ul { + margin-bottom: 0; } + .card.success img { + width: 100%; } + .card.success .card-divider { + background: #4ab873; + padding: 1rem; } + .card.warning { + border: 0; + margin-bottom: 0.5rem; + background: #F08A24; + color: #fff; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card.warning h1, .card.warning h2, .card.warning h3, .card.warning h4, .card.warning h5, .card.warning h6 { + color: inherit; } + .card.warning ul { + margin-bottom: 0; } + .card.warning img { + width: 100%; } + .card.warning .card-divider { + background: #f19233; + padding: 1rem; } + .card.alert { + border: 0; + margin-bottom: 0.5rem; + background: #F04124; + color: #fff; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card.alert h1, .card.alert h2, .card.alert h3, .card.alert h4, .card.alert h5, .card.alert h6 { + color: inherit; } + .card.alert ul { + margin-bottom: 0; } + .card.alert img { + width: 100%; } + .card.alert .card-divider { + background: #f14e33; + padding: 1rem; } + .card.dark { + border: 0; + margin-bottom: 0.5rem; + background: #232323; + color: #fff; + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + overflow: hidden; } + .card.dark h1, .card.dark h2, .card.dark h3, .card.dark h4, .card.dark h5, .card.dark h6 { + color: inherit; } + .card.dark ul { + margin-bottom: 0; } + .card.dark img { + width: 100%; } + .card.dark .card-divider { + background: #323232; + padding: 1rem; } + +.card-divider { + background: #ededed; + padding: 1rem; } + +.card-section { + padding: 1rem; } + +/* + Odds and ends. +*/ +.close-button { + position: absolute; + color: #999; + top: 1rem; + right: 1rem; + font-size: 2em; + line-height: 0.5; + cursor: pointer; } + .close-button:hover { + color: #333; } + +.thumbnail, ul.thumbnails > li img { + padding: 0.5rem; + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25); } + +ul.thumbnails > li { + margin-bottom: 1rem; } + ul.thumbnails > li a { + display: block; } + +/* + FORMS + ----- + + Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components. + + Includes: + - Text fields + - Text areas + - Select menus + - Checkboxes and radio buttons + - Range slider + - Progress bars and meters +*/ +input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea { + -webkit-appearance: none; + -moz-appearance: none; + display: block; + width: 100%; + height: 2.4rem; + padding: 0.5rem; + margin: 0 0 1rem 0; + border: 1px solid #ccc; + border-radius: 0; + background: #fff; + color: #000; + font-size: 1rem; + -webkit-font-smoothing: antialiased; + vertical-align: middle; } + input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, textarea:hover { + border: 1px solid #bbb; + background: #fff; + color: #000; } + input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { + outline: 0; + border: 1px solid #999; + background: #fff; + color: #000; } + label > input[type="text"], label > input[type="password"], label > input[type="date"], label > input[type="datetime"], label > input[type="datetime-local"], label > input[type="month"], label > input[type="week"], label > input[type="email"], label > input[type="number"], label > input[type="search"], label > input[type="tel"], label > input[type="time"], label > input[type="url"], label > input[type="color"], label > textarea { + margin-top: 0.5rem; } + +input[type="search"] { + box-sizing: border-box; } + +input.disabled, input[disabled], input[readonly], fieldset[disabled] input { + cursor: false; } + input.disabled, input.disabled:hover, input[disabled], input[disabled]:hover, input[readonly], input[readonly]:hover, fieldset[disabled] input, fieldset[disabled] input:hover { + background-color: #f2f2f2; } + +label { + display: block; + font-size: 0.9rem; + margin-bottom: 0.5rem; + color: #333; } + label > input, label > textarea { + margin-top: 0.5rem; } + +input[type="checkbox"], input[type="radio"] { + width: 1rem; + height: 1rem; } + label > input[type="checkbox"], label > input[type="radio"] { + margin-right: 0.25rem; } + input[type="checkbox"] + label, input[type="radio"] + label { + display: inline-block; + margin-left: 0.5rem; + margin-right: 1rem; + margin-bottom: 0; + vertical-align: baseline; } + +.inline-label { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin-bottom: 1rem; } + label > .inline-label { + margin-top: 0.5rem; } + .inline-label > input, .inline-label > select { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; } + .inline-label > .form-label { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + background: #eee; + color: #333; + border: 1px solid #ccc; + padding: 0 0.5rem; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .inline-label > .form-label:first-child { + border-right: 0; } + .inline-label > .form-label:last-child { + border-left: 0; } + .inline-label > a, .inline-label > button, .inline-label > input[type="button"], .inline-label > input[type="submit"] { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-top: 0; + padding-bottom: 0; + margin: 0; + border-radius: 0; } + +textarea { + height: auto; + width: 100%; + min-height: 50px; } + +select { + -webkit-appearance: none; + -moz-appearance: none; + display: block; + width: 100%; + height: 2.4rem; + padding: 0.5rem; + margin: 0 0 1rem 0; + font-size: 1rem; + color: #000; + border-radius: 0; + border: 1px solid #ccc; + background: #fafafa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: black"></polygon></svg>') right 10px center no-repeat; + background-size: 8px 8px; + padding-right: 1.625rem; } + select:hover { + background-color: #f0f0f0; } + select:focus { + outline: 0; } + select::-ms-expand { + display: none; } + +input[type="range"] { + -webkit-appearance: none; + -moz-appearance: none; + display: block; + width: 100%; + height: auto; + cursor: pointer; + margin-top: 0.25rem; + margin-bottom: 0.25rem; + border: 0; + line-height: 1; } + input[type="range"]:focus { + outline: 0; } + input[type="range"]::-webkit-slider-runnable-track { + height: 1rem; + background: #ddd; } + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + background: #00558b; + width: 1.5rem; + height: 1.5rem; + margin-top: -0.25rem; } + input[type="range"]::-moz-range-track { + -moz-appearance: none; + height: 1rem; + background: #ccc; } + input[type="range"]::-moz-range-thumb { + -moz-appearance: none; + background: #00558b; + width: 1.5rem; + height: 1.5rem; + margin-top: -0.25rem; } + input[type="range"]::-ms-track { + height: 1rem; + background: #ddd; + color: transparent; + border: 0; + overflow: visible; + border-top: 0.25rem solid #fff; + border-bottom: 0.25rem solid #fff; } + input[type="range"]::-ms-thumb { + background: #00558b; + width: 1.5rem; + height: 1.5rem; + border: 0; } + input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { + background: #ddd; } + +output { + line-height: 1.5rem; + vertical-align: middle; + margin-left: 0.5em; } + +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + background: #00558b; } + +progress, meter { + -webkit-appearance: none; + -moz-appearance: none; + display: block; + width: 100%; + height: 1.5rem; + margin-bottom: 1rem; + background: #ccc; + border: 0; } + +progress::-webkit-progress-bar { + background: #ccc; } +progress::-webkit-progress-value { + background: #00558b; } +progress::-moz-progress-bar { + background: #00558b; } +progress.high::-webkit-progress-value { + background: #43AC6A; } +progress.high::-moz-progress-bar { + background: #43AC6A; } +progress.medium::-webkit-progress-value { + background: #e7cf00; } +progress.medium::-moz-progress-bar { + background: #e7cf00; } +progress.low::-webkit-progress-value { + background: #F04124; } +progress.low::-moz-progress-bar { + background: #F04124; } + +meter { + background: #ccc; } + meter::-webkit-meter-bar { + background: #ccc; } + meter::-webkit-meter-optimum-value { + background: #43AC6A; } + meter::-webkit-meter-suboptimum-value { + background: #e7cf00; } + meter::-webkit-meter-even-less-good-value { + background: #F04124; } + meter::-moz-meter-bar { + background: #00558b; } + meter:-moz-meter-optimum::-moz-meter-bar { + background: #43AC6A; } + meter:-moz-meter-sub-optimum::-moz-meter-bar { + background: #e7cf00; } + meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { + background: #F04124; } + +/* + PANEL + ----- + + The friendly panel is an all-purpose container for hiding content off-screen. + + Features: + - Position at top, right, bottom, or left + - Anchor to grid block or window + - Define max width or height + - Transform into grid block depending on screen size +*/ +.panel { + display: block; + position: absolute; + z-index: 100; + overflow-y: auto; + display: none; } + .is-active.panel { + display: block; } + +.panel { + /* + Basic styles + */ + padding: 0; + background: #fff; } + +.panel-top { + /* + Direction + */ + top: 0; + left: 0; + width: 100%; + /* + Sizing + */ + height: 300px; + /* + Shadows + */ } + .panel-top.is-active { + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } + +.panel-right { + /* + Direction + */ + top: 0; + right: 0; + height: 100%; + /* + Sizing + */ + width: 100%; + /* + Shadows + */ } + @media only screen and (min-width: 18.75em) { + .panel-right { + width: 300px; } } + .panel-right.is-active { + box-shadow: -3px 0 10px rgba(0, 0, 0, 0.25); } + +.panel-bottom { + /* + Direction + */ + bottom: 0; + left: 0; + width: 100%; + /* + Sizing + */ + height: 300px; + /* + Shadows + */ } + .panel-bottom.is-active { + box-shadow: 2px -3px 10px rgba(0, 0, 0, 0.25); } + +.panel-left { + /* + Direction + */ + top: 0; + left: 0; + height: 100%; + /* + Sizing + */ + width: 100%; + /* + Shadows + */ } + @media only screen and (min-width: 18.75em) { + .panel-left { + width: 300px; } } + .panel-left.is-active { + box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25); } + +.panel-fixed { + position: fixed; } + +/* + THE GRID + -------- + + Foundation's magical, flexbox-powered grid. + + Features: + - Horizontal or vertical grids + - Auto-sizing or percentage width grid blocks + - Independently-scrollable blocks + - Column alignment + - Source ordering + - Offsets +*/ +/* + Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior. + + If set to "shrink", the block will contract and only fill as much space as it needs for its content. + + If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid. + + @group grid + + @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number. + + @output The flex-basis, flex-grow, and flex-shrink properties. +*/ +/* + Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block. + + @group grid + + @param {string} $orientation - Direction of the grid, either horizontal or vertical. + + @output A flex-flow property to match the direction given. +*/ +/* + Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height. + + @group grid + + @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false. + + @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false. +*/ +/* + Set the alignment of blocks within a grid. + + left: Items align to the left. + right: Items align to the right. + center: Items align to the center. + justify: Items are spaced equally apart so they occupy the space of the entire grid. + spaced: Items are given equal space to their left and right. + + @group grid + + @param {string} $align - Alignment to use. + + @output An appropriate justify-content value. +*/ +/* + Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first. + + @group grid + + @param {number} $order - Position in source order. + + @output An order property. +*/ +/* + Collapse a content block by removing the padding. + + @group grid + + @param {bool} $collapse - Collapses the block if true. + + @output A padding value. + + @todo No way to reverse collapse using this mixin. Solution: + - If true, add padding: 0; + - If false, add padding: 1rem; + - If null, add nothing, to cut down on CSS output + - Make null the default value +*/ +/* + Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows. + + @group grid + + @param {bool} $container - Adds container styles if true. + + @output A maximum width and the good old margin: 0 auto for center alignment. +*/ +/* + Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block. + + @group grid + + @param {bool} $nest - Adds negative margins if true. + + @output Negative margin values. +*/ +/* + Offset a block by adding a left margin. + + @group grid + + @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns. + + @output A left margin based on the number of columns specified, and the global number of columns. +*/ +/* + Resets styles set by panels. Use this when a panel transforms into a block on larger screens. + + @group grid + + @output Resets to transform, position, and a few visual styles. +*/ +/* + Frames are containers that stretch to the full dimmensions of the browser window. +*/ +/* + Groups are collections of content items. They're the "rows" of Foundation for Apps. +*/ +/* + Blocks are containers for actual content. They're the "columns" of Foundation for Apps. +*/ +.vertical.grid-frame, .vertical.grid-block, .vertical.small-grid-block, .vertical.medium-grid-block, .vertical.large-grid-block { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } +.small-vertical.grid-frame, .small-vertical.grid-block, .small-vertical.small-grid-block, .small-vertical.medium-grid-block, .small-vertical.large-grid-block { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } +.small-horizontal.grid-frame, .small-horizontal.grid-block, .small-horizontal.small-grid-block, .small-horizontal.medium-grid-block, .small-horizontal.large-grid-block { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } +@media only screen and (min-width: 40em) { + .medium-vertical.grid-frame, .medium-vertical.grid-block, .medium-vertical.small-grid-block, .medium-vertical.medium-grid-block, .medium-vertical.large-grid-block { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + .medium-horizontal.grid-frame, .medium-horizontal.grid-block, .medium-horizontal.small-grid-block, .medium-horizontal.medium-grid-block, .medium-horizontal.large-grid-block { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } } +@media only screen and (min-width: 75em) { + .large-vertical.grid-frame, .large-vertical.grid-block, .large-vertical.small-grid-block, .large-vertical.medium-grid-block, .large-vertical.large-grid-block { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + .large-horizontal.grid-frame, .large-horizontal.grid-block, .large-horizontal.small-grid-block, .large-horizontal.medium-grid-block, .large-horizontal.large-grid-block { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } } +.align-right.grid-frame, .align-right.grid-block, .align-right.small-grid-block, .align-right.medium-grid-block, .align-right.large-grid-block { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } +.align-center.grid-frame, .align-center.grid-block, .align-center.small-grid-block, .align-center.medium-grid-block, .align-center.large-grid-block { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } +.align-justify.grid-frame, .align-justify.grid-block, .align-justify.small-grid-block, .align-justify.medium-grid-block, .align-justify.large-grid-block { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } +.align-spaced.grid-frame, .align-spaced.grid-block, .align-spaced.small-grid-block, .align-spaced.medium-grid-block, .align-spaced.large-grid-block { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } +.wrap.grid-frame, .wrap.grid-block, .wrap.small-grid-block, .wrap.medium-grid-block, .wrap.large-grid-block { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.shrink.grid-block, .shrink.grid-content, .shrink.small-grid-block, .shrink.small-grid-content, .shrink.medium-grid-block, .shrink.medium-grid-content, .shrink.large-grid-block, .shrink.large-grid-content { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } +.noscroll.grid-block, .noscroll.grid-content, .noscroll.small-grid-block, .noscroll.small-grid-content, .noscroll.medium-grid-block, .noscroll.medium-grid-content, .noscroll.large-grid-block, .noscroll.large-grid-content { + overflow: hidden; } + +.grid-frame { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + position: relative; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; } + +.grid-block { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + position: relative; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + height: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } + +.grid-content { + display: block; + padding: 0 1rem; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .grid-content.collapse { + padding: 0; } + .grid-content .grid-block { + margin-left: -1rem; + margin-right: -1rem; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + overflow: visible; } + .grid-content .grid-block.nowrap { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + .grid-content .grid-block .grid-content { + overflow: visible; } + +.grid-container { + max-width: 56.25rem; + margin: 0 auto; } + .grid-container.contain-left { + max-width: 56.25rem; + margin: 0 auto 0 0; } + .grid-container.contain-right { + max-width: 56.25rem; + margin: 0 0 0 auto; } + +.small-grid-block { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + position: relative; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + height: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } + .small-grid-block.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } + +.small-grid-content { + display: block; + padding: 0 1rem; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .small-grid-content.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } + +@media only screen and (min-width: 40em) { + .medium-grid-block { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + position: relative; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + height: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } + .medium-grid-block.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } } + +@media only screen and (min-width: 40em) { + .medium-grid-content { + display: block; + padding: 0 1rem; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .medium-grid-content.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } } + +@media only screen and (min-width: 75em) { + .large-grid-block { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 100vh; + position: relative; + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + height: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } + .large-grid-block.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } } + +@media only screen and (min-width: 75em) { + .large-grid-content { + display: block; + padding: 0 1rem; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .large-grid-content.panel { + -webkit-transform: none; + transform: none; + position: relative; + width: auto; + height: auto; + z-index: auto; + box-shadow: none; + background: transparent; + top: auto; + right: auto; + bottom: auto; + left: auto; } } + +.order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +.order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + +.order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + +.order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + +.order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + +.order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } + +.order-7 { + -webkit-order: 7; + -ms-flex-order: 7; + order: 7; } + +.order-8 { + -webkit-order: 8; + -ms-flex-order: 8; + order: 8; } + +.order-9 { + -webkit-order: 9; + -ms-flex-order: 9; + order: 9; } + +.order-10 { + -webkit-order: 10; + -ms-flex-order: 10; + order: 10; } + +.order-11 { + -webkit-order: 11; + -ms-flex-order: 11; + order: 11; } + +.order-12 { + -webkit-order: 12; + -ms-flex-order: 12; + order: 12; } + +.small-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + +.small-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +.small-offset-1 { + margin-left: 8.33333%; } + +.small-up-1 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-1 > li, .small-up-1 > div, .small-up-1 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } + +.small-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + +.small-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + +.small-offset-2 { + margin-left: 16.66667%; } + +.small-up-2 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-2 > li, .small-up-2 > div, .small-up-2 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; } + +.small-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + +.small-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + +.small-offset-3 { + margin-left: 25%; } + +.small-up-3 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-3 > li, .small-up-3 > div, .small-up-3 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; } + +.small-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + +.small-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + +.small-offset-4 { + margin-left: 33.33333%; } + +.small-up-4 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-4 > li, .small-up-4 > div, .small-up-4 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; } + +.small-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + +.small-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + +.small-offset-5 { + margin-left: 41.66667%; } + +.small-up-5 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-5 > li, .small-up-5 > div, .small-up-5 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 20%; + -ms-flex: 0 0 20%; + flex: 0 0 20%; } + +.small-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + +.small-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } + +.small-offset-6 { + margin-left: 50%; } + +.small-up-6 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-6 > li, .small-up-6 > div, .small-up-6 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; } + +.small-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + +.small-order-7 { + -webkit-order: 7; + -ms-flex-order: 7; + order: 7; } + +.small-offset-7 { + margin-left: 58.33333%; } + +.small-up-7 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-7 > li, .small-up-7 > div, .small-up-7 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 14.28571%; + -ms-flex: 0 0 14.28571%; + flex: 0 0 14.28571%; } + +.small-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + +.small-order-8 { + -webkit-order: 8; + -ms-flex-order: 8; + order: 8; } + +.small-offset-8 { + margin-left: 66.66667%; } + +.small-up-8 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-8 > li, .small-up-8 > div, .small-up-8 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 12.5%; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; } + +.small-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + +.small-order-9 { + -webkit-order: 9; + -ms-flex-order: 9; + order: 9; } + +.small-offset-9 { + margin-left: 75%; } + +.small-up-9 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-9 > li, .small-up-9 > div, .small-up-9 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 11.11111%; + -ms-flex: 0 0 11.11111%; + flex: 0 0 11.11111%; } + +.small-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + +.small-order-10 { + -webkit-order: 10; + -ms-flex-order: 10; + order: 10; } + +.small-offset-10 { + margin-left: 83.33333%; } + +.small-up-10 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-10 > li, .small-up-10 > div, .small-up-10 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 10%; + -ms-flex: 0 0 10%; + flex: 0 0 10%; } + +.small-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + +.small-order-11 { + -webkit-order: 11; + -ms-flex-order: 11; + order: 11; } + +.small-offset-11 { + margin-left: 91.66667%; } + +.small-up-11 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-11 > li, .small-up-11 > div, .small-up-11 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 9.09091%; + -ms-flex: 0 0 9.09091%; + flex: 0 0 9.09091%; } + +.small-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } + +.small-order-12 { + -webkit-order: 12; + -ms-flex-order: 12; + order: 12; } + +.small-offset-12 { + margin-left: 100%; } + +.small-up-12 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .small-up-12 > li, .small-up-12 > div, .small-up-12 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; } + +@media only screen and (min-width: 40em) { + .medium-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + .medium-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + .medium-offset-1 { + margin-left: 8.33333%; } + .medium-up-1 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-1 > li, .medium-up-1 > div, .medium-up-1 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } } + +@media only screen and (min-width: 40em) { + .medium-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + .medium-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + .medium-offset-2 { + margin-left: 16.66667%; } + .medium-up-2 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-2 > li, .medium-up-2 > div, .medium-up-2 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; } } + +@media only screen and (min-width: 40em) { + .medium-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + .medium-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + .medium-offset-3 { + margin-left: 25%; } + .medium-up-3 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-3 > li, .medium-up-3 > div, .medium-up-3 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; } } + +@media only screen and (min-width: 40em) { + .medium-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + .medium-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + .medium-offset-4 { + margin-left: 33.33333%; } + .medium-up-4 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-4 > li, .medium-up-4 > div, .medium-up-4 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; } } + +@media only screen and (min-width: 40em) { + .medium-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + .medium-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + .medium-offset-5 { + margin-left: 41.66667%; } + .medium-up-5 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-5 > li, .medium-up-5 > div, .medium-up-5 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 20%; + -ms-flex: 0 0 20%; + flex: 0 0 20%; } } + +@media only screen and (min-width: 40em) { + .medium-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + .medium-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } + .medium-offset-6 { + margin-left: 50%; } + .medium-up-6 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-6 > li, .medium-up-6 > div, .medium-up-6 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; } } + +@media only screen and (min-width: 40em) { + .medium-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + .medium-order-7 { + -webkit-order: 7; + -ms-flex-order: 7; + order: 7; } + .medium-offset-7 { + margin-left: 58.33333%; } + .medium-up-7 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-7 > li, .medium-up-7 > div, .medium-up-7 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 14.28571%; + -ms-flex: 0 0 14.28571%; + flex: 0 0 14.28571%; } } + +@media only screen and (min-width: 40em) { + .medium-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + .medium-order-8 { + -webkit-order: 8; + -ms-flex-order: 8; + order: 8; } + .medium-offset-8 { + margin-left: 66.66667%; } + .medium-up-8 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-8 > li, .medium-up-8 > div, .medium-up-8 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 12.5%; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; } } + +@media only screen and (min-width: 40em) { + .medium-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + .medium-order-9 { + -webkit-order: 9; + -ms-flex-order: 9; + order: 9; } + .medium-offset-9 { + margin-left: 75%; } + .medium-up-9 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-9 > li, .medium-up-9 > div, .medium-up-9 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 11.11111%; + -ms-flex: 0 0 11.11111%; + flex: 0 0 11.11111%; } } + +@media only screen and (min-width: 40em) { + .medium-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + .medium-order-10 { + -webkit-order: 10; + -ms-flex-order: 10; + order: 10; } + .medium-offset-10 { + margin-left: 83.33333%; } + .medium-up-10 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-10 > li, .medium-up-10 > div, .medium-up-10 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 10%; + -ms-flex: 0 0 10%; + flex: 0 0 10%; } } + +@media only screen and (min-width: 40em) { + .medium-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + .medium-order-11 { + -webkit-order: 11; + -ms-flex-order: 11; + order: 11; } + .medium-offset-11 { + margin-left: 91.66667%; } + .medium-up-11 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-11 > li, .medium-up-11 > div, .medium-up-11 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 9.09091%; + -ms-flex: 0 0 9.09091%; + flex: 0 0 9.09091%; } } + +@media only screen and (min-width: 40em) { + .medium-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } + .medium-order-12 { + -webkit-order: 12; + -ms-flex-order: 12; + order: 12; } + .medium-offset-12 { + margin-left: 100%; } + .medium-up-12 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .medium-up-12 > li, .medium-up-12 > div, .medium-up-12 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; } } + +@media only screen and (min-width: 75em) { + .large-1 { + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + max-width: 8.33333%; } + .large-order-1 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + .large-offset-1 { + margin-left: 8.33333%; } + .large-up-1 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-1 > li, .large-up-1 > div, .large-up-1 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; } } + +@media only screen and (min-width: 75em) { + .large-2 { + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + max-width: 16.66667%; } + .large-order-2 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; } + .large-offset-2 { + margin-left: 16.66667%; } + .large-up-2 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-2 > li, .large-up-2 > div, .large-up-2 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; } } + +@media only screen and (min-width: 75em) { + .large-3 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + .large-order-3 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } + .large-offset-3 { + margin-left: 25%; } + .large-up-3 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-3 > li, .large-up-3 > div, .large-up-3 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; } } + +@media only screen and (min-width: 75em) { + .large-4 { + -webkit-flex: 0 0 33.33333%; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + max-width: 33.33333%; } + .large-order-4 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; } + .large-offset-4 { + margin-left: 33.33333%; } + .large-up-4 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-4 > li, .large-up-4 > div, .large-up-4 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; } } + +@media only screen and (min-width: 75em) { + .large-5 { + -webkit-flex: 0 0 41.66667%; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + max-width: 41.66667%; } + .large-order-5 { + -webkit-order: 5; + -ms-flex-order: 5; + order: 5; } + .large-offset-5 { + margin-left: 41.66667%; } + .large-up-5 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-5 > li, .large-up-5 > div, .large-up-5 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 20%; + -ms-flex: 0 0 20%; + flex: 0 0 20%; } } + +@media only screen and (min-width: 75em) { + .large-6 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + .large-order-6 { + -webkit-order: 6; + -ms-flex-order: 6; + order: 6; } + .large-offset-6 { + margin-left: 50%; } + .large-up-6 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-6 > li, .large-up-6 > div, .large-up-6 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 16.66667%; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; } } + +@media only screen and (min-width: 75em) { + .large-7 { + -webkit-flex: 0 0 58.33333%; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + max-width: 58.33333%; } + .large-order-7 { + -webkit-order: 7; + -ms-flex-order: 7; + order: 7; } + .large-offset-7 { + margin-left: 58.33333%; } + .large-up-7 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-7 > li, .large-up-7 > div, .large-up-7 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 14.28571%; + -ms-flex: 0 0 14.28571%; + flex: 0 0 14.28571%; } } + +@media only screen and (min-width: 75em) { + .large-8 { + -webkit-flex: 0 0 66.66667%; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + max-width: 66.66667%; } + .large-order-8 { + -webkit-order: 8; + -ms-flex-order: 8; + order: 8; } + .large-offset-8 { + margin-left: 66.66667%; } + .large-up-8 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-8 > li, .large-up-8 > div, .large-up-8 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 12.5%; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; } } + +@media only screen and (min-width: 75em) { + .large-9 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + .large-order-9 { + -webkit-order: 9; + -ms-flex-order: 9; + order: 9; } + .large-offset-9 { + margin-left: 75%; } + .large-up-9 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-9 > li, .large-up-9 > div, .large-up-9 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 11.11111%; + -ms-flex: 0 0 11.11111%; + flex: 0 0 11.11111%; } } + +@media only screen and (min-width: 75em) { + .large-10 { + -webkit-flex: 0 0 83.33333%; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + max-width: 83.33333%; } + .large-order-10 { + -webkit-order: 10; + -ms-flex-order: 10; + order: 10; } + .large-offset-10 { + margin-left: 83.33333%; } + .large-up-10 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-10 > li, .large-up-10 > div, .large-up-10 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 10%; + -ms-flex: 0 0 10%; + flex: 0 0 10%; } } + +@media only screen and (min-width: 75em) { + .large-11 { + -webkit-flex: 0 0 91.66667%; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + max-width: 91.66667%; } + .large-order-11 { + -webkit-order: 11; + -ms-flex-order: 11; + order: 11; } + .large-offset-11 { + margin-left: 91.66667%; } + .large-up-11 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-11 > li, .large-up-11 > div, .large-up-11 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 9.09091%; + -ms-flex: 0 0 9.09091%; + flex: 0 0 9.09091%; } } + +@media only screen and (min-width: 75em) { + .large-12 { + -webkit-flex: 0 0 100%; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; } + .large-order-12 { + -webkit-order: 12; + -ms-flex-order: 12; + order: 12; } + .large-offset-12 { + margin-left: 100%; } + .large-up-12 { + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + overflow: visible; + list-style-type: none; } + .large-up-12 > li, .large-up-12 > div, .large-up-12 > section { + padding: 0 1rem 1rem; + -webkit-flex: 0 0 8.33333%; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; } } + +.grid-content .modal .grid-block { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } + +/* + TITLE BAR + --------- + + A navigational component which can display the current screen the user is on, along with additional controls or menu items. + + The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order: + - Center + - Left + - Right +*/ +.title-bar { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + overflow: visible; } + .title-bar .title { + font-weight: bold; } + .title-bar .left, .title-bar .center, .title-bar .right { + display: block; + white-space: nowrap; + overflow: visible; } + .title-bar .left:first-child:last-child, .title-bar .center:first-child:last-child, .title-bar .right:first-child:last-child { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin: 0; } + .title-bar .left { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; } + .title-bar .center { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + text-align: center; } + .title-bar .right { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + text-align: right; } + .title-bar .left:first-child { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .title-bar .left:first-child + .right:last-child { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .title-bar .center:first-child:not(:last-child) { + margin-left: 25%; } + .title-bar .center + .left { + margin-right: -25%; } + +.title-bar { + background: #eee; + color: #000; + padding: 1rem; + border-bottom: 1px solid #ccc; } + .title-bar.primary { + background: #00558b; + color: #fff; + padding: 1rem; + border-bottom: 1px solid #ccc; } + .title-bar.primary a, .title-bar.primary a:hover { + color: #fff; } + .title-bar.primary .iconic * { + fill: #fff; + stroke: #fff; } + .title-bar.primary .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .title-bar.dark { + background: #232323; + color: #fff; + padding: 1rem; + border-bottom: 1px solid #ccc; } + .title-bar.dark a, .title-bar.dark a:hover { + color: #fff; } + .title-bar.dark .iconic * { + fill: #fff; + stroke: #fff; } + .title-bar.dark .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + +.title-bar-bottom { + border-bottom: 0; + border-top: 1px solid #ccc; } + +/* + Label +*/ +.label { + line-height: 1; + white-space: nowrap; + display: inline-block; + cursor: default; } + +.label { + font-size: 0.8rem; + padding: 0.33333rem 0.5rem; + background: #00558b; + border-radius: 0; + color: #fff; } + .label.primary { + background: #00558b; + border-radius: 0; + color: #fff; } + .label.success { + background: #43AC6A; + border-radius: 0; + color: #fff; } + .label.warning { + background: #F08A24; + border-radius: 0; + color: #fff; } + .label.alert { + background: #F04124; + border-radius: 0; + color: #fff; } + .label.dark { + background: #232323; + border-radius: 0; + color: #fff; } + +/* + Badge +*/ +.badge { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + border-radius: 1000px; } + +.badge { + font-size: 0.8em; + width: 1.5rem; + height: 1.5rem; + background: #00558b; + color: #fff; } + .badge.secondary { + background: #f1f1f1; + color: #000; } + .badge.primary { + background: #00558b; + color: #fff; } + .badge.success { + background: #43AC6A; + color: #fff; } + .badge.warning { + background: #F08A24; + color: #fff; } + .badge.alert { + background: #F04124; + color: #fff; } + .badge.dark { + background: #232323; + color: #fff; } + +.inline-list { + list-style-type: none; + text-align: left; } + .inline-list li, .inline-list dt, .inline-list dd { + display: inline-block; + margin-left: -2px; + margin-right: -2px; } + .inline-list li { + margin-right: 1rem; + margin-left: 0; } + +/* + MENU BAR + -------- + + A generic, flexible menu component. + + Features: + - Orient horizontally and vertically + - Change orientation at certain breakpoints + - Items with icons above, below, or to the left or right + - Text labels for vertical menus and badges for horizontal menus +*/ +.menu-bar { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 0; + list-style-type: none; } + .menu-bar > li { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .menu-bar > li > a { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: 1rem; + font-size: 1rem; + line-height: 1; } + +/* + Set the alignment of menu items (li) within a menu-bar + + left: Items align to the left. + right: Items align to the right. + center: Items align to the center. + justify: Items are spaced equally apart so they occupy the space of the entire grid. + spaced: Items are given equal space to their left and right. + + @group menu-bar + + @param {string} $align - Alignment to use. + + @output An appropriate justify-content value. +*/ +/* + CSS output +*/ +.menu-bar { + background: #fff; } + .menu-bar > li > a { + color: #000; } + .menu-bar > li > a:hover { + background: #ededed; + color: #000; } + .menu-bar .is-active > a { + background: #ededed; + color: #000; } + .menu-bar .iconic * { + fill: #000; + stroke: #000; } + .menu-bar .iconic *.iconic-property-accent { + fill: #000; + stroke: #000; } + .menu-bar, .menu-bar.horizontal { + /* + Orientation + */ + overflow-x: hidden; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + /* + Stretch + */ } + .menu-bar > li > a, .menu-bar.horizontal > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.vertical { + /* + Orientation + */ + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + /* + Stretch + */ } + .menu-bar.vertical > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } + .menu-bar.condense > li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .menu-bar.align-right { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + .menu-bar.align-center { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + .menu-bar.align-justify { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .menu-bar.align-spaced { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + .menu-bar.small-condense li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .menu-bar.small-expand li { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } + .menu-bar.small-align-left { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; } + .menu-bar.small-align-right { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + .menu-bar.small-align-center { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + .menu-bar.small-align-justify { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .menu-bar.small-align-spaced { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } + @media only screen and (min-width: 40em) { + .menu-bar.medium-condense li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .menu-bar.medium-expand li { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } + .menu-bar.medium-align-left { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; } + .menu-bar.medium-align-right { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + .menu-bar.medium-align-center { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + .menu-bar.medium-align-justify { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .menu-bar.medium-align-spaced { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-condense li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .menu-bar.large-expand li { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } + .menu-bar.large-align-left { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; } + .menu-bar.large-align-right { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + .menu-bar.large-align-center { + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + .menu-bar.large-align-justify { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .menu-bar.large-align-spaced { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } } + .menu-bar.small-horizontal { + /* + Orientation + */ + overflow-x: hidden; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + /* + Stretch + */ } + .menu-bar.small-horizontal > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.small-vertical { + /* + Orientation + */ + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + /* + Stretch + */ } + .menu-bar.small-vertical > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } + @media only screen and (min-width: 40em) { + .menu-bar.medium-horizontal { + /* + Orientation + */ + overflow-x: hidden; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + /* + Stretch + */ } + .menu-bar.medium-horizontal > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.medium-vertical { + /* + Orientation + */ + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + /* + Stretch + */ } + .menu-bar.medium-vertical > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-horizontal { + /* + Orientation + */ + overflow-x: hidden; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + /* + Stretch + */ } + .menu-bar.large-horizontal > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.large-vertical { + /* + Orientation + */ + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + /* + Stretch + */ } + .menu-bar.large-vertical > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } } + .menu-bar > li > img, .menu-bar > li > .iconic, .menu-bar.icon-top > li > img, .menu-bar.icon-top > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar > li > a, .menu-bar.icon-top > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar > li > a > img, .menu-bar > li > a > .iconic, .menu-bar.icon-top > li > a > img, .menu-bar.icon-top > li > a > .iconic { + margin: 0 0 1rem 0; } + .menu-bar.icon-right > li > img, .menu-bar.icon-right > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.icon-right > li > a { + -webkit-flex-flow: row-reverse nowrap; + -ms-flex-flow: row-reverse nowrap; + flex-flow: row-reverse nowrap; } + .menu-bar.icon-right > li > a > img, .menu-bar.icon-right > li > a > .iconic { + margin: 0 0 0 1rem; } + .menu-bar.icon-bottom > li > img, .menu-bar.icon-bottom > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.icon-bottom > li > a { + -webkit-flex-flow: column-reverse nowrap; + -ms-flex-flow: column-reverse nowrap; + flex-flow: column-reverse nowrap; } + .menu-bar.icon-bottom > li > a > img, .menu-bar.icon-bottom > li > a > .iconic { + margin: 1rem 0 0 0; } + .menu-bar.icon-left > li > img, .menu-bar.icon-left > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.icon-left > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .menu-bar.icon-left > li > a > img, .menu-bar.icon-left > li > a > .iconic { + margin: 0 1rem 0 0; } + .menu-bar.small-icon-top > li > img, .menu-bar.small-icon-top > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.small-icon-top > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.small-icon-top > li > a > img, .menu-bar.small-icon-top > li > a > .iconic { + margin: 0 0 1rem 0; } + .menu-bar.small-icon-right > li > img, .menu-bar.small-icon-right > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.small-icon-right > li > a { + -webkit-flex-flow: row-reverse nowrap; + -ms-flex-flow: row-reverse nowrap; + flex-flow: row-reverse nowrap; } + .menu-bar.small-icon-right > li > a > img, .menu-bar.small-icon-right > li > a > .iconic { + margin: 0 0 0 1rem; } + .menu-bar.small-icon-bottom > li > img, .menu-bar.small-icon-bottom > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.small-icon-bottom > li > a { + -webkit-flex-flow: column-reverse nowrap; + -ms-flex-flow: column-reverse nowrap; + flex-flow: column-reverse nowrap; } + .menu-bar.small-icon-bottom > li > a > img, .menu-bar.small-icon-bottom > li > a > .iconic { + margin: 1rem 0 0 0; } + .menu-bar.small-icon-left > li > img, .menu-bar.small-icon-left > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.small-icon-left > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .menu-bar.small-icon-left > li > a > img, .menu-bar.small-icon-left > li > a > .iconic { + margin: 0 1rem 0 0; } + @media only screen and (min-width: 40em) { + .menu-bar.medium-icon-top > li > img, .menu-bar.medium-icon-top > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.medium-icon-top > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.medium-icon-top > li > a > img, .menu-bar.medium-icon-top > li > a > .iconic { + margin: 0 0 1rem 0; } } + @media only screen and (min-width: 40em) { + .menu-bar.medium-icon-right > li > img, .menu-bar.medium-icon-right > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.medium-icon-right > li > a { + -webkit-flex-flow: row-reverse nowrap; + -ms-flex-flow: row-reverse nowrap; + flex-flow: row-reverse nowrap; } + .menu-bar.medium-icon-right > li > a > img, .menu-bar.medium-icon-right > li > a > .iconic { + margin: 0 0 0 1rem; } } + @media only screen and (min-width: 40em) { + .menu-bar.medium-icon-bottom > li > img, .menu-bar.medium-icon-bottom > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.medium-icon-bottom > li > a { + -webkit-flex-flow: column-reverse nowrap; + -ms-flex-flow: column-reverse nowrap; + flex-flow: column-reverse nowrap; } + .menu-bar.medium-icon-bottom > li > a > img, .menu-bar.medium-icon-bottom > li > a > .iconic { + margin: 1rem 0 0 0; } } + @media only screen and (min-width: 40em) { + .menu-bar.medium-icon-left > li > img, .menu-bar.medium-icon-left > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.medium-icon-left > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .menu-bar.medium-icon-left > li > a > img, .menu-bar.medium-icon-left > li > a > .iconic { + margin: 0 1rem 0 0; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-icon-top > li > img, .menu-bar.large-icon-top > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.large-icon-top > li > a { + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .menu-bar.large-icon-top > li > a > img, .menu-bar.large-icon-top > li > a > .iconic { + margin: 0 0 1rem 0; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-icon-right > li > img, .menu-bar.large-icon-right > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.large-icon-right > li > a { + -webkit-flex-flow: row-reverse nowrap; + -ms-flex-flow: row-reverse nowrap; + flex-flow: row-reverse nowrap; } + .menu-bar.large-icon-right > li > a > img, .menu-bar.large-icon-right > li > a > .iconic { + margin: 0 0 0 1rem; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-icon-bottom > li > img, .menu-bar.large-icon-bottom > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.large-icon-bottom > li > a { + -webkit-flex-flow: column-reverse nowrap; + -ms-flex-flow: column-reverse nowrap; + flex-flow: column-reverse nowrap; } + .menu-bar.large-icon-bottom > li > a > img, .menu-bar.large-icon-bottom > li > a > .iconic { + margin: 1rem 0 0 0; } } + @media only screen and (min-width: 75em) { + .menu-bar.large-icon-left > li > img, .menu-bar.large-icon-left > li > .iconic { + margin: 0; + width: 25px; + height: 25px; } + .menu-bar.large-icon-left > li > a { + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .menu-bar.large-icon-left > li > a > img, .menu-bar.large-icon-left > li > a > .iconic { + margin: 0 1rem 0 0; } } + .menu-bar.label-side > li { + position: relative; } + .menu-bar.label-side > li > a { + padding-right: 3.2rem; } + .menu-bar.label-side .menu-bar-label { + display: block; + font-size: 0.9rem; + width: 1.2rem; + height: 1.2rem; + line-height: 1.2rem; + text-align: center; + border-radius: 1000px; + background: red; + color: #fff; + position: absolute; + pointer-events: none; + right: 1rem; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } + .menu-bar.label-corner > li { + position: relative; } + .menu-bar.label-corner > li > a { + padding-right: 3.2rem; } + .menu-bar.label-corner .menu-bar-label { + display: block; + font-size: 0.9rem; + width: 1.2rem; + height: 1.2rem; + line-height: 1.2rem; + text-align: center; + border-radius: 1000px; + background: red; + color: #fff; + position: absolute; + pointer-events: none; + right: 1rem; + top: 1rem; } + .menu-bar.primary { + background: #00558b; } + .menu-bar.primary > li > a { + color: #fff; } + .menu-bar.primary > li > a:hover { + background: #0065a5; + color: #fff; } + .menu-bar.primary .is-active > a { + background: #0065a5; + color: #fff; } + .menu-bar.primary .iconic * { + fill: #fff; + stroke: #fff; } + .menu-bar.primary .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .menu-bar.dark { + background: #232323; } + .menu-bar.dark > li > a { + color: #fff; } + .menu-bar.dark > li > a:hover { + background: #323232; + color: #fff; } + .menu-bar.dark .is-active > a { + background: #323232; + color: #fff; } + .menu-bar.dark .iconic * { + fill: #fff; + stroke: #fff; } + .menu-bar.dark .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .menu-bar > li.title { + padding: 1rem; + cursor: default; + font-weight: bold; } + +.menu-group { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + @media only screen and (min-width: 40em) { + .menu-group { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } } + .menu-group > .menu-group-left, .menu-group > .menu-group-right { + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; } + @media only screen and (min-width: 40em) { + .menu-group > .menu-group-left, .menu-group > .menu-group-right { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } } + .menu-group .menu-bar { + margin: 0; } + .menu-group .menu-bar > li { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } + .menu-group.primary { + background-color: #00558b; } + .menu-group.primary .menu-bar { + background: #00558b; } + .menu-group.primary .menu-bar > li > a { + color: #fff; } + .menu-group.primary .menu-bar > li > a:hover { + background: #0065a5; + color: #fff; } + .menu-group.primary .menu-bar .is-active > a { + background: #0065a5; + color: #fff; } + .menu-group.primary .menu-bar .iconic * { + fill: #fff; + stroke: #fff; } + .menu-group.primary .menu-bar .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + .menu-group.dark { + background-color: #232323; } + .menu-group.dark .menu-bar { + background: #232323; } + .menu-group.dark .menu-bar > li > a { + color: #fff; } + .menu-group.dark .menu-bar > li > a:hover { + background: #323232; + color: #fff; } + .menu-group.dark .menu-bar .is-active > a { + background: #323232; + color: #fff; } + .menu-group.dark .menu-bar .iconic * { + fill: #fff; + stroke: #fff; } + .menu-group.dark .menu-bar .iconic *.iconic-property-accent { + fill: #fff; + stroke: #fff; } + +/* + MODAL + ----- + + The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it. + + Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same. +*/ +.modal { + position: relative; + z-index: 1001; + background: #fff; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 100%; + height: 100vh; + max-height: 100%; + overflow: hidden; + padding: 1rem; } + @media only screen and (min-width: 40em) { + .modal { + height: auto; + max-width: 600px; } } + .modal .grid-content, .modal .grid-block { + margin: 0; } + .modal .close-button, .modal [fa-close] { + z-index: 1001; } + +.modal { + max-width: 600px; + border-radius: 0px; } + .tiny > .modal { + max-width: 300px; } + .small > .modal { + max-width: 500px; } + .large > .modal { + max-width: 800px; } + .dialog > .modal { + height: auto; } + .collapse > .modal { + padding: 0; } + +.modal-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + display: none; + background-color: rgba(51, 51, 51, 0.7); + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } + .modal-overlay.is-active { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +@-webkit-keyframes shake { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +@keyframes shake { + 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { + -webkit-transform: translateX(7%); + transform: translateX(7%); } + + 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { + -webkit-transform: translateX(-7%); + transform: translateX(-7%); } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes spin-cw { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes spin-cw { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-keyframes spin-ccw { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes spin-ccw { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@-webkit-keyframes wiggle { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes wiggle { + 40%, 50%, 60% { + -webkit-transform: rotate(7deg); + transform: rotate(7deg); } + + 35%, 45%, 55%, 65% { + -webkit-transform: rotate(-7deg); + transform: rotate(-7deg); } + + 0%, 30%, 70%, 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +/* + Transitions + */ +.slideInDown.ng-enter, .slideInDown.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); } +.slideInDown.ng-enter.ng-enter-active, .slideInDown.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } + +.slideInLeft.ng-enter, .slideInLeft.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(100%); + transform: translateX(100%); } +.slideInLeft.ng-enter.ng-enter-active, .slideInLeft.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } + +.slideInUp.ng-enter, .slideInUp.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateY(100%); + transform: translateY(100%); } +.slideInUp.ng-enter.ng-enter-active, .slideInUp.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } + +.slideInRight.ng-enter, .slideInRight.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } +.slideInRight.ng-enter.ng-enter-active, .slideInRight.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } + +.slideOutBottom.ng-leave, .slideOutBottom.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } +.slideOutBottom.ng-leave.ng-leave-active, .slideOutBottom.ng-hide-add.ng-hide-add-active { + -webkit-transform: translateY(100%); + transform: translateY(100%); } + +.slideOutRight.ng-leave, .slideOutRight.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } +.slideOutRight.ng-leave.ng-leave-active, .slideOutRight.ng-hide-add.ng-hide-add-active { + -webkit-transform: translateX(100%); + transform: translateX(100%); } + +.slideOutUp.ng-leave, .slideOutUp.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } +.slideOutUp.ng-leave.ng-leave-active, .slideOutUp.ng-hide-add.ng-hide-add-active { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); } + +.slideOutLeft.ng-leave, .slideOutLeft.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); } +.slideOutLeft.ng-leave.ng-leave-active, .slideOutLeft.ng-hide-add.ng-hide-add-active { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + +.fadeIn.ng-enter, .fadeIn.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: opacity; + opacity: 0; } +.fadeIn.ng-enter.ng-enter-active, .fadeIn.ng-hide-remove.ng-hide-remove-active { + opacity: 1; } + +.fadeOut.ng-leave, .fadeOut.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: opacity; + opacity: 1; } +.fadeOut.ng-leave.ng-leave-active, .fadeOut.ng-hide-add.ng-hide-add-active { + opacity: 0; } + +.hingeInFromTop.ng-enter, .hingeInFromTop.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 0; } +.hingeInFromTop.ng-enter.ng-enter-active, .hingeInFromTop.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeInFromRight.ng-enter, .hingeInFromRight.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: right; + transform-origin: right; + opacity: 0; } +.hingeInFromRight.ng-enter.ng-enter-active, .hingeInFromRight.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeInFromBottom.ng-enter, .hingeInFromBottom.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + -webkit-transform-origin: bottom; + transform-origin: bottom; + opacity: 0; } +.hingeInFromBottom.ng-enter.ng-enter-active, .hingeInFromBottom.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeInFromLeft.ng-enter, .hingeInFromLeft.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + -webkit-transform-origin: left; + transform-origin: left; + opacity: 0; } +.hingeInFromLeft.ng-enter.ng-enter-active, .hingeInFromLeft.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeInFromMiddleX.ng-enter, .hingeInFromMiddleX.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + -webkit-transform-origin: center; + transform-origin: center; + opacity: 0; } +.hingeInFromMiddleX.ng-enter.ng-enter-active, .hingeInFromMiddleX.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeInFromMiddleY.ng-enter, .hingeInFromMiddleY.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + -webkit-transform-origin: center; + transform-origin: center; + opacity: 0; } +.hingeInFromMiddleY.ng-enter.ng-enter-active, .hingeInFromMiddleY.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 1; } + +.hingeOutFromTop.ng-leave, .hingeOutFromTop.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 1; } +.hingeOutFromTop.ng-leave.ng-leave-active, .hingeOutFromTop.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hingeOutFromRight.ng-leave, .hingeOutFromRight.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: right; + transform-origin: right; + opacity: 1; } +.hingeOutFromRight.ng-leave.ng-leave-active, .hingeOutFromRight.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.hingeOutFromBottom.ng-leave, .hingeOutFromBottom.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: bottom; + transform-origin: bottom; + opacity: 1; } +.hingeOutFromBottom.ng-leave.ng-leave-active, .hingeOutFromBottom.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateX(90deg); + transform: perspective(2000px) rotateX(90deg); + opacity: 0; } + +.hingeOutFromLeft.ng-leave, .hingeOutFromLeft.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: left; + transform-origin: left; + opacity: 1; } +.hingeOutFromLeft.ng-leave.ng-leave-active, .hingeOutFromLeft.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; } + +.hingeOutFromMiddleX.ng-leave, .hingeOutFromMiddleX.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; } +.hingeOutFromMiddleX.ng-leave.ng-leave-active, .hingeOutFromMiddleX.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; } + +.hingeOutFromMiddleY.ng-leave, .hingeOutFromMiddleY.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; } +.hingeOutFromMiddleY.ng-leave.ng-leave-active, .hingeOutFromMiddleY.ng-hide-add.ng-hide-add-active { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; } + +.zoomIn.ng-enter, .zoomIn.ng-hide-remove { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, property; + transition-property: transform, property; + -webkit-transform: scale(1.5); + transform: scale(1.5); + opacity: 0; } +.zoomIn.ng-enter.ng-enter-active, .zoomIn.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.zoomOut.ng-leave, .zoomOut.ng-hide-add { + transition-duration: 500ms; + transition-timing-function: ease; + transition-delay: 0; + transition-property: -webkit-transform, property; + transition-property: transform, property; + -webkit-transform: scale(0.5); + transform: scale(0.5); + opacity: 1; } +.zoomOut.ng-leave.ng-leave-active, .zoomOut.ng-hide-add.ng-hide-add-active { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } + +.spinIn.ng-enter, .spinIn.ng-hide-remove { + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(-270deg); + transform: rotate(-270deg); + opacity: 0; } +.spinIn.ng-enter.ng-enter-active, .spinIn.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spinOut.ng-leave, .spinOut.ng-hide-add { + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } +.spinOut.ng-leave.ng-leave-active, .spinOut.ng-hide-add.ng-hide-add-active { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + opacity: 0; } + +.spinInCCW.ng-enter, .spinInCCW.ng-hide-remove { + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + opacity: 0; } +.spinInCCW.ng-enter.ng-enter-active, .spinInCCW.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } + +.spinOutCCW.ng-leave, .spinOutCCW.ng-hide-add { + transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; } +.spinOutCCW.ng-leave.ng-leave-active, .spinOutCCW.ng-hide-add.ng-hide-add-active { + -webkit-transform: rotate(-270deg); + transform: rotate(-270deg); + opacity: 0; } + +/* + Transition modifiers + */ +.slow { + transition-duration: 750ms !important; } + +.fast { + transition-duration: 250ms !important; } + +.linear { + transition-timing-function: linear !important; } + +.ease { + transition-timing-function: ease !important; } + +.easeIn { + transition-timing-function: ease-in !important; } + +.easeOut { + transition-timing-function: ease-out !important; } + +.easeInOut { + transition-timing-function: ease-in-out !important; } + +.bounceIn { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } + +.bounceOut { + transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } + +.bounceInOut { + transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } + +.delay { + transition-delay: 300ms !important; } + +.long-delay { + transition-delay: 700ms !important; } + +/* + Animations + */ +.shake { + -webkit-animation-name: shake; + animation-name: shake; + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-animation-delay: 0; + animation-delay: 0; } + +.spin-cw { + -webkit-animation-name: spin-cw; + animation-name: spin-cw; + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-animation-delay: 0; + animation-delay: 0; } + +.spin-ccw { + -webkit-animation-name: spin-ccw; + animation-name: spin-ccw; + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-animation-delay: 0; + animation-delay: 0; } + +.wiggle { + -webkit-animation-name: wiggle; + animation-name: wiggle; + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-animation-delay: 0; + animation-delay: 0; } + +/* + Animation modifiers + */ +.shake.infinite, .spin-cw.infinite, .spin-ccw.infinite, .wiggle.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } +.shake.linear, .spin-cw.linear, .spin-ccw.linear, .wiggle.linear { + -webkit-animation-timing-function: linear !important; + animation-timing-function: linear !important; } +.shake.ease, .spin-cw.ease, .spin-ccw.ease, .wiggle.ease { + -webkit-animation-timing-function: ease !important; + animation-timing-function: ease !important; } +.shake.easeIn, .spin-cw.easeIn, .spin-ccw.easeIn, .wiggle.easeIn { + -webkit-animation-timing-function: ease-in !important; + animation-timing-function: ease-in !important; } +.shake.easeOut, .spin-cw.easeOut, .spin-ccw.easeOut, .wiggle.easeOut { + -webkit-animation-timing-function: ease-out !important; + animation-timing-function: ease-out !important; } +.shake.easeInOut, .spin-cw.easeInOut, .spin-ccw.easeInOut, .wiggle.easeInOut { + -webkit-animation-timing-function: ease-in-out !important; + animation-timing-function: ease-in-out !important; } +.shake.bounceIn, .spin-cw.bounceIn, .spin-ccw.bounceIn, .wiggle.bounceIn { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; } +.shake.bounceOut, .spin-cw.bounceOut, .spin-ccw.bounceOut, .wiggle.bounceOut { + -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; + animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; } +.shake.bounceInOut, .spin-cw.bounceInOut, .spin-ccw.bounceInOut, .wiggle.bounceInOut { + -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; + animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; } +.shake.slow, .spin-cw.slow, .spin-ccw.slow, .wiggle.slow { + -webkit-animation-duration: 750ms !important; + animation-duration: 750ms !important; } +.shake.fast, .spin-cw.fast, .spin-ccw.fast, .wiggle.fast { + -webkit-animation-duration: 250ms !important; + animation-duration: 250ms !important; } +.shake.delay, .spin-cw.delay, .spin-ccw.delay, .wiggle.delay { + -webkit-animation-delay: 300ms !important; + animation-delay: 300ms !important; } +.shake.long-delay, .spin-cw.long-delay, .spin-ccw.long-delay, .wiggle.long-delay { + -webkit-animation-delay: 700ms !important; + animation-delay: 700ms !important; } + +.stagger { + transition-delay: 150ms; + transition-duration: 0; } + +.stort-stagger { + transition-delay: 150ms; + transition-duration: 0; } + +.long-stagger { + transition-delay: 150ms; + transition-duration: 0; } + +.position-absolute { + overflow: hidden; + position: relative; } + +.ui-animation.ng-enter-active, .ui-animation.ng-leave-active { + position: absolute !important; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + top: 0; + right: 0; + bottom: 0; + left: 0; } + +/* + NOTIFICATION + ------------ + + An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well. + + Optionally, the notifications directive can also tap into the browser's native notification support, if it exists. +*/ +.notification, .static-notification { + z-index: 1000; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + margin-top: .5rem; + margin-bottom: .5rem; + display: none; } + .notification h1, .static-notification h1 { + font-size: 1.25em; + margin: 0; } + .notification p, .static-notification p { + margin: 0; } + .is-active.notification, .is-active.static-notification { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .notification .close-button, .static-notification .close-button { + color: white; } + +.notification-container { + z-index: 3000; + position: fixed; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +/* + CSS Output +*/ +.notification { + background: #00558b; + padding: 1rem; + border-radius: 4px; } + .notification, .notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 { + color: white; } + .notification.success { + background: #43AC6A; + padding: 1rem; + border-radius: 4px; } + .notification.success, .notification.success h1, .notification.success h2, .notification.success h3, .notification.success h4, .notification.success h5, .notification.success h6 { + color: white; } + .notification.warning { + background: #F08A24; + padding: 1rem; + border-radius: 4px; } + .notification.warning, .notification.warning h1, .notification.warning h2, .notification.warning h3, .notification.warning h4, .notification.warning h5, .notification.warning h6 { + color: white; } + .notification.alert { + background: #F04124; + padding: 1rem; + border-radius: 4px; } + .notification.alert, .notification.alert h1, .notification.alert h2, .notification.alert h3, .notification.alert h4, .notification.alert h5, .notification.alert h6 { + color: white; } + .notification.dark { + background: #232323; + padding: 1rem; + border-radius: 4px; } + .notification.dark, .notification.dark h1, .notification.dark h2, .notification.dark h3, .notification.dark h4, .notification.dark h5, .notification.dark h6 { + color: #fff; } + +.static-notification { + background: #00558b; + padding: 1rem; + border-radius: 4px; + position: fixed !important; } + .static-notification, .static-notification h1, .static-notification h2, .static-notification h3, .static-notification h4, .static-notification h5, .static-notification h6 { + color: white; } + .static-notification.top-right { + width: 25rem; + right: 1rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.top-right { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.top-left { + width: 25rem; + left: 1rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.top-left { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.top-middle { + width: 25rem; + left: 50%; + margin-left: -12.5rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.top-middle { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.bottom-right { + width: 25rem; + right: 1rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.bottom-right { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.bottom-left { + width: 25rem; + left: 1rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.bottom-left { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.bottom-middle { + width: 25rem; + left: 50%; + margin-left: -12.5rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .static-notification.bottom-middle { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .static-notification.success { + background: #43AC6A; + padding: 1rem; + border-radius: 4px; } + .static-notification.success, .static-notification.success h1, .static-notification.success h2, .static-notification.success h3, .static-notification.success h4, .static-notification.success h5, .static-notification.success h6 { + color: white; } + .static-notification.warning { + background: #F08A24; + padding: 1rem; + border-radius: 4px; } + .static-notification.warning, .static-notification.warning h1, .static-notification.warning h2, .static-notification.warning h3, .static-notification.warning h4, .static-notification.warning h5, .static-notification.warning h6 { + color: white; } + .static-notification.alert { + background: #F04124; + padding: 1rem; + border-radius: 4px; } + .static-notification.alert, .static-notification.alert h1, .static-notification.alert h2, .static-notification.alert h3, .static-notification.alert h4, .static-notification.alert h5, .static-notification.alert h6 { + color: white; } + .static-notification.dark { + background: #232323; + padding: 1rem; + border-radius: 4px; } + .static-notification.dark, .static-notification.dark h1, .static-notification.dark h2, .static-notification.dark h3, .static-notification.dark h4, .static-notification.dark h5, .static-notification.dark h6 { + color: #fff; } + +.notification-container { + width: 25rem; + right: 1rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.top-right { + width: 25rem; + right: 1rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.top-right { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.top-left { + width: 25rem; + left: 1rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.top-left { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.top-middle { + width: 25rem; + left: 50%; + margin-left: -12.5rem; + top: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.top-middle { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.bottom-right { + width: 25rem; + right: 1rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.bottom-right { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.bottom-left { + width: 25rem; + left: 1rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.bottom-left { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + .notification-container.bottom-middle { + width: 25rem; + left: 50%; + margin-left: -12.5rem; + top: auto; + bottom: 1rem; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .notification-container.bottom-middle { + width: auto; + left: 1rem; + right: 1rem; + margin-left: 0; } } + +.notification-icon { + -webkit-flex: 0 0 60px; + -ms-flex: 0 0 60px; + flex: 0 0 60px; + margin-right: 1rem; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } + .notification-icon img { + width: 100%; + height: auto; } + +.notification-content { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } + +/* + Off-canvas menu + --------------- + + A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu. +*/ +.off-canvas { + position: fixed; + overflow: auto; + -webkit-overflow-scrolling: touch; + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + z-index: 2; } + .is-active.off-canvas { + -webkit-transform: translate(0, 0) !important; + transform: translate(0, 0) !important; } + .off-canvas ~ .grid-frame { + -webkit-transform: translate(0, 0, 0); + transform: translate(0, 0, 0); + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + background: white; } + +.off-canvas { + /* + Get shadow values for later use + */ + /* + Sizing + */ + width: 250px; + height: 100%; + /* + Positioning + */ + top: 0; + left: 0; + box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + background: #fff; + color: #000; } + .off-canvas.is-active ~ .grid-frame { + -webkit-transform: translateX(250px) !important; + transform: translateX(250px) !important; } + .off-canvas.top { + /* + Get shadow values for later use + */ + /* + Sizing + */ + height: 250px; + width: 100%; + /* + Positioning + */ + top: 0; + left: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.25); } + .off-canvas.top.is-active ~ .grid-frame { + -webkit-transform: translateY(250px) !important; + transform: translateY(250px) !important; } + .off-canvas.right { + /* + Get shadow values for later use + */ + /* + Sizing + */ + width: 250px; + height: 100%; + /* + Positioning + */ + left: auto; + top: 0; + right: 0; + box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.25); + -webkit-transform: translateX(100%); + transform: translateX(100%); } + .off-canvas.right.is-active ~ .grid-frame { + -webkit-transform: translateX(-250px) !important; + transform: translateX(-250px) !important; } + .off-canvas.bottom { + /* + Get shadow values for later use + */ + /* + Sizing + */ + height: 250px; + width: 100%; + /* + Positioning + */ + top: auto; + bottom: 0; + left: 0; + -webkit-transform: translateY(100%); + transform: translateY(100%); + box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.25); } + .off-canvas.bottom.is-active ~ .grid-frame { + -webkit-transform: translateY(-250px) !important; + transform: translateY(-250px) !important; } + .off-canvas.left { + /* + Get shadow values for later use + */ + /* + Sizing + */ + width: 250px; + height: 100%; + /* + Positioning + */ + top: 0; + left: 0; + box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } + .off-canvas.left.is-active ~ .grid-frame { + -webkit-transform: translateX(250px) !important; + transform: translateX(250px) !important; } + .off-canvas.detached { + z-index: 0; + box-shadow: none; } + .off-canvas.detached, .off-canvas.detached.is-active { + -webkit-transform: none; + transform: none; } + .off-canvas.detached ~ .grid-frame { + z-index: 1; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } + .off-canvas.primary { + background: #00558b; + color: #fff; } + .off-canvas.dark { + background: #232323; + color: #fff; } + +/* + POPUP + ----- + + A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels. +*/ +.popup { + position: absolute; + z-index: 1000; + opacity: 0; + overflow: hidden; + transition: opacity 0.25s ease-out; + pointer-events: none; } + .tether-enabled.popup { + opacity: 1; + pointer-events: auto; } + +.popup { + width: 18.75rem; + background: #fff; + border-radius: 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + border: 0; } + .popup.dark { + background: #232323; + border-radius: 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + border: 0; } + .popup.primary { + background: #00558b; + border-radius: 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + border: 0; } + +/* + SWITCH + ------ +*/ +.switch { + position: relative; + overflow: hidden; + display: inline-block; } + .switch > input { + position: absolute; + left: -9999px; + outline: none; } + .switch > label { + -ms-touch-action: manipulation; + touch-action: manipulation; + display: block; + width: 100%; + height: 100%; + cursor: pointer; + margin: 0; } + .switch > label::after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; } + +/* + Defines the dimmensions of the switch. + + $width - width of the switch. + $height - height of the switch. +*/ +.switch { + width: 3.125rem; + height: 2rem; + border-radius: 9999px; } + .switch > label::after { + width: 2rem; + height: 2rem; } + .switch input:checked + label::after { + left: 1.125rem; } + .switch > label { + background: #ccc; } + .switch > label::after { + background: white; + border-radius: 9999px; + transition: left 0.15s ease-out; + border: 4px solid #ccc; } + .switch input:checked + label { + background: #00558b; + margin: 0; } + .switch input:checked + label::after { + border-color: #00558b; } + .switch.small { + width: 2.5rem; + height: 1.625rem; } + .switch.small > label::after { + width: 1.625rem; + height: 1.625rem; } + .switch.small input:checked + label::after { + left: 0.875rem; } + .switch.large { + width: 3.75rem; + height: 2.375rem; } + .switch.large > label::after { + width: 2.375rem; + height: 2.375rem; } + .switch.large input:checked + label::after { + left: 1.375rem; } + +/* + TABS + ---- +*/ +.tabs { + /* + Container styles + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: transparent; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } + .tabs.vertical { + /* + Container styles + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: transparent; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; } + .tabs .tab-item { + background: #f3f3f3; + padding: 1rem; + line-height: 1; + margin: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + cursor: pointer; + color: #000; } + .tabs .tab-item.is-active { + background: #ececec; + color: #000; } + .tabs .tab-item.is-active:hover { + background: #e7e7e7; } + .tabs .tab-item:hover { + background: #e7e7e7; } + +.tab-contents { + padding: 1rem; } + .tab-contents .tab-content { + display: none; } + .tab-contents .tab-content.is-active { + display: block; } + +/* + ACCORDION + --------- + + The trusy accordion allows you to create a series of vertical tabs. +*/ +.accordion { + border: 1px solid #cbcbcb; } + +.accordion-title { + padding: 1rem; + background: #f3f3f3; + color: #000; + line-height: 1; + cursor: pointer; } + .accordion-title:hover { + background: #e7e7e7; } + .is-active > .accordion-title { + background: #ececec; + color: #000; } + +.accordion-content { + padding: 1rem; + display: none; } + .is-active > .accordion-content { + display: block; } + +/* + TYPOGRAPHY + ---------- + + Includes typographic resets for many common elements, and a few helper classes. + - Headers + - Subheaders + - Lead paragraphs + - Ordered/unordered lists + - Code samples + - Anchors + - Dividers + - Blockquotes + - Acronyms +*/ +/* Typography resets */ +div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { + margin: 0; + padding: 0; } + +/* Default Link Styles */ +a { + color: #00558b; + text-decoration: none; + line-height: inherit; } + a[ui-sref] { + cursor: pointer; } + a:hover, a:focus { + color: #004978; } + a img { + border: none; } + +/* Default paragraph styles */ +p { + font-family: inherit; + font-weight: normal; + font-size: 1rem; + line-height: 1.6; + margin-bottom: 1.25rem; + text-rendering: optimizeLegibility; } + p.lead { + font-size: 1.21875rem; + line-height: 1.6; } + p aside { + font-size: 0.875rem; + line-height: 1.35; + font-style: italic; } + +/* Default header styles */ +h1, h2, h3, h4, h5, h6 { + font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; + font-weight: normal; + font-style: normal; + color: #222; + text-rendering: optimizeLegibility; + margin-top: 0.2rem; + margin-bottom: 0.5rem; + line-height: 1.4; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + font-size: 60%; + color: #6f6f6f; + line-height: 0; } + +h1 { + font-size: 2.125rem; } + +h2 { + font-size: 1.6875rem; } + +h3 { + font-size: 1.375rem; } + +h4 { + font-size: 1.125rem; } + +h5 { + font-size: 1.125rem; } + +h6 { + font-size: 1rem; } + +.subheader { + line-height: 1.4; + color: #6f6f6f; + font-weight: normal; + margin-top: 0.2rem; + margin-bottom: 0.5rem; } + +hr { + border: solid #ddd; + border-width: 1px 0 0; + clear: both; + margin: 1.25rem 0 1.1875rem; + height: 0; } + +/* Helpful Typography Defaults */ +em, i { + font-style: italic; + line-height: inherit; } + +strong, b { + font-weight: bold; + line-height: inherit; } + +small { + font-size: 60%; + color: #6f6f6f; + line-height: inherit; } + +code { + font-family: Consolas, 'Liberation Mono', Courier, monospace; + font-weight: normal; + color: #464646; + background-color: #fbfbfb; + border-width: 1px; + border-style: solid; + border-color: #e2e2e2; + padding: 0.125rem 0.3125rem 0.0625rem; } + +/* Lists */ +ul, ol, dl { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 1.25rem; + list-style-position: outside; + font-family: inherit; } + +/* Lists */ +ul, ol { + margin-left: 1.1rem; } + ul li ul, ul li ol, ol li ul, ol li ol { + margin-left: 1.25rem; + margin-bottom: 0; } + +/* Lists without bullets */ +ul.no-bullet { + margin-left: 0; } + ul.no-bullet, ul.no-bullet li ul, ul.no-bullet li ol { + list-style-type: none; } + +/* Definition Lists */ +dl dt { + margin-bottom: 0.3rem; + font-weight: bold; } +dl dd { + margin-bottom: 0.75rem; } + +/* Abbreviations */ +abbr, acronym { + text-transform: uppercase; + font-size: 90%; + color: #222; + border-bottom: 1px dotted #ddd; + cursor: help; } + +abbr { + text-transform: none; } + +/* Blockquotes */ +blockquote { + margin: 0 0 1.25rem; + padding: 0.5625rem 1.25rem 0 1.1875rem; + border-left: 1px solid #ddd; } + blockquote cite { + display: block; + font-size: 0.8125rem; + color: #555555; } + blockquote cite:before { + content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited { + color: #555555; } + +blockquote, blockquote p { + line-height: 1.6; + color: #6f6f6f; } + +@media only screen and (min-width: 40em) { + h1, h2, h3, h4, h5, h6 { + line-height: 1.4; } + h1 { + font-size: 2.75rem; } + h2 { + font-size: 2.3125rem; } + h3 { + font-size: 1.6875rem; } + h4 { + font-size: 1.4375rem; } + h5 { + font-size: 1.125rem; } + h6 { + font-size: 1rem; } } + +/* + UTILITIES + --------- + + Responsive helper classes to assist you in quickly doing basic formatting and layout. + + Features: + - Vertical alignment + - Visibility + - Text alignment + - Floating +*/ +.v-align { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + .v-align .align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } + .v-align .align-center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } + .v-align .align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } + .v-align .small-align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } + .v-align .small-align-center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } + .v-align .small-align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } + @media only screen and (min-width: 40em) { + .v-align .medium-align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } } + @media only screen and (min-width: 40em) { + .v-align .medium-align-center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } } + @media only screen and (min-width: 40em) { + .v-align .medium-align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } } + @media only screen and (min-width: 75em) { + .v-align .large-align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } } + @media only screen and (min-width: 75em) { + .v-align .large-align-center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } } + @media only screen and (min-width: 75em) { + .v-align .large-align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } } + +.hide { + display: none !important; } + +.invisible { + visibility: hidden; } + +.hide-for-small:not(.ng-hide) { + display: block !important; + display: none !important; } +.hide-for-small[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; + display: none !important; } + +.show-for-small:not(.ng-hide) { + display: none !important; + display: block !important; } +.show-for-small[class*="grid-block"]:not(.ng-hide) { + display: none !important; + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + +.hide-for-small-only:not(.ng-hide) { + display: block !important; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .hide-for-small-only:not(.ng-hide) { + display: none !important; } } +.hide-for-small-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .hide-for-small-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } } + +.show-for-small-only:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .show-for-small-only:not(.ng-hide) { + display: block !important; } } +.show-for-small-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .show-for-small-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.hide-for-medium:not(.ng-hide) { + display: block !important; } + @media only screen and (min-width: 40em) { + .hide-for-medium:not(.ng-hide) { + display: none !important; } } +.hide-for-medium[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + @media only screen and (min-width: 40em) { + .hide-for-medium[class*="grid-block"]:not(.ng-hide) { + display: none !important; } } + +.show-for-medium:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 40em) { + .show-for-medium:not(.ng-hide) { + display: block !important; } } +.show-for-medium[class*="grid-block"]:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 40em) { + .show-for-medium[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.hide-for-medium-only:not(.ng-hide) { + display: block !important; } + @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .hide-for-medium-only:not(.ng-hide) { + display: none !important; } } +.hide-for-medium-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } } + +.show-for-medium-only:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .show-for-medium-only:not(.ng-hide) { + display: block !important; } } +.show-for-medium-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .show-for-medium-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.hide-for-large:not(.ng-hide) { + display: block !important; } + @media only screen and (min-width: 75em) { + .hide-for-large:not(.ng-hide) { + display: none !important; } } +.hide-for-large[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + @media only screen and (min-width: 75em) { + .hide-for-large[class*="grid-block"]:not(.ng-hide) { + display: none !important; } } + +.show-for-large:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 75em) { + .show-for-large:not(.ng-hide) { + display: block !important; } } +.show-for-large[class*="grid-block"]:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 75em) { + .show-for-large[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.hide-for-large-only:not(.ng-hide) { + display: block !important; } + @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .hide-for-large-only:not(.ng-hide) { + display: none !important; } } +.hide-for-large-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } + @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .hide-for-large-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } } + +.show-for-large-only:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .show-for-large-only:not(.ng-hide) { + display: block !important; } } +.show-for-large-only[class*="grid-block"]:not(.ng-hide) { + display: none !important; } + @media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .show-for-large-only[class*="grid-block"]:not(.ng-hide) { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +@media only screen and (orientation: portrait) { + .hide-for-portrait { + display: none !important; } + .hide-for-portrait[class*="grid-block"] { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.show-for-portrait { + display: none !important; } + @media only screen and (orientation: portrait) { + .show-for-portrait { + display: block !important; } + .show-for-portrait[class*="grid-block"] { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +@media only screen and (orientation: landscape) { + .hide-for-landscape { + display: none !important; } + .hide-for-landscape[class*="grid-block"] { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +.show-for-landscape { + display: none !important; } + @media only screen and (orientation: landscape) { + .show-for-landscape { + display: block !important; } + .show-for-landscape[class*="grid-block"] { + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: flex !important; } } + +/* + Text alignment + */ +.text-left { + text-align: left; } + +.small-text-left { + text-align: left; } + +@media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .small-only-text-left { + text-align: left; } } + +@media only screen and (min-width: 40em) { + .medium-text-left { + text-align: left; } } + +@media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .medium-only-text-left { + text-align: left; } } + +@media only screen and (min-width: 75em) { + .large-text-left { + text-align: left; } } + +@media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .large-only-text-left { + text-align: left; } } + +.text-right { + text-align: right; } + +.small-text-right { + text-align: right; } + +@media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .small-only-text-right { + text-align: right; } } + +@media only screen and (min-width: 40em) { + .medium-text-right { + text-align: right; } } + +@media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .medium-only-text-right { + text-align: right; } } + +@media only screen and (min-width: 75em) { + .large-text-right { + text-align: right; } } + +@media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .large-only-text-right { + text-align: right; } } + +.text-center { + text-align: center; } + +.small-text-center { + text-align: center; } + +@media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .small-only-text-center { + text-align: center; } } + +@media only screen and (min-width: 40em) { + .medium-text-center { + text-align: center; } } + +@media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .medium-only-text-center { + text-align: center; } } + +@media only screen and (min-width: 75em) { + .large-text-center { + text-align: center; } } + +@media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .large-only-text-center { + text-align: center; } } + +.text-justify { + text-align: justify; } + +.small-text-justify { + text-align: justify; } + +@media only screen and (min-width: 0em) and (max-width: 39.9375rem) { + .small-only-text-justify { + text-align: justify; } } + +@media only screen and (min-width: 40em) { + .medium-text-justify { + text-align: justify; } } + +@media only screen and (min-width: 40em) and (max-width: 74.9375rem) { + .medium-only-text-justify { + text-align: justify; } } + +@media only screen and (min-width: 75em) { + .large-text-justify { + text-align: justify; } } + +@media only screen and (min-width: 75em) and (max-width: 89.9375rem) { + .large-only-text-justify { + text-align: justify; } } + +/* + Floating + */ +.clearfix:before, .clearfix:after { + content: " "; + display: table; } +.clearfix:after { + clear: both; } + +.float-left { + float: left; } + +.float-right { + float: right; } + +.float-none { + float: none; } |