Last active
August 29, 2015 14:15
-
-
Save tatemz/bde16d9fa5f75ff6091c to your computer and use it in GitHub Desktop.
An example how css-condense can optimize Foundation Apps (line breaks are turned on for better visual).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* AUTOCOMPLETE */ | |
| .autocomplete{ | |
| width: 100%; | |
| position: relative; | |
| } | |
| .autocomplete input{ | |
| font-size: 1.2em; | |
| width: 100%; | |
| padding:0.4em; | |
| } | |
| .autocomplete ul{ | |
| position: absolute; | |
| left: 0; | |
| width: 100%; | |
| border-left: 1px solid #888; | |
| border-right: 1px solid #888; | |
| border-bottom: 1px solid #888; | |
| z-index: 1; | |
| } | |
| .autocomplete li{ | |
| text-align: left; | |
| list-style:none; | |
| width: 100%; | |
| padding:0.4em; | |
| background-color: #fff; | |
| } | |
| .autocomplete li.active{ | |
| width: 100%; | |
| background-color: #4bf; | |
| } | |
| .autocomplete .highlight { | |
| background-color: #E2E2E2; | |
| } | |
| .autocomplete li.active .highlight { | |
| background: #666; | |
| color: #fff; | |
| } | |
| /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ | |
| @-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) | |
| } | |
| } | |
| @font-face { | |
| font-family: zurb-logo; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url(../fonts/zurb-webfont.eot); | |
| src: url(../fonts/zurb-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/zurb-webfont.woff) format("woff"), url(../fonts/zurb-webfont.ttf) format("truetype"), url(../fonts/zurb-webfont.svg) format("svg") | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| vertical-align: baseline | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0 | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted | |
| } | |
| dfn { | |
| font-style: italic | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #000 | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline | |
| } | |
| sup { | |
| top: -0.5em | |
| } | |
| sub { | |
| bottom: -0.25em | |
| } | |
| svg:not(:root) { | |
| overflow: hidden | |
| } | |
| figure { | |
| margin: 1em 40px | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace,monospace; | |
| font-size: 1em | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; | |
| font: inherit; | |
| margin: 0 | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| cursor: pointer | |
| } | |
| input { | |
| line-height: normal | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| box-sizing: content-box | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none | |
| } | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: .35em .625em .75em | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner, | |
| legend { | |
| border: 0; | |
| padding: 0 | |
| } | |
| pre, | |
| textarea { | |
| overflow: auto | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0 | |
| } | |
| meta.foundation-version { | |
| font-family: 1.0.2 | |
| } | |
| meta.foundation-mq { | |
| font-family: "small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem" | |
| } | |
| body, | |
| html { | |
| font-size: 100%; | |
| height: 100% | |
| } | |
| html { | |
| box-sizing: border-box; | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100% | |
| } | |
| *, | |
| *:after, | |
| *:before { | |
| box-sizing: inherit | |
| } | |
| body { | |
| background: #fff; | |
| color: #222; | |
| font-family: Helvetica Neue,Helvetica,Helvetica,Arial,sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| font-style: normal; | |
| font-weight: normal; | |
| line-height: 1; | |
| margin: 0; | |
| -moz-osx-font-smoothing: grayscale; | |
| padding: 0; | |
| position: relative | |
| } | |
| img { | |
| display: inline-block; | |
| height: auto; | |
| -ms-interpolation-mode: bicubic; | |
| max-width: 100%; | |
| vertical-align: middle | |
| } | |
| #map_canvas embed, | |
| #map_canvas img, | |
| #map_canvas object, | |
| .map_canvas embed, | |
| .map_canvas img, | |
| .map_canvas object { | |
| max-width: none!important | |
| } | |
| .iconic { | |
| height: 1rem; | |
| vertical-align: middle; | |
| width: 1rem | |
| } | |
| a>.iconic { | |
| margin-right: 0.25rem; | |
| margin-top: -2px | |
| } | |
| .action-sheet-container { | |
| display: inline-block; | |
| position: relative | |
| } | |
| .action-sheet-container .button { | |
| margin-left: 0; | |
| margin-right: 0 | |
| } | |
| .action-sheet { | |
| background: white; | |
| bottom: 0; | |
| box-shadow: 0 -3px 10px rgba(0,0,0,0.25); | |
| left: 0; | |
| padding: 1rem; | |
| position: fixed; | |
| text-align: center; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| transition-duration: 0.25s; | |
| transition-property: -webkit-transform opacity; | |
| transition-property: transform opacity; | |
| transition-timing-function: ease-out; | |
| width: 100%; | |
| z-index: 1000 | |
| } | |
| .action-sheet.is-active { | |
| -webkit-transform: translateY(0%); | |
| transform: translateY(0%) | |
| } | |
| .action-sheet ul a { | |
| border-top: 1px solid #ccc; | |
| color: #000; | |
| display: block; | |
| line-height: 1; | |
| padding: 0.8rem | |
| } | |
| .action-sheet ul a:hover { | |
| background: #f2f2f2; | |
| color: #000 | |
| } | |
| .action-sheet.primary { | |
| background: #00558b; | |
| border: 0; | |
| color: #fff | |
| } | |
| .action-sheet.primary.top::after, | |
| .action-sheet.primary.top::before { | |
| border-bottom-color: #00558b | |
| } | |
| .action-sheet.primary ul a { | |
| border-top: 1px solid #006cb0; | |
| color: #fff; | |
| display: block; | |
| line-height: 1; | |
| padding: 0.8rem | |
| } | |
| .action-sheet.primary ul a:hover { | |
| background: #00609e; | |
| color: #fff | |
| } | |
| .action-sheet.dark { | |
| background: #232323; | |
| border: 0; | |
| color: #fff | |
| } | |
| .action-sheet.dark.top::after, | |
| .action-sheet.dark.top::before { | |
| border-bottom-color: #232323 | |
| } | |
| .action-sheet ul, | |
| .action-sheet.dark ul, | |
| .action-sheet.primary ul { | |
| list-style-type: none; | |
| margin: -1rem; | |
| margin-top: 0; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none | |
| } | |
| .action-sheet ul:first-child, | |
| .action-sheet.dark ul:first-child, | |
| .action-sheet.primary ul:first-child { | |
| margin-top: -1rem | |
| } | |
| .action-sheet ul:first-child li:first-child, | |
| .action-sheet.dark ul:first-child li:first-child, | |
| .action-sheet.primary ul:first-child li:first-child { | |
| border-top: 0 | |
| } | |
| .action-sheet.dark ul a { | |
| border-top: 1px solid #393939; | |
| color: #fff; | |
| display: block; | |
| line-height: 1; | |
| padding: 0.8rem | |
| } | |
| .action-sheet.dark ul a:hover { | |
| background: #2e2e2e; | |
| color: #fff | |
| } | |
| .action-sheet ul .disabled>a, | |
| .action-sheet.dark ul .disabled>a, | |
| .action-sheet.primary ul .disabled>a { | |
| color: #999; | |
| pointer-events: none | |
| } | |
| .block-list { | |
| font-size: 1rem; | |
| line-height: 1; | |
| margin-bottom: 1rem; | |
| margin-left: -1rem; | |
| margin-right: -1rem; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none | |
| } | |
| .block-list [type="text"], | |
| .block-list input[type="color"], | |
| .block-list input[type="date"], | |
| .block-list input[type="datetime"], | |
| .block-list input[type="datetime-local"], | |
| .block-list input[type="email"], | |
| .block-list input[type="month"], | |
| .block-list input[type="number"], | |
| .block-list input[type="password"], | |
| .block-list input[type="search"], | |
| .block-list input[type="tel"], | |
| .block-list input[type="time"], | |
| .block-list input[type="url"], | |
| .block-list input[type="week"], | |
| .block-list textarea { | |
| border: 0; | |
| color: inherit; | |
| height: auto; | |
| line-height: 1; | |
| margin: 0; | |
| padding: 0.8rem 1rem | |
| } | |
| .block-list li>input[type="checkbox"]+label, | |
| .block-list li>input[type="radio"]+label { | |
| 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="#000" 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>'); | |
| background-size: 100% 100%; | |
| color: #00558b; | |
| content: ''; | |
| float: right; | |
| height: 1.5em; | |
| margin-top: -0.25em; | |
| pointer-events: none; | |
| width: 1.5em | |
| } | |
| @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 select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background: 0; | |
| background-color: transparent; | |
| border: 0; | |
| color: inherit; | |
| font-size: 1em; | |
| height: auto; | |
| line-height: 1; | |
| margin: 0; | |
| outline: 0; | |
| padding: 0.8rem 1rem | |
| } | |
| .block-list .switch { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%) | |
| } | |
| .block-list.with-icons li>a, | |
| .block-list.with-icons li>label, | |
| .block-list.with-icons li>span { | |
| padding-left: 2.8rem | |
| } | |
| .block-list.with-icons li .iconic, | |
| .block-list.with-icons li img { | |
| border-radius: 8px; | |
| height: 2.08rem; | |
| left: 0.26rem; | |
| pointer-events: none; | |
| position: absolute; | |
| top: 0.26rem; | |
| width: 2.08rem | |
| } | |
| .block-list header { | |
| color: #666; | |
| cursor: default; | |
| font-size: .8em; | |
| font-weight: bold; | |
| margin-bottom: .5em; | |
| margin-left: 1rem; | |
| margin-top: 1em; | |
| text-transform: uppercase | |
| } | |
| .block-list li { | |
| border-bottom: 1px solid #d0d0d0; | |
| position: relative | |
| } | |
| .block-list li:first-child { | |
| border-top: 1px solid #d0d0d0 | |
| } | |
| .block-list li>a, | |
| .block-list li>label, | |
| .block-list li>span { | |
| color: #000; | |
| display: block; | |
| line-height: 1; | |
| padding: 0.8rem 1rem; | |
| padding-left: 1rem | |
| } | |
| .block-list li select:hover, | |
| .block-list li>a:hover, | |
| .block-list li>label:hover { | |
| background: #f4f4f4 | |
| } | |
| .action-sheet ul .alert>a, | |
| .action-sheet.dark ul .alert>a, | |
| .action-sheet.primary ul .alert>a, | |
| .block-list li.caution>a, | |
| .block-list li.caution>a:hover { | |
| color: #f04124 | |
| } | |
| .block-list li.disabled>a, | |
| .block-list li>span, | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default | |
| } | |
| .block-list li.disabled>a, | |
| .block-list li.disabled>a:hover { | |
| color: #999 | |
| } | |
| .block-list li.disabled>a:hover, | |
| a { | |
| background: transparent | |
| } | |
| .block-list li.with-chevron::after { | |
| color: #666; | |
| content: '\203A'; | |
| display: block; | |
| font-size: 2em; | |
| font-weight: bold; | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%) | |
| } | |
| .block-list li.with-chevron .block-list-label { | |
| padding-right: 1.5rem | |
| } | |
| .block-list li .block-list-label { | |
| color: #999; | |
| display: inline-block; | |
| float: right; | |
| padding: 0; | |
| pointer-events: none | |
| } | |
| .block-list li .block-list-label.left { | |
| float: none; | |
| margin-left: 0.8rem | |
| } | |
| .button, | |
| .button-group>li>a, | |
| .button-group>li>label { | |
| -webkit-appearance: none; | |
| border: 0; | |
| border-radius: 0; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 0.9rem; | |
| -webkit-font-smoothing: antialiased; | |
| line-height: 1; | |
| margin: 0 1rem 1rem 0; | |
| padding: .85em 1em; | |
| text-align: center; | |
| transition: background 0.25s ease-out; | |
| vertical-align: middle | |
| } | |
| .button { | |
| background: #00558b; | |
| color: #fff; | |
| display: inline-block; | |
| font-size: 0.9rem; | |
| margin: 0 1rem 1rem 0 | |
| } | |
| .button.info { | |
| background: #a0d3e8; | |
| color: #000 | |
| } | |
| .button.info:focus, | |
| .button.info:hover { | |
| background: #71bddd; | |
| color: #000 | |
| } | |
| .button.dark:focus, | |
| .button.dark:hover { | |
| background: #1e1e1e; | |
| color: #fff | |
| } | |
| .button.hollow { | |
| background: transparent; | |
| border: 1px solid #00558b; | |
| color: #00558b | |
| } | |
| .button.hollow:focus, | |
| .button.hollow:hover { | |
| background: transparent; | |
| border-color: #008ee8; | |
| color: #008ee8 | |
| } | |
| .action-sheet.primary::after, | |
| .action-sheet.primary::before, | |
| .button.hollow[data-popup-toggle]::after { | |
| border-top-color: #00558b | |
| } | |
| .button.hollow:hover .iconic *, | |
| .button.hollow:hover .iconic *.iconic-property-accent { | |
| fill: #008ee8; | |
| stroke: #008ee8 | |
| } | |
| .button.hollow.secondary { | |
| background: transparent; | |
| border: 1px solid #f1f1f1; | |
| color: #f1f1f1 | |
| } | |
| .button.hollow.secondary:focus, | |
| .button.hollow.secondary:hover { | |
| background: transparent; | |
| border-color: #f4f4f4; | |
| color: #f4f4f4 | |
| } | |
| .button.hollow.secondary[data-popup-toggle]::after { | |
| border-top-color: #f1f1f1 | |
| } | |
| .button.hollow.secondary:hover .iconic *, | |
| .button.hollow.secondary:hover .iconic *.iconic-property-accent { | |
| fill: #f4f4f4; | |
| stroke: #f4f4f4 | |
| } | |
| .button.hollow.success { | |
| background: transparent; | |
| border: 1px solid #43ac6a; | |
| color: #43ac6a | |
| } | |
| .button.hollow.success:focus, | |
| .button.hollow.success:hover { | |
| background: transparent; | |
| border-color: #6dc68e; | |
| color: #6dc68e | |
| } | |
| .button.hollow.success[data-popup-toggle]::after { | |
| border-top-color: #43ac6a | |
| } | |
| .button.hollow.success:hover .iconic *, | |
| .button.hollow.success:hover .iconic *.iconic-property-accent { | |
| fill: #6dc68e; | |
| stroke: #6dc68e | |
| } | |
| .button.hollow.warning { | |
| background: transparent; | |
| border: 1px solid #f08a24; | |
| color: #f08a24 | |
| } | |
| .button.hollow.warning:focus, | |
| .button.hollow.warning:hover { | |
| background: transparent; | |
| border-color: #f4a75b; | |
| color: #f4a75b | |
| } | |
| .button.hollow.warning[data-popup-toggle]::after { | |
| border-top-color: #f08a24 | |
| } | |
| .button.hollow.warning:hover .iconic *, | |
| .button.hollow.warning:hover .iconic *.iconic-property-accent { | |
| fill: #f4a75b; | |
| stroke: #f4a75b | |
| } | |
| .button.hollow.alert { | |
| background: transparent; | |
| border: 1px solid #f04124; | |
| color: #f04124 | |
| } | |
| .button.hollow.alert:focus, | |
| .button.hollow.alert:hover { | |
| background: transparent; | |
| border-color: #f4715b; | |
| color: #f4715b | |
| } | |
| .button.hollow.alert[data-popup-toggle]::after { | |
| border-top-color: #f04124 | |
| } | |
| .button.hollow.alert:hover .iconic *, | |
| .button.hollow.alert:hover .iconic *.iconic-property-accent { | |
| fill: #f4715b; | |
| stroke: #f4715b | |
| } | |
| .button.hollow.info { | |
| background: transparent; | |
| border: 1px solid #a0d3e8; | |
| color: #a0d3e8 | |
| } | |
| .button.hollow.info:focus, | |
| .button.hollow.info:hover { | |
| background: transparent; | |
| border-color: #b8deee; | |
| color: #b8deee | |
| } | |
| .button.hollow.info[data-popup-toggle]::after { | |
| border-top-color: #a0d3e8 | |
| } | |
| .button.hollow.info .iconic *, | |
| .button.hollow.info .iconic *.iconic-property-accent { | |
| fill: #a0d3e8; | |
| stroke: #a0d3e8 | |
| } | |
| .button.hollow.info:hover .iconic *, | |
| .button.hollow.info:hover .iconic *.iconic-property-accent { | |
| fill: #b8deee; | |
| stroke: #b8deee | |
| } | |
| .button.hollow.dark { | |
| background: transparent; | |
| border: 1px solid #232323; | |
| color: #232323 | |
| } | |
| .button.hollow.dark:focus, | |
| .button.hollow.dark:hover { | |
| background: transparent; | |
| border-color: #5a5a5a; | |
| color: #5a5a5a | |
| } | |
| .action-sheet.dark::after, | |
| .action-sheet.dark::before, | |
| .button.hollow.dark[data-popup-toggle]::after { | |
| border-top-color: #232323 | |
| } | |
| .button.hollow.dark .iconic *, | |
| .button.hollow.dark .iconic *.iconic-property-accent, | |
| .iconic-color-dark *, | |
| .iconic-color-dark *.iconic-property-accent { | |
| fill: #232323; | |
| stroke: #232323 | |
| } | |
| .button.hollow.dark:hover .iconic *, | |
| .button.hollow.dark:hover .iconic *.iconic-property-accent { | |
| fill: #5a5a5a; | |
| stroke: #5a5a5a | |
| } | |
| .button.disabled, | |
| .button.disabled.alert, | |
| .button.disabled.dark, | |
| .button.disabled.info, | |
| .button.disabled.secondary, | |
| .button.disabled.success, | |
| .button.disabled.warning { | |
| opacity: 0.5; | |
| pointer-events: none | |
| } | |
| .button-group>li:not(:last-child)>a, | |
| .button-group>li:not(:last-child)>label { | |
| border-right: 1px solid #004068 | |
| } | |
| .button .iconic, | |
| .button-group .iconic, | |
| .button.large .iconic, | |
| .button.small .iconic, | |
| .button.tiny .iconic { | |
| height: 1em; | |
| margin-right: .25em; | |
| margin-top: -2px; | |
| vertical-align: middle; | |
| width: 1em | |
| } | |
| .button-group.segmented, | |
| .button-group.segmented.alert, | |
| .button-group.segmented.secondary, | |
| .button-group.segmented.success, | |
| .button-group.segmented.warning { | |
| border: 1px solid #00558b; | |
| transition-property: background color | |
| } | |
| .block-list li>input[type="checkbox"], | |
| .block-list li>input[type="radio"], | |
| .button-group.segmented>li>input[type="radio"] { | |
| left: -9999px; | |
| position: absolute | |
| } | |
| .button-group.segmented.alert>li>a, | |
| .button-group.segmented.alert>li>label, | |
| .button-group.segmented.secondary>li>a, | |
| .button-group.segmented.secondary>li>label, | |
| .button-group.segmented.success>li>a, | |
| .button-group.segmented.success>li>label, | |
| .button-group.segmented.warning>li>a, | |
| .button-group.segmented.warning>li>label, | |
| .button-group.segmented>li>a, | |
| .button-group.segmented>li>label { | |
| background: transparent; | |
| margin-right: 0 | |
| } | |
| .button-group { | |
| border-radius: 0; | |
| border-radius: 0; | |
| display: -webkit-inline-flex; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| display: -webkit-inline-flex; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| list-style-type: none; | |
| margin: 0; | |
| margin-bottom: 1rem; | |
| overflow: hidden | |
| } | |
| .button-group>li>a, | |
| .button-group>li>label { | |
| background: #00558b; | |
| border-color: #004876; | |
| border-radius: 0; | |
| color: #fff; | |
| display: block; | |
| margin: 0 | |
| } | |
| .button-group>li>a:focus, | |
| .button-group>li>a:hover, | |
| .button-group>li>label:focus, | |
| .button-group>li>label:hover, | |
| .button:focus, | |
| .button:hover { | |
| background: #004876; | |
| color: #fff | |
| } | |
| .button-group>li.is-active>a, | |
| .button-group>li.is-active>label { | |
| background: #004876 | |
| } | |
| .button-group.secondary>li>a, | |
| .button-group.secondary>li>label { | |
| background: #f1f1f1; | |
| border-color: #cdcdcd; | |
| color: #fff | |
| } | |
| .button-group.secondary>li>a:focus, | |
| .button-group.secondary>li>a:hover, | |
| .button-group.secondary>li>label:focus, | |
| .button-group.secondary>li>label:hover { | |
| background: #cdcdcd; | |
| color: #fff | |
| } | |
| .button-group.secondary>li.is-active>a, | |
| .button-group.secondary>li.is-active>label { | |
| background: #cdcdcd | |
| } | |
| .button-group.success>li>a, | |
| .button-group.success>li>label { | |
| background: #43ac6a; | |
| border-color: #39925a; | |
| color: #fff | |
| } | |
| .button-group.success>li.is-active>a, | |
| .button-group.success>li.is-active>label { | |
| background: #39925a | |
| } | |
| .button-group.warning>li>a, | |
| .button-group.warning>li>label { | |
| background: #f08a24; | |
| border-color: #dc750f; | |
| color: #fff | |
| } | |
| .button-group.warning>li.is-active>a, | |
| .button-group.warning>li.is-active>label { | |
| background: #dc750f | |
| } | |
| .button-group.alert>li>a, | |
| .button-group.alert>li>label { | |
| background: #f04124; | |
| border-color: #dc2c0f; | |
| color: #fff | |
| } | |
| .button-group.alert>li.is-active>a, | |
| .button-group.alert>li.is-active>label { | |
| background: #dc2c0f | |
| } | |
| .button-group>li.secondary>a { | |
| background: #f1f1f1; | |
| border-color: #f1f1f1; | |
| color: #000 | |
| } | |
| .button-group>li.secondary>a:focus, | |
| .button-group>li.secondary>a:hover, | |
| .button.secondary:focus, | |
| .button.secondary:hover { | |
| background: #cdcdcd; | |
| color: #000 | |
| } | |
| .button-group>li.secondary>a[data-popup-toggle]::after, | |
| .button.info[data-popup-toggle]::after, | |
| .button.secondary[data-popup-toggle]::after { | |
| border-top-color: #000 | |
| } | |
| .button-group>li.secondary>a:focus, | |
| .button-group>li.secondary>a:hover { | |
| border-color: #b5b5b5 | |
| } | |
| .button-group>li.success>a { | |
| background: #43ac6a; | |
| border-color: #43ac6a; | |
| color: #fff | |
| } | |
| .button-group.success>li>a:focus, | |
| .button-group.success>li>a:hover, | |
| .button-group.success>li>label:focus, | |
| .button-group.success>li>label:hover, | |
| .button-group>li.success>a:focus, | |
| .button-group>li.success>a:hover, | |
| .button.success:focus, | |
| .button.success:hover { | |
| background: #39925a; | |
| color: #fff | |
| } | |
| .button-group>li.success>a:focus, | |
| .button-group>li.success>a:hover { | |
| border-color: #32814f | |
| } | |
| .button-group>li.warning>a { | |
| background: #f08a24; | |
| border-color: #f08a24; | |
| color: #fff | |
| } | |
| .button-group.warning>li>a:focus, | |
| .button-group.warning>li>a:hover, | |
| .button-group.warning>li>label:focus, | |
| .button-group.warning>li>label:hover, | |
| .button-group>li.warning>a:focus, | |
| .button-group>li.warning>a:hover, | |
| .button.warning:focus, | |
| .button.warning:hover { | |
| background: #dc750f; | |
| color: #fff | |
| } | |
| .button-group>li.warning>a:focus, | |
| .button-group>li.warning>a:hover { | |
| border-color: #c2670d | |
| } | |
| .button-group>li.alert>a { | |
| background: #f04124; | |
| border-color: #f04124; | |
| color: #fff | |
| } | |
| .button-group.alert>li>a:focus, | |
| .button-group.alert>li>a:hover, | |
| .button-group.alert>li>label:focus, | |
| .button-group.alert>li>label:hover, | |
| .button-group>li.alert>a:focus, | |
| .button-group>li.alert>a:hover, | |
| .button.alert:focus, | |
| .button.alert:hover { | |
| background: #dc2c0f; | |
| color: #fff | |
| } | |
| .button-group.alert>li>a[data-popup-toggle]::after, | |
| .button-group.alert>li>label[data-popup-toggle]::after, | |
| .button-group.secondary>li>a[data-popup-toggle]::after, | |
| .button-group.secondary>li>label[data-popup-toggle]::after, | |
| .button-group.success>li>a[data-popup-toggle]::after, | |
| .button-group.success>li>label[data-popup-toggle]::after, | |
| .button-group.warning>li>a[data-popup-toggle]::after, | |
| .button-group.warning>li>label[data-popup-toggle]::after, | |
| .button-group>li.alert>a[data-popup-toggle]::after, | |
| .button-group>li.success>a[data-popup-toggle]::after, | |
| .button-group>li.warning>a[data-popup-toggle]::after, | |
| .button-group>li>a[data-popup-toggle]::after, | |
| .button-group>li>label[data-popup-toggle]::after, | |
| .button.alert[data-popup-toggle]::after, | |
| .button.dark[data-popup-toggle]::after, | |
| .button.success[data-popup-toggle]::after, | |
| .button.warning[data-popup-toggle]::after, | |
| .button[data-popup-toggle]::after { | |
| border-top-color: #fff | |
| } | |
| .button-group>li.alert>a:focus, | |
| .button-group>li.alert>a:hover { | |
| border-color: #c2270d | |
| } | |
| .button-group.segmented>li>a, | |
| .button-group.segmented>li>label { | |
| border-color: #00558b; | |
| color: #00558b | |
| } | |
| .button-group.segmented>li>a:hover, | |
| .button-group.segmented>li>label:hover { | |
| background: rgba(0,85,139,0.25); | |
| color: #00558b | |
| } | |
| .button-group.segmented>li>a .iconic *, | |
| .button-group.segmented>li>a .iconic *.iconic-property-accent, | |
| .button-group.segmented>li>label .iconic *, | |
| .button-group.segmented>li>label .iconic *.iconic-property-accent, | |
| .button.hollow .iconic *, | |
| .button.hollow .iconic *.iconic-property-accent, | |
| .iconic *, | |
| .iconic *.iconic-property-accent, | |
| .iconic-color-primary *, | |
| .iconic-color-primary *.iconic-property-accent, | |
| a>.iconic *, | |
| a>.iconic *.iconic-property-accent { | |
| fill: #00558b; | |
| stroke: #00558b | |
| } | |
| .button-group.segmented.secondary { | |
| border-color: #f1f1f1 | |
| } | |
| .button-group.segmented.secondary>li>a, | |
| .button-group.segmented.secondary>li>label { | |
| border-color: #f1f1f1; | |
| color: #f1f1f1 | |
| } | |
| .button-group.segmented.secondary>li>a:hover, | |
| .button-group.segmented.secondary>li>label:hover { | |
| background: rgba(241,241,241,0.25); | |
| color: #f1f1f1 | |
| } | |
| .button-group.segmented.secondary>li>a .iconic *, | |
| .button-group.segmented.secondary>li>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.secondary>li>label .iconic *, | |
| .button-group.segmented.secondary>li>label .iconic *.iconic-property-accent, | |
| .button.hollow.secondary .iconic *, | |
| .button.hollow.secondary .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, | |
| .button.secondary { | |
| background: #f1f1f1; | |
| color: #000 | |
| } | |
| .button-group.segmented.success { | |
| border-color: #43ac6a | |
| } | |
| .button-group.segmented.success>li>a, | |
| .button-group.segmented.success>li>label { | |
| border-color: #43ac6a; | |
| color: #43ac6a | |
| } | |
| .button-group.segmented.success>li>a:hover, | |
| .button-group.segmented.success>li>label:hover { | |
| background: rgba(67,172,106,0.25); | |
| color: #43ac6a | |
| } | |
| .button-group.segmented.success>li>a .iconic *, | |
| .button-group.segmented.success>li>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.success>li>label .iconic *, | |
| .button-group.segmented.success>li>label .iconic *.iconic-property-accent, | |
| .button.hollow.success .iconic *, | |
| .button.hollow.success .iconic *.iconic-property-accent, | |
| .iconic-color-success *, | |
| .iconic-color-success *.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, | |
| .button.success { | |
| background: #43ac6a; | |
| color: #fff | |
| } | |
| .button-group.segmented.warning { | |
| border-color: #f08a24 | |
| } | |
| .button-group.segmented.warning>li>a, | |
| .button-group.segmented.warning>li>label { | |
| border-color: #f08a24; | |
| color: #f08a24 | |
| } | |
| .button-group.segmented.warning>li>a:hover, | |
| .button-group.segmented.warning>li>label:hover { | |
| background: rgba(240,138,36,0.25); | |
| color: #f08a24 | |
| } | |
| .button-group.segmented.warning>li>a .iconic *, | |
| .button-group.segmented.warning>li>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.warning>li>label .iconic *, | |
| .button-group.segmented.warning>li>label .iconic *.iconic-property-accent, | |
| .button.hollow.warning .iconic *, | |
| .button.hollow.warning .iconic *.iconic-property-accent, | |
| .iconic-color-warning *, | |
| .iconic-color-warning *.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, | |
| .button.warning { | |
| background: #f08a24; | |
| color: #fff | |
| } | |
| .button-group.segmented.alert { | |
| border-color: #f04124 | |
| } | |
| .button-group.segmented.alert>li>a, | |
| .button-group.segmented.alert>li>label { | |
| border-color: #f04124; | |
| color: #f04124 | |
| } | |
| .button-group.segmented.alert>li>a:hover, | |
| .button-group.segmented.alert>li>label:hover { | |
| background: rgba(240,65,36,0.25); | |
| color: #f04124 | |
| } | |
| .button-group.segmented.alert>li>a .iconic *, | |
| .button-group.segmented.alert>li>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.alert>li>label .iconic *, | |
| .button-group.segmented.alert>li>label .iconic *.iconic-property-accent, | |
| .button.hollow.alert .iconic *, | |
| .button.hollow.alert .iconic *.iconic-property-accent, | |
| .iconic-color-alert *, | |
| .iconic-color-alert *.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, | |
| .button.alert { | |
| background: #f04124; | |
| color: #fff | |
| } | |
| .button-group.tiny, | |
| .button.tiny { | |
| font-size: 0.63rem | |
| } | |
| .button-group.small, | |
| .button.small { | |
| font-size: 0.72rem | |
| } | |
| .button-group.large, | |
| .button.large { | |
| font-size: 1.17rem | |
| } | |
| .button-group.expand>li>a, | |
| .button-group.expand>li>label, | |
| .button.expand { | |
| display: block; | |
| margin-left: 0; | |
| margin-right: 0 | |
| } | |
| .card { | |
| background: #fff; | |
| border: 1px solid #ededed; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #000; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .card.primary { | |
| background: #00558b; | |
| border: 0; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .card.primary .card-divider { | |
| background: #0065a5; | |
| padding: 1rem | |
| } | |
| .card.success { | |
| background: #43ac6a; | |
| border: 0; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .card.success .card-divider { | |
| background: #4ab873; | |
| padding: 1rem | |
| } | |
| .card.warning { | |
| background: #f08a24; | |
| border: 0; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .card.warning .card-divider { | |
| background: #f19233; | |
| padding: 1rem | |
| } | |
| .card.alert { | |
| background: #f04124; | |
| border: 0; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .card.alert .card-divider { | |
| background: #f14e33; | |
| padding: 1rem | |
| } | |
| .card.dark { | |
| background: #232323; | |
| border: 0; | |
| border-radius: 4px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| overflow: hidden | |
| } | |
| .block-list .with-dropdown, | |
| .card h1, | |
| .card h2, | |
| .card h3, | |
| .card h4, | |
| .card h5, | |
| .card h6, | |
| .card.alert h1, | |
| .card.alert h2, | |
| .card.alert h3, | |
| .card.alert h4, | |
| .card.alert h5, | |
| .card.alert h6, | |
| .card.dark h1, | |
| .card.dark h2, | |
| .card.dark h3, | |
| .card.dark h4, | |
| .card.dark h5, | |
| .card.dark h6, | |
| .card.primary h1, | |
| .card.primary h2, | |
| .card.primary h3, | |
| .card.primary h4, | |
| .card.primary h5, | |
| .card.primary h6, | |
| .card.success h1, | |
| .card.success h2, | |
| .card.success h3, | |
| .card.success h4, | |
| .card.success h5, | |
| .card.success h6, | |
| .card.warning h1, | |
| .card.warning h2, | |
| .card.warning h3, | |
| .card.warning h4, | |
| .card.warning h5, | |
| .card.warning h6 { | |
| color: inherit | |
| } | |
| .card.dark .card-divider { | |
| background: #323232; | |
| padding: 1rem | |
| } | |
| .card-divider { | |
| background: #ededed; | |
| padding: 1rem | |
| } | |
| .close-button { | |
| color: #999; | |
| cursor: pointer; | |
| font-size: 2em; | |
| line-height: 0.5; | |
| position: absolute; | |
| right: 1rem; | |
| top: 1rem | |
| } | |
| .close-button:hover { | |
| color: #333 | |
| } | |
| .thumbnail, | |
| ul.thumbnails>li img { | |
| box-shadow: 0 3px 15px rgba(0,0,0,0.25); | |
| padding: 0.5rem | |
| } | |
| [type="text"], | |
| input[type="color"], | |
| input[type="date"], | |
| input[type="datetime"], | |
| input[type="datetime-local"], | |
| input[type="email"], | |
| input[type="month"], | |
| input[type="number"], | |
| input[type="password"], | |
| input[type="search"], | |
| input[type="tel"], | |
| input[type="time"], | |
| input[type="url"], | |
| input[type="week"], | |
| textarea { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background: #fff; | |
| border: 1px solid #ccc; | |
| border-radius: 0; | |
| color: #000; | |
| display: block; | |
| font-size: 1rem; | |
| -webkit-font-smoothing: antialiased; | |
| line-height: 1; | |
| margin: 0 0 1rem 0; | |
| padding: 0.5rem; | |
| width: 100% | |
| } | |
| [type="text"]:hover, | |
| input[type="color"]:hover, | |
| input[type="date"]:hover, | |
| input[type="datetime"]:hover, | |
| input[type="datetime-local"]:hover, | |
| input[type="email"]:hover, | |
| input[type="month"]:hover, | |
| input[type="number"]:hover, | |
| input[type="password"]:hover, | |
| input[type="search"]:hover, | |
| input[type="tel"]:hover, | |
| input[type="time"]:hover, | |
| input[type="url"]:hover, | |
| input[type="week"]:hover, | |
| textarea:hover { | |
| background: #fff; | |
| border: 1px solid #bbb; | |
| color: #000 | |
| } | |
| [type="text"]:focus, | |
| input[type="color"]:focus, | |
| input[type="date"]:focus, | |
| input[type="datetime"]:focus, | |
| input[type="datetime-local"]:focus, | |
| input[type="email"]:focus, | |
| input[type="month"]:focus, | |
| input[type="number"]:focus, | |
| input[type="password"]:focus, | |
| input[type="search"]:focus, | |
| input[type="tel"]:focus, | |
| input[type="time"]:focus, | |
| input[type="url"]:focus, | |
| input[type="week"]:focus, | |
| textarea:focus { | |
| background: #fff; | |
| border: 1px solid #999; | |
| color: #000; | |
| outline: 0 | |
| } | |
| label { | |
| color: #333; | |
| display: block; | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; | |
| height: 1rem; | |
| padding: 0; | |
| width: 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-bottom: 0; | |
| margin-left: 0.5rem; | |
| margin-right: 1rem; | |
| vertical-align: baseline | |
| } | |
| .inline-label { | |
| -webkit-align-items: stretch; | |
| align-items: stretch; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: stretch; | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| margin-bottom: 1rem | |
| } | |
| label>.inline-label, | |
| label>[type="text"], | |
| label>input, | |
| label>input[type="color"], | |
| label>input[type="date"], | |
| label>input[type="datetime"], | |
| label>input[type="datetime-local"], | |
| label>input[type="email"], | |
| label>input[type="month"], | |
| label>input[type="number"], | |
| label>input[type="password"], | |
| label>input[type="search"], | |
| label>input[type="tel"], | |
| label>input[type="time"], | |
| label>input[type="url"], | |
| label>input[type="week"], | |
| label>textarea { | |
| margin-top: 0.5rem | |
| } | |
| .inline-label>.form-label { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| background: #eee; | |
| border: 1px solid #ccc; | |
| color: #333; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -ms-flex-align: center; | |
| padding: 0 0.5rem | |
| } | |
| .inline-label>.form-label:first-child { | |
| border-right: 0 | |
| } | |
| .inline-label>.form-label:last-child { | |
| border-left: 0 | |
| } | |
| .inline-label>a { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| border-radius: 0; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| margin: 0; | |
| padding-bottom: 0; | |
| padding-top: 0 | |
| } | |
| textarea { | |
| height: auto; | |
| min-height: 50px; | |
| width: 100% | |
| } | |
| select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| 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: #000"></polygon></svg>') right 10px center no-repeat; | |
| background-size: 8px 8px; | |
| border-radius: 0; | |
| color: #000; | |
| display: block; | |
| font-size: 1rem; | |
| margin: 0 0 1rem 0; | |
| padding: 0.5rem; | |
| padding-right: 1.625rem; | |
| width: 100% | |
| } | |
| select:hover { | |
| background-color: #f0f0f0 | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background: #ddd; | |
| cursor: pointer; | |
| display: block; | |
| height: 1rem; | |
| margin-bottom: 0.25rem; | |
| margin-top: 0.25rem; | |
| overflow: visible; | |
| width: 100% | |
| } | |
| a:active, | |
| a:hover, | |
| input[type="range"]:focus, | |
| select:focus { | |
| outline: 0 | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| background: #00558b; | |
| height: 1.5rem; | |
| width: 1.5rem | |
| } | |
| input[type="range"]::-moz-range-track { | |
| -moz-appearance: none; | |
| background: #ccc; | |
| cursor: pointer; | |
| height: 4px; | |
| max-width: 300px | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| -moz-appearance: none; | |
| background: #00558b; | |
| height: 1.5rem; | |
| width: 1.5rem | |
| } | |
| input[type="range"]::-ms-track { | |
| background: #ccc; | |
| cursor: pointer; | |
| height: 4px; | |
| max-width: 300px | |
| } | |
| input[type="range"]::-ms-thumb { | |
| background: #00558b; | |
| height: 1.5rem; | |
| width: 1.5rem | |
| } | |
| output { | |
| line-height: 1.5rem; | |
| margin-left: .5em; | |
| vertical-align: middle | |
| } | |
| input[type="number"]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| background: #00558b | |
| } | |
| meter, | |
| progress { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background: #ccc; | |
| border: 0; | |
| display: block; | |
| height: 1.5rem; | |
| margin-bottom: 1rem; | |
| width: 100% | |
| } | |
| meter:-moz-meter-optimum::-moz-meter-bar, | |
| meter::-webkit-meter-optimum-value, | |
| progress.high::-moz-progress-bar, | |
| progress.high::-webkit-progress-value { | |
| background: #43ac6a | |
| } | |
| meter:-moz-meter-sub-optimum::-moz-meter-bar, | |
| meter::-webkit-meter-suboptimum-value, | |
| progress.medium::-moz-progress-bar, | |
| progress.medium::-webkit-progress-value { | |
| background: #e7cf00 | |
| } | |
| meter:-moz-meter-sub-sub-optimum::-moz-meter-bar, | |
| meter::-webkit-meter-even-less-good-value, | |
| progress.low::-moz-progress-bar, | |
| progress.low::-webkit-progress-value { | |
| background: #f04124 | |
| } | |
| .panel { | |
| background: #fff; | |
| display: block; | |
| display: none; | |
| overflow-y: auto; | |
| padding: 0; | |
| position: absolute; | |
| z-index: 100 | |
| } | |
| .panel-top { | |
| height: 300px; | |
| left: 0; | |
| top: 0; | |
| width: 100% | |
| } | |
| .panel-top.is-active { | |
| box-shadow: 0 3px 10px rgba(0,0,0,0.25) | |
| } | |
| .panel-right { | |
| height: 100%; | |
| right: 0; | |
| top: 0; | |
| width: 100% | |
| } | |
| .panel-right.is-active { | |
| box-shadow: -3px 0 10px rgba(0,0,0,0.25) | |
| } | |
| .panel-bottom { | |
| bottom: 0; | |
| height: 300px; | |
| left: 0; | |
| width: 100% | |
| } | |
| .panel-bottom.is-active { | |
| box-shadow: 2px -3px 10px rgba(0,0,0,0.25) | |
| } | |
| .panel-left { | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| width: 100% | |
| } | |
| @media only screen and (min-width: 18.75em) { | |
| .panel-left, | |
| .panel-right { | |
| width: 300px | |
| } | |
| } | |
| .panel-left.is-active { | |
| box-shadow: 3px 0 10px rgba(0,0,0,0.25) | |
| } | |
| .panel-fixed { | |
| position: fixed | |
| } | |
| .grid-block, | |
| .grid-frame, | |
| .large-grid-block, | |
| .medium-grid-block, | |
| .small-grid-block { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden | |
| } | |
| .small-vertical.grid-block, | |
| .small-vertical.grid-frame, | |
| .small-vertical.large-grid-block, | |
| .small-vertical.medium-grid-block, | |
| .small-vertical.small-grid-block, | |
| .vertical.grid-block, | |
| .vertical.grid-frame, | |
| .vertical.large-grid-block, | |
| .vertical.medium-grid-block, | |
| .vertical.small-grid-block { | |
| -webkit-align-items: stretch; | |
| align-items: stretch; | |
| -ms-flex-align: stretch; | |
| -webkit-flex-flow: column nowrap; | |
| -ms-flex-flow: column nowrap; | |
| flex-flow: column nowrap | |
| } | |
| .small-horizontal.grid-block, | |
| .small-horizontal.grid-frame, | |
| .small-horizontal.large-grid-block, | |
| .small-horizontal.medium-grid-block, | |
| .small-horizontal.small-grid-block { | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap | |
| } | |
| .wrap.grid-block, | |
| .wrap.grid-frame, | |
| .wrap.large-grid-block, | |
| .wrap.medium-grid-block, | |
| .wrap.small-grid-block { | |
| -webkit-align-items: flex-start; | |
| align-items: flex-start; | |
| -ms-flex-align: start; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap | |
| } | |
| .grid-frame { | |
| -webkit-align-items: stretch; | |
| align-items: stretch; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 1 1; | |
| -ms-flex: 1 1; | |
| flex: 1 1; | |
| -ms-flex-align: stretch; | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| -ms-flex-order: 0; | |
| -ms-flex-pack: start; | |
| -webkit-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| height: 100vh; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-order: 0; | |
| order: 0; | |
| overflow: hidden; | |
| position: relative | |
| } | |
| .grid-content.collapse, | |
| td, | |
| th { | |
| padding: 0 | |
| } | |
| .grid-container { | |
| margin: 0 auto; | |
| max-width: 56.25rem | |
| } | |
| .grid-container.contain-left { | |
| margin: 0 auto 0 0; | |
| max-width: 56.25rem | |
| } | |
| .grid-container.contain-right { | |
| margin: 0 0 0 auto; | |
| max-width: 56.25rem | |
| } | |
| .grid-block, | |
| .small-grid-block { | |
| -webkit-align-items: stretch; | |
| align-items: stretch; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 1 1; | |
| -ms-flex: 1 1; | |
| flex: 1 1; | |
| -ms-flex-align: stretch; | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| -ms-flex-order: 0; | |
| -ms-flex-pack: start; | |
| -webkit-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| height: 100vh; | |
| height: auto; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-order: 0; | |
| order: 0; | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| -ms-overflow-style: -ms-autohiding-scrollbar; | |
| overflow-y: auto; | |
| position: relative | |
| } | |
| .grid-content, | |
| .small-grid-content { | |
| display: block; | |
| -webkit-flex: 1 1; | |
| -ms-flex: 1 1; | |
| flex: 1 1; | |
| -webkit-overflow-scrolling: touch; | |
| -ms-overflow-style: -ms-autohiding-scrollbar; | |
| overflow-y: auto; | |
| padding: 0 1rem | |
| } | |
| .small-grid-block.panel, | |
| .small-grid-content.panel { | |
| background: transparent; | |
| bottom: auto; | |
| box-shadow: none; | |
| height: auto; | |
| left: auto; | |
| position: relative; | |
| right: auto; | |
| top: auto; | |
| -webkit-transform: none; | |
| transform: none; | |
| width: auto; | |
| z-index: auto | |
| } | |
| .small-1 { | |
| -webkit-flex: 0 0 8.33333%; | |
| -ms-flex: 0 0 8.33333%; | |
| flex: 0 0 8.33333%; | |
| max-width: 8.33333% | |
| } | |
| .order-1, | |
| .small-order-1 { | |
| -ms-flex-order: 1; | |
| -webkit-order: 1; | |
| order: 1 | |
| } | |
| .small-offset-1 { | |
| margin-left: 8.33333% | |
| } | |
| .small-up-1>div, | |
| .small-up-1>li, | |
| .small-up-1>section { | |
| -webkit-flex: 0 0 100%; | |
| -ms-flex: 0 0 100%; | |
| flex: 0 0 100%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-2 { | |
| -webkit-flex: 0 0 16.66667%; | |
| -ms-flex: 0 0 16.66667%; | |
| flex: 0 0 16.66667%; | |
| max-width: 16.66667% | |
| } | |
| .order-2, | |
| .small-order-2 { | |
| -ms-flex-order: 2; | |
| -webkit-order: 2; | |
| order: 2 | |
| } | |
| .small-offset-2 { | |
| margin-left: 16.66667% | |
| } | |
| .small-up-2>div, | |
| .small-up-2>li, | |
| .small-up-2>section { | |
| -webkit-flex: 0 0 50%; | |
| -ms-flex: 0 0 50%; | |
| flex: 0 0 50%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-3 { | |
| -webkit-flex: 0 0 25%; | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| max-width: 25% | |
| } | |
| .order-3, | |
| .small-order-3 { | |
| -ms-flex-order: 3; | |
| -webkit-order: 3; | |
| order: 3 | |
| } | |
| .small-up-3>div, | |
| .small-up-3>li, | |
| .small-up-3>section { | |
| -webkit-flex: 0 0 33.33333%; | |
| -ms-flex: 0 0 33.33333%; | |
| flex: 0 0 33.33333%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-4 { | |
| -webkit-flex: 0 0 33.33333%; | |
| -ms-flex: 0 0 33.33333%; | |
| flex: 0 0 33.33333%; | |
| max-width: 33.33333% | |
| } | |
| .order-4, | |
| .small-order-4 { | |
| -ms-flex-order: 4; | |
| -webkit-order: 4; | |
| order: 4 | |
| } | |
| .small-offset-4 { | |
| margin-left: 33.33333% | |
| } | |
| .small-up-4>div, | |
| .small-up-4>li, | |
| .small-up-4>section { | |
| -webkit-flex: 0 0 25%; | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-5 { | |
| -webkit-flex: 0 0 41.66667%; | |
| -ms-flex: 0 0 41.66667%; | |
| flex: 0 0 41.66667%; | |
| max-width: 41.66667% | |
| } | |
| .order-5, | |
| .small-order-5 { | |
| -ms-flex-order: 5; | |
| -webkit-order: 5; | |
| order: 5 | |
| } | |
| .small-offset-5 { | |
| margin-left: 41.66667% | |
| } | |
| .small-up-5>div, | |
| .small-up-5>li, | |
| .small-up-5>section { | |
| -webkit-flex: 0 0 20%; | |
| -ms-flex: 0 0 20%; | |
| flex: 0 0 20%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-6 { | |
| -webkit-flex: 0 0 50%; | |
| -ms-flex: 0 0 50%; | |
| flex: 0 0 50%; | |
| max-width: 50% | |
| } | |
| .order-6, | |
| .small-order-6 { | |
| -ms-flex-order: 6; | |
| -webkit-order: 6; | |
| order: 6 | |
| } | |
| .small-offset-6 { | |
| margin-left: 50% | |
| } | |
| .small-up-6>div, | |
| .small-up-6>li, | |
| .small-up-6>section { | |
| -webkit-flex: 0 0 16.66667%; | |
| -ms-flex: 0 0 16.66667%; | |
| flex: 0 0 16.66667%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-7 { | |
| -webkit-flex: 0 0 58.33333%; | |
| -ms-flex: 0 0 58.33333%; | |
| flex: 0 0 58.33333%; | |
| max-width: 58.33333% | |
| } | |
| .order-7, | |
| .small-order-7 { | |
| -ms-flex-order: 7; | |
| -webkit-order: 7; | |
| order: 7 | |
| } | |
| .small-offset-7 { | |
| margin-left: 58.33333% | |
| } | |
| .small-up-7>div, | |
| .small-up-7>li, | |
| .small-up-7>section { | |
| -webkit-flex: 0 0 14.28571%; | |
| -ms-flex: 0 0 14.28571%; | |
| flex: 0 0 14.28571%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-8 { | |
| -webkit-flex: 0 0 66.66667%; | |
| -ms-flex: 0 0 66.66667%; | |
| flex: 0 0 66.66667%; | |
| max-width: 66.66667% | |
| } | |
| .order-8, | |
| .small-order-8 { | |
| -ms-flex-order: 8; | |
| -webkit-order: 8; | |
| order: 8 | |
| } | |
| .small-offset-8 { | |
| margin-left: 66.66667% | |
| } | |
| .small-up-8>div, | |
| .small-up-8>li, | |
| .small-up-8>section { | |
| -webkit-flex: 0 0 12.5%; | |
| -ms-flex: 0 0 12.5%; | |
| flex: 0 0 12.5%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-9 { | |
| -webkit-flex: 0 0 75%; | |
| -ms-flex: 0 0 75%; | |
| flex: 0 0 75%; | |
| max-width: 75% | |
| } | |
| .order-9, | |
| .small-order-9 { | |
| -ms-flex-order: 9; | |
| -webkit-order: 9; | |
| order: 9 | |
| } | |
| .small-offset-9 { | |
| margin-left: 75% | |
| } | |
| .small-up-9>div, | |
| .small-up-9>li, | |
| .small-up-9>section { | |
| -webkit-flex: 0 0 11.11111%; | |
| -ms-flex: 0 0 11.11111%; | |
| flex: 0 0 11.11111%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-10 { | |
| -webkit-flex: 0 0 83.33333%; | |
| -ms-flex: 0 0 83.33333%; | |
| flex: 0 0 83.33333%; | |
| max-width: 83.33333% | |
| } | |
| .order-10, | |
| .small-order-10 { | |
| -ms-flex-order: 10; | |
| -webkit-order: 10; | |
| order: 10 | |
| } | |
| .small-offset-10 { | |
| margin-left: 83.33333% | |
| } | |
| .small-up-10>div, | |
| .small-up-10>li, | |
| .small-up-10>section { | |
| -webkit-flex: 0 0 10%; | |
| -ms-flex: 0 0 10%; | |
| flex: 0 0 10%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-11 { | |
| -webkit-flex: 0 0 91.66667%; | |
| -ms-flex: 0 0 91.66667%; | |
| flex: 0 0 91.66667%; | |
| max-width: 91.66667% | |
| } | |
| .order-11, | |
| .small-order-11 { | |
| -ms-flex-order: 11; | |
| -webkit-order: 11; | |
| order: 11 | |
| } | |
| .small-offset-11 { | |
| margin-left: 91.66667% | |
| } | |
| .small-up-11>div, | |
| .small-up-11>li, | |
| .small-up-11>section { | |
| -webkit-flex: 0 0 9.09091%; | |
| -ms-flex: 0 0 9.09091%; | |
| flex: 0 0 9.09091%; | |
| padding: 0 1rem 1rem | |
| } | |
| .small-12 { | |
| -webkit-flex: 0 0 100%; | |
| -ms-flex: 0 0 100%; | |
| flex: 0 0 100%; | |
| max-width: 100% | |
| } | |
| .order-12, | |
| .small-order-12 { | |
| -ms-flex-order: 12; | |
| -webkit-order: 12; | |
| order: 12 | |
| } | |
| .small-offset-12 { | |
| margin-left: 100% | |
| } | |
| .small-up-1, | |
| .small-up-10, | |
| .small-up-11, | |
| .small-up-12, | |
| .small-up-2, | |
| .small-up-3, | |
| .small-up-4, | |
| .small-up-5, | |
| .small-up-6, | |
| .small-up-7, | |
| .small-up-8, | |
| .small-up-9 { | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| list-style-type: none; | |
| overflow: visible | |
| } | |
| .small-up-12>div, | |
| .small-up-12>li, | |
| .small-up-12>section { | |
| -webkit-flex: 0 0 8.33333%; | |
| -ms-flex: 0 0 8.33333%; | |
| flex: 0 0 8.33333%; | |
| padding: 0 1rem 1rem | |
| } | |
| .grid-content .grid-block { | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| margin-left: -1rem; | |
| margin-right: -1rem; | |
| overflow: visible | |
| } | |
| .grid-content .grid-block .grid-content, | |
| button { | |
| overflow: visible | |
| } | |
| .grid-content .modal .grid-block { | |
| -webkit-flex-wrap: nowrap; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap | |
| } | |
| .title-bar .title, | |
| b, | |
| optgroup, | |
| strong { | |
| font-weight: bold | |
| } | |
| .title-bar .center, | |
| .title-bar .left, | |
| .title-bar .right { | |
| display: block; | |
| overflow: visible; | |
| white-space: nowrap | |
| } | |
| .inline-label>input, | |
| .inline-label>select, | |
| .title-bar .center:first-child:last-child, | |
| .title-bar .left: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-flex: 0 0 25%; | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| -ms-flex-order: 1; | |
| -webkit-order: 1; | |
| order: 1 | |
| } | |
| .title-bar .center { | |
| -webkit-flex: 0 0 50%; | |
| -ms-flex: 0 0 50%; | |
| flex: 0 0 50%; | |
| -ms-flex-order: 2; | |
| -webkit-order: 2; | |
| order: 2; | |
| text-align: center | |
| } | |
| .title-bar .right { | |
| -webkit-flex: 0 0 25%; | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| -ms-flex-order: 3; | |
| -webkit-order: 3; | |
| order: 3; | |
| text-align: right | |
| } | |
| .title-bar .left:first-child, | |
| .title-bar .left:first-child+.right:last-child { | |
| -webkit-flex: 1 1 auto; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto | |
| } | |
| .small-offset-3, | |
| .title-bar .center:first-child:not(:last-child) { | |
| margin-left: 25% | |
| } | |
| .title-bar .center+.left { | |
| margin-right: -25% | |
| } | |
| .title-bar { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| background: #eee; | |
| border-bottom: 1px solid #ccc; | |
| color: #000; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -ms-flex-align: center; | |
| -ms-flex-pack: start; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| overflow: visible; | |
| padding: 1rem | |
| } | |
| .title-bar.primary { | |
| background: #00558b; | |
| border-bottom: 1px solid #ccc; | |
| color: #fff; | |
| padding: 1rem | |
| } | |
| .title-bar.dark { | |
| background: #232323; | |
| border-bottom: 1px solid #ccc; | |
| color: #fff; | |
| padding: 1rem | |
| } | |
| .title-bar-bottom { | |
| border-bottom: 0; | |
| border-top: 1px solid #ccc | |
| } | |
| .label { | |
| background: #00558b; | |
| border-radius: 0; | |
| color: #fff; | |
| cursor: default; | |
| display: inline-block; | |
| font-size: 0.8rem; | |
| line-height: 1; | |
| padding: 0.33333rem 0.5rem; | |
| white-space: nowrap | |
| } | |
| .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 { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| background: #00558b; | |
| border-radius: 1000px; | |
| color: #fff; | |
| display: -webkit-inline-flex; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| font-size: 1em; | |
| min-width: 1.75em; | |
| padding: .1em .61em; | |
| position: absolute | |
| } | |
| .badge.primary { | |
| background: #00558b; | |
| border-radius: 1000px; | |
| color: #fff | |
| } | |
| .badge.success { | |
| background: #43ac6a; | |
| border-radius: 1000px; | |
| color: #fff | |
| } | |
| .badge.warning { | |
| background: #f08a24; | |
| border-radius: 1000px; | |
| color: #fff | |
| } | |
| .badge.alert { | |
| background: #f04124; | |
| border-radius: 1000px; | |
| color: #fff | |
| } | |
| .badge.dark { | |
| background: #232323; | |
| border-radius: 1000px; | |
| color: #fff | |
| } | |
| .inline-list dd, | |
| .inline-list dt, | |
| .inline-list li { | |
| display: inline-block; | |
| margin-left: -2px; | |
| margin-right: -2px | |
| } | |
| .inline-list li { | |
| margin-left: 0; | |
| margin-right: 1rem | |
| } | |
| .menu-bar>li { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| -webkit-flex: 1 0 auto; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| -ms-flex-align: center | |
| } | |
| .menu-bar>li>a { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| -webkit-flex-flow: column nowrap; | |
| -ms-flex-flow: column nowrap; | |
| flex-flow: column nowrap; | |
| font-size: 1rem; | |
| line-height: 1; | |
| padding: 1rem | |
| } | |
| .menu-bar { | |
| -webkit-align-items: stretch; | |
| align-items: stretch; | |
| background: #fff; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: stretch; | |
| list-style-type: none; | |
| margin: 0; | |
| margin-bottom: 1rem | |
| } | |
| .block-list li>a:hover, | |
| .block-list li>label:hover, | |
| .menu-bar>li>a { | |
| color: #000 | |
| } | |
| .menu-bar .is-active>a, | |
| .menu-bar>li>a:hover { | |
| background: #ededed; | |
| color: #000 | |
| } | |
| .button-group.segmented.secondary>li.is-active>a .iconic *, | |
| .button-group.segmented.secondary>li.is-active>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.secondary>li>input:checked+label .iconic *, | |
| .button-group.segmented.secondary>li>input:checked+label .iconic *.iconic-property-accent, | |
| .button-group>li.secondary>a .iconic *, | |
| .button-group>li.secondary>a .iconic *.iconic-property-accent, | |
| .button.info .iconic *, | |
| .button.info .iconic *.iconic-property-accent, | |
| .button.secondary .iconic *, | |
| .button.secondary .iconic *.iconic-property-accent, | |
| .menu-bar .iconic *, | |
| .menu-bar .iconic *.iconic-property-accent { | |
| fill: #000; | |
| stroke: #000 | |
| } | |
| .menu-bar.small-expand li { | |
| -webkit-flex: 1 0 auto; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto | |
| } | |
| .menu-bar.small-align-left { | |
| -ms-flex-pack: start; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start | |
| } | |
| .align-right.grid-block, | |
| .align-right.grid-frame, | |
| .align-right.large-grid-block, | |
| .align-right.medium-grid-block, | |
| .align-right.small-grid-block, | |
| .menu-bar.align-right, | |
| .menu-bar.small-align-right { | |
| -ms-flex-pack: end; | |
| -webkit-justify-content: flex-end; | |
| justify-content: flex-end | |
| } | |
| .align-center.grid-block, | |
| .align-center.grid-frame, | |
| .align-center.large-grid-block, | |
| .align-center.medium-grid-block, | |
| .align-center.small-grid-block, | |
| .menu-bar.align-center, | |
| .menu-bar.small-align-center { | |
| -ms-flex-pack: center; | |
| -webkit-justify-content: center; | |
| justify-content: center | |
| } | |
| .align-justify.grid-block, | |
| .align-justify.grid-frame, | |
| .align-justify.large-grid-block, | |
| .align-justify.medium-grid-block, | |
| .align-justify.small-grid-block, | |
| .menu-bar.align-justify, | |
| .menu-bar.small-align-justify { | |
| -ms-flex-pack: justify; | |
| -webkit-justify-content: space-between; | |
| justify-content: space-between | |
| } | |
| .align-spaced.grid-block, | |
| .align-spaced.grid-frame, | |
| .align-spaced.large-grid-block, | |
| .align-spaced.medium-grid-block, | |
| .align-spaced.small-grid-block, | |
| .menu-bar.align-spaced, | |
| .menu-bar.small-align-spaced { | |
| -ms-flex-pack: distribute; | |
| -webkit-justify-content: space-around; | |
| justify-content: space-around | |
| } | |
| .menu-bar, | |
| .menu-bar.horizontal, | |
| .menu-bar.small-horizontal { | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| overflow-x: hidden | |
| } | |
| .menu-bar.small-vertical>li>a, | |
| .menu-bar.vertical>li>a { | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap | |
| } | |
| .menu-bar.icon-top>li>a>.iconic, | |
| .menu-bar.icon-top>li>a>img, | |
| .menu-bar.small-icon-top>li>a>.iconic, | |
| .menu-bar.small-icon-top>li>a>img, | |
| .menu-bar>li>a>.iconic, | |
| .menu-bar>li>a>img { | |
| margin: 0 0 1rem 0 | |
| } | |
| .menu-bar.icon-right>li>a, | |
| .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.icon-right>li>a>.iconic, | |
| .menu-bar.icon-right>li>a>img, | |
| .menu-bar.small-icon-right>li>a>.iconic, | |
| .menu-bar.small-icon-right>li>a>img { | |
| margin: 0 0 0 1rem | |
| } | |
| .menu-bar.icon-bottom>li>a, | |
| .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.icon-bottom>li>a>.iconic, | |
| .menu-bar.icon-bottom>li>a>img, | |
| .menu-bar.small-icon-bottom>li>a>.iconic, | |
| .menu-bar.small-icon-bottom>li>a>img { | |
| margin: 1rem 0 0 0 | |
| } | |
| .menu-bar.icon-bottom>li>.iconic, | |
| .menu-bar.icon-bottom>li>img, | |
| .menu-bar.icon-left>li>.iconic, | |
| .menu-bar.icon-left>li>img, | |
| .menu-bar.icon-right>li>.iconic, | |
| .menu-bar.icon-right>li>img, | |
| .menu-bar.icon-top>li>.iconic, | |
| .menu-bar.icon-top>li>img, | |
| .menu-bar.small-icon-bottom>li>.iconic, | |
| .menu-bar.small-icon-bottom>li>img, | |
| .menu-bar.small-icon-left>li>.iconic, | |
| .menu-bar.small-icon-left>li>img, | |
| .menu-bar.small-icon-right>li>.iconic, | |
| .menu-bar.small-icon-right>li>img, | |
| .menu-bar.small-icon-top>li>.iconic, | |
| .menu-bar.small-icon-top>li>img, | |
| .menu-bar>li>.iconic, | |
| .menu-bar>li>img { | |
| height: 25px; | |
| margin: 0; | |
| width: 25px | |
| } | |
| .menu-bar.icon-left>li>a, | |
| .menu-bar.small-icon-left>li>a { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| -ms-flex-align: center; | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap | |
| } | |
| .menu-bar.icon-left>li>a>.iconic, | |
| .menu-bar.icon-left>li>a>img, | |
| .menu-bar.small-icon-left>li>a>.iconic, | |
| .menu-bar.small-icon-left>li>a>img { | |
| margin: 0 1rem 0 0 | |
| } | |
| .menu-bar.label-side .menu-bar-label { | |
| background: red; | |
| border-radius: 1000px; | |
| color: #fff; | |
| display: block; | |
| font-size: 0.9rem; | |
| height: 1.2rem; | |
| line-height: 1.2rem; | |
| pointer-events: none; | |
| position: absolute; | |
| right: 1rem; | |
| text-align: center; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| width: 1.2rem | |
| } | |
| .menu-bar.label-corner>li, | |
| .menu-bar.label-side>li { | |
| position: relative | |
| } | |
| .menu-bar.label-corner>li>a, | |
| .menu-bar.label-side>li>a { | |
| padding-right: 3.2rem | |
| } | |
| .menu-bar.label-corner .menu-bar-label { | |
| background: red; | |
| border-radius: 1000px; | |
| color: #fff; | |
| display: block; | |
| font-size: 0.9rem; | |
| height: 1.2rem; | |
| line-height: 1.2rem; | |
| pointer-events: none; | |
| position: absolute; | |
| right: 1rem; | |
| text-align: center; | |
| top: 1rem; | |
| width: 1.2rem | |
| } | |
| .menu-bar>li.title { | |
| cursor: default; | |
| font-weight: bold; | |
| padding: 1rem | |
| } | |
| .menu-group { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| -ms-flex-pack: justify; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-justify-content: space-between; | |
| justify-content: space-between | |
| } | |
| .menu-group>.menu-group-left, | |
| .menu-group>.menu-group-right { | |
| -webkit-flex: 1 1 100%; | |
| -ms-flex: 1 1 100%; | |
| flex: 1 1 100% | |
| } | |
| .menu-group .menu-bar { | |
| -webkit-flex-flow: row nowrap; | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| margin: 0; | |
| overflow-x: hidden | |
| } | |
| .menu-bar.horizontal>li>a, | |
| .menu-bar.icon-top>li>a, | |
| .menu-bar.small-horizontal>li>a, | |
| .menu-bar.small-icon-top>li>a, | |
| .menu-bar.small-vertical, | |
| .menu-bar.vertical, | |
| .menu-bar>li>a, | |
| .menu-group .menu-bar>li>a { | |
| -webkit-flex-flow: column nowrap; | |
| -ms-flex-flow: column nowrap; | |
| flex-flow: column nowrap | |
| } | |
| .button-group>li, | |
| .menu-bar.condense>li, | |
| .menu-bar.small-condense li, | |
| .menu-group .menu-bar>li, | |
| .shrink.grid-block, | |
| .shrink.grid-content, | |
| .shrink.large-grid-block, | |
| .shrink.large-grid-content, | |
| .shrink.medium-grid-block, | |
| .shrink.medium-grid-content, | |
| .shrink.small-grid-block, | |
| .shrink.small-grid-content { | |
| -webkit-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto | |
| } | |
| .menu-group.primary { | |
| background-color: #00558b | |
| } | |
| .menu-bar.primary, | |
| .menu-group.primary .menu-bar, | |
| meter::-moz-meter-bar, | |
| progress::-moz-progress-bar, | |
| progress::-webkit-progress-value { | |
| background: #00558b | |
| } | |
| .menu-bar.primary .is-active>a, | |
| .menu-bar.primary>li>a:hover, | |
| .menu-group.primary .menu-bar .is-active>a, | |
| .menu-group.primary .menu-bar>li>a:hover { | |
| background: #0065a5; | |
| color: #fff | |
| } | |
| .menu-group.dark { | |
| background-color: #232323 | |
| } | |
| .menu-bar.dark, | |
| .menu-group.dark .menu-bar { | |
| background: #232323 | |
| } | |
| .menu-bar.dark .is-active>a, | |
| .menu-bar.dark>li>a:hover, | |
| .menu-group.dark .menu-bar .is-active>a, | |
| .menu-group.dark .menu-bar>li>a:hover { | |
| background: #323232; | |
| color: #fff | |
| } | |
| .button .iconic *, | |
| .button .iconic *.iconic-property-accent, | |
| .button-group.alert>li>a .iconic *, | |
| .button-group.alert>li>a .iconic *.iconic-property-accent, | |
| .button-group.alert>li>label .iconic *, | |
| .button-group.alert>li>label .iconic *.iconic-property-accent, | |
| .button-group.secondary>li>a .iconic *, | |
| .button-group.secondary>li>a .iconic *.iconic-property-accent, | |
| .button-group.secondary>li>label .iconic *, | |
| .button-group.secondary>li>label .iconic *.iconic-property-accent, | |
| .button-group.segmented.alert>li.is-active>a .iconic *, | |
| .button-group.segmented.alert>li.is-active>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.alert>li>input:checked+label .iconic *, | |
| .button-group.segmented.alert>li>input:checked+label .iconic *.iconic-property-accent, | |
| .button-group.segmented.success>li.is-active>a .iconic *, | |
| .button-group.segmented.success>li.is-active>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.success>li>input:checked+label .iconic *, | |
| .button-group.segmented.success>li>input:checked+label .iconic *.iconic-property-accent, | |
| .button-group.segmented.warning>li.is-active>a .iconic *, | |
| .button-group.segmented.warning>li.is-active>a .iconic *.iconic-property-accent, | |
| .button-group.segmented.warning>li>input:checked+label .iconic *, | |
| .button-group.segmented.warning>li>input:checked+label .iconic *.iconic-property-accent, | |
| .button-group.segmented>li.is-active>a .iconic *, | |
| .button-group.segmented>li.is-active>a .iconic *.iconic-property-accent, | |
| .button-group.segmented>li>input:checked+label .iconic *, | |
| .button-group.segmented>li>input:checked+label .iconic *.iconic-property-accent, | |
| .button-group.success>li>a .iconic *, | |
| .button-group.success>li>a .iconic *.iconic-property-accent, | |
| .button-group.success>li>label .iconic *, | |
| .button-group.success>li>label .iconic *.iconic-property-accent, | |
| .button-group.warning>li>a .iconic *, | |
| .button-group.warning>li>a .iconic *.iconic-property-accent, | |
| .button-group.warning>li>label .iconic *, | |
| .button-group.warning>li>label .iconic *.iconic-property-accent, | |
| .button-group>li.alert>a .iconic *, | |
| .button-group>li.alert>a .iconic *.iconic-property-accent, | |
| .button-group>li.success>a .iconic *, | |
| .button-group>li.success>a .iconic *.iconic-property-accent, | |
| .button-group>li.warning>a .iconic *, | |
| .button-group>li.warning>a .iconic *.iconic-property-accent, | |
| .button-group>li>a .iconic *, | |
| .button-group>li>a .iconic *.iconic-property-accent, | |
| .button-group>li>label .iconic *, | |
| .button-group>li>label .iconic *.iconic-property-accent, | |
| .button.alert .iconic *, | |
| .button.alert .iconic *.iconic-property-accent, | |
| .button.dark .iconic *, | |
| .button.dark .iconic *.iconic-property-accent, | |
| .button.success .iconic *, | |
| .button.success .iconic *.iconic-property-accent, | |
| .button.warning .iconic *, | |
| .button.warning .iconic *.iconic-property-accent, | |
| .menu-bar.dark .iconic *, | |
| .menu-bar.dark .iconic *.iconic-property-accent, | |
| .menu-bar.primary .iconic *, | |
| .menu-bar.primary .iconic *.iconic-property-accent, | |
| .menu-group.dark .menu-bar .iconic *, | |
| .menu-group.dark .menu-bar .iconic *.iconic-property-accent, | |
| .menu-group.primary .menu-bar .iconic *, | |
| .menu-group.primary .menu-bar .iconic *.iconic-property-accent, | |
| .title-bar.dark .iconic *, | |
| .title-bar.dark .iconic *.iconic-property-accent, | |
| .title-bar.primary .iconic *, | |
| .title-bar.primary .iconic *.iconic-property-accent { | |
| fill: #fff; | |
| stroke: #fff | |
| } | |
| .is-active.modal { | |
| display: -webkit-flex!important; | |
| display: -ms-flexbox!important; | |
| display: flex!important; | |
| -webkit-flex: 0 0 auto; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| height: 100vh; | |
| left: 0; | |
| opacity: 1; | |
| top: 0; | |
| -webkit-transform: scale(1); | |
| transform: scale(1) | |
| } | |
| .is-active.dialogue.modal { | |
| height: auto; | |
| width: 95% | |
| } | |
| .modal .close-button, | |
| .modal [fa-close] { | |
| z-index: 1001 | |
| } | |
| .modal { | |
| background: #fff; | |
| display: none; | |
| max-width: 600px; | |
| opacity: 0; | |
| overflow: hidden; | |
| position: relative; | |
| -webkit-transform: scale(0.9); | |
| transform: scale(0.9); | |
| transition: opacity,-webkit-transform 0.2s,0.2s; | |
| width: 100%; | |
| z-index: 1001 | |
| } | |
| .modal.tiny { | |
| max-width: 300px | |
| } | |
| .modal.small { | |
| max-width: 500px | |
| } | |
| .modal.large { | |
| max-width: 800px | |
| } | |
| .modal-overlay { | |
| -webkit-align-items: center; | |
| align-items: center; | |
| background-color: rgba(51,51,51,0.7); | |
| bottom: 0; | |
| display: none; | |
| -ms-flex-align: center; | |
| -ms-flex-pack: center; | |
| -webkit-justify-content: center; | |
| justify-content: center; | |
| left: 0; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| z-index: 1000 | |
| } | |
| .slideInDown.ng-enter { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| transition-delay: 0; | |
| transition-duration: 700ms; | |
| transition-property: -webkit-transform,opacity; | |
| transition-property: transform,opacity; | |
| transition-timing-function: ease | |
| } | |
| .slideInLeft.ng-enter { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| transition-delay: 0; | |
| transition-duration: 700ms; | |
| transition-property: -webkit-transform,opacity; | |
| transition-property: transform,opacity; | |
| transition-timing-function: ease | |
| } | |
| .slideInUp.ng-enter { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| transition-delay: 0; | |
| transition-duration: 700ms; | |
| transition-property: -webkit-transform,opacity; | |
| transition-property: transform,opacity; | |
| transition-timing-function: ease | |
| } | |
| .slideInRight.ng-enter { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| transition-delay: 0; | |
| transition-duration: 700ms; | |
| transition-property: -webkit-transform,opacity; | |