diff --git a/dist/mini-lite.css b/dist/mini-lite.css new file mode 100644 index 0000000..e247ec7 --- /dev/null +++ b/dist/mini-lite.css @@ -0,0 +1,1543 @@ +@charset "UTF-8"; +/* + Flavor name: Lite (mini-lite) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v2.1.1 (Fermion) +*/ +/* + Browsers resets and base typography. +*/ +html { + font-size: 16px; +} + +html, * { + font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +* { + font-size: 1em; +} + +body { + margin: 0; + color: #212121; + background: #f5f5f5; +} + +article, aside, section, figcaption, figure, main, details, menu { + 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 { + max-width: 100%; + height: auto; +} + +dfn { + font-style: italic; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2em; + margin: 12px 8px; + font-weight: 500; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: #424242; + display: block; + margin-top: -4px; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +h4 { + font-size: 1.1em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 0.85em; +} + +p { + margin: 1px 8px; +} + +ol, ul { + margin: 1px 8px 10px; + padding-left: 28px; +} + +b, strong { + font-weight: 700; +} + +hr { + box-sizing: content-box; + border: 0; + overflow: visible; + line-height: 1.25em; + margin: 8px; + height: 1px; + background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); + background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); +} + +blockquote { + display: block; + position: relative; + font-style: italic; + background: #eeeeee; + margin: 8px 10px; + padding: 6px 10px 24px; + border-left: 3px solid #616161; + border-radius: 0 2px 2px 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); +} + +blockquote:after { + position: absolute; + font-style: normal; + font-size: 0.85em; + color: #616161; + left: 10px; + bottom: 0; + content: "— " attr(cite); +} + +code, kbd, pre, samp { + font-family: monospace, monospace; +} + +code { + border-radius: 2px; + background: #e0e0e0; + padding: 2px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); +} + +pre { + overflow: auto; + border-radius: 0 2px 2px 0; + background: #e0e0e0; + padding: 12px; + margin: 8px 10px; + border-left: 3px solid #1565c0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); +} + +kbd { + border-radius: 2px; + background: #212121; + color: #fafafa; + padding: 2px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); +} + +small, sup, sub { + font-size: 75%; +} + +sup { + top: -8px; +} + +sub { + bottom: -4px; +} + +sup, sub { + line-height: 0; + position: relative; + vertical-align: baseline; +} + +a { + color: #0277bd; + text-decoration: underline; + opacity: 1; + -webkit-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} + +a:visited { + color: #01579b; +} + +a:hover, a:focus, a:active { + opacity: 0.75; +} + +figcaption { + font-size: 80%; + color: #424242; +} + +/* + Definitions for the grid system. +*/ +.container { + margin: 0 auto; + padding: 0 10px; +} + +.row { + box-sizing: border-box; + display: -webkit-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; +} + +.row[class*='cols-sm-'] > * { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; +} + +@media screen and (min-width: 768px) { + .row[class*='cols-md-'] > * { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; + } +} + +@media screen and (min-width: 1280px) { + .row[class*='cols-lg-'] > * { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0 4px; + } +} + +.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, +.row.cols-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, +.row.cols-sm-1 > * { + max-width: 8.33333%; + -webkit-flex-basis: 8.33333%; + flex-basis: 8.33333%; +} + +.col-sm-2, +.row.cols-sm-2 > * { + max-width: 16.66667%; + -webkit-flex-basis: 16.66667%; + flex-basis: 16.66667%; +} + +.col-sm-3, +.row.cols-sm-3 > * { + max-width: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; +} + +.col-sm-4, +.row.cols-sm-4 > * { + max-width: 33.33333%; + -webkit-flex-basis: 33.33333%; + flex-basis: 33.33333%; +} + +.col-sm-5, +.row.cols-sm-5 > * { + max-width: 41.66667%; + -webkit-flex-basis: 41.66667%; + flex-basis: 41.66667%; +} + +.col-sm-6, +.row.cols-sm-6 > * { + max-width: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; +} + +.col-sm-7, +.row.cols-sm-7 > * { + max-width: 58.33333%; + -webkit-flex-basis: 58.33333%; + flex-basis: 58.33333%; +} + +.col-sm-8, +.row.cols-sm-8 > * { + max-width: 66.66667%; + -webkit-flex-basis: 66.66667%; + flex-basis: 66.66667%; +} + +.col-sm-9, +.row.cols-sm-9 > * { + max-width: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; +} + +.col-sm-10, +.row.cols-sm-10 > * { + max-width: 83.33333%; + -webkit-flex-basis: 83.33333%; + flex-basis: 83.33333%; +} + +.col-sm-11, +.row.cols-sm-11 > * { + max-width: 91.66667%; + -webkit-flex-basis: 91.66667%; + flex-basis: 91.66667%; +} + +.col-sm-12, +.row.cols-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%; +} + +.col-sm-normal { + -webkit-order: initial; + order: initial; +} + +.col-sm-first { + -webkit-order: -999; + order: -999; +} + +.col-sm-last { + -webkit-order: 999; + order: 999; +} + +@media screen and (min-width: 768px) { + .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, + .row.cols-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, + .row.cols-md-1 > * { + max-width: 8.33333%; + -webkit-flex-basis: 8.33333%; + flex-basis: 8.33333%; + } + .col-md-2, + .row.cols-md-2 > * { + max-width: 16.66667%; + -webkit-flex-basis: 16.66667%; + flex-basis: 16.66667%; + } + .col-md-3, + .row.cols-md-3 > * { + max-width: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + } + .col-md-4, + .row.cols-md-4 > * { + max-width: 33.33333%; + -webkit-flex-basis: 33.33333%; + flex-basis: 33.33333%; + } + .col-md-5, + .row.cols-md-5 > * { + max-width: 41.66667%; + -webkit-flex-basis: 41.66667%; + flex-basis: 41.66667%; + } + .col-md-6, + .row.cols-md-6 > * { + max-width: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + } + .col-md-7, + .row.cols-md-7 > * { + max-width: 58.33333%; + -webkit-flex-basis: 58.33333%; + flex-basis: 58.33333%; + } + .col-md-8, + .row.cols-md-8 > * { + max-width: 66.66667%; + -webkit-flex-basis: 66.66667%; + flex-basis: 66.66667%; + } + .col-md-9, + .row.cols-md-9 > * { + max-width: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + } + .col-md-10, + .row.cols-md-10 > * { + max-width: 83.33333%; + -webkit-flex-basis: 83.33333%; + flex-basis: 83.33333%; + } + .col-md-11, + .row.cols-md-11 > * { + max-width: 91.66667%; + -webkit-flex-basis: 91.66667%; + flex-basis: 91.66667%; + } + .col-md-12, + .row.cols-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%; + } + .col-md-normal { + -webkit-order: initial; + order: initial; + } + .col-md-first { + -webkit-order: -999; + order: -999; + } + .col-md-last { + -webkit-order: 999; + order: 999; + } +} + +@media screen and (min-width: 1280px) { + .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, + .row.cols-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, + .row.cols-lg-1 > * { + max-width: 8.33333%; + -webkit-flex-basis: 8.33333%; + flex-basis: 8.33333%; + } + .col-lg-2, + .row.cols-lg-2 > * { + max-width: 16.66667%; + -webkit-flex-basis: 16.66667%; + flex-basis: 16.66667%; + } + .col-lg-3, + .row.cols-lg-3 > * { + max-width: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + } + .col-lg-4, + .row.cols-lg-4 > * { + max-width: 33.33333%; + -webkit-flex-basis: 33.33333%; + flex-basis: 33.33333%; + } + .col-lg-5, + .row.cols-lg-5 > * { + max-width: 41.66667%; + -webkit-flex-basis: 41.66667%; + flex-basis: 41.66667%; + } + .col-lg-6, + .row.cols-lg-6 > * { + max-width: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + } + .col-lg-7, + .row.cols-lg-7 > * { + max-width: 58.33333%; + -webkit-flex-basis: 58.33333%; + flex-basis: 58.33333%; + } + .col-lg-8, + .row.cols-lg-8 > * { + max-width: 66.66667%; + -webkit-flex-basis: 66.66667%; + flex-basis: 66.66667%; + } + .col-lg-9, + .row.cols-lg-9 > * { + max-width: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + } + .col-lg-10, + .row.cols-lg-10 > * { + max-width: 83.33333%; + -webkit-flex-basis: 83.33333%; + flex-basis: 83.33333%; + } + .col-lg-11, + .row.cols-lg-11 > * { + max-width: 91.66667%; + -webkit-flex-basis: 91.66667%; + flex-basis: 91.66667%; + } + .col-lg-12, + .row.cols-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%; + } + .col-lg-normal { + -webkit-order: initial; + order: initial; + } + .col-lg-first { + -webkit-order: -999; + order: -999; + } + .col-lg-last { + -webkit-order: 999; + order: 999; + } +} + +/* + Definitions for navigation elements. +*/ +header { + display: block; + height: 44px; + background: #263238; + color: #fafafa; + padding: 2px 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); + 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; + padding: 3px 0 0; + -webkit-transition: 0s opacity; + transition: 0s opacity; +} + +header button, header [type="button"], +header a.button, header label.button, header .button, +header a[role="button"], header label[role="button"], header [role="button"] { + background: #263238; + color: #fafafa; + vertical-align: top; + margin: 2px 0 0; + box-shadow: none; +} + +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, +header a[role="button"]:hover, +header a[role="button"]:active, +header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:active, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:active, header [role="button"]:focus { + background: #37474f; +} + +header .logo, header a.button, header a[role="button"] { + text-decoration: none; +} + +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; +} + +header.sticky, footer.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; +} + +header.sticky { + top: 0; +} + +footer.sticky { + bottom: 0; +} + +/* + Definitions for forms and input elements. +*/ +form { + background: #eeeeee; + border: 1px solid #bdbdbd; + margin: 8px; + padding: 12px 10px 18px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); +} + +fieldset { + border: 1px solid #bdbdbd; + border-radius: 2px; + margin: 2px; + padding: 6px 8px 8px; +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + font-weight: 700; + font-size: 0.925em; + padding: 2px 4px; +} + +label { + 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; +} + +input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], +[type="password"], [type="url"], [type="tel"], textarea, select { + box-sizing: border-box; + background: #fafafa; + color: #212121; + border: 1px solid #bdbdbd; + border-radius: 1px; + margin: 2px; + padding: 8px 12px; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus { + border-color: #0288d1; + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled] { + cursor: not-allowed; + opacity: 0.75; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid { + border-color: #d32f2f; + box-shadow: none; +} + +input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { + background: #e0e0e0; + border-color: #bdbdbd; +} + +::-webkit-input-placeholder { + opacity: 1; + color: #616161; +} + +::-moz-placeholder { + opacity: 1; + color: #616161; +} + +::-ms-placeholder { + opacity: 1; + color: #616161; +} + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button, html [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; +} + +button { + overflow: visible; + text-transform: none; +} + +button, [type="button"], [type="submit"], [type="reset"], +a.button, label.button, .button, +a[role="button"], label[role="button"], [role="button"] { + display: inline-block; + background: rgba(189, 189, 189, 0.65); + color: #212121; + border: 0; + border-radius: 2px; + padding: 8px 12px; + margin: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); + text-decoration: none; + -webkit-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + cursor: pointer; +} + +button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, +a.button:hover, +a.button:active, +a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:active, label[role="button"]:focus, [role="button"]:hover, [role="button"]:active, [role="button"]:focus { + background: rgba(189, 189, 189, 0.8); + opacity: 1; +} + +button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], +a.button:disabled, +a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled], +a[role="button"]:disabled, +a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] { + cursor: not-allowed; + opacity: 0.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: 20px; +} + +.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before { + display: inline-block; + position: absolute; + bottom: 6px; + left: 0; + width: 16px; + height: 16px; + content: ''; + border: 1px solid #bdbdbd; + border-radius: 1px; + background: #fafafa; + color: #212121; + margin-left: -20px; +} + +.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:active:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:active:before, .input-group [type="radio"] + label:focus:before { + border-color: #0288d1; +} + +.input-group [type="checkbox"]:focus + label:before, .input-group [type="radio"]:focus + label:before { + border-color: #0288d1; +} + +.input-group [type="radio"] + label:before, .input-group [type="radio"] + label:after { + border-radius: 50%; +} + +.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label { + cursor: not-allowed; +} + +.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after { + opacity: 0.75; +} + +.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after { + margin-left: -20px; + position: absolute; + bottom: 10px; + left: 4px; + width: 10px; + height: 10px; + background: #212121; + content: ''; +} + +/* + Custom elements for forms and input elements. +*/ +button.primary, [type="button"].primary, [type="submit"].primary, +[type="reset"].primary, .button.primary, [role="button"].primary { + background: rgba(2, 119, 189, 0.9); + color: #fafafa; +} + +button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus, +[type="reset"].primary:hover, +[type="reset"].primary:active, +[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:active, [role="button"].primary:focus { + background: #0277bd; +} + +button.secondary, [type="button"].secondary, [type="submit"].secondary, +[type="reset"].secondary, .button.secondary, [role="button"].secondary { + background: rgba(198, 40, 40, 0.85); + color: #fafafa; +} + +button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus, +[type="reset"].secondary:hover, +[type="reset"].secondary:active, +[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:active, [role="button"].secondary:focus { + background: #c62828; +} + +button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, +[type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { + background: rgba(104, 159, 56, 0.85); + color: #fafafa; +} + +button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus, +[type="reset"].tertiary:hover, +[type="reset"].tertiary:active, +[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:active, [role="button"].tertiary:focus { + background: #689f38; +} + +button.inverse, [type="button"].inverse, [type="submit"].inverse, +[type="reset"].inverse, .button.inverse, [role="button"].inverse { + background: #212121; + color: #fafafa; +} + +button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus, +[type="reset"].inverse:hover, +[type="reset"].inverse:active, +[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:active, [role="button"].inverse:focus { + background: rgba(33, 33, 33, 0.9); +} + +button.small, [type="button"].small, [type="submit"].small, +[type="reset"].small, .button.small, [role="button"].small { + border-radius: 1px; + padding: 4px 6px; + margin: 6px 8px; +} + +button.large, [type="button"].large, [type="submit"].large, +[type="reset"].large, .button.large, [role="button"].large { + border-radius: 4px; + padding: 12px 18px; + margin: 10px 8px; +} + +/* + Definitions for the responsive table component. +*/ +table { + border-collapse: separate; + border-spacing: 0; + border: 1px solid #bdbdbd; + margin: 0 auto; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); +} + +table caption { + font-size: 1.5em; + margin: 6px 8px 12px; +} + +table tr { + padding: 8px; +} + +table th, table td { + padding: 10px; + border-left: 1px solid #bdbdbd; + border-top: 1px solid #bdbdbd; +} + +table td { + background: #fafafa; +} + +table thead th { + border-top: 0; +} + +table th { + background: #e0e0e0; +} + +table th:first-child, table td:first-child { + border-left: 0; +} + +@media screen and (max-width: 767px) { + table:not(.preset) { + border-collapse: collapse; + border: 0; + width: 100%; + box-shadow: none; + } + table:not(.preset) thead, table:not(.preset) th { + 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%); + } + table:not(.preset) tr { + display: block; + border: 1px solid #bdbdbd; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); + background: #fafafa; + margin-bottom: 10px; + } + table:not(.preset) td { + display: block; + border: 0; + border-bottom: 1px solid #bdbdbd; + text-align: right; + } + table:not(.preset) td:before { + content: attr(data-label); + float: left; + font-weight: 700; + } + table:not(.preset) td:last-child { + border-bottom: 0; + } +} + +/* + Definitions for cards and containers. +*/ +.card { + display: -webkit-box; + -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: #fafafa; + border: 1px solid #9e9e9e; + margin: 2px 10px 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); +} + +.card > .section { + box-sizing: border-box; + margin: 0; + border-bottom: 1px solid #bdbdbd; + padding: 6px 8px 6px; + width: 100%; +} + +.card > .section.media { + height: 200px; + padding: 0; + -o-object-fit: cover; + object-fit: cover; +} + +.card > button.section, .card .button.section, .card [role="button"].section, .card input.section { + border-radius: 0; +} + +.card > .section:last-child { + border-bottom: 0; +} + +@media screen and (min-width: 320px) { + .card { + max-width: 320px; + } +} + +/* + Custom elements for cards and containers. +*/ +@media screen and (min-width: 480px) { + .card.large { + max-width: 480px; + } +} + +@media screen and (min-width: 240px) { + .card.small { + max-width: 240px; + } +} + +.card.fluid { + max-width: 100%; + width: auto; +} + +.card.inverse { + background: #212121; + color: #fafafa; + border: 1px solid #424242; +} + +.card.inverse > .section { + border-bottom: 1px solid #616161; +} + +.card.inverse > .section:last-child { + border-bottom: 0; +} + +.card > .section.dark { + background: #e0e0e0; +} + +.card > .section.darker { + background: #bdbdbd; +} + +.card > .section.double-padded { + padding: 10px 12px 10px; +} + +/* + Definitions for contextual background elements and alerts. +*/ +mark { + background: #0277bd; + color: #fafafa; + font-size: 95%; + line-height: 1; + border-radius: 2px; + padding: 2px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); +} + +mark.inline-block { + display: inline-block; +} + +/* + Custom contextual background elements and alerts. +*/ +mark.secondary { + background: #e53935; +} + +mark.tertiary { + background: #689f38; +} + +mark.tag { + border-radius: 200px; + padding: 4px 8px; +} + +mark.inline-block { + font-size: 100%; + line-height: 1.35; + padding: 5px; +} + +/* + Definitions for progress elements and spinners. +*/ +progress { + display: block; + vertical-align: baseline; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 14px; + width: 100%; + border: 0; + border-radius: 1px; + margin: 2px auto; + box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15); + background: #eeeeee; + color: #01579b; +} + +progress::-webkit-progress-value { + background: #01579b; + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} + +progress::-webkit-progress-bar { + background: #eeeeee; +} + +progress::-moz-progress-bar { + background: #01579b; + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; +} + +progress[value="1000"]::-webkit-progress-value { + border-radius: 1px; +} + +progress[value="1000"]::-moz-progress-bar { + border-radius: 1px; +} + +@supports (width: calc(100% - 2*8px)) or (width: -webkit-calc(100% - 2*8px)) { + progress { + width: -webkit-calc(100% - 2*8px); + width: calc(100% - 2*8px); + margin: 2px 8px; + } +} + +/* + Custom elements for progress elements and spinners. +*/ +progress.inline { + display: inline-block; + vertical-align: middle; + width: 60%; +} + +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; + width: 100%; + margin: 0 auto; + 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="1000"]::-webkit-progress-value { + border-radius: 0; +} + +progress.nano[value="1000"]::-moz-progress-bar { + border-radius: 0; +} + +/* + Definitions for utilities and helper classes. +*/ +.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: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; +} + +/* + Custom elements for utilities and helper classes. +*/ +.bordered { + border: 1px solid rgba(0, 0, 0, 0.25) !important; +} + +.rounded { + border-radius: 2px !important; +} + +.circular { + border-radius: 50% !important; +} + +.responsive-margin { + margin: 4px !important; +} + +@media screen and (min-width: 768px) { + .responsive-margin { + margin: 6px !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-margin { + margin: 8px !important; + } +} + +.responsive-padding { + padding: 2px 4px !important; +} + +@media screen and (min-width: 768px) { + .responsive-padding { + padding: 4px 6px !important; + } +} + +@media screen and (min-width: 1280px) { + .responsive-padding { + padding: 6px 8px !important; + } +} + +@media screen and (max-width: 767px) { + .hidden-sm { + display: none; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .hidden-md { + display: none; + } +} + +@media screen and (min-width: 1280px) { + .hidden-lg { + display: none; + } +} + +@media screen and (max-width: 767px) { + .visually-hidden-sm { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .visually-hidden-md { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} + +@media screen and (min-width: 1280px) { + .visually-hidden-lg { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + overflow: hidden !important; + } +} diff --git a/dist/mini-lite.min.css b/dist/mini-lite.min.css new file mode 100644 index 0000000..bc04f26 --- /dev/null +++ b/dist/mini-lite.min.css @@ -0,0 +1 @@ +html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1em}body{margin:0;color:#212121;background:#f5f5f5}article,aside,section,figcaption,figure,main,details,menu{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{max-width:100%;height:auto}dfn{font-style:italic}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:12px 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-4px}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1em}h6{font-size:.85em}p{margin:1px 8px}ol,ul{margin:1px 8px 10px;padding-left:28px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.25em;margin:8px;height:1px;background:-webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);background:linear-gradient(to right, #bdbdbd, #616161, #bdbdbd)}blockquote{display:block;position:relative;font-style:italic;background:#eee;margin:8px 10px;padding:6px 10px 24px;border-left:3px solid #616161;border-radius:0 2px 2px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}blockquote:after{position:absolute;font-style:normal;font-size:.85em;color:#616161;left:10px;bottom:0;content:"— " attr(cite)}code,kbd,pre,samp{font-family:monospace, monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:8px 10px;border-left:3px solid #1565c0;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15)}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}small,sup,sub{font-size:75%}sup{top:-8px}sub{bottom:-4px}sup,sub{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s}a:visited{color:#01579b}a:hover,a:focus,a:active{opacity:0.75}figcaption{font-size:80%;color:#424242}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;display:-webkit-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}.row[class*='cols-sm-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}@media screen and (min-width: 768px){.row[class*='cols-md-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}}@media screen and (min-width: 1280px){.row[class*='cols-lg-']>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}}.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,.row.cols-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,.row.cols-sm-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12,.row.cols-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%}.col-sm-normal{-webkit-order:initial;order:initial}.col-sm-first{-webkit-order:-999;order:-999}.col-sm-last{-webkit-order:999;order:999}@media screen and (min-width: 768px){.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,.row.cols-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,.row.cols-md-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3,.row.cols-md-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6,.row.cols-md-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9,.row.cols-md-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12,.row.cols-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%}.col-md-normal{-webkit-order:initial;order:initial}.col-md-first{-webkit-order:-999;order:-999}.col-md-last{-webkit-order:999;order:999}}@media screen and (min-width: 1280px){.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,.row.cols-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,.row.cols-lg-1>*{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12,.row.cols-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%}.col-lg-normal{-webkit-order:initial;order:initial}.col-lg-first{-webkit-order:-999;order:-999}.col-lg-last{-webkit-order:999;order:999}}header{display:block;height:44px;background:#263238;color:#fafafa;padding:2px 8px;box-shadow:0 2px 4px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.26);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;padding:3px 0 0;-webkit-transition:0s opacity;transition:0s opacity}header button,header [type="button"],header a.button,header label.button,header .button,header a[role="button"],header label[role="button"],header [role="button"]{background:#263238;color:#fafafa;vertical-align:top;margin:2px 0 0;box-shadow:none}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,header a[role="button"]:hover,header a[role="button"]:active,header a[role="button"]:focus,header label[role="button"]:hover,header label[role="button"]:active,header label[role="button"]:focus,header [role="button"]:hover,header [role="button"]:active,header [role="button"]:focus{background:#37474f}header .logo,header a.button,header a[role="button"]{text-decoration:none}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}header.sticky,footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101}header.sticky{top:0}footer.sticky{bottom:0}form{background:#eee;border:1px solid #bdbdbd;margin:8px;padding:12px 10px 18px;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}fieldset{border:1px solid #bdbdbd;border-radius:2px;margin:2px;padding:6px 8px 8px}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;font-size:.925em;padding:2px 4px}label{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}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],textarea,select{box-sizing:border-box;background:#fafafa;color:#212121;border:1px solid #bdbdbd;border-radius:1px;margin:2px;padding:8px 12px}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:#0288d1;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled,input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled]{cursor:not-allowed;opacity:.75}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:#d32f2f;box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:#e0e0e0;border-color:#bdbdbd}::-webkit-input-placeholder{opacity:1;color:#616161}::-moz-placeholder{opacity:1;color:#616161}::-ms-placeholder{opacity:1;color:#616161}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:rgba(189,189,189,0.65);color:#212121;border:0;border-radius:2px;padding:8px 12px;margin:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);text-decoration:none;-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;cursor:pointer}button:hover,button:active,button:focus,[type="button"]:hover,[type="button"]:active,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:active,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:active,[type="reset"]:focus,a.button:hover,a.button:active,a.button:focus,label.button:hover,label.button:active,label.button:focus,.button:hover,.button:active,.button:focus,a[role="button"]:hover,a[role="button"]:active,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:active,label[role="button"]:focus,[role="button"]:hover,[role="button"]:active,[role="button"]:focus{background:rgba(189,189,189,0.8);opacity:1}button:disabled,button[disabled],[type="button"]:disabled,[type="button"][disabled],[type="submit"]:disabled,[type="submit"][disabled],[type="reset"]:disabled,[type="reset"][disabled],a.button:disabled,a.button[disabled],label.button:disabled,label.button[disabled],.button:disabled,.button[disabled],a[role="button"]:disabled,a[role="button"][disabled],label[role="button"]:disabled,label[role="button"][disabled],[role="button"]:disabled,[role="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:20px}.input-group [type="checkbox"]+label:before,.input-group [type="radio"]+label:before{display:inline-block;position:absolute;bottom:6px;left:0;width:16px;height:16px;content:'';border:1px solid #bdbdbd;border-radius:1px;background:#fafafa;color:#212121;margin-left:-20px}.input-group [type="checkbox"]+label:hover:before,.input-group [type="checkbox"]+label:active:before,.input-group [type="checkbox"]+label:focus:before,.input-group [type="radio"]+label:hover:before,.input-group [type="radio"]+label:active:before,.input-group [type="radio"]+label:focus:before{border-color:#0288d1}.input-group [type="checkbox"]:focus+label:before,.input-group [type="radio"]:focus+label:before{border-color:#0288d1}.input-group [type="radio"]+label:before,.input-group [type="radio"]+label:after{border-radius:50%}.input-group [type="checkbox"][disabled]+label,.input-group [type="radio"][disabled]+label{cursor:not-allowed}.input-group [type="checkbox"][disabled]+label:before,.input-group [type="checkbox"][disabled]+label:after,.input-group [type="radio"][disabled]+label:before,.input-group [type="radio"][disabled]+label:after{opacity:.75}.input-group [type="checkbox"]:checked+label:after,.input-group [type="radio"]:checked+label:after{margin-left:-20px;position:absolute;bottom:10px;left:4px;width:10px;height:10px;background:#212121;content:''}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{background:rgba(2,119,189,0.9);color:#fafafa}button.primary:hover,button.primary:active,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:active,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:active,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:active,[type="reset"].primary:focus,.button.primary:hover,.button.primary:active,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:active,[role="button"].primary:focus{background:#0277bd}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{background:rgba(198,40,40,0.85);color:#fafafa}button.secondary:hover,button.secondary:active,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:active,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:active,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:active,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:active,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:active,[role="button"].secondary:focus{background:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{background:rgba(104,159,56,0.85);color:#fafafa}button.tertiary:hover,button.tertiary:active,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:active,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:active,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:active,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:active,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:active,[role="button"].tertiary:focus{background:#689f38}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{background:#212121;color:#fafafa}button.inverse:hover,button.inverse:active,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:active,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:active,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:active,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:active,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:active,[role="button"].inverse:focus{background:rgba(33,33,33,0.9)}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{border-radius:1px;padding:4px 6px;margin:6px 8px}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{border-radius:4px;padding:12px 18px;margin:10px 8px}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;margin:0 auto;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15)}table caption{font-size:1.5em;margin:6px 8px 12px}table tr{padding:8px}table th,table td{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}table td{background:#fafafa}table thead th{border-top:0}table th{background:#e0e0e0}table th:first-child,table td:first-child{border-left:0}@media screen and (max-width: 767px){table:not(.preset){border-collapse:collapse;border:0;width:100%;box-shadow:none}table:not(.preset) thead,table:not(.preset) th{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%)}table:not(.preset) tr{display:block;border:1px solid #bdbdbd;box-shadow:0 2px 4px rgba(0,0,0,0.1),0 2px 3px rgba(0,0,0,0.15);background:#fafafa;margin-bottom:10px}table:not(.preset) td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}table:not(.preset) td:before{content:attr(data-label);float:left;font-weight:700}table:not(.preset) td:last-child{border-bottom:0}}.card{display:-webkit-box;-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:#fafafa;border:1px solid #9e9e9e;margin:2px 10px 20px;box-shadow:0 2px 4px rgba(0,0,0,0.18),0 2px 3px rgba(0,0,0,0.26)}.card>.section{box-sizing:border-box;margin:0;border-bottom:1px solid #bdbdbd;padding:6px 8px 6px;width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>button.section,.card .button.section,.card [role="button"].section,.card input.section{border-radius:0}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 320px){.card{max-width:320px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}@media screen and (min-width: 240px){.card.small{max-width:240px}}.card.fluid{max-width:100%;width:auto}.card.inverse{background:#212121;color:#fafafa;border:1px solid #424242}.card.inverse>.section{border-bottom:1px solid #616161}.card.inverse>.section:last-child{border-bottom:0}.card>.section.dark{background:#e0e0e0}.card>.section.darker{background:#bdbdbd}.card>.section.double-padded{padding:10px 12px 10px}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;border-radius:2px;padding:2px 4px;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.15)}mark.inline-block{display:inline-block}mark.secondary{background:#e53935}mark.tertiary{background:#689f38}mark.tag{border-radius:200px;padding:4px 8px}mark.inline-block{font-size:100%;line-height:1.35;padding:5px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;width:100%;border:0;border-radius:1px;margin:2px auto;box-shadow:0 0.5px 1px rgba(0,0,0,0.1),0 0.5px 0.5px rgba(0,0,0,0.15);background:#eee;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#eee}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="1000"]::-webkit-progress-value{border-radius:1px}progress[value="1000"]::-moz-progress-bar{border-radius:1px}@supports (width: calc(100% - 2*8px)) or (width: -webkit-calc(100% - 2*8px)){progress{width:-webkit-calc(100% - 2*8px);width:calc(100% - 2*8px);margin:2px 8px}}progress.inline{display:inline-block;vertical-align:middle;width:60%}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;width:100%;margin:0 auto;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="1000"]::-webkit-progress-value{border-radius:0}progress.nano[value="1000"]::-moz-progress-bar{border-radius:0}.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:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}.bordered{border:1px solid rgba(0,0,0,0.25) !important}.rounded{border-radius:2px !important}.circular{border-radius:50% !important}.responsive-margin{margin:4px !important}@media screen and (min-width: 768px){.responsive-margin{margin:6px !important}}@media screen and (min-width: 1280px){.responsive-margin{margin:8px !important}}.responsive-padding{padding:2px 4px !important}@media screen and (min-width: 768px){.responsive-padding{padding:4px 6px !important}}@media screen and (min-width: 1280px){.responsive-padding{padding:6px 8px !important}}@media screen and (max-width: 767px){.hidden-sm{display:none}}@media screen and (min-width: 768px) and (max-width: 1279px){.hidden-md{display:none}}@media screen and (min-width: 1280px){.hidden-lg{display:none}}@media screen and (max-width: 767px){.visually-hidden-sm{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 768px) and (max-width: 1279px){.visually-hidden-md{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}}@media screen and (min-width: 1280px){.visually-hidden-lg{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;border:0 !important;padding:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(100%) !important;clip-path:inset(100%) !important;overflow:hidden !important}} diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 3692af2..398df6f 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -930,3 +930,8 @@ - Updated `make-margin-responsive` and `make-padding-responsive` `mixin`s to make sure they are now compatible with four-step grid (legacy). - Added `.hidden-` and `.visually-hidden-` elements to both flavors via new `mixin`s. Current size for `default` is `6.88KB` gzipped, reasonable tradeoff for a much requested and needed feature. - *TODO* update documentation pages to showcase the new responsive hiding, add codepen etc. + +## 20170403 + +- Minor update to `input_control`'s code to fix a small problem with it. +- Started developing `mini-lite` flavor (`lite`) as a very lightweight barebones base for the framework, using the default style for the most part. Size is under `5KB` for starters. diff --git a/src/flavors/mini-lite.scss b/src/flavors/mini-lite.scss new file mode 100644 index 0000000..3d11965 --- /dev/null +++ b/src/flavors/mini-lite.scss @@ -0,0 +1,499 @@ +// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully. +// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments, +// structured like the flavor description below, will be included in your final CSS file. +/* + Flavor name: Lite (mini-lite) + Author: Angelos Chalaris (chalarangelo@gmail.com) + mini.css version: v2.1.1 (Fermion) +*/ +// Basic rules for body and typography +$fore-color: #212121; // Text and general foreground color +$back-color: #f5f5f5; // Body background color +$base-font-family: // Default font stack for all elements: + '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif'; +// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts +$base-root-font-size: 16px; // Root font sizing for all elements [1] +$base-font-size: 1em; // Default font sizing for all elements [2] +$base-line-height: 1.5; // Default line height for all elements. +$body-margin: 0; // Margin for the body +$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3] +$h1-font-size: 2em; // Font size of h1 +$h2-font-size: 1.5em; // Font size for h2 +$h3-font-size: 1.25em; // Font size for h3 +$h4-font-size: 1.1em; // Font size for h4 +$h5-font-size: 1em; // Font size for h5 +$h6-font-size: 0.85em; // Font size for h6 +$heading-line-height: 1.2em; // Line height for all headings +$heading-margin: 12px 8px; // Margin for all headings +$heading-font-weight: 500; // Font weight for all headings +$heading-smalltext-fore-color: #424242; // color in headings +$make-heading-smalltext-block: true; // Should elements in headings be displayed as blocks (`true`/`false`) [4] +$heading-smalltext-b-font-size: 75%; // Font size of block elements in headings +$heading-smalltext-b-top-margin:-4px; // Top margin of block elements in headings +$paragraph-margin: 1px 8px; // Margin for

elements +$list-margin: 1px 8px 10px; // Margin for

    and