diff --git a/dist/concise.css b/dist/concise.css index 133b0d9..f2c0bf3 100644 --- a/dist/concise.css +++ b/dist/concise.css @@ -58,6 +58,8 @@ template, @media (min-width: 30em) { :root { font-size: 16px; } } + :root .nonresponsive { + font-size: 16px; } *, ::after, @@ -258,6 +260,10 @@ button, input[type="submit"], form [row] { margin-bottom: 24px; } } +.nonresponsive form, .nonresponsive +form [row] { + margin-bottom: 24px; } + input:not([type="submit"]), select, textarea { @@ -421,6 +427,22 @@ input[type="range"] { .form--inline input + label { margin-left: 1em; } } +.nonresponsive .form--inline input, +.nonresponsive .form--inline select, +.nonresponsive .form--inline textarea { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + width: auto; } + +.nonresponsive .form--inline label { + display: inline; + margin-right: .5em; + vertical-align: middle; } + +.nonresponsive .form--inline input + label { + margin-left: 1em; } + .input--small { font-size: 0.75em; height: 24px; } @@ -567,6 +589,27 @@ h6, .kilo { font-size: 3.25em; } } +.nonresponsive h1, +.nonresponsive .h1 { + font-size: 3em; } + +.nonresponsive h2, +.nonresponsive .h2 { + font-size: 2.25em; } + +.nonresponsive h3, +.nonresponsive .h3 { + font-size: 1.75em; } + +.nonresponsive .giga { + font-size: 5em; } + +.nonresponsive .mega { + font-size: 4em; } + +.nonresponsive .kilo { + font-size: 3.25em; } + ul, ol { padding-left: 1.5em; @@ -631,6 +674,23 @@ dd { .dl--horizontal dd:after { clear: both; } } +.nonresponsive .dl--horizontal dt { + clear: left; + float: left; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; } + +.nonresponsive .dl--horizontal dd { + margin-left: 165px; } + .nonresponsive .dl--horizontal dd:before, .nonresponsive .dl--horizontal dd:after { + content: ""; + display: table; } + .nonresponsive .dl--horizontal dd:after { + clear: both; } + @media print { @page { margin: .5cm; } @@ -791,6 +851,16 @@ table { table td { padding: 0 2.5em; } } +.nonresponsive { + width: auto; } + .nonresponsive th, + .nonresponsive td { + padding: 0 2.5em; } + +.nonresponsive th, +.nonresponsive td { + line-height: 48px; } + .table--responsive { overflow: auto; width: 100%; } @@ -879,7 +949,7 @@ sub { s { text-decoration: line-through; } -p { +p:not(:last-child) { margin-bottom: 20px; } a { @@ -1033,6 +1103,75 @@ address { [column~="+11"] { margin-left: 91.66667%; } } +.nonresponsive [column~="1"] { + width: 8.33333%; } + +.nonresponsive [column~="2"] { + width: 16.66667%; } + +.nonresponsive [column~="3"] { + width: 25%; } + +.nonresponsive [column~="4"] { + width: 33.33333%; } + +.nonresponsive [column~="5"] { + width: 41.66667%; } + +.nonresponsive [column~="6"] { + width: 50%; } + +.nonresponsive [column~="7"] { + width: 58.33333%; } + +.nonresponsive [column~="8"] { + width: 66.66667%; } + +.nonresponsive [column~="9"] { + width: 75%; } + +.nonresponsive [column~="10"] { + width: 83.33333%; } + +.nonresponsive [column~="11"] { + width: 91.66667%; } + +.nonresponsive [column~="12"] { + width: 100%; } + +.nonresponsive [column~="+1"] { + margin-left: 8.33333%; } + +.nonresponsive [column~="+2"] { + margin-left: 16.66667%; } + +.nonresponsive [column~="+3"] { + margin-left: 25%; } + +.nonresponsive [column~="+4"] { + margin-left: 33.33333%; } + +.nonresponsive [column~="+5"] { + margin-left: 41.66667%; } + +.nonresponsive [column~="+6"] { + margin-left: 50%; } + +.nonresponsive [column~="+7"] { + margin-left: 58.33333%; } + +.nonresponsive [column~="+8"] { + margin-left: 66.66667%; } + +.nonresponsive [column~="+9"] { + margin-left: 75%; } + +.nonresponsive [column~="+10"] { + margin-left: 83.33333%; } + +.nonresponsive [column~="+11"] { + margin-left: 91.66667%; } + .text--muted { color: #aaa !important; } @@ -1229,8 +1368,6 @@ address { margin: 20px 0; padding: 8px 1em; position: relative; } - .alert p { - margin: 0; } .alert a { color: #222222; } .alert a:hover { @@ -1412,12 +1549,6 @@ a.alert-close:hover { display: block; margin-top: 10px; } -.card-content p { - margin-bottom: 0; } - -.card-content p + p { - margin-bottom: 20px; } - .card-footer { border-top: 1px solid #e0e0e0; font-size: 0.875em; @@ -1605,6 +1736,7 @@ ol.dropdown-content { left: 0; margin: 0; opacity: 0; + overflow: scroll; pointer-events: none; position: fixed; right: 0; @@ -1617,12 +1749,18 @@ ol.dropdown-content { .modal-container { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); - margin: 15% auto; + margin: 16px auto; position: relative; width: 90%; } @media (min-width: 48em) { .modal-container { width: 526px; } } + @media (min-height: 30em) { + .modal-container { + margin: 10% auto; } } + @media (min-height: 48em) { + .modal-container { + margin: 15% auto; } } .modal-header { background-color: #4591aa; @@ -1640,17 +1778,13 @@ ol.dropdown-content { margin-top: 0; } .modal-body { - padding: 32px 2.5em 8px; } - .modal-body p { - margin-bottom: 24px; } + padding: 32px 2.5em; } .modal-footer { border-top: 1px solid #e0e0e0; font-size: 0.875em; margin: 0; padding: 24px 2.5em; } - .modal-footer p { - margin-bottom: 0; } .modal-close { color: white; diff --git a/dist/concise.min.css b/dist/concise.min.css index e69de29..4ce0e9f 100644 --- a/dist/concise.min.css +++ b/dist/concise.min.css @@ -0,0 +1 @@ +:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}audio:not([controls]){display:none}details{display:block}input[type="number"]{width:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}main,summary{display:block}pre{overflow:auto}progress{display:inline-block}textarea{overflow:auto}template,[hidden]{display:none}[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:root{box-sizing:border-box;color:#555;cursor:default;font-family:"Helvetica","Arial",sans-serif;font-size:14px;line-height:1.5;text-rendering:optimizeLegibility;vertical-align:top}@media(min-width:30em){:root{font-size:16px}}:root .nonresponsive{font-size:16px}*,::after,::before{box-sizing:inherit;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-decoration:inherit;vertical-align:inherit}*{cursor:inherit;margin:0;padding:0}body{background-color:white}a,button,input[type="submit"],input,select,textarea{cursor:initial}*[dir="rl;"]{direction:rtl;unicode-bidi:embed}bdo[dir="ltr"],bdo[dir="rtl"]{unicode-bidi:bidi-override}bdo[dir="ltr"]{direction:ltr}bdo[dir="rtl"]{direction:rtl}hr{border:0;border-top:1px solid #e0e0e0;display:block;height:1px;margin:20px 0}figure{margin:24px 1em}figcaption{color:#666;font-style:italic;text-align:center}::-moz-selection{background-color:#d6d6d6}::selection{background-color:#d6d6d6}::-moz-selection{background-color:#d6d6d6}blockquote{border-left:1px solid #e0e0e0;color:#666;margin-bottom:20px;padding:0 1em}blockquote cite,blockquote footer{display:block;font-size:80%;font-style:italic;margin-top:10px}blockquote cite:before,blockquote footer:before{content:"\2014 \00A0"}.blockquote--reverse{border-left:none;border-right:1px solid #e0e0e0;text-align:right}button,input[type="submit"],.button{background-color:#4591aa;border:0;color:white;cursor:pointer;display:inline-block;line-height:48px;overflow:visible;padding:0 2.5em;text-align:center;text-decoration:none;-webkit-transition:150ms;transition:150ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}button:hover,input[type="submit"]:hover,button:focus,input[type="submit"]:focus,.button:hover,.button:focus{background-color:#75b3c7;color:inherit;text-decoration:none}button:focus,input[type="submit"]:focus,button:active,input[type="submit"]:active,.button:focus,.button:active{outline:0}button:active,input[type="submit"]:active,.button:active{background-color:#63a8bf}button[disabled],input[disabled][type="submit"],.button[disabled]{background-color:gainsboro;color:white;cursor:not-allowed}.button--muted{background-color:#aaa}.button--muted:hover,.button--muted:focus{background-color:#d0d0d0}.button--muted:active{background-color:#c4c4c4}.button--primary{background-color:#4591aa}.button--primary:hover,.button--primary:focus{background-color:#75b3c7}.button--primary:active{background-color:#63a8bf}.button--success{background-color:#45ca69}.button--success:hover,.button--success:focus{background-color:#81db99}.button--success:active{background-color:#6dd589}.button--warning{background-color:#ffb800}.button--warning:hover,.button--warning:focus{background-color:#ffcd4d}.button--warning:active{background-color:#ffc633}.button--error{background-color:#ca4829}.button--error:hover,.button--error:focus{background-color:#df7961}.button--error:active{background-color:#db674b}.button--xsm{font-size:.75em;line-height:32px;padding:0 1.5em}.button--sm{font-size:.875em;line-height:40px;padding:0 2em}.button--lg{font-size:1.125em;line-height:56px;padding:0 3em}.button--xlg{font-size:1.125em;line-height:64px;padding:0 3.5em}.button--full{width:100%}.button--pill{border-radius:25px}.button--flat{background-color:transparent;color:#555}.button--flat:hover{background-color:rgba(0,0,0,0.1);color:#555}.button--flat[disabled]{background-color:transparent;color:#666}.button--collapse{width:100%}@media(min-width:30em){.button--collapse{width:auto}}@media(min-width:30em){form,form [row]{margin-bottom:24px}}.nonresponsive form,.nonresponsive form [row]{margin-bottom:24px}input:not([type="submit"]),select,textarea{border:1px solid #e0e0e0;border-radius:3px;font-size:.875em;height:32px;padding:0 .75em;-webkit-transition:150ms;transition:150ms;width:100%}input:not([type="submit"]):focus,select:focus,textarea:focus{border-color:#74cbe8;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px rgba(69,145,170,0.5);outline:0}input:not([type="submit"])[disabled],select[disabled],textarea[disabled]{background-color:#f5f5f5;cursor:not-allowed}input:not([type="submit"]){line-height:normal;min-height:24px}input:not([type="submit"])[type="checkbox"]:focus,input:not([type="submit"])[type="radio"]:focus,input:not([type="submit"])[type="range"]:focus,input:not([type="submit"])[type="file"]:focus,input:not([type="submit"])[type="color"]:focus,input:not([type="submit"])[type="submit"]:focus{border-color:transparent;box-shadow:none;outline:0}label{display:block;font-size:.875em}fieldset{border:1px solid #e0e0e0;border-radius:3px;padding:24px 1em;margin-bottom:24px}legend{font-size:.875em;font-weight:bold;padding:0 1em}input[type="checkbox"],input[type="file"],input[type="image"],input[type="radio"]{height:auto;width:auto}input[type="checkbox"],input[type="radio"]{line-height:normal;padding:0;vertical-align:middle}input[type="checkbox"]+label,input[type="radio"]+label{display:inline-block;margin:0 0 0 .5em;line-height:30px;vertical-align:middle}input[type="file"]{border:0;line-height:100%;padding:0}textarea{height:auto;padding:8px 1em;resize:vertical}select{background-color:transparent;border-radius:5px;padding:0}select[disabled]{color:#666}select[multiple]{height:auto}select::-ms-expand{display:none}select::-ms-value{color:currentColor}select option{padding:0 .75em}input[type="range"]{border:0;padding:0;width:100%;-webkit-appearance:none}input[type="range"]:focus{outline:0}input[type="range"]::-webkit-slider-runnable-track{background-color:gainsboro;border:0;border-radius:3px;height:5px}input[type="range"]::-webkit-slider-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px;-webkit-appearance:none}input[type="range"]::-moz-range-track{background-color:gainsboro;border:0;border-radius:3px;height:5px}input[type="range"]::-moz-range-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px}input[type="range"]::-ms-track{background-color:gainsboro;border:0;border-radius:3px;color:transparent;height:5px}input[type="range"]::-ms-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px}.input--help{color:#666;display:block;font-size:.75em;font-weight:bold;margin-top:8px}.form--inline input,.form--inline select,.form--inline textarea{margin-bottom:20px}@media(min-width:30em){.form--inline input,.form--inline select,.form--inline textarea{display:inline-block;margin-bottom:0;vertical-align:middle;width:auto}.form--inline label{display:inline;margin-right:.5em;vertical-align:middle}.form--inline input+label{margin-left:1em}}.nonresponsive .form--inline input,.nonresponsive .form--inline select,.nonresponsive .form--inline textarea{display:inline-block;margin-bottom:0;vertical-align:middle;width:auto}.nonresponsive .form--inline label{display:inline;margin-right:.5em;vertical-align:middle}.nonresponsive .form--inline input+label{margin-left:1em}.input--small{font-size:.75em;height:24px}.input--large{height:48px;font-size:1em}.input--flat{background-color:transparent;border-color:transparent;box-shadow:none}.input--flat:focus{border-color:#74cbe8}.input--success{background-color:rgba(69,202,105,0.15);border-color:#45ca69}.input--success:focus{border-color:#45ca69}.input--warning{background-color:rgba(255,184,0,0.15);border-color:#ffb800}.input--warning:focus{border-color:#ffb800}.input--error{background-color:rgba(202,72,41,0.15);border-color:#ca4829}.input--error:focus{border-color:#ca4829}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo{color:#222;font-family:"Helvetica","Arial",sans-serif;line-height:1.25em}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small,.giga small,.giga .small,.mega small,.mega .small,.kilo small,.kilo .small{color:#666;font-weight:lighter;vertical-align:0}h1,h2,h3,.h1,.h2,.h3,.giga,.mega,.kilo{margin:20px 0 10px}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.giga small,.giga .small,.mega small,.mega .small,.kilo small,.kilo .small{font-size:65%}h4,h5,h6,.h4,.h5,.h6{margin:10px 0}h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small{font-size:75%}h1,.h1{font-size:2.25em}@media(min-width:48em){h1,.h1{font-size:3em}}h2,.h2{font-size:1.6875em}@media(min-width:48em){h2,.h2{font-size:2.25em}}h3,.h3{font-size:1.3125em}@media(min-width:48em){h3,.h3{font-size:1.75em}}h4,.h4{font-size:1.125em}h5,.h5{font-size:1em}h6,.h6{font-size:.875em}.giga{font-size:3.75em}@media(min-width:48em){.giga{font-size:5em}}.mega{font-size:3em}@media(min-width:48em){.mega{font-size:4em}}.kilo{font-size:2.4375em}@media(min-width:48em){.kilo{font-size:3.25em}}.nonresponsive h1,.nonresponsive .h1{font-size:3em}.nonresponsive h2,.nonresponsive .h2{font-size:2.25em}.nonresponsive h3,.nonresponsive .h3{font-size:1.75em}.nonresponsive .giga{font-size:5em}.nonresponsive .mega{font-size:4em}.nonresponsive .kilo{font-size:3.25em}ul,ol{padding-left:1.5em;margin-bottom:10px}ul ul,ul ol,ol ul,ol ol{margin-bottom:0}ul ul{list-style-type:square}ul ol{list-style-type:lower-roman}ol ol{list-style-type:lower-roman}ol ul{list-style-type:square}.list--unstyled{list-style:none;padding-left:0}.list--unstyled li{padding-left:0}.list--inline{padding-left:0}.list--inline li{display:inline;list-style:none;padding-left:1.5em}.list--inline li:first-child{padding-left:0}dl{margin-bottom:24px}dt{font-weight:bold}dt,dd{margin-bottom:10px}@media(min-width:60em){.dl--horizontal dt{clear:left;float:left;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap;width:150px}.dl--horizontal dd{margin-left:165px}.dl--horizontal dd:before,.dl--horizontal dd:after{content:"";display:table}.dl--horizontal dd:after{clear:both}}.nonresponsive .dl--horizontal dt{clear:left;float:left;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap;width:150px}.nonresponsive .dl--horizontal dd{margin-left:165px}.nonresponsive .dl--horizontal dd:before,.nonresponsive .dl--horizontal dd:after{content:"";display:table}.nonresponsive .dl--horizontal dd:after{clear:both}@media print{@page{margin:.5cm}*,*:before,*:after{background:transparent!important;color:black!important;-webkit-filter:none!important;filter:none!important;text-shadow:none!important}:root{background-color:white;color:black;font:11pt/1.3 "Georgia","Times New Roman","Times",serif}img{max-width:100%!important;page-break-after:avoid;page-break-inside:avoid}.show--print{display:block;visibility:visible}.hide--print,video,audio,object,embed,nav,footer,a[href^="#"]:after{display:none;visibility:hidden}p,h2,h3,.h2,.h3{orphans:3;widows:3}h2,h3,.h2,.h3{page-break-after:avoid}a,a:visited{color:black;font-size:.57em;text-decoration:underline;word-wrap:break-word}a[href]:after,a:visited[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,code{background-color:none;border:1px solid #e0e0e0;page-break-inside:avoid}blockquote{border:0;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}ol{padding-left:1.25em}ul{padding-left:0;list-style:none}ul ul,ul ul ul{padding-left:1.5em}ul li,ol li{content:"» "}}@media print and (min-width:30em){table{page-break-inside:avoid;width:100%!important}table th,table td{line-height:40px!important}}@media print{.badge,.badge:before,.badge *:after,.label,.label:before,.label *:after,.spinner,.spinner:before,.spinner *:after,.tooltip,.tooltip:before,.tooltip *:after,[data-hint],[data-hint]:before,[data-hint] *:after,.progress,.progress:before,.progress *:after,.breadcrumbs,.breadcrumbs:before,.breadcrumbs *:after,.modal,.modal:before,.modal *:after,.alert,.alert:before,.alert *:after{display:none;visibility:hidden}}table{border:1px solid #e0e0e0;border-collapse:collapse;border-spacing:0;empty-cells:show;margin-bottom:24px;width:100%}table caption{color:#555;font-size:85%;font-style:italic;line-height:48px;text-align:center}table thead{background-color:#f5f5f5;text-align:left}table tfoot{background-color:#fbfbfb;border-top:1px solid #e0e0e0}table th,table td{border-right:1px solid #e0e0e0;line-height:24px;overflow:visible;padding:8px 1em}@media(min-width:30em){table th,table td{line-height:48px}}table th:last-child,table td:last-child{border-right:0}table tr,table td{-webkit-transition:background-color 150ms;transition:background-color 150ms}@media(min-width:30em){table{width:auto}table th,table td{padding:0 2.5em}}.nonresponsive{width:auto}.nonresponsive th,.nonresponsive td{padding:0 2.5em}.nonresponsive th,.nonresponsive td{line-height:48px}.table--responsive{overflow:auto;width:100%}.table--responsive::-webkit-scrollbar{height:14px;width:14px;-webkit-appearance:none}.table--responsive::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.2);border:3px solid white;border-radius:8px}.table--responsive table{margin-bottom:0}.table--full{width:100%}.table--border{border:1px solid #e0e0e0}.table--border thead,.table--border td{border-bottom:1px solid #e0e0e0}.table--borderOuter{border:1px solid #e0e0e0}.table--borderOuter th,.table--borderOuter td{border-right:0}.table--borderHorizontal thead,.table--borderHorizontal td{border-bottom:1px solid #e0e0e0}.table--borderHorizontal th,.table--borderHorizontal td{border-right:0}.table--flat{border:0}.table--flat td{border-bottom:0}.table--flat th,.table--flat td{border-right:0}.table--fillEven tbody tr:nth-child(even){background-color:#f5f5f5}.table--fillOdd tbody tr:nth-child(odd){background-color:#f5f5f5}.table--hoverRow tbody tr:hover{background-color:#f5f5f5}.table--hoverCell tbody td:hover{background-color:#f5f5f5}i,em,.italic{font-style:italic}b,strong,.bold{font-weight:bold}small,.small{font-size:75%;vertical-align:text-bottom}sup,sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}s{text-decoration:line-through}p:not(:last-child){margin-bottom:20px}a{background-color:transparent;color:#4591aa;cursor:pointer;text-decoration:none;-webkit-transition:150ms;transition:150ms}a:hover,a:focus{color:#2f6374}h1 a,h2 a,h3 a,.h1 a,.h2 a,.h3 a{color:#555}h1 a:hover,h1 a:focus,h2 a:hover,h2 a:focus,h3 a:hover,h3 a:focus,.h1 a:hover,.h1 a:focus,.h2 a:hover,.h2 a:focus,.h3 a:hover,.h3 a:focus{color:#4591aa;text-decoration:none}abbr[title]{border-bottom:1px dotted #e0e0e0;cursor:help}code,pre,kbd,samp{font-family:"Consolas",monospace;font-size:.875em}pre{padding:16px 1.5em}code{vertical-align:middle;white-space:nowrap}code,pre{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;color:#484848;margin-bottom:24px}code{padding:2px 3px}pre code{background-color:transparent;border:0;padding:0;vertical-align:inherit;white-space:pre}.pre--flat{background-color:transparent;border:0;border-radius:none;padding:0}kbd{background-color:transparent;border:1px solid #e0e0e0;border-radius:3px;box-shadow:0 2px 0 -1px white,0 2px 0 gainsboro;display:inline-block;line-height:1.75;margin:-3px 2px 0;padding:2px 6px 0;white-space:nowrap}samp{vertical-align:bottom}address{font-style:normal}[container]{box-sizing:border-box;margin:0 auto;max-width:1200px;padding-left:15px;padding-right:15px;width:100%}[row]{margin-left:-15px;margin-right:-15px;margin-bottom:0}[row]:before,[row]:after{content:"";display:table}[row]:after{clear:both}[column]{box-sizing:border-box;float:left;margin-bottom:0;width:100%;padding-left:15px;padding-right:15px}@media(min-width:48em){[column~="1"]{width:8.33333%}[column~="2"]{width:16.66667%}[column~="3"]{width:25%}[column~="4"]{width:33.33333%}[column~="5"]{width:41.66667%}[column~="6"]{width:50%}[column~="7"]{width:58.33333%}[column~="8"]{width:66.66667%}[column~="9"]{width:75%}[column~="10"]{width:83.33333%}[column~="11"]{width:91.66667%}[column~="12"]{width:100%}[column~="+1"]{margin-left:8.33333%}[column~="+2"]{margin-left:16.66667%}[column~="+3"]{margin-left:25%}[column~="+4"]{margin-left:33.33333%}[column~="+5"]{margin-left:41.66667%}[column~="+6"]{margin-left:50%}[column~="+7"]{margin-left:58.33333%}[column~="+8"]{margin-left:66.66667%}[column~="+9"]{margin-left:75%}[column~="+10"]{margin-left:83.33333%}[column~="+11"]{margin-left:91.66667%}}.nonresponsive [column~="1"]{width:8.33333%}.nonresponsive [column~="2"]{width:16.66667%}.nonresponsive [column~="3"]{width:25%}.nonresponsive [column~="4"]{width:33.33333%}.nonresponsive [column~="5"]{width:41.66667%}.nonresponsive [column~="6"]{width:50%}.nonresponsive [column~="7"]{width:58.33333%}.nonresponsive [column~="8"]{width:66.66667%}.nonresponsive [column~="9"]{width:75%}.nonresponsive [column~="10"]{width:83.33333%}.nonresponsive [column~="11"]{width:91.66667%}.nonresponsive [column~="12"]{width:100%}.nonresponsive [column~="+1"]{margin-left:8.33333%}.nonresponsive [column~="+2"]{margin-left:16.66667%}.nonresponsive [column~="+3"]{margin-left:25%}.nonresponsive [column~="+4"]{margin-left:33.33333%}.nonresponsive [column~="+5"]{margin-left:41.66667%}.nonresponsive [column~="+6"]{margin-left:50%}.nonresponsive [column~="+7"]{margin-left:58.33333%}.nonresponsive [column~="+8"]{margin-left:66.66667%}.nonresponsive [column~="+9"]{margin-left:75%}.nonresponsive [column~="+10"]{margin-left:83.33333%}.nonresponsive [column~="+11"]{margin-left:91.66667%}.text--muted{color:#aaa!important}.bg--muted{background-color:#aaa!important}.text--primary{color:#4591aa!important}.bg--primary{background-color:#4591aa!important}.text--success{color:#45ca69!important}.bg--success{background-color:#45ca69!important}.text--warning{color:#ffb800!important}.bg--warning{background-color:#ffb800!important}.text--error{color:#ca4829!important}.bg--error{background-color:#ca4829!important}.show--xsm,.hide--sm,.hide--md,.hide--lg,.hide--xlg,.hide--print,.hide--hd{display:block;visibility:visible}.hide--xsm,.show--sm,.show--md,.show--lg,.show--xlg,.show--print,.show--hd{display:none;visibility:hidden}@media(min-width:48em){.show--sm,.hide--xsm,.hide--md,.hide--lg,.hide--xlg{display:block;visibility:visible}.hide--sm,.show--xsm,.show--md,.show--lg,.show--xlg{display:none;visibility:hidden}}@media(min-width:60em){.show--md,.hide--sm,.hide--xsm,.hide--lg,.hide--xlg{display:block;visibility:visible}.hide--md,.show--sm,.show--xsm,.show--lg,.show--xlg{display:none;visibility:hidden}}@media(min-width:70em){.show--lg,.hide--xsm,.hide--sm,.hide--md,.hide--xlg{display:block;visibility:visible}.hide--lg,.show--xsm,.show--sm,.show--md,.show--xlg{display:none;visibility:hidden}}@media(min-width:80em){.show--xlg,.hide--xsm,.hide--sm,.hide--md,.hide--lg{display:block;visibility:visible}.hide--xlg,.show--xsm,.show--sm,.show--md,.show--lg{display:none;visibility:hidden}}@media only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3 / 2),only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){.show--hd{display:block;visibility:visible}.hide--hd{display:none;visibility:hidden}}.text--left{text-align:left}.text--center{text-align:center}.text--right{text-align:right}.text--justify{text-align:justify}.float--none{float:none}.float--right{float:right}.float--left{float:left}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.center--all{left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.media--fluid{max-width:100%;height:auto}.screenreader{border:0 none;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screenreader:active,.screenreader:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.alert{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;color:inherit;font-size:.875em;margin:20px 0;padding:8px 1em;position:relative}.alert a{color:#222}.alert a:hover{text-decoration:underline}.alert-close{color:inherit;float:right;opacity:.5;-webkit-transition:opacity 150ms;transition:opacity 150ms}.alert-close:hover{opacity:1}.alert-close:hover,.alert-close:focus{text-decoration:none}a.alert-close:hover{text-decoration:none}.alert--muted{background-color:rgba(170,170,170,0.15);border-color:rgba(170,170,170,0.2);color:#919191}.alert--muted a{color:#777}.alert--primary{background-color:rgba(69,145,170,0.15);border-color:rgba(69,145,170,0.2);color:#367286}.alert--primary a{color:#285361}.alert--success{background-color:rgba(69,202,105,0.15);border-color:rgba(69,202,105,0.2);color:#31ab52}.alert--success a{color:#25843f}.alert--warning{background-color:rgba(255,184,0,0.15);border-color:rgba(255,184,0,0.2);color:#cc9300}.alert--warning a{color:#996e00}.alert--error{background-color:rgba(202,72,41,0.15);border-color:rgba(202,72,41,0.2);color:#a03920}.alert--error a{color:#752a18}.badge{background-color:#4591aa;border-radius:25px;color:white;display:inline-block;font-size:.75em;line-height:24px;padding:0 .75em}.breadcrumbs{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;font-size:.75em;margin-bottom:24px;padding:8px .5em}.breadcrumbs li{display:inline;list-style:none;padding-left:.75em}.breadcrumbs li:after{color:#c7c7c7;content:"\002f";padding-left:.75em}.breadcrumbs li:last-child:after{content:"";padding-left:0}.breadcrumbs li.is-active,.breadcrumbs li.is-active a{color:#4d4d4d}.breadcrumbs--flat{background-color:transparent;border:0;border-radius:0;padding:0}.button--bordered{background-color:transparent;border:1px solid #4591aa;color:#4591aa}.button--bordered:hover,.button--bordered:focus{background-color:#4591aa;color:white}.border--muted{border-color:#aaa;color:#aaa}.border--muted:hover,.border--muted:focus{background-color:#aaa;color:white}.border--muted:active{background-color:#c4c4c4}.border--primary{border-color:#4591aa;color:#4591aa}.border--primary:hover,.border--primary:focus{background-color:#4591aa;color:white}.border--primary:active{background-color:#63a8bf}.border--success{border-color:#45ca69;color:#45ca69}.border--success:hover,.border--success:focus{background-color:#45ca69;color:white}.border--success:active{background-color:#6dd589}.border--warning{border-color:#ffb800;color:#ffb800}.border--warning:hover,.border--warning:focus{background-color:#ffb800;color:white}.border--warning:active{background-color:#ffc633}.border--error{border-color:#ca4829;color:#ca4829}.border--error:hover,.border--error:focus{background-color:#ca4829;color:white}.border--error:active{background-color:#db674b}.button--prefix{padding-left:0}.button--prefix .prefix{background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0.15));display:inline-block;margin-right:1.25em;padding:0 1em;vertical-align:0}.button--prefix.button--bordered .prefix{background-image:none;border-right:1px solid currentColor}.button--affix{padding-right:0}.button--affix .affix{background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0.15));display:inline-block;margin-left:1.25em;padding:0 1em;vertical-align:0}.button--affix.button--bordered .affix{background-image:none;border-left:1px solid currentColor}.card{background-color:white;border:1px solid #e0e0e0;margin-bottom:24px;overflow:hidden;position:relative}.card-content{padding:24px 1.5em}.card-title{display:block;margin-top:10px}.card-footer{border-top:1px solid #e0e0e0;font-size:.875em;padding:16px 1.5em}.card-image{position:relative}.card-image img{bottom:0;left:0;position:relative;right:0;top:0;width:100%}.card-image .card-title{bottom:0;color:white;left:0;padding:0 1em;position:absolute}.collection{border:1px solid #e0e0e0;border-radius:3px;list-style-type:none;margin:24px 0;padding:0}.collection-item,.collection-header{border-bottom:1px solid #e0e0e0;display:block;margin:0;padding:8px 1em}.collection-item:last-of-type,.collection-header:last-of-type{border-bottom:0}.collection-item.is-active,.collection-header.is-active{background-color:#f5f5f5}a.collection-item:hover{background-color:#f5f5f5}.collection-header{padding:0 1em}.dropdown{cursor:auto;display:inline-block;outline:0;position:relative}.dropdown:focus{pointer-events:none}.dropdown:focus .dropdown-content{opacity:1;visibility:visible}.dropdown.no-pointer-events{pointer-events:auto!important}.dropdown.no-visibility .dropdown-content{display:none;visibility:visible!important}.dropdown.no-visibility:focus .dropdown-content{display:block}.dropdown.no-opacity .dropdown-content{opacity:1!important}.dropdown-content{background-color:white;border:1px solid #e0e0e0;color:#555;left:0;margin-top:8px;opacity:0;padding:8px 1em;pointer-events:auto;position:absolute;text-align:left;-webkit-transition:all 150ms;transition:all 150ms;visibility:hidden;width:200px;z-index:1}.dropdown-content:before,.dropdown-content:after{border:solid transparent;bottom:100%;content:"";height:0;left:1.5em;pointer-events:none;position:absolute;width:0}.dropdown-content:before{border-color:rgba(255,255,255,0);border-bottom-color:#e0e0e0;border-width:7px;margin-left:-7px}.dropdown-content:after{border-color:rgba(255,255,255,0);border-bottom-color:white;border-width:6px;margin-left:-6px}.dropdown-content li{font-size:.875em;list-style-type:none;margin:0;padding:8px 1em;-webkit-transition:background-color 150ms;transition:background-color 150ms;white-space:nowrap}.dropdown-content li:hover{background-color:#f5f5f5}ul.dropdown-content,ol.dropdown-content{padding:0}.dropdown--hover:hover{pointer-events:none}.dropdown--hover:hover .dropdown-content{opacity:1;visibility:visible}.dropdown--small .dropdown-content{width:150px}.dropdown--large .dropdown-content{width:300px}.dropdown--top .dropdown-content{bottom:100%;margin-top:0;margin-bottom:8px}.dropdown--top .dropdown-content:before,.dropdown--top .dropdown-content:after{top:100%}.dropdown--top .dropdown-content:after{border-color:rgba(255,255,255,0);border-top-color:white}.dropdown--top .dropdown-content:before{border-color:rgba(255,255,255,0);border-top-color:#e0e0e0}.group{display:inline-block;margin-bottom:24px;padding:0}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.group span{margin-top:0}.group-item{border:1px solid #e0e0e0;display:inline-block;float:left;font-size:.875em;line-height:32px;list-style:none;padding:0 1em;-webkit-transition:background-color 150ms;transition:background-color 150ms}.group-item:not(:first-child){margin:0 0 0 -1px}.group-item:hover{background-color:#f5f5f5}.group-item:first-child{border-radius:3px 0 0 3px}.group-item:last-child{border-radius:0 3px 3px 0}.group-item.is-active{background-color:#f5f5f5}.label{background-color:#4591aa;border-radius:3px;color:white;display:inline-block;font-size:.75em;line-height:24px;padding:0 1em}.modal{background-color:rgba(40,46,49,0.5);bottom:0;left:0;margin:0;opacity:0;overflow:scroll;pointer-events:none;position:fixed;right:0;top:0;-webkit-transition:opacity ease-in 150ms;transition:opacity ease-in 150ms;z-index:1000002}.modal:target{opacity:1;pointer-events:auto}.modal-container{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);margin:16px auto;position:relative;width:90%}@media(min-width:48em){.modal-container{width:526px}}@media(min-height:30em){.modal-container{margin:10% auto}}@media(min-height:48em){.modal-container{margin:15% auto}}.modal-header{background-color:#4591aa;color:white;padding:16px 1.5em}.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5,.modal-header h6,.modal-header .h1,.modal-header .h2,.modal-header .h3,.modal-header .h4,.modal-header .h5,.modal-header .h6,.modal-header .giga,.modal-header .mega,.modal-header .kilo{color:inherit;display:inline}.modal-body,.modal-footer{background-color:white;margin-top:0}.modal-body{padding:32px 2.5em}.modal-footer{border-top:1px solid #e0e0e0;font-size:.875em;margin:0;padding:24px 2.5em}.modal-close{color:white;float:right;margin:0;opacity:.5;-webkit-transition:opacity 150ms;transition:opacity 150ms}.modal-close:hover{opacity:1}.modal-close:hover,.modal-close:focus{text-decoration:none}.modal:target .modal-close--background{display:block;height:100%;pointer-events:all;position:absolute;width:100%}.modal:target .modal-close--background:hover{border-bottom:0;text-decoration:none}@media(min-width:48em){.modal--small .modal-container{width:360px}}@media(min-width:48em){.modal--large .modal-container{width:760px}}@media(min-width:48em){.modal--full .modal-container{width:90%}}.modal--flat .modal-header{background-color:white;color:#555;padding:1.5em 2.5em 0}.modal--flat .modal-header h1,.modal--flat .modal-header h2,.modal--flat .modal-header h3,.modal--flat .modal-header h4,.modal--flat .modal-header h5,.modal--flat .modal-header h6,.modal--flat .modal-header .h1,.modal--flat .modal-header .h2,.modal--flat .modal-header .h3,.modal--flat .modal-header .h4,.modal--flat .modal-header .h5,.modal--flat .modal-header .h6{color:inherit}.modal--flat .modal-close{color:#555;line-height:1;margin:0}.progress{background-color:#f5f5f5;border-radius:3px;box-shadow:inset 0 1px 1px rgba(224,224,224,0.25);box-sizing:initial;color:white;font-size:.6875em;height:14px;line-height:1.2;margin-bottom:24px;position:relative;text-align:center;width:100%}.progress>span{background-color:#4591aa;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);display:block;height:100%;overflow:hidden;position:relative;width:auto}.progress--small{font-size:.5625em;height:10px;line-height:1.2}.progress--large{font-size:1em;height:25px;line-height:1.7}.progress--stacked>span{border-radius:0;display:inline-block;float:left;margin-top:0}.progress--stacked>span:first-of-type{border-radius:3px 0 0 3px}.progress--stacked>span:last-of-type{border-radius:0 3px 3px 0}.progress--striped>span:after,.progress--striped>span>span{background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0.25,rgba(255,255,255,0.2)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.75,rgba(255,255,255,0.2)),color-stop(0.75,transparent),to(transparent));background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent);background-size:50px 50px;bottom:0;content:"";left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:1}.progress--striped.progress--animate>span:after,.progress--striped.progress--animate>span>span{-webkit-animation:move 2s linear infinite;animation:move 2s linear infinite}@keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}@-webkit-keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}.spinner{-webkit-animation:rotate .8s infinite linear;animation:rotate .8s infinite linear;border:3px solid #b5b5b5;border-radius:50%;border-right-color:transparent;height:30px;margin:24px auto;width:30px}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.tooltip,[data-hint]{display:inline-block;position:relative}.tooltip:before,.tooltip:after,[data-hint]:before,[data-hint]:after{border-radius:2px;opacity:0;position:absolute;pointer-events:none;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:100ms;transition:100ms;-webkit-transition-delay:0ms;transition-delay:0ms;visibility:hidden;z-index:1000000}.tooltip:before,[data-hint]:before{background-color:transparent;border:8px solid transparent;content:"";position:absolute;z-index:1000001}.tooltip:after,[data-hint]:after{background-color:#282e31;color:white;content:attr(data-hint);font-size:.75em;padding:.25em .5em;text-decoration:none;white-space:nowrap}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after{opacity:1;visibility:visible}.tooltip:hover:before,.tooltip:hover:after,[data-hint]:hover:before,[data-hint]:hover:after{-webkit-transition-delay:100ms;transition-delay:100ms}.tooltip--top:before{border-top-color:#282e31;margin-bottom:-12px}.tooltip--top:after{margin-left:-18px}.tooltip--top:before,.tooltip--top:after{bottom:100%;left:50%}.tooltip--top:hover:after,.tooltip--top:hover:before{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.tooltip--top:focus:after,.tooltip--top:focus:before{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-transition:150ms;transition:150ms}.tooltip--bottom:before{border-bottom-color:#282e31;margin-top:-12px}.tooltip--bottom:after{margin-left:-18px}.tooltip--bottom:before,.tooltip--bottom:after{left:50%;top:100%}.tooltip--bottom:hover:after,.tooltip--bottom:hover:before,.tooltip--bottom:focus:after,.tooltip--bottom:focus:before{-webkit-transform:translateY(8px);transform:translateY(8px)}.tooltip--right:before{border-right-color:#282e31;margin-bottom:-8px;margin-left:-12px}.tooltip--right:after{margin-bottom:-12px}.tooltip--right:before,.tooltip--right:after{bottom:50%;left:105%}.tooltip--right:hover:after,.tooltip--right:hover:before,.tooltip--right:focus:after,.tooltip--right:focus:before{-webkit-transform:translateX(8px);transform:translateX(8px)}.tooltip--left:before{border-left-color:#282e31;margin-bottom:-8px;margin-right:-12px}.tooltip--left:after{margin-bottom:-12px}.tooltip--left:before,.tooltip--left:after{bottom:50%;right:100%}.tooltip--left:hover:after,.tooltip--left:hover:before,.tooltip--left:focus:after,.tooltip--left:focus:before{-webkit-transform:translateX(-8px);transform:translateX(-8px)}.tooltip--always:before,.tooltip--always:after{opacity:1;visibility:visible}.tooltip--always .tooltip--top:before,.tooltip--always .tooltip--top:after{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.tooltip--always .tooltip--right:before,.tooltip--always .tooltip--right:after{-webkit-transform:translateY(8px);transform:translateY(8px)}.tooltip--always .tooltip--bottom:before,.tooltip--always .tooltip--bottom:after{-webkit-transform:translateX(-8px);transform:translateX(-8px)}.tooltip--always .tooltip--left:before,.tooltip--always .tooltip--left:after{-webkit-transform:translateX(8px);transform:translateX(8px)} \ No newline at end of file diff --git a/src/addons/concise-ui/components/_alerts.scss b/src/addons/concise-ui/components/_alerts.scss index 6d60e45..089e4b2 100644 --- a/src/addons/concise-ui/components/_alerts.scss +++ b/src/addons/concise-ui/components/_alerts.scss @@ -12,8 +12,6 @@ padding: unitSize(1) 1em; position: relative; - p { margin: 0; } - a { color: darken(getColor(text, primary), 20%); diff --git a/src/addons/concise-ui/components/_cards.scss b/src/addons/concise-ui/components/_cards.scss index 36f46ac..c47bc5f 100644 --- a/src/addons/concise-ui/components/_cards.scss +++ b/src/addons/concise-ui/components/_cards.scss @@ -17,12 +17,6 @@ margin-top: unitSize(1, 2); } -.card-content { - p { margin-bottom: 0; } - - p + p { margin-bottom: unitSize(3, -4); } -} - .card-footer { border-top: 1px solid getColor(base, lines); font-size: pxToEm(14); diff --git a/src/addons/concise-ui/components/_modals.scss b/src/addons/concise-ui/components/_modals.scss index 66abf23..6aa2af9 100644 --- a/src/addons/concise-ui/components/_modals.scss +++ b/src/addons/concise-ui/components/_modals.scss @@ -8,6 +8,7 @@ left: 0; margin: 0; opacity: 0; + overflow: scroll; pointer-events: none; position: fixed; right: 0; @@ -23,11 +24,19 @@ .modal-container { box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1); - margin: 15% auto; + margin: unitSize(2) auto; position: relative; width: 90%; @media (min-width: $bp-small) { width: 526px; } + + @media (min-height: $bp-extra-small) { + margin: 10% auto; + } + + @media (min-height: $bp-small) { + margin: 15% auto; + } } .modal-header { @@ -49,19 +58,13 @@ margin-top: 0; } -.modal-body { - padding: unitSize(4) 2.5em unitSize(1); - - p { margin-bottom: unitSize(3); } -} +.modal-body { padding: unitSize(4) 2.5em; } .modal-footer { border-top: 1px solid getColor(base, lines); font-size: pxToEm(14); margin: 0; padding: unitSize(3) 2.5em; - - p { margin-bottom: 0; } } .modal-close { diff --git a/src/core/globals/_globals.scss b/src/core/globals/_globals.scss index 69c28f7..1452983 100644 --- a/src/core/globals/_globals.scss +++ b/src/core/globals/_globals.scss @@ -6,6 +6,9 @@ // Base // ---- +// Non-responsive website +$non-responsive: true !default; + // Transition duration $transition-duration: 150ms !default; diff --git a/src/core/layout/_base.scss b/src/core/layout/_base.scss index ec4630c..3328e37 100644 --- a/src/core/layout/_base.scss +++ b/src/core/layout/_base.scss @@ -72,6 +72,10 @@ template, @media (min-width: $bp-extra-small) { font-size: $font-base-size + px; } + + @if $non-responsive == true { + .nonresponsive { font-size: $font-base-size + px; } + } } *, diff --git a/src/core/layout/_forms.scss b/src/core/layout/_forms.scss index 2b98d15..b2df299 100644 --- a/src/core/layout/_forms.scss +++ b/src/core/layout/_forms.scss @@ -7,6 +7,10 @@ form [row] { @media (min-width: $bp-extra-small) { margin-bottom: unitSize(3); } + + @if $non-responsive == true { + .nonresponsive & { margin-bottom: unitSize(3); } + } } input:not([type="submit"]), @@ -34,6 +38,7 @@ textarea { } input:not([type="submit"]) { + line-height: normal; min-height: unitSize(3); @@ -236,6 +241,29 @@ input[type="range"] { } } +@if $non-responsive == true { + .nonresponsive { + .form--inline { + input, + select, + textarea { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + width: auto; + } + + label { + display: inline; + margin-right: .5em; + vertical-align: middle; + } + + input + label { margin-left: 1em; } + } + } +} + // // Input Modifiers diff --git a/src/core/layout/_headings.scss b/src/core/layout/_headings.scss index 31d12df..2de5410 100644 --- a/src/core/layout/_headings.scss +++ b/src/core/layout/_headings.scss @@ -68,7 +68,8 @@ h1, } h2, -.h2 { font-size: pxToEm($h2-size * .75); +.h2 { + font-size: pxToEm($h2-size * .75); @media (min-width: $bp-small) { font-size: pxToEm($h2-size); @@ -76,7 +77,8 @@ h2, } h3, -.h3 { font-size: pxToEm($h3-size * .75); +.h3 { + font-size: pxToEm($h3-size * .75); @media (min-width: $bp-small) { font-size: pxToEm($h3-size); @@ -98,7 +100,8 @@ h6, // ----- // Giga -.giga { font-size: pxToEm($giga-size * .75); +.giga { + font-size: pxToEm($giga-size * .75); @media (min-width: $bp-small) { font-size: pxToEm($giga-size); @@ -106,7 +109,8 @@ h6, } // Mega -.mega { font-size: pxToEm($mega-size * .75); +.mega { + font-size: pxToEm($mega-size * .75); @media (min-width: $bp-small) { font-size: pxToEm($mega-size); @@ -114,9 +118,34 @@ h6, } // Kilo -.kilo { font-size: pxToEm($kilo-size * .75); +.kilo { + font-size: pxToEm($kilo-size * .75); @media (min-width: $bp-small) { font-size: pxToEm($kilo-size); } } + + +// +// Non-Responsive +// -------------- + +@if $non-responsive == true { + .nonresponsive { + h1, + .h1 { font-size: pxToEm($h1-size); } + + h2, + .h2 { font-size: pxToEm($h2-size); } + + h3, + .h3 { font-size: pxToEm($h3-size); } + + .giga { font-size: pxToEm($giga-size); } + + .mega { font-size: pxToEm($mega-size); } + + .kilo { font-size: pxToEm($kilo-size); } + } +} diff --git a/src/core/layout/_lists.scss b/src/core/layout/_lists.scss index 62aba65..01d051b 100644 --- a/src/core/layout/_lists.scss +++ b/src/core/layout/_lists.scss @@ -81,3 +81,25 @@ dd { margin-bottom: unitSize(1, 2); } } } } + +@if $non-responsive == true { + .nonresponsive { + .dl--horizontal { + dt { + clear: left; + float: left; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } + + dd { + @include clearfix(); + + margin-left: 165px; + } + } + } +} diff --git a/src/core/layout/_tables.scss b/src/core/layout/_tables.scss index 3ee7252..a2bd402 100644 --- a/src/core/layout/_tables.scss +++ b/src/core/layout/_tables.scss @@ -55,6 +55,20 @@ table { } } +@if $non-responsive == true { + .nonresponsive { + & { + width: auto; + + th, + td { padding: 0 2.5em; } + } + + th, + td { line-height: unitSize(6); } + } +} + // // Responsive diff --git a/src/core/layout/_type.scss b/src/core/layout/_type.scss index 3b8295c..f9ad3b1 100644 --- a/src/core/layout/_type.scss +++ b/src/core/layout/_type.scss @@ -39,7 +39,7 @@ s { text-decoration: line-through; } // Paragraphs // -------- -p { margin-bottom: unitSize(3, -4); } +p:not(:last-child) { margin-bottom: unitSize(3, -4); } // diff --git a/src/core/utils/_atgrid.scss b/src/core/utils/_atgrid.scss index b350e55..f0a4b4a 100644 --- a/src/core/utils/_atgrid.scss +++ b/src/core/utils/_atgrid.scss @@ -183,4 +183,23 @@ $only-semantic: false !default; } } } + + // Non-responsive grid + @if $non-responsive == true { + .nonresponsive { + // Create columns + @for $i from 1 through $num-columns { + [#{$prefix}column~="#{$i}"] { + width: (($i / $num-columns) * 100%); + } + } + + // Offset for columns + @for $i from 1 through ($num-columns - 1) { + [#{$prefix}column~="+#{$i}"] { + margin-left: (($i / $num-columns) * 100%); + } + } + } + } } diff --git a/src/custom/_globals.scss b/src/custom/_globals.scss index 6d5627c..90a5358 100644 --- a/src/custom/_globals.scss +++ b/src/custom/_globals.scss @@ -7,6 +7,9 @@ // Base // ---- +// Non-responsive website +// $non-responsive: true !default; + // Transition duration // $transition-duration: 150ms; diff --git a/test/test.html b/test/test.html index aa57c06..4004956 100644 --- a/test/test.html +++ b/test/test.html @@ -9,6 +9,17 @@ Concise CSS + + @@ -114,6 +125,150 @@
Heading 6 Helper text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+
+
+ 12 +
+
+ +
+
+ 1 +
+ +
+ 11 +
+
+ +
+
+ 2 +
+ +
+ 10 +
+
+ +
+
+ 3 +
+ +
+ 9 +
+
+ +
+
+ 4 +
+ +
+ 8 +
+
+ +
+
+ 5 +
+ +
+ 7 +
+
+ +
+
+ 6 +
+ +
+ 6 +
+
+ +
+
+ 4 +
+ +
+ 4 +
+ +
+ 4 +
+
+ +
+
+ 3 +
+ +
+ 3 +
+ +
+ 3 +
+ +
+ 3 +
+
+ +
+
+ 2 +
+ +
+ 2 +
+ +
+ 2 +
+ +
+ 2 +
+ +
+ 2 +
+ +
+ 2 +
+
+
+ +
+
+
+ 1 +1 +
+
+
+
+ 1 +2 +
+
+
+
+ 1 +3 +
+
+
+ @@ -654,7 +809,7 @@

Card Title

- Card with image + Card with image

Card Title