diff --git a/dist/mini-default.css b/dist/mini-default.css index cf61463..4c4e142 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -769,3 +769,237 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d cursor: not-allowed; opacity: 0.75; } + +/* + Definitions for navigation elements. +*/ +/* Navigation module CSS variable definitions */ +:root { + --header-back-color: #f8f8f8; + --header-hover-back-color: #f0f0f0; + --header-fore-color: #444; + --header-border-color: #ddd; + --nav-back-color: #f8f8f8; + --nav-hover-back-color: #f0f0f0; + --nav-fore-color: #444; + --nav-border-color: #ddd; + --nav-link-color: #0277bd; + --footer-fore-color: #444; + --footer-back-color: #f8f8f8; + --footer-border-color: #ddd; + --footer-link-color: #0277bd; + --drawer-back-color: #f8f8f8; + --drawer-hover-back-color: #f0f0f0; + --drawer-border-color: #ddd; +} + +header { + height: 3.1875rem; + background: var(--header-back-color); + color: var(--header-fore-color); + border-bottom: 0.0625rem solid var(--header-border-color); + padding: calc(var(--universal-padding) / 4) 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} + +header.row { + box-sizing: content-box; +} + +header .logo { + color: var(--header-fore-color); + font-size: 1.75rem; + padding: var(--universal-padding) calc(2 * var(--universal-padding)); + text-decoration: none; +} + +header button, header [type="button"], header .button, header [role="button"] { + box-sizing: border-box; + position: relative; + top: calc(0rem - var(--universal-padding) / 4); + height: calc(3.1875rem + var(--universal-padding) / 2); + background: var(--header-back-color); + line-height: calc(3.1875rem - var(--universal-padding) * 1.5); + text-align: center; + color: var(--header-fore-color); + border: 0; + border-radius: 0; + margin: 0; + text-transform: uppercase; +} + +header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus { + background: var(--header-hover-back-color); +} + +nav { + background: var(--nav-back-color); + color: var(--nav-fore-color); + border: 0.0625rem solid var(--nav-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); +} + +nav * { + padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); +} + +nav a, nav a:visited { + display: block; + color: var(--nav-link-color); + border-radius: var(--universal-border-radius); + transition: background 0.3s; +} + +nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { + text-decoration: none; + background: var(--nav-hover-back-color); +} + +nav .sublink-1 { + position: relative; + margin-left: calc(2 * var(--universal-padding)); +} + +nav .sublink-1:before { + position: absolute; + left: calc(var(--universal-padding) - 1 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +nav .sublink-2 { + position: relative; + margin-left: calc(4 * var(--universal-padding)); +} + +nav .sublink-2:before { + position: absolute; + left: calc(var(--universal-padding) - 3 * var(--universal-padding)); + top: -0.0625rem; + content: ''; + height: 100%; + border: 0.0625rem solid var(--nav-border-color); + border-left: 0; +} + +footer { + background: var(--footer-back-color); + color: var(--footer-fore-color); + border-top: 0.0625rem solid var(--footer-border-color); + padding: calc(2 * var(--universal-padding)) var(--universal-padding); + font-size: 0.875rem; +} + +footer a, footer a:visited { + color: var(--footer-link-color); +} + +header.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + top: 0; +} + +footer.sticky { + position: -webkit-sticky; + position: sticky; + z-index: 1101; + bottom: 0; +} + +.drawer-toggle:before { + display: inline-block; + position: relative; + width: 24px; + height: 24px; + vertical-align: text-top; + content: ''; + background: url('data:image/svg+xml, ') no-repeat; +} + +@media screen and (min-width: 768px) { + .drawer-toggle:not(.persistent) { + display: none; + } +} + +[type="checkbox"].drawer { + 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%); +} + +[type="checkbox"].drawer + * { + display: block; + box-sizing: border-box; + position: fixed; + top: 0; + width: 320px; + height: 100vh; + overflow-y: auto; + background: var(--drawer-back-color); + border: 0.0625rem solid var(--drawer-border-color); + border-radius: 0; + margin: 0; + z-index: 1110; + right: -320px; + transition: right 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close { + position: absolute; + top: var(--universal-margin); + right: var(--universal-margin); + z-index: 1111; + border-radius: var(--universal-border-radius); + padding: var(--universal-padding); + margin: 0; + cursor: pointer; + transition: background 0.3s; +} + +[type="checkbox"].drawer + * .drawer-close:before { + display: block; + background: url('data:image/svg+xml, ') no-repeat; + content: ''; + position: relative; + width: 24px; + height: 24px; +} + +[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { + background: var(--drawer-hover-back-color); +} + +@media screen and (max-width: 320px) { + [type="checkbox"].drawer + * { + width: 100%; + } +} + +[type="checkbox"].drawer:checked + * { + right: 0; +} + +@media screen and (min-width: 768px) { + [type="checkbox"].drawer:not(.persistent) + * { + position: static; + height: 100%; + z-index: 1100; + } + [type="checkbox"].drawer:not(.persistent) + * .drawer-close { + display: none; + } +} diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css index 37309e6..77a1549 100644 --- a/dist/mini-default.min.css +++ b/dist/mini-default.min.css @@ -1 +1 @@ -:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent}form{background:var(--secondary-back-color);border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height: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:var(--back-color);color:var(--fore-color);border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}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:var(--input-focus-color);box-shadow:none}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:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}:placeholder-shown{color:var(--fore-color)}::-ms-placeholder{color:var(--fore-color);opacity:0.54}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:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75} +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent}form{background:var(--secondary-back-color);border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height: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:var(--back-color);color:var(--fore-color);border:.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}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:var(--input-focus-color);box-shadow:none}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:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}:placeholder-shown{color:var(--fore-color)}::-ms-placeholder{color:var(--fore-color);opacity:0.54}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:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;width:24px;height:24px;vertical-align:text-top;content:'';background:url('data:image/svg+xml, ') no-repeat}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{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%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;background:url('data:image/svg+xml, ') no-repeat;content:'';position:relative;width:24px;height:24px}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index ccac209..c8b4e7f 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -126,3 +126,8 @@ - `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*). - `footer` `display:block` fix removed - IE 9-. - `footer` rebuilt, pretty similar to the last iteration, except for colors. + +## 20171109 + +- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it. +- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module. diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css index 862593f..7bf54ff 100644 --- a/docs/v3_dev/src/index.css +++ b/docs/v3_dev/src/index.css @@ -223,7 +223,7 @@ a:hover, a:focus { } /* - Definitions for the grid system. + Definitions for the grid system, cards and containers. */ .container { margin: 0 auto; @@ -590,6 +590,57 @@ a:hover, a:focus { } } +/* Card component CSS variable definitions */ +:root { + --card-back-color: #f8f8f8; + --card-fore-color: #111; + --card-border-color: #ddd; +} + +.card { + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: center; + position: relative; + width: 100%; + background: var(--card-back-color); + color: var(--card-fore-color); + border: 0.0625rem solid var(--card-border-color); + border-radius: var(--universal-border-radius); + margin: var(--universal-margin); + overflow: hidden; +} + +@media screen and (min-width: 320px) { + .card { + max-width: 320px; + } +} + +.card > .section { + background: var(--card-back-color); + color: var(--card-fore-color); + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 0; + border-bottom: 0.0625rem solid var(--card-border-color); + padding: var(--universal-padding); + width: 100%; +} + +.card > .section.media { + height: 200px; + padding: 0; + -o-object-fit: cover; + object-fit: cover; +} + +.card > .section:last-child { + border-bottom: 0; +} + /* Definitions for forms and input elements. */ @@ -1153,3 +1204,43 @@ p.splash { height: 100%; overflow-y: auto; } + +@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.warning { + --card-back-color: #ffca28; + --card-border-color: #e8b825; +} + +.card.error { + --card-back-color: #b71c1c; + --card-fore-color: #fafafa; + --card-border-color: #a71a1a; +} + +.card > .section.dark { + --card-back-color: #e0e0e0; +} + +.card > .section.darker { + --card-back-color: #bdbdbd; +} + +.card > .section.double-padded { + padding: 0.75rem; +} diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index 5f77a22..cf0dcbe 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -9,6 +9,6 @@ */ @import '../mini/core'; -@import '../mini/grid'; +@import '../mini/layout'; @import '../mini/input_control'; @import '../mini/navigation'; diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index 29e58bf..95f9a5e 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -1,7 +1,7 @@ /* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */ @import '../mini/core'; -@import '../mini/grid'; +@import '../mini/layout'; @import '../mini/input_control'; @import '../mini/navigation'; @@ -149,3 +149,34 @@ p.splash { height: 100%; overflow-y: auto; } + +$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: 240px; // Width for small cards +$card-size3-name: 'fluid'; // Class name for fluid cards +$card-size3-width: 100%; // Width for fluid cards +$card-style1-name: 'warning'; // Class name for card style 1 +$card-style1-back-color: #ffca28; // Background color for card style 1 +$card-style1-fore-color: #111; // Text color for card style 1 +$card-style1-border-color: #e8b825; // Border style for card style 1 +$card-style2-name: 'error'; // Class name for card style 2 +$card-style2-back-color: #b71c1c; // Background color for card style 2 +$card-style2-fore-color: #fafafa; // Text color for card style 2 +$card-style2-border-color: #a71a1a; // Border style for card style 2 +$card-section-style1-name: 'dark'; // Class name for card section style 1 +$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1 +$card-section-style1-fore-color: #111; // Text color for card section style 1 +$card-section-style2-name: 'darker'; // Class name for card section style 2 +$card-section-style2-back-color: #bdbdbd; // Background color for card section style 2 +$card-section-style2-fore-color: #111; // 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: 0.75rem; // Padding for card section padding style 1 +@include make-card-alt-size ($card-size1-name, $card-size1-width); +@include make-card-alt-size ($card-size2-name, $card-size2-width); +@include make-card-alt-size ($card-size3-name, $card-size3-width); +@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color, $card-style1-border-color); +@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color, $card-style2-border-color); +@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color, $card-section-style1-fore-color); +@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, $card-section-style2-fore-color); +@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding); diff --git a/src/mini/_grid.scss b/src/mini/_layout.scss similarity index 62% rename from src/mini/_grid.scss rename to src/mini/_layout.scss index f2b4551..d43b11b 100644 --- a/src/mini/_grid.scss +++ b/src/mini/_layout.scss @@ -1,5 +1,5 @@ /* - Definitions for the grid system. + Definitions for the grid system, cards and containers. */ // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. $_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`). @@ -17,6 +17,18 @@ $grid-medium-prefix: 'md' !default; // Medium screen class pre $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid. $grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid. $grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid. +$card-name: 'card' !default; // Class name for the cards. +$card-section-name: 'section' !default; // Class name for the cards' sections. +$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent). +$card-normal-width: 320px !default; // Width for normal cards. +$card-section-media-height: 200px !default; // Height for cards' media sections. +$card-fore-color: #111 !default; // Text color for the cards. +$card-back-color: #f8f8f8 !default; // Background color for the cards. +$card-border-color: #ddd !default; // Border color for the cards. +// CSS variable name definitions [exercise caution if modifying these] +$card-fore-color-var: '--card-fore-color' !default; +$card-back-color-var: '--card-back-color' !default; +$card-border-color-var: '--card-border-color' !default; // == Uncomment below code if this module is used on its own == // // $universal-padding: 0.5rem !default; @@ -26,6 +38,8 @@ $grid-large-breakpoint: 1280px !default; // Large screen breakpoint // } // // ============================================================ +// Check the `_layout_mixins.scss` file to find this module's mixins. +@import 'layout_mixins'; // Fluid grid system container definition. .#{$grid-container-name} { margin: 0 auto; @@ -116,3 +130,57 @@ $grid-large-breakpoint: 1280px !default; // Large screen breakpoint @media screen and (min-width: #{$grid-large-breakpoint}){ @include generate-grid-size($grid-large-prefix); } +/* Card component CSS variable definitions */ +:root { + #{$card-back-color-var}: $card-back-color; + #{$card-fore-color-var}: $card-fore-color; + #{$card-border-color-var}: $card-border-color; +} +// Card styling +.#{$card-name} { + // New syntax + display: flex; + flex-direction: column; + justify-content: space-between; + align-self: center; + position: relative; + width: 100%; + // Actual styling for the cards + background: var(#{$card-back-color-var}); + color: var(#{$card-fore-color-var}); + border: $__1px solid var(#{$card-border-color-var}); + border-radius: var(#{$universal-border-radius-var}); + margin: var(#{$universal-margin-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + overflow: hidden; // Hide overflow from section borders + // Responsiveness (if the screen is larger than card, set max-width) + @media screen and (min-width: #{$card-normal-width}) { + max-width: $card-normal-width; + } + // Card sections + & > .#{$card-section-name} { + // Reapply background and foreground colors, so that mixins can be applied properly. + background: var(#{$card-back-color-var}); + color: var(#{$card-fore-color-var}); + box-sizing: border-box; + margin: 0; + border: 0; // Clean borders and radiuses for any element-based sections + border-radius: 0; // Clean borders and radiuses for any element-based sections + border-bottom: $__1px solid var(#{$card-border-color-var}); + padding: var(#{$universal-padding-var}); + width: 100%; + // Card media sections + &.#{$card-section-media-name} { + height: $card-section-media-height; + padding: 0; + -o-object-fit: cover; + object-fit: cover; + } + } + // Card sections - last + & > .#{$card-section-name}:last-child { + border-bottom: 0; // Clean the extra border for last section + } +} diff --git a/src/mini/_layout_mixins.scss b/src/mini/_layout_mixins.scss new file mode 100644 index 0000000..b8eac1b --- /dev/null +++ b/src/mini/_layout_mixins.scss @@ -0,0 +1,62 @@ +// Layout (card) module's mixin definitions are here. For the module itself +// check `_layout.scss`. +// Mixin for alternate card sizes: +// $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' and unit($card-alt-size-width) == '%' { + .#{$card-name}.#{$card-alt-size-name} { + max-width: $card-alt-size-width; + width: auto; + } + } + @else { + @media screen and (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): +// $card-alt-name: The name of the class used for the alternate card. +// $card-alt-back-color: The background color of the alternate card. +// $card-alt-fore-color: The text color of the alternate card. +// $card-alt-border-color: The border style of the alternate card. +@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color, + $card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) { + .#{$card-name}.#{$card-alt-name} { + @if $card-alt-back-color != $card-back-color { + #{$card-back-color-var}: $card-alt-back-color; + } + @if $card-alt-fore-color != $card-fore-color { + #{$card-fore-color-var}: $card-alt-fore-color; + } + @if $card-alt-border-color != $card-border-color { + #{$card-border-color-var}: $card-alt-border-color; + } + } +} +// Mixin for alternate card sections (card section color variants): +// $card-section-alt-name: The name of the class used for the alternate card section. +// $card-section-alt-back-color: The background color of the alternate card section. +// $card-section-alt-fore-color: The text color of the alternate card section. +@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color, + $card-section-alt-fore-color : $card-fore-color) { + .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { + @if $card-section-alt-back-color != $card-back-color { + #{$card-back-color-var}: $card-section-alt-back-color; + } + @if $card-section-alt-fore-color != $card-fore-color { + #{$card-fore-color-var}: $card-section-alt-fore-color; + } + } +} +// Mixin for alternate card sections (card section padding variants): +// $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; + } +}