diff --git a/dist/mini-default.css b/dist/mini-default.css index cdb41d6..42a26e3 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -483,69 +483,54 @@ a { .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; } +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 label.button, header .button { + background: #263238; + color: #fafafa; + vertical-align: top; + margin: 2px 0 0; } + header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus { + background: #37474f; } + header .logo, header a.button { + text-decoration: none; } -caption { - font-size: 1.5em; - margin: 6px 0 12px; } - -tr { - padding: 6px; } - -th, td { - padding: 10px; - border-left: 1px solid #bdbdbd; - border-top: 1px solid #bdbdbd; } - -th { - border-top: 0; - background: #eceff1; } - -th:first-child, td:first-child { - border-left: 0; } - -@media (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 { +nav { + display: block; + background: #eceff1; + border-radius: 1px; + margin: 2px; + padding: 4px 4px 4px 16px; } + nav a, nav a:visited { display: block; - border: 1px solid #bdbdbd; - border-radius: 2px; - margin-bottom: 10px; } + color: #0277bd; } + nav .sublink-1 { + padding-left: 12px; } + nav .sublink-2 { + padding-left: 24px; } - td { - display: block; - border: 0; - border-bottom: 1px solid #bdbdbd; - text-align: right; } +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; } - td:before { - content: attr(data-label); - float: left; - font-weight: 700; } - - td:last-child { - border-bottom: 0; } } form { background: #eceff1; border: 1px solid #90a4ae; @@ -711,117 +696,69 @@ input[type="file"] { background: #212121; content: ''; } -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 label.button, header .button { - background: #263238; - color: #fafafa; - vertical-align: top; - margin: 2px 0 0; } - header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus { - 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; } - -mark { - background: #0277bd; - color: #fafafa; - font-size: 95%; - line-height: 1; - padding: 1px; } - -.alert { - display: block; - max-width: 100%; - background: #eeeeee; +table { + border-collapse: separate; + border-spacing: 0; border: 1px solid #bdbdbd; border-radius: 2px; - margin: 1px 10px; - padding: 12px 16px; } + margin: 0 auto; } -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; } +caption { + font-size: 1.5em; + margin: 6px 0 12px; } -@-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-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; } +tr { + padding: 6px; } +th, td { + padding: 10px; + border-left: 1px solid #bdbdbd; + border-top: 1px solid #bdbdbd; } + +th { + border-top: 0; + background: #eceff1; } + +th:first-child, td:first-child { + border-left: 0; } + +@media (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; } } .card { display: -webkit-box; -webkit-box-orient: vertical; @@ -858,7 +795,7 @@ progress { .card > .section:last-child { border-bottom: 0; } -@media only screen and (min-width: 320px) { +@media (min-width: 320px) { .card { max-width: 320px; } } .tabs { @@ -996,6 +933,69 @@ progress { .tabs > [type="radio"] + label + div:last-of-type { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } } +mark { + background: #0277bd; + color: #fafafa; + font-size: 95%; + line-height: 1; + padding: 1px; } + +.alert { + display: block; + max-width: 100%; + background: #eeeeee; + border: 1px solid #bdbdbd; + border-radius: 2px; + margin: 1px 10px; + padding: 12px 16px; } + +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; } + +@-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-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="submit"].primary, [type="reset"].primary, .button.primary { background: #1565c0; @@ -1037,6 +1037,43 @@ button.large, [type="button"].large, [type="submit"].large, padding: 10px 15px; margin: 7px; } +.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 12px; } + +.row.cards { + -webkit-box-pack: justify; + -webkit-justify-content: space-around; + justify-content: space-around; } + +.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; } + mark.secondary { background: #f44336; } @@ -1091,43 +1128,6 @@ progress.nano { border: 4px solid #e8f5e9; border-left: 4px solid #2e7d32; } -.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 12px; } - -.row.cards { - -webkit-box-pack: justify; - -webkit-justify-content: space-around; - justify-content: space-around; } - -.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; } - .bordered { border: 1px solid rgba(0, 0, 0, 0.25) !important; } diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css index 6247456..12f4ffc 100644 --- a/dist/mini-default.min.css +++ b/dist/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 (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 (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 (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}[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]{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%)}[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:''}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}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}.alert{display:block;max-width:100%;background:#eee;border:1px solid #bdbdbd;border-radius:2px;margin:1px 10px;padding:12px 16px}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}@-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-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}.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%);-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-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;-webkit-transform:scaleY(1);transform:scaleY(1);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:last-of-type{border-top-right-radius:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs.stacked>label:first-of-type{border-top-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-origin:top;transform-origin:top;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}.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}}.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}.spinner-donut.tertiary{border:4px solid #e8f5e9;border-left:4px solid #2e7d32}.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}.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} \ 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 (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 (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%}}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}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}[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]{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%)}[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:''}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 (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}}.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 (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%);-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-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;-webkit-transform:scaleY(1);transform:scaleY(1);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:last-of-type{border-top-right-radius:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tabs.stacked>label:first-of-type{border-top-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-origin:top;transform-origin:top;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}.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}}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}.alert{display:block;max-width:100%;background:#eee;border:1px solid #bdbdbd;border-radius:2px;margin:1px 10px;padding:12px 16px}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}@-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-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}.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}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}.spinner-donut.tertiary{border:4px solid #e8f5e9;border-left:4px solid #2e7d32}.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} \ No newline at end of file diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index effee41..24c43a3 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -391,4 +391,5 @@ - Code cleanup for `contextual`. Minor `mark` optimizations. Added `alert` mixin `make-alert-alt-style` for alternative `alert` styles. - Removed `spinner` file. - Cleanup for `navigation`. - - Cleanup for `utility`. \ No newline at end of file + - Cleanup for `utility`. + - Cleanup for `card`. Changed loading order and variables to better reflect the new module system. \ No newline at end of file diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index dda584d..2186729 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -124,23 +124,35 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid // Notes: // [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with // the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint. -// Variables for responsive tables -$table-border-style: 1px solid #bdbdbd; // Border style for and children -$table-border-radius: 2px; // Border radius for
and children -$table-margin: 0 auto; // Margin for
-$table-caption-font-size: 1.5em; // Font size for - both views -$table-column-padding: 10px; // Padding for
-$table-caption-margin: 6px 0 12px; // Margin for -$table-row-padding: 6px; // Padding for
and - desktop view -$table-head-back-color: #eceff1; // Background color for -$table-mobile-breakpoint: 768px; // Breakpoint for mobile view -$table-mobile-card-spacing: 10px; // Space between cards - mobile view -$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers - // in mobile view [1] -$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers -// Notes: -// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table -// in order for their mobile headers to display properly. +// Variables for navigational elements +$header-height: 36px; // Height for header +$header-back-color: #263238; // Background color for header +$header-fore-color: $back-color; // Text color for header +$header-margin: 0; // Margin for header +$header-padding: 2px 8px; // Padding for header +$header-logo-name: 'logo'; // Class name for header's logo +$header-logo-font-size: 1.75em; // Font size for header's logo +$header-logo-line-height: 1.2; // Line height for header's logo +$header-logo-margin: 1px 6px 1px 1px; // Margin for header's logo +$header-logo-padding: 0; // Padding for header's logo +$header-link-hover-color: #37474f; // Hover color for header's links +$header-link-margin: 2px 0 0; // Margin for header's links +$nav-back-color: #eceff1; // Background for nav +$nav-fore-color: $fore-color; // Text color for nav +$nav-border-style: 0; // Border style for nav +$nav-border-radius: 1px; // Border radius for nav +$nav-padding: 4px 4px 4px 16px; // Padding for nav +$nav-margin: 2px; // Margin for nav +$nav-link-fore-color: $link-fore-color; // Text color for links in nav +$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav +$nav-sublink-depth: 2; // Amount of subcategory classes to add +$nav-sublink-padding-left: 12px; // Left padding to add to subcategories +$footer-back-color: #263238; // Background color for footer +$footer-fore-color: $back-color; // Text color for footer +$footer-font-size: 85%; // Font size for footer +$footer-margin: 18px 0 0; // Margin for footer +$footer-padding: 22px 10px 12px; // Padding for footer +$footer-link-fore-color: #039be5; // Text color for links in footer // Variables for forms and inputs $form-back-color: #eceff1; // Background color for forms $form-fore-color: $fore-color; // Text color for forms @@ -234,35 +246,73 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabl // allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired. // If the value is `false`, some fixes will be applied to the element. // [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc. -// Variables for navigational elements -$header-height: 36px; // Height for header -$header-back-color: #263238; // Background color for header -$header-fore-color: $back-color; // Text color for header -$header-margin: 0; // Margin for header -$header-padding: 2px 8px; // Padding for header -$header-logo-name: 'logo'; // Class name for header's logo -$header-logo-font-size: 1.75em; // Font size for header's logo -$header-logo-line-height: 1.2; // Line height for header's logo -$header-logo-margin: 1px 6px 1px 1px; // Margin for header's logo -$header-logo-padding: 0; // Padding for header's logo -$header-link-hover-color: #37474f; // Hover color for header's links -$header-link-margin: 2px 0 0; // Margin for header's links -$nav-back-color: #eceff1; // Background for nav -$nav-fore-color: $fore-color; // Text color for nav -$nav-border-style: 0; // Border style for nav -$nav-border-radius: 1px; // Border radius for nav -$nav-padding: 4px 4px 4px 16px; // Padding for nav -$nav-margin: 2px; // Margin for nav -$nav-link-fore-color: $link-fore-color; // Text color for links in nav -$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav -$nav-sublink-depth: 2; // Amount of subcategory classes to add -$nav-sublink-padding-left: 12px; // Left padding to add to subcategories -$footer-back-color: #263238; // Background color for footer -$footer-fore-color: $back-color; // Text color for footer -$footer-font-size: 85%; // Font size for footer -$footer-margin: 18px 0 0; // Margin for footer -$footer-padding: 22px 10px 12px; // Padding for footer -$footer-link-fore-color: #039be5; // Text color for links in footer +// Variables for responsive tables +$table-border-style: 1px solid #bdbdbd; // Border style for
and children +$table-border-radius: 2px; // Border radius for
and children +$table-margin: 0 auto; // Margin for
+$table-caption-font-size: 1.5em; // Font size for - both views +$table-column-padding: 10px; // Padding for
+$table-caption-margin: 6px 0 12px; // Margin for +$table-row-padding: 6px; // Padding for
and - desktop view +$table-head-back-color: #eceff1; // Background color for +$table-mobile-breakpoint: 768px; // Breakpoint for mobile view +$table-mobile-card-spacing: 10px; // Space between cards - mobile view +$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers + // in mobile view [1] +$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers +// Notes: +// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table +// in order for their mobile headers to display properly. +// Variables for cards [1] +$card-name: 'card'; // Class name for cards +$card-back-color: #f5f5f5; // Background color for cards +$card-fore-color: $fore-color; // Text color for cards +$card-border-style: 1px solid #9e9e9e; // Border style for cards +$card-border-radius: 2px; // Border radius for cards +$card-margin: 2px 10px 20px; // Margin for cards +$card-section-name: 'section'; // Class name for card sections +$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections +$card-section-padding: 6px 8px 6px; // Padding for card sections +$card-section-media-name: 'media'; // Class name for card media sections +$card-section-media-height: 200px; // Height for card media setions +$card-normal-width: 320px; // Width for normal cards +$card-size1-name: 'large'; // Class name for large cards +$card-size1-width: 480px; // Width for large cards +$card-size2-name: 'small'; // Class name for small cards +$card-size2-width: 160px; // Width for small cards +$card-size3-name: 'fluid'; // Class name for fluid cards +$card-size3-width: 100%; // Width for fluid cards +$card-style1-name: 'primary'; // Class name for card style 1 +$card-style1-back-color: #e1f5fe; // Background color for card style 1 +$card-style1-fore-color: #263238; // Text color for card style 1 +$card-style1-border-style: 1px solid #01579b; // Border style for card style 1 +$card-section-style1-name: 'dark'; // Class name for card section style 1 +$card-section-style1-back-color:#bdbdbd; // Background color for card section style 1 +$card-section-style1-fore-color:$fore-color; // Text color for card section style 1 +$card-section-style2-name: 'primary'; // Class name for card section style 2 +$card-section-style2-back-color:#0277bd; // Background color for card section style 2 +$card-section-style2-fore-color:$fore-color; // Text color for card section style 2 +$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1 +$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 tabs [1] +$tab-container-name: 'tabs'; // Class name for the tabs' container +$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: #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 #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 // Variables for contextual background elements $mark-back-color: #0277bd; // Background color for $mark-fore-color: $back-color; // Text color for @@ -320,56 +370,6 @@ $spinner-donut-variant2-back-color: // Background color for donut spi #e8f5e9; $spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2 #2e7d32; -// Variables for cards [1] -$card-name: 'card'; // Class name for cards -$card-back-color: #f5f5f5; // Background color for cards -$card-fore-color: $fore-color; // Text color for cards -$card-border-style: 1px solid #9e9e9e; // Border style for cards -$card-border-radius: 2px; // Border radius for cards -$card-margin: 2px 10px 20px; // Margin for cards -$card-section-name: 'section'; // Class name for card sections -$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections -$card-section-padding: 6px 8px 6px; // Padding for card sections -$card-section-media-name: 'media'; // Class name for card media sections -$card-section-media-height: 200px; // Height for card media setions -$card-normal-width: 320px; // Width for normal cards -$card-size1-name: 'large'; // Class name for large cards -$card-size1-width: 480px; // Width for large cards -$card-size2-name: 'small'; // Class name for small cards -$card-size2-width: 160px; // Width for small cards -$card-size3-name: 'fluid'; // Class name for fluid cards -$card-size3-width: 100%; // Width for fluid cards -$card-style1-name: 'primary'; // Class name for card style 1 -$card-style1-back-color: #e1f5fe; // Background color for card style 1 -$card-style1-fore-color: #263238; // Text color for card style 1 -$card-style1-border-style: 1px solid #01579b; // Border style for card style 1 -$card-section-style1-name: 'dark'; // Class name for card section style 1 -$card-section-style1-back-color:#bdbdbd; // Background color for card section style 1 -$card-section-style1-fore-color:$fore-color; // Text color for card section style 1 -$card-section-style2-name: 'primary'; // Class name for card section style 2 -$card-section-style2-back-color:#0277bd; // Background color for card section style 2 -$card-section-style2-fore-color:$fore-color; // Text color for card section style 2 -$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1 -$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 tabs [1] -$tab-container-name: 'tabs'; // Class name for the tabs' container -$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: #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 #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 // Variables for utilities and helper classes $border-generic-name: 'bordered'; // Class name for generic border style $border-radial-style1-name: 'rounded'; // Class name for radial border style 1 @@ -386,7 +386,7 @@ $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs // [1] - The tabs module is somewhat dependent on the grid system module. // Enable mini.css @import '../mini/core'; -// Use mixins for button elements +// Use mixins for forms and inputs @include make-button-alt-color ($button-variant1-name, $button-variant1-back-color, $button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color); @include make-button-alt-color ($button-variant2-name, $button-variant2-back-color, @@ -402,19 +402,6 @@ $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs // $button-custom-back-opacity, $button-custom-hover-back-opacity); //@include make-button-alt-style ($button-custom-name, $button-custom-border-style, // $button-custom-border-radius, $button-custom-padding, $button-custom-margin); -// Use mixins for contextual background elements -@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color); -@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color); -@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); -@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); -// Use mixins for progress elements -@include make-progress-inline ($progress-inline-name, $progress-inline-width); -@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color); -@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color); -@include make-progress-alt-style ($progress-style1-name, $progress-style1-height, - $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius); -@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color, - $spinner-donut-variant2-fore-color); // Use mixins for cards @include make-card-alt-size ($card-size1-name, $card-size1-width); @include make-card-alt-size ($card-size2-name, $card-size2-width); @@ -430,6 +417,19 @@ $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs @include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color, $spinner-donut-variant1-fore-color); @include add-grid-row-cards-alignment; +// Use mixins for contextual background elements and alerts +@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color); +@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color); +@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); +@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); +// Use mixins for progress elements and spinners +@include make-progress-inline ($progress-inline-name, $progress-inline-width); +@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color); +@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color); +@include make-progress-alt-style ($progress-style1-name, $progress-style1-height, + $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius); +@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color, + $spinner-donut-variant2-fore-color); // Use mixins for utilities and helper classes @include make-border-generic ($border-generic-name); @include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius); diff --git a/src/mini/_card.scss b/src/mini/_card.scss index 311bd92..f668b37 100644 --- a/src/mini/_card.scss +++ b/src/mini/_card.scss @@ -6,69 +6,68 @@ $card-section-name: 'section' !default; // Class name for the cards' s $card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent) $card-normal-width: 320px !default; // Width for normal cards .#{$card-name} { -// Make cards display properly using flexbox tricks -// Old syntax + // Old syntax display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: justify; -webkit-box-align: center; -// New syntax + // New syntax 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; + justify-content: space-between; + -webkit-align-self: center; + align-self: center; position: relative; width: 100%; -// Actual styling for the cards -@if $card-back-color != $back-color { - background: $card-back-color; -} -@if $card-fore-color != $fore-color { - color: $card-fore-color; -} -@if $card-border-style != 0 { - border: $card-border-style; -} -@if $card-border-radius != 0 { - border-radius: $card-border-radius; -} -@if $card-margin != 0 { - margin: $card-margin; -} -// Tasteful shadow + // Actual styling for the cards + @if $card-back-color != $back-color { + background: $card-back-color; + } + @if $card-fore-color != $fore-color { + color: $card-fore-color; + } + @if $card-border-style != 0 { + border: $card-border-style; + } + @if $card-border-radius != 0 { + border-radius: $card-border-radius; + } + @if $card-margin != 0 { + margin: $card-margin; + } + // Tasteful shadow box-shadow: rgba(0, 0, 0, 0.25) 0 0 3px 0; -// Card sections -& > .#{$card-section-name} { - box-sizing: border-box; - margin: 0; - border-bottom: $card-section-border-style; - padding: $card-section-padding; - width: 100%; -// Card media sections -&.#{$card-section-media-name} { - height: $card-section-media-height; - padding: 0; - -o-object-fit: cover; - object-fit: cover; -} -} -// Card input and button sections -& > button, .#{$button-class-name}, input { -&.#{$card-section-name} { - border-radius: 0; // Clean button and input gaps from border-radius -} -} -// Card sections - last -& > .#{$card-section-name}:last-child { - border-bottom: 0; // Clean the extra border for last section -} + // Card sections + & > .#{$card-section-name} { + box-sizing: border-box; + margin: 0; + border-bottom: $card-section-border-style; + padding: $card-section-padding; + width: 100%; + // Card media sections + &.#{$card-section-media-name} { + height: $card-section-media-height; + padding: 0; + -o-object-fit: cover; + object-fit: cover; + } + } + // Card input and button sections + & > button, .#{$button-class-name}, input { + &.#{$card-section-name} { + border-radius: 0; // Clean button and input gaps from border-radius + } + } + // Card sections - last + & > .#{$card-section-name}:last-child { + border-bottom: 0; // Clean the extra border for last section + } } // Responsiveness (if the screen is larger than card, set max-width) -@media only screen and (min-width: #{$card-normal-width}) { +@media (min-width: #{$card-normal-width}) { .#{$card-name} { max-width: $card-normal-width; } @@ -78,18 +77,18 @@ $card-normal-width: 320px !default; // Width for normal cards // - $card-alt-size-name : The name of the class used for the alternate size card. // - $card-alt-size-width : The width of the alternate size card. @mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) { -@if type-of($card-alt-size-width) == 'number' && unit($card-alt-size-width) == '%' { -.#{$card-name}.#{$card-alt-size-name} { - max-width: $card-alt-size-width; -} -} -@else { -@media only screen and (min-width: #{$card-alt-size-width}) { - .#{$card-name}.#{$card-alt-size-name} { - max-width: $card-alt-size-width; + @if type-of($card-alt-size-width) == 'number' && unit($card-alt-size-width) == '%' { + .#{$card-name}.#{$card-alt-size-name} { + max-width: $card-alt-size-width; + } + } + @else { + @media (min-width: #{$card-alt-size-width}) { + .#{$card-name}.#{$card-alt-size-name} { + max-width: $card-alt-size-width; + } + } } -} -} } // Mixin for alternate cards (card color variants). // Variables: @@ -102,20 +101,20 @@ $card-normal-width: 320px !default; // Width for normal cards // of $card-border-radius. @mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color, $card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius) { -.#{$card-name}.#{$card-alt-name} { -@if $card-alt-back-color != $card-back-color { - background: $card-alt-back-color; -} -@if $card-alt-fore-color != $card-fore-color { - color: $card-alt-fore-color; -} -@if $card-alt-border-style != $card-border-style { - border: $card-alt-border-style; -} -@if $card-alt-border-radius != $card-border-radius { - border-radius: $card-alt-border-radius; -} -} + .#{$card-name}.#{$card-alt-name} { + @if $card-alt-back-color != $card-back-color { + background: $card-alt-back-color; + } + @if $card-alt-fore-color != $card-fore-color { + color: $card-alt-fore-color; + } + @if $card-alt-border-style != $card-border-style { + border: $card-alt-border-style; + } + @if $card-alt-border-radius != $card-border-radius { + border-radius: $card-alt-border-radius; + } + } } // Mixin for alternate card sections (card section color variants). // Variables: @@ -126,35 +125,35 @@ $card-normal-width: 320px !default; // Width for normal cards // the value of $card-section-border-style. @mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color, $card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) { -.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { -@if $card-section-alt-back-color != $card-back-color { - background: $card-section-alt-back-color; -} -@if $card-section-alt-fore-color != $card-fore-color { - color: $card-section-alt-fore-color; -} -@if $card-section-alt-border-style != $card-section-border-style { - border: $card-section-alt-border-style; -} -} + .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { + @if $card-section-alt-back-color != $card-back-color { + background: $card-section-alt-back-color; + } + @if $card-section-alt-fore-color != $card-fore-color { + color: $card-section-alt-fore-color; + } + @if $card-section-alt-border-style != $card-section-border-style { + border: $card-section-alt-border-style; + } + } } // Mixin for alternate card sections (card section padding variants). // Variables: // - $card-section-alt-name : The name of the class used for the alternate card section. // - $card-section-alt-padding : The padding of the alternate card section. @mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) { -.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { - padding: $card-section-alt-padding; -} + .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { + padding: $card-section-alt-padding; + } } // Mixin for grid system's row that spaces cards apart. @mixin add-grid-row-cards-alignment { -$grid-row-name: 'row' !default; // Class name for the cards -.#{$grid-row-name}.#{$card-name}s { -// Old syntax - -webkit-box-pack: justify; -// New syntax - -webkit-justify-content: space-around; - justify-content: space-around; -} + $grid-row-name: 'row' !default; // Class name for the cards + .#{$grid-row-name}.#{$card-name}s { + // Old syntax + -webkit-box-pack: justify; + // New syntax + -webkit-justify-content: space-around; + justify-content: space-around; + } } \ No newline at end of file diff --git a/src/mini/_core.scss b/src/mini/_core.scss index 2474211..8698e3f 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -349,11 +349,11 @@ a{ } // External file loading. You can comment out modules you do not want to use. @import 'grid'; -@import 'table'; -@import 'input_control'; @import 'navigation'; -@import 'contextual'; -@import 'progress'; +@import 'input_control'; +@import 'table'; @import 'card'; @import 'tab'; +@import 'contextual'; +@import 'progress'; @import 'utility'; \ No newline at end of file