diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 3ea2106..88a4cc7 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -342,3 +342,18 @@ - Softcoded `tab` module with variables. Optimized. - Added responsiveness to `tab` module. - Tested `tab` module thoroughly on both Firefox and Chrome (PC), will test further on phone. +- *DESIGN DECISION* The `accordion` and collapse module will be merged with the `tab` and carousel module. This is a very well-thought out decision, based on the fact that `accordion` components behave like `stacked` `tab` components. This means that users will be forced to use a heavier module for both components (which might not be beneficial if they only wish to use the `accordion` component), however this helps users mnemonically, by allowing more functionality in one technically identical structure. The specifics of this decision are laid out below: + 1. The `stacked` class will be used for a `tabs` container, so that an `accordion` component can be easily emulated. + 2. Some of the versatility of the `accordion` class will be sacrificed to allow `stacked` `tabs` to include the same functionality. Minor changes can still be made manually. + 3. The `tabs` module will use different transformation tricks for `stacked` and normal tabs. Specifically, the responsive stacked tabs on smaller screens will use preset `height`, while `stacked` tabs will use `height: auto;`. + 4. All controls for both types of `tab`s will be hidden from screen readers to make the content accessible as-is. + 5. The old `accordion` module will be retired and possibly stored in a legacy folder. People that only want that old-school `accordion` module can use it. + 6. `stacked` `tabs` will allow both `checkbox` and `radio` `input`s, normal ones will not allow `checkbox`. This is in line with the philosophy of the two components. + 7. Carousels can still be built using any of the two styles. + 8. `stacked` `tabs` will feature their own color scheme for some things to allow more customization within the module. + 9. Both components will use a generic `:hover` effect. + 10. The `transform`s applied before to `accordion` will still apply to `stacked` `tabs`. +- Refactored code of `tabs` to work with the above decision, removed obsolete artifacts from the `accordion` module. +- Made a few minor tweaks, decided not to add `accordion`-specific styling, as the current styling is just enough. +- Edited the demo page to include most of the new functionality. +- *TODO* Move `_accordion.scss` to the `legacy` folder etc. diff --git a/docs/v2/index.html b/docs/v2/index.html index 220730d..027b233 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -470,21 +470,29 @@ -

Content display Present content any way you like

-

mini.css gives you some flexible components to show or hide the content you wish. These components are more generic than the ones found in other frameworks and aim to help you present any content the way you like.


-

Accordion & Collapse

-

Use the .accordion class on a <input type="checkbox"> or <input type="radio">, accompanied by a linked <label> and any content afterwards (use something like a <div> if you want to show/hide more than a paragraph of text or an image) to create a collapsible piece of content. Use multiple of these to create an accordion if you like. These components are accessible, although screen readers will read these as normal blocks of content, no distinctions made. Add aria-hidden="true" to the <label> to make sure there are no confusing elements. Below, you can see a couple of examples:

- -

This is some content you can hide and show at will using the above label. Isn't that useful?

- - -
- -

Sample

This is the first piece of the accordion. These pieces are mutually exclusive.

- -

Demo

This is the second piece of the accordion. Notice how these samples use <div> to display more complex content.

-

Tabs & Carousels

-

Tabbed navigation is a very common element for many websites and single page apps. Carousels provide similar functionality for image portfolios. mini.css supports both of these elements using one generic component. Simply create a container with the .tabs class, add a few <label>s inside it, add the complementary <input type="radio">s each followed by each tab's content inside a <div> or <section> and you are ready to go. Tabs are accessible, as screen readers will ignore the tab labels and only read the content. Remember to add aria-hidden="true" to the <label>s. Oh, by the way, tabs are responsive on mobile and will display as a list on smaller displays, so that your users will not have any trouble navigating them. You can see examples of how tabs work below:

+

Tabs & accordionsPresent content any way you like

+

mini.css provides you with a very modern tab component, that can easily be used for multiple things, like tabbed navigation, single collapses, accordion collapses and even image carousels. This might sound like a lot to do with one component, but the design behind it allows it to be truly versatile and replace all those components. To use the tab component, simply create a container using a <div> with the .tabs class. Populate it with <input type="radio">s, each followed by a linked <label> and another <div> which includes the tab's contents. If you want to create an accordion add the .stacked class to the container. The same thing works for collapses as well. Accordions and collapses can also use <input type="checkbox">s instead. Carousels can be created similarly, remember to add images to the inner content <div> and you're good to go. You can see some examples below:


+
+ + +
+

This is some content you can hide and show at will using the above label. Isn't that useful?

+
+

+
+ + +
+

Section 1 - The amazing versatility of tabs

+

Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?

+
+ + +
+

Section 2 - How accordions work

+

Accordions are very similar to collapses. Just add multiple <input type="radio">s, along with their content and you are ready to go.

+
+

@@ -510,7 +518,24 @@

Tab 4

This is the fourth tab's content.

- +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+

SpinnersLoading with style

Finally, mini.css provides you with a couple of spinner variations, .spinner-dot and .spinner-donut. Simply apply these to a <div> and you are ready to go. Both are showcased below:

This is some text with a .spinner-dot spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this

diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index b8e5050..f4a7acd 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -824,56 +824,9 @@ progress { @media only screen and (min-width: 320px) { .card { max-width: 320px; } } -[type="checkbox"].accordion, [type="radio"].accordion { - display: none; - visibility: hidden; } - [type="checkbox"].accordion + label, [type="radio"].accordion + label { - display: block; - cursor: pointer; - background: #e0e0e0; - border: 1px solid #9e9e9e; - border-radius: 2px; - padding: 6px 10px 6px; - margin-bottom: 2px; } - [type="checkbox"].accordion + label + *, [type="radio"].accordion + label + * { - height: 1px; - width: 1px; - margin: -1px; - overflow: hidden; - position: absolute; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(100%); - clip-path: inset(100%); - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: top; - transform-origin: top; - transition: transform 0.3s ease 0s; } - [type="checkbox"].accordion:checked + label, [type="radio"].accordion:checked + label { - margin-bottom: 0; - border-bottom: 1px solid #bdbdbd; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; } - [type="checkbox"].accordion:checked + label + *, [type="radio"].accordion:checked + label + * { - box-sizing: border-box; - position: relative; - height: auto; - width: 100%; - margin: 0; - clip: auto; - -webkit-clip-path: inset(0%); - clip-path: inset(0%); - -webkit-transform: scaleY(1); - transform: scaleY(1); - border: 1px solid #9e9e9e; - border-top: 0; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - padding: 6px 10px 8px; - margin-bottom: 2px; } - .tabs { width: 100%; + opacity: 1; display: -webkit-box; -webkit-box-pack: justify; display: -webkit-flex; @@ -891,17 +844,20 @@ progress { display: inline-block; height: 26px; cursor: pointer; - background: #e0e0e0; - border: 1px solid #9e9e9e; + transition: background 0.3s ease 0s; + background: #b0bec5; + border: 1px solid #78909c; padding: 4px 6px; } .tabs > label:first-of-type { border-top-left-radius: 2px; } .tabs > label:last-of-type { border-top-right-radius: 2px; } - .tabs > [type="radio"] { + .tabs > label:hover, .tabs > label:active, .tabs > label:focus { + background: rgba(176, 190, 197, 0.75); } + .tabs > [type="radio"], .tabs.stacked > [type="checkbox"] { display: none; visibility: hidden; } - .tabs > [type="radio"] + label + div { + .tabs > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div { -webkit-flex-basis: auto; flex-basis: auto; -webkit-order: 2; @@ -917,24 +873,64 @@ progress { transition: height 0.3s ease 0s; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } - .tabs > [type="radio"] + label + div + [type="radio"] + label { + .tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label { border-left: 0; } - .tabs > [type="radio"]:checked + label { - background: #bdbdbd; } - .tabs > [type="radio"]:checked + label + div { + .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label { + border-left: 0; } + .tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label { + background: #cfd8dc; } + .tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:active, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:active, .tabs.stacked > [type="checkbox"]:checked + label:focus { + background: rgba(207, 216, 220, 0.75); } + .tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div { box-sizing: border-box; position: relative; height: 400px; width: 100%; overflow: auto; margin: 0; - border: 1px solid #9e9e9e; + border: 1px solid #78909c; border-top: 0; padding: 6px; clip: auto; -webkit-clip-path: inset(0%); clip-path: inset(0%); } +.tabs.stacked { + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + flex-direction: column; } + .tabs.stacked > label { + -webkit-order: initial; + order: initial; } + .tabs.stacked > label:first-of-type { + border-top-right-radius: 2px; } + .tabs.stacked > label:last-of-type { + border-top-right-radius: 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } + .tabs.stacked > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div { + -webkit-order: initial; + order: initial; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top; + transform-origin: top; + transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s; + border-radius: 0; } + .tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label { + border: 1px solid #78909c; + border-top: 0; } + .tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div { + height: auto; + -webkit-transform: scaleY(1); + transform: scaleY(1); } + .tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } + @media only screen and (max-width: 800px) { .tabs { -webkit-box-orient: vertical; @@ -957,7 +953,7 @@ progress { order: initial; border-radius: 0; } .tabs > [type="radio"] + label + div + [type="radio"] + label { - border: 1px solid #9e9e9e; + border: 1px solid #78909c; border-top: 0; } .tabs > [type="radio"] + label + div:last-of-type { border-bottom-left-radius: 2px; diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index 0c9afaf..fde8a1e 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -1 +1 @@ -*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,details,figcaption,figure,main,menu,section{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}form{background:#eceff1;border:1px solid #90a4ae;border-radius:2px;margin:8px;padding:8px}fieldset{border:1px solid #b0bec5;border-radius:1px;margin:0;padding:4px 6px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.85em;padding:4px}.input-group{display:inline-block}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],input:not([type]),select,textarea{box-sizing:border-box;background:#fafafa;color:#212121;border:1px solid #b0bec5;border-radius:1px;margin:2px;padding:6px 8px}[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,input:not([type]):focus,select:focus,textarea:focus{border-color:#0288d1;box-shadow:none}[type=email][disabled],[type=number][disabled],[type=password][disabled],[type=search][disabled],[type=tel][disabled],[type=text][disabled],[type=url][disabled],input:not([type])[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.75}[type=email]:focus:invalid,[type=email]:focus:invalid:focus,[type=email]:invalid,[type=number]:focus:invalid,[type=number]:focus:invalid:focus,[type=number]:invalid,[type=password]:focus:invalid,[type=password]:focus:invalid:focus,[type=password]:invalid,[type=search]:focus:invalid,[type=search]:focus:invalid:focus,[type=search]:invalid,[type=tel]:focus:invalid,[type=tel]:focus:invalid:focus,[type=tel]:invalid,[type=text]:focus:invalid,[type=text]:focus:invalid:focus,[type=text]:invalid,[type=url]:focus:invalid,[type=url]:focus:invalid:focus,[type=url]:invalid,input:not([type]):focus:invalid,input:not([type]):focus:invalid:focus,input:not([type]):invalid,select:focus:invalid,select:focus:invalid:focus,select:invalid,textarea:focus:invalid,textarea:focus:invalid:focus,textarea:invalid{border-color:#d32f2f;box-shadow:none}[type=email][readonly],[type=number][readonly],[type=password][readonly],[type=search][readonly],[type=tel][readonly],[type=text][readonly],[type=url][readonly],input:not([type])[readonly],select[readonly],textarea[readonly]{background:#eceff1;border-color:#90a4ae}::-webkit-placeholder{color:#37474f}::-moz-placeholder{color:#37474f}::-ms-placeholder{color:#37474f}header{display:block;height:36px;background:#263238;color:#fafafa;padding:2px 8px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#fafafa;font-size:1.75em;line-height:1.2;margin:1px 6px 1px 1px}header .button,header [type=button],header a.button,header button,header label.button{background:#263238;color:#fafafa;vertical-align:top;margin:2px 0 0}header .button:active,header .button:focus,header .button:hover,header [type=button]:active,header [type=button]:focus,header [type=button]:hover,header a.button:active,header a.button:focus,header a.button:hover,header button:active,header button:focus,header button:hover,header label.button:active,header label.button:focus,header label.button:hover{background:#37474f}header .logo,header a.button{text-decoration:none}nav{display:block;background:#eceff1;border-radius:1px;margin:2px;padding:4px 4px 4px 16px}nav a,nav a:visited{display:block;color:#0277bd}nav .sublink-1{padding-left:12px}nav .sublink-2{padding-left:24px}footer{display:block;background:#263238;color:#fafafa;margin:18px 0 0;padding:22px 10px 12px;font-size:85%}footer a,footer a:visited{color:#039be5}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}.button,[type=button],[type=reset],[type=submit],a.button,button,label.button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;border-radius:2px;padding:4px 6px;margin:4px;text-decoration:none;transition:all .3s ease 0s;cursor:pointer}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover,label.button:active,label.button:focus,label.button:hover{background:#cfd8dc;opacity:1}.button:disabled,.button[disabled],[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],a.button:disabled,a.button[disabled],button:disabled,button[disabled],label.button:disabled,label.button[disabled]{cursor:not-allowed;opacity:.65}input[type=file]{display:none}[type=checkbox],[type=radio]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type=checkbox]+label,.input-group [type=radio]+label{position:relative;margin-left:21.25px}.input-group [type=checkbox]+label:before,.input-group [type=radio]+label:before{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;width:17px;height:17px;content:'';border:1px solid #b0bec5;border-radius:1px;background:#fafafa;color:#212121;margin-left:-21.25px;vertical-align:text-bottom}.input-group [type=checkbox]+label:active:before,.input-group [type=checkbox]+label:focus:before,.input-group [type=checkbox]+label:hover:before,.input-group [type=checkbox]:focus+label:before,.input-group [type=radio]+label:active:before,.input-group [type=radio]+label:focus:before,.input-group [type=radio]+label:hover:before,.input-group [type=radio]:focus+label:before{border-color:#0288d1}.input-group [type=radio]+label:after,.input-group [type=radio]+label:before{border-radius:50%}.input-group [type=checkbox][disabled]+label,.input-group [type=radio][disabled]+label{cursor:not-allowed}.input-group [type=checkbox][disabled]+label:after,.input-group [type=checkbox][disabled]+label:before,.input-group [type=radio][disabled]+label:after,.input-group [type=radio][disabled]+label:before{opacity:.75}.input-group [type=checkbox]:checked+label:after,.input-group [type=radio]:checked+label:after{margin-left:-21px;position:absolute;top:4px;left:4px;width:9px;height:9px;background:#212121;content:''}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.card{-webkit-box-orient:vertical;-webkit-box-pack:justify;-webkit-box-align:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-self:center;align-self:center;position:relative;width:100%;background:#f5f5f5;border:1px solid #9e9e9e;border-radius:2px;margin:2px 10px 20px;box-shadow:rgba(0,0,0,.25)0 0 3px 0}.card>.section{box-sizing:border-box;margin:0;border-bottom:1px solid #bdbdbd;padding:6px 8px;width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card .button.section,.card input.section,.card>button.section{border-radius:0}.card>.section:last-child{border-bottom:0}@media only screen and (min-width:320px){.card{max-width:320px}}[type=checkbox].accordion,[type=radio].accordion{display:none;visibility:hidden}[type=checkbox].accordion+label,[type=radio].accordion+label{display:block;cursor:pointer;background:#e0e0e0;border:1px solid #9e9e9e;border-radius:2px;padding:6px 10px;margin-bottom:2px}[type=checkbox].accordion+label+*,[type=radio].accordion+label+*{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top;transition:transform .3s ease 0s}[type=checkbox].accordion:checked+label,[type=radio].accordion:checked+label{margin-bottom:0;border-bottom:1px solid #bdbdbd;border-bottom-right-radius:0;border-bottom-left-radius:0}[type=checkbox].accordion:checked+label+*,[type=radio].accordion:checked+label+*{box-sizing:border-box;position:relative;height:auto;width:100%;margin:0;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);-webkit-transform:scaleY(1);transform:scaleY(1);border:1px solid #9e9e9e;border-top:0;border-bottom-right-radius:2px;border-bottom-left-radius:2px;padding:6px 10px 8px;margin-bottom:2px}.tabs{width:100%;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap}.tabs>label{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;-webkit-order:1;order:1;display:inline-block;height:26px;cursor:pointer;background:#e0e0e0;border:1px solid #9e9e9e;padding:4px 6px}.tabs>label:first-of-type{border-top-left-radius:2px}.tabs>label:last-of-type{border-top-right-radius:2px}.tabs>[type=radio]{display:none;visibility:hidden}.tabs>[type=radio]+label+div{-webkit-flex-basis:auto;flex-basis:auto;-webkit-order:2;order:2;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:height .3s ease 0s;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs>[type=radio]+label+div+[type=radio]+label{border-left:0}.tabs>[type=radio]:checked+label{background:#bdbdbd}.tabs>[type=radio]:checked+label+div{box-sizing:border-box;position:relative;height:400px;width:100%;overflow:auto;margin:0;border:1px solid #9e9e9e;border-top:0;padding:6px;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}@media only screen and (max-width:800px){.tabs{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs>label{-webkit-order:initial;order:initial}.tabs>label:first-of-type{border-top-right-radius:2px}.tabs>label:last-of-type{border-top-right-radius:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs>[type=radio]:checked+label{border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs>[type=radio]+label+div{-webkit-order:initial;order:initial;border-radius:0}.tabs>[type=radio]+label+div+[type=radio]+label{border:1px solid #9e9e9e;border-top:0}.tabs>[type=radio]+label+div:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}}@-webkit-keyframes spinner-dot-anim{to{-webkit-transform:translateY(-6em)}}@keyframes spinner-dot-anim{to{transform:translateY(-6em)}}@-webkit-keyframes spinner-donut-anim{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner-dot{display:inline-block;overflow:hidden;font-size:1em;height:1.5em;vertical-align:bottom}.spinner-dot:after{display:inline-table;white-space:pre;content:"\A.\A..\A...";-webkit-animation:spinner-dot-anim 1.2s steps(4) infinite;animation:spinner-dot-anim 1.2s steps(4) infinite}.spinner-donut{display:inline-block;border:4px solid #e3f2fd;border-left:4px solid #1565c0;border-radius:50%;width:20px;height:20px;animation:spinner-donut-anim 1.2s linear infinite}.button.primary,[type=button].primary,[type=reset].primary,[type=submit].primary,button.primary{background:#1565c0;color:#fafafa}.button.primary:active,.button.primary:focus,.button.primary:hover,[type=button].primary:active,[type=button].primary:focus,[type=button].primary:hover,[type=reset].primary:active,[type=reset].primary:focus,[type=reset].primary:hover,[type=submit].primary:active,[type=submit].primary:focus,[type=submit].primary:hover,button.primary:active,button.primary:focus,button.primary:hover{background:rgba(21,101,192,.85)}.button.secondary,[type=button].secondary,[type=reset].secondary,[type=submit].secondary,button.secondary{background:rgba(198,40,40,.85);color:#fafafa}.button.secondary:active,.button.secondary:focus,.button.secondary:hover,[type=button].secondary:active,[type=button].secondary:focus,[type=button].secondary:hover,[type=reset].secondary:active,[type=reset].secondary:focus,[type=reset].secondary:hover,[type=submit].secondary:active,[type=submit].secondary:focus,[type=submit].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover{background:#c62828}.button.tertiary,[type=button].tertiary,[type=reset].tertiary,[type=submit].tertiary,button.tertiary{background:rgba(139,195,74,.8)}.button.tertiary:active,.button.tertiary:focus,.button.tertiary:hover,[type=button].tertiary:active,[type=button].tertiary:focus,[type=button].tertiary:hover,[type=reset].tertiary:active,[type=reset].tertiary:focus,[type=reset].tertiary:hover,[type=submit].tertiary:active,[type=submit].tertiary:focus,[type=submit].tertiary:hover,button.tertiary:active,button.tertiary:focus,button.tertiary:hover{background:#8bc34a}.button.small,[type=button].small,[type=reset].small,[type=submit].small,button.small{border-radius:1px;padding:1px 2px;margin:2px}.button.large,[type=button].large,[type=reset].large,[type=submit].large,button.large{border-radius:4px;padding:10px 15px;margin:7px}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:60vw}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:2px!important}.circular{border-radius:50%!important}.hidden{display:none!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden!important}.float-left{float:left!important}.float-right{float:right!important}.clearfix:after,.clearfix:before{content:' ';display:table;clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}ul.breadcrumbs{list-style:none}ul.breadcrumbs>li{display:inline-block;padding-right:.125em}ul.breadcrumbs>li+li:before{content:'\27e9';padding:.125em}.card.large{max-width:480px}.card.small{max-width:160px}.card.fluid{max-width:100%}.card.primary{background:#e1f5fe;color:#263238;border:1px solid #01579b}.card>.section.dark{background:#bdbdbd}.card>.section.primary{background:#0277bd}.card>.section.double-padded{padding:12px 16px}.spinner-donut.secondary{border:4px solid #ffebee;border-left:4px solid #c62828}.row.cards{-webkit-box-pack:justify;-webkit-justify-content:space-around;justify-content:space-around}.spinner-donut.tertiary{border:4px solid #e8f5e9;border-left:4px solid #2e7d32} \ No newline at end of file +*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,details,figcaption,figure,main,menu,section{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}img{width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{border:0;height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}form{background:#eceff1;border:1px solid #90a4ae;border-radius:2px;margin:8px;padding:8px}fieldset{border:1px solid #b0bec5;border-radius:1px;margin:0;padding:4px 6px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.85em;padding:4px}.input-group{display:inline-block}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}textarea{overflow:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],input:not([type]),select,textarea{box-sizing:border-box;background:#fafafa;color:#212121;border:1px solid #b0bec5;border-radius:1px;margin:2px;padding:6px 8px}[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,input:not([type]):focus,select:focus,textarea:focus{border-color:#0288d1;box-shadow:none}[type=email][disabled],[type=number][disabled],[type=password][disabled],[type=search][disabled],[type=tel][disabled],[type=text][disabled],[type=url][disabled],input:not([type])[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.75}[type=email]:focus:invalid,[type=email]:focus:invalid:focus,[type=email]:invalid,[type=number]:focus:invalid,[type=number]:focus:invalid:focus,[type=number]:invalid,[type=password]:focus:invalid,[type=password]:focus:invalid:focus,[type=password]:invalid,[type=search]:focus:invalid,[type=search]:focus:invalid:focus,[type=search]:invalid,[type=tel]:focus:invalid,[type=tel]:focus:invalid:focus,[type=tel]:invalid,[type=text]:focus:invalid,[type=text]:focus:invalid:focus,[type=text]:invalid,[type=url]:focus:invalid,[type=url]:focus:invalid:focus,[type=url]:invalid,input:not([type]):focus:invalid,input:not([type]):focus:invalid:focus,input:not([type]):invalid,select:focus:invalid,select:focus:invalid:focus,select:invalid,textarea:focus:invalid,textarea:focus:invalid:focus,textarea:invalid{border-color:#d32f2f;box-shadow:none}[type=email][readonly],[type=number][readonly],[type=password][readonly],[type=search][readonly],[type=tel][readonly],[type=text][readonly],[type=url][readonly],input:not([type])[readonly],select[readonly],textarea[readonly]{background:#eceff1;border-color:#90a4ae}::-webkit-placeholder{color:#37474f}::-moz-placeholder{color:#37474f}::-ms-placeholder{color:#37474f}header{display:block;height:36px;background:#263238;color:#fafafa;padding:2px 8px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header .logo{color:#fafafa;font-size:1.75em;line-height:1.2;margin:1px 6px 1px 1px}header .button,header [type=button],header a.button,header button,header label.button{background:#263238;color:#fafafa;vertical-align:top;margin:2px 0 0}header .button:active,header .button:focus,header .button:hover,header [type=button]:active,header [type=button]:focus,header [type=button]:hover,header a.button:active,header a.button:focus,header a.button:hover,header button:active,header button:focus,header button:hover,header label.button:active,header label.button:focus,header label.button:hover{background:#37474f}header .logo,header a.button{text-decoration:none}nav{display:block;background:#eceff1;border-radius:1px;margin:2px;padding:4px 4px 4px 16px}nav a,nav a:visited{display:block;color:#0277bd}nav .sublink-1{padding-left:12px}nav .sublink-2{padding-left:24px}footer{display:block;background:#263238;color:#fafafa;margin:18px 0 0;padding:22px 10px 12px;font-size:85%}footer a,footer a:visited{color:#039be5}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}.button,[type=button],[type=reset],[type=submit],a.button,button,label.button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;border-radius:2px;padding:4px 6px;margin:4px;text-decoration:none;transition:all .3s ease 0s;cursor:pointer}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover,label.button:active,label.button:focus,label.button:hover{background:#cfd8dc;opacity:1}.button:disabled,.button[disabled],[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],a.button:disabled,a.button[disabled],button:disabled,button[disabled],label.button:disabled,label.button[disabled]{cursor:not-allowed;opacity:.65}input[type=file]{display:none}[type=checkbox],[type=radio]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.input-group [type=checkbox]+label,.input-group [type=radio]+label{position:relative;margin-left:21.25px}.input-group [type=checkbox]+label:before,.input-group [type=radio]+label:before{box-sizing:border-box;display:inline-block;position:absolute;top:0;left:0;width:17px;height:17px;content:'';border:1px solid #b0bec5;border-radius:1px;background:#fafafa;color:#212121;margin-left:-21.25px;vertical-align:text-bottom}.input-group [type=checkbox]+label:active:before,.input-group [type=checkbox]+label:focus:before,.input-group [type=checkbox]+label:hover:before,.input-group [type=checkbox]:focus+label:before,.input-group [type=radio]+label:active:before,.input-group [type=radio]+label:focus:before,.input-group [type=radio]+label:hover:before,.input-group [type=radio]:focus+label:before{border-color:#0288d1}.input-group [type=radio]+label:after,.input-group [type=radio]+label:before{border-radius:50%}.input-group [type=checkbox][disabled]+label,.input-group [type=radio][disabled]+label{cursor:not-allowed}.input-group [type=checkbox][disabled]+label:after,.input-group [type=checkbox][disabled]+label:before,.input-group [type=radio][disabled]+label:after,.input-group [type=radio][disabled]+label:before{opacity:.75}.input-group [type=checkbox]:checked+label:after,.input-group [type=radio]:checked+label:after{margin-left:-21px;position:absolute;top:4px;left:4px;width:9px;height:9px;background:#212121;content:''}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}.card{-webkit-box-orient:vertical;-webkit-box-pack:justify;-webkit-box-align:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-self:center;align-self:center;position:relative;width:100%;background:#f5f5f5;border:1px solid #9e9e9e;border-radius:2px;margin:2px 10px 20px;box-shadow:rgba(0,0,0,.25)0 0 3px 0}.card>.section{box-sizing:border-box;margin:0;border-bottom:1px solid #bdbdbd;padding:6px 8px;width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card .button.section,.card input.section,.card>button.section{border-radius:0}.card>.section:last-child{border-bottom:0}@media only screen and (min-width:320px){.card{max-width:320px}}.tabs{width:100%;opacity:1;-webkit-box-pack:justify;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap}.tabs>label{-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;-webkit-order:1;order:1;display:inline-block;height:26px;cursor:pointer;transition:background .3s ease 0s;background:#b0bec5;border:1px solid #78909c;padding:4px 6px}.tabs>label:first-of-type{border-top-left-radius:2px}.tabs>label:last-of-type{border-top-right-radius:2px}.tabs>label:active,.tabs>label:focus,.tabs>label:hover{background:rgba(176,190,197,.75)}.tabs.stacked>[type=checkbox],.tabs>[type=radio]{display:none;visibility:hidden}.tabs.stacked>[type=checkbox]+label+div,.tabs>[type=radio]+label+div{-webkit-flex-basis:auto;flex-basis:auto;-webkit-order:2;order:2;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:height .3s ease 0s;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs.stacked>[type=checkbox]+label+div+[type=checkbox]+label,.tabs.stacked>[type=checkbox]+label+div+[type=radio]+label,.tabs>[type=radio]+label+div+[type=radio]+label{border-left:0}.tabs.stacked>[type=checkbox]:checked+label,.tabs>[type=radio]:checked+label{background:#cfd8dc}.tabs.stacked>[type=checkbox]:checked+label:active,.tabs.stacked>[type=checkbox]:checked+label:focus,.tabs.stacked>[type=checkbox]:checked+label:hover,.tabs>[type=radio]:checked+label:active,.tabs>[type=radio]:checked+label:focus,.tabs>[type=radio]:checked+label:hover{background:rgba(207,216,220,.75)}.tabs.stacked>[type=checkbox]:checked+label+div,.tabs>[type=radio]:checked+label+div{box-sizing:border-box;position:relative;height:400px;width:100%;overflow:auto;margin:0;border:1px solid #78909c;border-top:0;padding:6px;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tabs.stacked{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs.stacked>label{-webkit-order:initial;order:initial}.tabs.stacked>label:first-of-type{border-top-right-radius:2px}.tabs.stacked>label:last-of-type{border-top-right-radius:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs.stacked>[type=checkbox]:checked+label,.tabs.stacked>[type=radio]:checked+label{border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs.stacked>[type=checkbox]+label+div,.tabs.stacked>[type=radio]+label+div{-webkit-order:initial;order:initial;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:top;transform-origin:top;transition:-webkit-transform .3s ease 0s,transform .3s ease 0s;border-radius:0}.tabs.stacked>[type=checkbox]+label+div+[type=checkbox]+label,.tabs.stacked>[type=checkbox]+label+div+[type=radio]+label,.tabs.stacked>[type=radio]+label+div+[type=checkbox]+label,.tabs.stacked>[type=radio]+label+div+[type=radio]+label{border:1px solid #78909c;border-top:0}.tabs.stacked>[type=checkbox]:checked+label+div,.tabs.stacked>[type=radio]:checked+label+div{height:auto;-webkit-transform:scaleY(1);transform:scaleY(1)}.tabs.stacked>[type=checkbox]+label+div:last-of-type,.tabs.stacked>[type=radio]+label+div:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}@media only screen and (max-width:800px){.tabs{-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}.tabs>label{-webkit-order:initial;order:initial}.tabs>label:first-of-type{border-top-right-radius:2px}.tabs>label:last-of-type{border-top-right-radius:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs>[type=radio]:checked+label{border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs>[type=radio]+label+div{-webkit-order:initial;order:initial;border-radius:0}.tabs>[type=radio]+label+div+[type=radio]+label{border:1px solid #78909c;border-top:0}.tabs>[type=radio]+label+div:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}}@-webkit-keyframes spinner-dot-anim{to{-webkit-transform:translateY(-6em)}}@keyframes spinner-dot-anim{to{transform:translateY(-6em)}}@-webkit-keyframes spinner-donut-anim{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-donut-anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner-dot{display:inline-block;overflow:hidden;font-size:1em;height:1.5em;vertical-align:bottom}.spinner-dot:after{display:inline-table;white-space:pre;content:"\A.\A..\A...";-webkit-animation:spinner-dot-anim 1.2s steps(4) infinite;animation:spinner-dot-anim 1.2s steps(4) infinite}.spinner-donut{display:inline-block;border:4px solid #e3f2fd;border-left:4px solid #1565c0;border-radius:50%;width:20px;height:20px;animation:spinner-donut-anim 1.2s linear infinite}.button.primary,[type=button].primary,[type=reset].primary,[type=submit].primary,button.primary{background:#1565c0;color:#fafafa}.button.primary:active,.button.primary:focus,.button.primary:hover,[type=button].primary:active,[type=button].primary:focus,[type=button].primary:hover,[type=reset].primary:active,[type=reset].primary:focus,[type=reset].primary:hover,[type=submit].primary:active,[type=submit].primary:focus,[type=submit].primary:hover,button.primary:active,button.primary:focus,button.primary:hover{background:rgba(21,101,192,.85)}.button.secondary,[type=button].secondary,[type=reset].secondary,[type=submit].secondary,button.secondary{background:rgba(198,40,40,.85);color:#fafafa}.button.secondary:active,.button.secondary:focus,.button.secondary:hover,[type=button].secondary:active,[type=button].secondary:focus,[type=button].secondary:hover,[type=reset].secondary:active,[type=reset].secondary:focus,[type=reset].secondary:hover,[type=submit].secondary:active,[type=submit].secondary:focus,[type=submit].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover{background:#c62828}.button.tertiary,[type=button].tertiary,[type=reset].tertiary,[type=submit].tertiary,button.tertiary{background:rgba(139,195,74,.8)}.button.tertiary:active,.button.tertiary:focus,.button.tertiary:hover,[type=button].tertiary:active,[type=button].tertiary:focus,[type=button].tertiary:hover,[type=reset].tertiary:active,[type=reset].tertiary:focus,[type=reset].tertiary:hover,[type=submit].tertiary:active,[type=submit].tertiary:focus,[type=submit].tertiary:hover,button.tertiary:active,button.tertiary:focus,button.tertiary:hover{background:#8bc34a}.button.small,[type=button].small,[type=reset].small,[type=submit].small,button.small{border-radius:1px;padding:1px 2px;margin:2px}.button.large,[type=button].large,[type=reset].large,[type=submit].large,button.large{border-radius:4px;padding:10px 15px;margin:7px}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:60vw}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}.bordered{border:1px solid rgba(0,0,0,.25)!important}.rounded{border-radius:2px!important}.circular{border-radius:50%!important}.hidden{display:none!important}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden!important}.float-left{float:left!important}.float-right{float:right!important}.clearfix:after,.clearfix:before{content:' ';display:table;clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}ul.breadcrumbs{list-style:none}ul.breadcrumbs>li{display:inline-block;padding-right:.125em}ul.breadcrumbs>li+li:before{content:'\27e9';padding:.125em}.card.large{max-width:480px}.card.small{max-width:160px}.card.fluid{max-width:100%}.card.primary{background:#e1f5fe;color:#263238;border:1px solid #01579b}.card>.section.dark{background:#bdbdbd}.card>.section.primary{background:#0277bd}.card>.section.double-padded{padding:12px 16px}.spinner-donut.secondary{border:4px solid #ffebee;border-left:4px solid #c62828}.row.cards{-webkit-box-pack:justify;-webkit-justify-content:space-around;justify-content:space-around}.spinner-donut.tertiary{border:4px solid #e8f5e9;border-left:4px solid #2e7d32} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 997f0f4..b8e02bc 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -346,34 +346,25 @@ $card-section-padding1-name: 'double-padded'; // Class name for card sect $card-section-padding1-padding: 12px 16px 12px; // Padding for card section padding style 1 // Notes: // [1] - The cards module depends heavily on the grid system module. -// Variables for accordions/collapses -$accordion-name: 'accordion'; // Class name for accordions/collapses -$accordion-label-back-color: #e0e0e0; // Background color for accordion label -$accordion-label-fore-color: $fore-color; // Text color for accordion label -$accordion-label-padding: 6px 10px 6px; // Padding for accordion label -$accordion-content-back-color: $back-color; // Background color for accordion content -$accordion-content-fore-color: $fore-color; // Text color for accordion content -$accordion-content-padding: 6px 10px 8px; // Padding for accordion content -$accordion-border-style: 1px solid #9e9e9e; // Border style for accordion -$accordion-border-radius: 2px; // Border radius for accordion -$accordion-margin-bottom: 2px; // Bottom margin for accordion -$accordion-separator-border-style: // Border style for the accordion's separators - 1px solid #bdbdbd; // (border between label and content) -// Variables for tabs +// Variables for tabs [1] $tab-container-name: 'tabs'; // Class name for the tabs' container -$tab-label-back-color: #e0e0e0; // Background color for tabs' labels +$tab-label-back-color: #b0bec5; // Background color for tabs' labels $tab-label-fore-color: $fore-color; // Text color for tabs' labels -$tab-label-selected-back-color: #bdbdbd; // Background color for open tab's label +$tab-label-selected-back-color: #cfd8dc; // Background color for open tab's label $tab-label-selected-fore-color: $fore-color; // Text color for open tab's label +$tab-label-hover-opacity: 0.75; // Opacity of the tab's label on hover $tab-label-padding: 4px 6px; // Padding for tabs' labels $tab-label-height: 26px; // Height for tabs' labels -$tab-border-style: 1px solid #9e9e9e; // Border style for tabs +$tab-border-style: 1px solid #78909c; // Border style for tabs $tab-border-radius: 2px; // Border radius for tabs $tab-panel-back-color: $back-color; // Background color for tabs' panels $tab-panel-fore-color: $fore-color; // Text color for tabs' panels $tab-panel-padding: 6px; // Padding for tabs' panels $tab-panel-height: 400px; // Height for tabs' panels $tab-stacked-breakpoint: $grid-medium-breakpoint; // Breakpoint for tabs layout (stacked/horizontal) +$tab-stacked-name: 'stacked'; // Class name for stacked tabs +// Notes: +// [1] - The tabs module is somewhat dependent on the grid system module. // Variables for spinners $spinner-dot-name: 'spinner-dot'; // Class name for dot spinner $spinner-dot-font-size: 1em; // Font size for dot spinner diff --git a/scss/v2/mini-shell/_accordion.scss b/scss/v2/_accordion.scss similarity index 100% rename from scss/v2/mini-shell/_accordion.scss rename to scss/v2/_accordion.scss diff --git a/scss/v2/_mini.scss b/scss/v2/_mini.scss index 4b0cee4..e8fbe95 100644 --- a/scss/v2/_mini.scss +++ b/scss/v2/_mini.scss @@ -369,7 +369,6 @@ a{ //=================================================== // You can comment out modules you do not want to use. @import 'mini-shell/card'; -@import 'mini-shell/accordion'; @import 'mini-shell/tab'; @import 'mini-shell/spinner'; //=================================================== \ No newline at end of file diff --git a/scss/v2/mini-shell/_tab.scss b/scss/v2/mini-shell/_tab.scss index b1fb387..f580a13 100644 --- a/scss/v2/mini-shell/_tab.scss +++ b/scss/v2/mini-shell/_tab.scss @@ -2,8 +2,10 @@ // Dependency: This module is somewhat dependent on the grid system. // Tab styling $tab-container-name: 'tabs' !default; // Class name for the tabs container -.#{$tab-container-name} { +$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container +.#{$tab-container-name} { width: 100%; + opacity: 1; // Old syntax display: -webkit-box; -webkit-box-pack: justify; @@ -27,7 +29,8 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai // Actual styling display: inline-block; height: $tab-label-height; - cursor: pointer; + cursor: pointer; + transition: background 0.3s ease 0s; @if $tab-label-back-color != $back-color { background: $tab-label-back-color; } @@ -48,15 +51,18 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai border-top-right-radius: $tab-border-radius; } } - // TODO ADD HOVER STYLES HERE AND ON ACCORDION +// Hover styling for tabs' labels +&:hover, &:active, &:focus { + background: rgba($tab-label-back-color, $tab-label-hover-opacity); +} } // Tab radio styling -& > [type="radio"] { +& > [type="radio"], &.#{$tab-stacked-name} > [type="checkbox"] { display: none; visibility: hidden; } // Tab content styling -& > [type="radio"] + label + div { +& > [type="radio"] + label + div, &.#{$tab-stacked-name} > [type="checkbox"] + label + div { // New syntax -webkit-flex-basis: auto; flex-basis: auto; @@ -75,7 +81,7 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai transition: height 0.3s ease 0s; // Style for tab labels except the first @if $tab-border-style != 0 { -+ [type="radio"] + label { +& + [type="radio"] + label{ border-left: 0; } } @@ -84,17 +90,25 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai border-bottom-right-radius: $tab-border-radius; } } +@if $tab-border-style != 0 { +&.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label { + border-left: 0; +} +} // Tab label styling for open tab -& > [type="radio"]:checked + label { +& > [type="radio"]:checked + label, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label { @if $tab-label-selected-back-color != $tab-label-back-color { background: $tab-label-selected-back-color; +&:hover, &:active, &:focus { + background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity); +} } @if $tab-label-selected-fore-color != $tab-label-fore-color { color: $tab-label-selected-fore-color; } } // Tab content styling (open tab) -& > [type="radio"]:checked + label + div { +& > [type="radio"]:checked + label + div, &.#{$tab-stacked-name} > [type="checkbox"]:checked + label + div { box-sizing: border-box; position: relative; height: $tab-panel-height; @@ -120,6 +134,65 @@ $tab-container-name: 'tabs' !default; // Class name for the tabs contai clip-path: inset(0%); } } +// Stacked tabs +.#{$tab-container-name}.#{$tab-stacked-name} { +// Old syntax + -webkit-box-orient: vertical; +// New syntax + -webkit-flex-direction: column; + flex-direction: column; +& > label { + -webkit-order: initial; // Reset order to show stacked tabs properly + order: initial; +@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed +&:first-of-type { + border-top-right-radius: $tab-border-radius; +} +&:last-of-type { + border-top-right-radius: 0; + border-bottom-left-radius: $tab-border-radius; + border-bottom-right-radius: $tab-border-radius; +} +} +} +@if $tab-border-radius != 0 { // Style the last tabs' label corners when it's open as needed +& > [type="radio"]:checked + label, & > [type="checkbox"]:checked + label { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +} +& > [type="radio"] + label + div, & > [type="checkbox"] + label + div { + -webkit-order: initial; // Reset order to show stacked tabs properly + order: initial; +// Presentation + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top; + transform-origin: top; + transition: -webkit-transform 0.3s ease 0s, + transform 0.3s ease 0s; +@if $tab-border-radius != 0 { + border-radius: 0; +} +& + [type="radio"] + label, & + [type="checkbox"] + label { +@if $tab-border-style != 0 { + border: $tab-border-style; + border-top: 0; +} +} +} +& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div { + height: auto; + -webkit-transform: scaleY(1); + transform: scaleY(1); +} +@if $tab-border-radius != 0 { +& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type { + border-bottom-left-radius: $tab-border-radius; + border-bottom-right-radius: $tab-border-radius; +} +} +} // Responsiveness @media only screen and (max-width: #{$tab-stacked-breakpoint}) { .#{$tab-container-name} {