From 02dfc857af54f232cfd41eaa47e786f4abf0a5d8 Mon Sep 17 00:00:00 2001 From: teascade Date: Wed, 30 Sep 2020 16:24:49 +0300 Subject: [PATCH] Update hr style --- css/style.css | 562 +++++++++++++++++----------------------------- css/style.css.map | 2 +- scss/style.scss | 261 +++++++++++---------- 3 files changed, 353 insertions(+), 472 deletions(-) diff --git a/css/style.css b/css/style.css index 890b826..09f99d3 100644 --- a/css/style.css +++ b/css/style.css @@ -1,203 +1,147 @@ @charset "UTF-8"; @font-face { font-family: "Iosevka Slab Regular"; - src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); -} - + src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); } :root { - font-family: "Iosevka Slab Regular", "Iosevka Slab", "Consolas", "Source Code Pro", "monospace"; + font-family: "Iosevka Slab Regular", "monospace"; background-color: black; color: #c9c9c9; border-color: #c9c9c9; font-weight: 400; font-size: 16px; - line-height: 21px; -} - + line-height: 21px; } /* General styles for elements */ - * { margin: 0; - padding: 0; -} + padding: 0; } p { - width: auto; -} + width: auto; } b { - font-weight: 1000; -} + font-weight: 1000; } li { - list-style: none; -} + list-style: none; } ul { - padding-left: 1ch; -} + padding-left: 1ch; } a { - color: #c9c9c9; -} + color: #c9c9c9; } + a:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } -a:hover { - cursor: pointer; - color: #c9c9c9; - background-color: #171c94; -} - -nav ul>li>ul:hover a { - color: #c9c9c9; -} +nav ul > li > ul:hover a { + color: #c9c9c9; } hr { height: 10.5px; border: 0; border-bottom: 1px solid #c9c9c9; - margin-bottom: 15px; -} + margin-bottom: 9.5px; } nav li hr, -li.button-list>ul a hr, +li.button-list > ul a hr, .white hr { - border-color: black; -} - -nav>li>ul li>ul:hover>hr, -li.button-list>ul:hover a hr { - border-color: #c9c9c9; -} + border-color: black; } +nav > li > ul li > ul:hover > hr, +li.button-list > ul:hover a hr { + border-color: #c9c9c9; } /* Lists */ - -li:not(.button-list)>ul::before { - content: "- "; -} - -li.button-list>ul { +li:not(.button-list) > ul::before { + content: "- "; } +li.button-list > ul { width: calc(100% - 1ch); - text-decoration: underline; -} - -li.button-list>ul:hover { - cursor: pointer; - color: #c9c9c9; - background-color: #171c94; -} - -li.button-list>ul>li { - width: 100%; -} - -li.button-list>ul a { - display: block; - width: 100%; -} - + text-decoration: underline; } + li.button-list > ul:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + li.button-list > ul > li { + width: 100%; } + li.button-list > ul a { + display: block; + width: 100%; } /* Navbars */ - @keyframes hide { 0% { opacity: 0; - left: inherit; - } + left: inherit; } 1% { - opacity: 0; - } + opacity: 0; } 100% { opacity: 0; - left: -9999px; - } -} - + left: -9999px; } } nav a { color: black; display: block; width: 100%; - text-decoration: none; -} - + text-decoration: none; } nav ul::before { - content: "" !important; -} - -nav>li { + content: "" !important; } +nav > li { background-color: #c9c9c9; color: black; border-color: black; - margin-left: 0; -} - -nav>li>ul { - margin: 0; - padding: 0; - display: table-cell; - padding-left: 1ch; - padding-right: 1ch; -} - -nav>li>ul:hover { - cursor: pointer; - color: #c9c9c9; - background-color: #171c94; -} - -nav>li>ul:focus { - background-color: #171c94; - color: #c9c9c9; - border-color: #c9c9c9; -} - -nav>li>ul:focus li { - display: block; - opacity: 1; - left: inherit; - animation-name: hide; - animation-name: none; -} - -nav>li>ul>li { - background-color: #c9c9c9; - color: black; - border-color: black; - position: absolute; - border: 2px solid; - box-shadow: 0 0 0 0.25ch #c9c9c9; - margin-left: calc(2px - 1ch); - margin-right: calc(2px - 1ch); - margin-top: 10.5px; - margin-bottom: 10.5px; - padding: calc(0.25ch + 2px); - padding-top: 10.5px; - padding-bottom: 10.5px; - opacity: 0; - left: -9999px; - animation-name: hide; - animation-duration: 0.5s; -} - -nav>li>ul>li>ul { - background-color: #c9c9c9; - color: black; - border-color: black; - padding-left: 1ch; - padding-right: 1ch; - min-height: 21px; -} - -nav>li>ul>li>ul:hover { - background-color: #171c94; - color: #c9c9c9; - border-color: #c9c9c9; -} - + margin-left: 0; } + nav > li > ul { + margin: 0; + padding: 0; + display: table-cell; + padding-left: 1ch; + padding-right: 1ch; } + nav > li > ul:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + nav > li > ul:focus { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; } + nav > li > ul:focus li { + display: block; + opacity: 1; + left: inherit; + animation-name: hide; + animation-name: none; } + nav > li > ul > li { + background-color: #c9c9c9; + color: black; + border-color: black; + position: absolute; + border: 2px solid; + box-shadow: 0 0 0 0.25ch #c9c9c9; + margin-left: calc(2px - 1ch); + margin-right: calc(2px - 1ch); + margin-top: 10.5px; + margin-bottom: 10.5px; + padding: calc(0.25ch + 2px); + padding-top: 10.5px; + padding-bottom: 10.5px; + opacity: 0; + left: -9999px; + animation-name: hide; + animation-duration: 0.5s; } + nav > li > ul > li > ul { + background-color: #c9c9c9; + color: black; + border-color: black; + padding-left: 1ch; + padding-right: 1ch; + min-height: 21px; } + nav > li > ul > li > ul:hover { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; } /* Miscallaneous Classes */ - .box { border: 2px solid #c9c9c9; margin: 0.5ch; @@ -207,100 +151,70 @@ nav>li>ul>li>ul:hover { margin-bottom: 10.5px; padding-top: 8.5px; padding-bottom: 8.5px; - vertical-align: top; -} - -.box.inline { - display: inline-block; -} - -.box.double { - border-style: double; - border-width: 4px; - margin: calc(0.5ch); - padding: calc(0.5ch - (4px)); - margin-top: 10.5px; - margin-bottom: 10.5px; - padding-top: 6.5px; - padding-bottom: 6.5px; -} - -.box.black { - background-color: black; - color: #c9c9c9; - border-color: #c9c9c9; - box-shadow: 0 0 0 0.25ch black; -} - -.box.white { - background-color: #c9c9c9; - color: black; - border-color: black; - box-shadow: 0 0 0 0.25ch #c9c9c9; -} - -.box.white a { - color: black; -} - -.box.white a:hover { - background-color: #171c94; - color: #c9c9c9; - border-color: #c9c9c9; -} - -.box.blue { - background-color: #171c94; - color: #c9c9c9; - border-color: #c9c9c9; - box-shadow: 0 0 0 0.25ch #171c94; -} - -.box.blue li.button-list>ul:hover { - background-color: #c9c9c9; - color: black; - border-color: black; -} - -.box.blue li.button-list>ul:hover>a { - color: black; -} - -.box.blue a:hover { - background-color: #c9c9c9; - color: #171c94; - border-color: #171c94; -} - -.box.blue hr { - border-color: #c9c9c9; -} - -.box.blue button:hover { - background-color: #c9c9c9; - color: #171c94; - border-color: #171c94; -} - -.box.blue .checkbox-right:hover, -.box.blue .checkbox-left:hover, -.box.blue .radio-right:hover, -.box.blue .radio-left:hover { - background-color: #c9c9c9; - color: #171c94; - border-color: #171c94; -} + vertical-align: top; } + .box.inline { + display: inline-block; } + .box.double { + border-style: double; + border-width: 4px; + margin: calc(0.5ch); + padding: calc(0.5ch - (4px)); + margin-top: 10.5px; + margin-bottom: 10.5px; + padding-top: 6.5px; + padding-bottom: 6.5px; } + .box.black { + background-color: black; + color: #c9c9c9; + border-color: #c9c9c9; + box-shadow: 0 0 0 0.25ch black; } + .box.white { + background-color: #c9c9c9; + color: black; + border-color: black; + box-shadow: 0 0 0 0.25ch #c9c9c9; } + .box.white a { + color: black; } + .box.white a:hover { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; } + .box.blue { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; + box-shadow: 0 0 0 0.25ch #171c94; } + .box.blue li.button-list > ul:hover { + background-color: #c9c9c9; + color: black; + border-color: black; } + .box.blue li.button-list > ul:hover > a { + color: black; } + .box.blue a:hover { + background-color: #c9c9c9; + color: #171c94; + border-color: #171c94; } + .box.blue hr { + border-color: #c9c9c9; } + .box.blue button:hover { + background-color: #c9c9c9; + color: #171c94; + border-color: #171c94; } + .box.blue .checkbox-right:hover, + .box.blue .checkbox-left:hover, + .box.blue .radio-right:hover, + .box.blue .radio-left:hover { + background-color: #c9c9c9; + color: #171c94; + border-color: #171c94; } .list-symbol::after { - content: " ▼"; -} + content: " ▼"; } .no-select { user-select: none; -moz-user-select: none; - -webkit-user-select: none; -} - + -webkit-user-select: none; } /* How to add pages: * @@ -313,14 +227,10 @@ nav>li>ul>li>ul:hover { * } * } */ - - /* Form styles */ - input[type=checkbox], input[type=radio] { - display: none; -} + display: none; } .checkbox-right:hover, .checkbox-left:hover, @@ -328,40 +238,29 @@ input[type=radio] { .radio-left:hover { cursor: pointer; color: #c9c9c9; - background-color: #171c94; -} + background-color: #171c94; } .checkbox-right::after { - content: "[ ]"; -} + content: "[ ]"; } .checkbox-left::before { - content: "[ ]"; -} + content: "[ ]"; } .radio-right::after { - content: "( )"; -} + content: "( )"; } .radio-left::before { - content: "( )"; -} + content: "( )"; } -input[type=checkbox]:checked+.checkbox-right::after { - content: "[x]"; -} +input[type=checkbox]:checked + .checkbox-right::after { + content: "[x]"; } +input[type=checkbox]:checked + .checkbox-left::before { + content: "[x]"; } -input[type=checkbox]:checked+.checkbox-left::before { - content: "[x]"; -} - -input[type=radio]:checked+.radio-right::after { - content: "(x)"; -} - -input[type=radio]:checked+.radio-left::before { - content: "(x)"; -} +input[type=radio]:checked + .radio-right::after { + content: "(x)"; } +input[type=radio]:checked + .radio-left::before { + content: "(x)"; } input[type=text], button { @@ -369,159 +268,114 @@ button { border: none; font-family: inherit; font-size: inherit; - color: inherit; -} - -input[type=text]:hover, -button:hover { - cursor: pointer; - color: #c9c9c9; - background-color: #171c94; -} + color: inherit; } + input[type=text]:hover, + button:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } label:hover { - cursor: pointer; -} + cursor: pointer; } -button:focus, -button:hover, -button:active, -button::-moz-focus-inner { +button:focus, button:hover, button:active, button::-moz-focus-inner { border: none; - text-decoration: none; -} - + text-decoration: none; } button::before { - content: "[ "; -} - + content: "[ "; } button::after { - content: " ]"; -} + content: " ]"; } .textinput { - display: inline-block; -} - -.textinput:hover { - cursor: pointer; - color: #c9c9c9; - background-color: #171c94; -} - -.textinput::before { - content: "["; -} - -.textinput::after { - content: "]"; -} - -.textinput:hover>input[type=text] { - background-color: #171c94; - color: #c9c9c9; - border-color: #c9c9c9; -} + display: inline-block; } + .textinput:hover { + cursor: pointer; + color: #c9c9c9; + background-color: #171c94; } + .textinput::before { + content: "["; } + .textinput::after { + content: "]"; } + .textinput:hover > input[type=text] { + background-color: #171c94; + color: #c9c9c9; + border-color: #c9c9c9; } input[type=text] { background-color: #c9c9c9; color: black; border-color: black; - width: 15ch; -} - + width: 15ch; } /* Style helpers, like space-takers */ - .space-1 { - min-height: 21px; -} + min-height: 21px; } .space-2 { - min-height: 42px; -} + min-height: 42px; } .space-3 { - min-height: 63px; -} + min-height: 63px; } .space-4 { - min-height: 84px; -} + min-height: 84px; } .space-5 { - min-height: 105px; -} + min-height: 105px; } .width-5 { - width: 5ch; -} + width: 5ch; } .width-10 { - width: 10ch; -} + width: 10ch; } .width-15 { - width: 15ch; -} + width: 15ch; } .width-20 { - width: 20ch; -} + width: 20ch; } .width-25 { - width: 25ch; -} + width: 25ch; } .width-50 { - width: 48ch; -} + width: 48ch; } .width-100 { - width: 98ch; -} + width: 98ch; } .width-150 { - width: 148ch; -} + width: 148ch; } .width-200 { - width: 198ch; -} + width: 198ch; } .width-250 { - width: 248ch; -} + width: 248ch; } .padding-1 { padding: 1ch; padding-top: 21px; - padding-bottom: 21px; -} + padding-bottom: 21px; } .padding-2 { padding: 2ch; padding-top: 42px; - padding-bottom: 42px; -} + padding-bottom: 42px; } .padding-3 { padding: 3ch; padding-top: 63px; - padding-bottom: 63px; -} + padding-bottom: 63px; } .padding-4 { padding: 4ch; padding-top: 84px; - padding-bottom: 84px; -} + padding-bottom: 84px; } .padding-5 { padding: 5ch; padding-top: 105px; - padding-bottom: 105px; -} + padding-bottom: 105px; } - -/*# sourceMappingURL=style.css.map */ \ No newline at end of file +/*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map index cb7a9dd..ac96f50 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/scss/style.scss b/scss/style.scss index 78d94c2..5819965 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,31 +1,30 @@ @charset "UTF-8"; - $default-black: rgb(0, 0, 0); $default-white: rgb(201, 201, 201); $default-blue: rgb(23, 28, 148); - $em-height: 16px; $line-overflow: 5px; -$line-height: $em-height + $line-overflow; - +$line-height: $em-height+$line-overflow; $box-border: 2px; $box-double-border: 4px; - @mixin whiteOnBlue { background-color: $default-blue; color: $default-white; border-color: $default-white; } + @mixin blueOnWhite { background-color: $default-white; color: $default-blue; border-color: $default-blue; } + @mixin whiteOnBlack { background-color: $default-black; color: $default-white; border-color: $default-white; } + @mixin blackOnWhite { background-color: $default-white; color: $default-black; @@ -45,19 +44,20 @@ $box-double-border: 4px; src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); } -:root { // Styles applying to everyting +:root { + // Styles applying to everyting font-family: "Iosevka Slab Regular", "monospace"; - @include whiteOnBlack; font-weight: 400; - font-size: $em-height; line-height: $line-height; } + /* General styles for elements */ -* { // Remove margin and padding from everything by default +* { + // Remove margin and padding from everything by default margin: 0; padding: 0; } @@ -66,7 +66,8 @@ p { width: auto; } -b { // Bolded text +b { + // Bolded text font-weight: 1000; } @@ -80,10 +81,11 @@ ul { a { color: $default-white; - @include hoverable($default-white, $default-blue); + @include hoverable($default-white, + $default-blue); } -nav ul > li > ul:hover a { +nav ul>li>ul:hover a { color: $default-white; } @@ -91,125 +93,127 @@ hr { height: $line-height / 2; border: 0; border-bottom: 1px solid $default-white; - margin-bottom: $em-height - 1px; + margin-bottom: $line-height / 2 - 1px; } -nav li hr, li.button-list > ul a hr, .white hr { + +nav li hr, +li.button-list>ul a hr, +.white hr { border-color: $default-black; } -nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr { + +nav>li>ul li>ul:hover>hr, +li.button-list>ul:hover a hr { border-color: $default-white; } + /* Lists */ li { - &:not(.button-list) > ul::before { + &:not(.button-list)>ul::before { content: "- "; } - &.button-list > ul { + &.button-list>ul { width: calc(100% - 1ch); text-decoration: underline; - @include hoverable($default-white, $default-blue); - - & > li { + @include hoverable($default-white, + $default-blue); + &>li { width: 100%; } - a { - display: block; - width: 100%; + display: block; + width: 100%; } } } - /* Navbars */ - @keyframes hide { - 0% { - opacity: 0; - left: inherit; - } - 1% { - opacity: 0; - } - 100% { - opacity: 0; - left: -9999px; - } - } +/* Navbars */ + +@keyframes hide { + 0% { + opacity: 0; + left: inherit; + } + 1% { + opacity: 0; + } + 100% { + opacity: 0; + left: -9999px; + } +} nav { - a { color: $default-black; display: block; width: 100%; text-decoration: none; } - ul::before { content: "" !important; } - - & > li { // Navbar + &>li { + // Navbar @include blackOnWhite; margin-left: 0; - - & > ul { // Navbar items + &>ul { + // Navbar items margin: 0; padding: 0; display: table-cell; padding-left: 1ch; padding-right: 1ch; - @include hoverable($default-white, $default-blue); - + @include hoverable($default-white, + $default-blue); &:focus { - @include whiteOnBlue; - - li { // Display inner items on focus + @include whiteOnBlue; + li { + // Display inner items on focus display: block; opacity: 1; left: inherit; animation-name: hide; - animation-name: none; } } - - & > li { // Navbar inner lists - @include blackOnWhite; - position: absolute; - border: 2px solid; - box-shadow: 0 0 0 0.25ch $default-white; - margin-left: calc(2px - 1ch); - margin-right: calc(2px - 1ch); - margin-top: $line-height / 2; - margin-bottom: $line-height / 2; - padding: calc(0.25ch + 2px); - padding-top: $line-height / 2; - padding-bottom: $line-height / 2; - - opacity: 0; - left: -9999px; - - animation-name: hide; - animation-duration: 0.5s; - - & > ul { // Inner Items - @include blackOnWhite; - padding-left: 1ch; - padding-right: 1ch; - min-height: $line-height; - - &:hover { // Navbar inner items hover - @include whiteOnBlue; - } - } - } - } + &>li { + // Navbar inner lists + @include blackOnWhite; + position: absolute; + border: 2px solid; + box-shadow: 0 0 0 0.25ch $default-white; + margin-left: calc(2px - 1ch); + margin-right: calc(2px - 1ch); + margin-top: $line-height / 2; + margin-bottom: $line-height / 2; + padding: calc(0.25ch + 2px); + padding-top: $line-height / 2; + padding-bottom: $line-height / 2; + opacity: 0; + left: -9999px; + animation-name: hide; + animation-duration: 0.5s; + &>ul { + // Inner Items + @include blackOnWhite; + padding-left: 1ch; + padding-right: 1ch; + min-height: $line-height; + &:hover { + // Navbar inner items hover + @include whiteOnBlue; + } + } + } + } } } + /* Miscallaneous Classes */ .box { @@ -218,35 +222,30 @@ nav { padding: calc(0.5ch - #{$box-border}); width: auto; margin-top: $line-height / 2; - margin-bottom: $line-height / 2 ; + margin-bottom: $line-height / 2; padding-top: $line-height / 2 - $box-border; padding-bottom: $line-height / 2 - $box-border; vertical-align: top; - &.inline { display: inline-block; } - &.double { border-style: double; border-width: $box-double-border; margin: calc(0.5ch); padding: calc(0.5ch - (#{$box-double-border})); - margin-top: $line-height / 2 ; - margin-bottom: $line-height / 2 ; + margin-top: $line-height / 2; + margin-bottom: $line-height / 2; padding-top: $line-height / 2 - $box-double-border; padding-bottom: $line-height / 2 - $box-double-border; } - &.black { @include whiteOnBlack; box-shadow: 0 0 0 0.25ch $default-black; } - &.white { @include blackOnWhite; box-shadow: 0 0 0 0.25ch $default-white; - a { color: $default-black; &:hover { @@ -254,15 +253,13 @@ nav { } } } - &.blue { @include whiteOnBlue; box-shadow: 0 0 0 0.25ch $default-blue; - - li.button-list > ul:hover { + li.button-list>ul:hover { @include blackOnWhite; } - li.button-list > ul:hover > a { + li.button-list>ul:hover>a { color: $default-black; } a:hover { @@ -276,7 +273,10 @@ nav { @include blueOnWhite; } } - .checkbox-right, .checkbox-left, .radio-right, .radio-left { + .checkbox-right, + .checkbox-left, + .radio-right, + .radio-left { &:hover { @include blueOnWhite; } @@ -294,6 +294,7 @@ nav { -webkit-user-select: none; } + /* How to add pages: * * (at)for (dollar)i from 1 through 20 { @@ -306,14 +307,20 @@ nav { * } */ + /* Form styles */ -input[type=checkbox], input[type=radio] { +input[type=checkbox], +input[type=radio] { display: none; } -.checkbox-right, .checkbox-left, .radio-right, .radio-left { - @include hoverable($default-white, $default-blue); +.checkbox-right, +.checkbox-left, +.radio-right, +.radio-left { + @include hoverable($default-white, + $default-blue); } .checkbox-right { @@ -321,6 +328,7 @@ input[type=checkbox], input[type=radio] { content: "[ ]"; } } + .checkbox-left { &::before { content: "[ ]"; @@ -332,6 +340,7 @@ input[type=checkbox], input[type=radio] { content: "( )"; } } + .radio-left { &::before { content: "( )"; @@ -339,31 +348,32 @@ input[type=checkbox], input[type=radio] { } input[type=checkbox]:checked { - & + .checkbox-right::after { + &+.checkbox-right::after { content: "[x]"; } - & + .checkbox-left::before { + &+.checkbox-left::before { content: "[x]"; } } input[type=radio]:checked { - & + .radio-right::after { + &+.radio-right::after { content: "(x)"; } - & + .radio-left::before { + &+.radio-left::before { content: "(x)"; } } -input[type=text], button { +input[type=text], +button { background-color: inherit; border: none; font-family: inherit; font-size: inherit; color: inherit; - - @include hoverable($default-white, $default-blue); + @include hoverable($default-white, + $default-blue); } label:hover { @@ -371,27 +381,32 @@ label:hover { } button { - &:focus, &:hover, &:active, &::-moz-focus-inner { + &:focus, + &:hover, + &:active, + &::-moz-focus-inner { border: none; text-decoration: none; } - - &::before { content: "[ "; } - &::after { content: " ]"; } + &::before { + content: "[ "; + } + &::after { + content: " ]"; + } } .textinput { display: inline-block; - - @include hoverable($default-white, $default-blue); - + @include hoverable($default-white, + $default-blue); &::before { content: "["; } &::after { content: "]"; } - &:hover > input[type=text] { + &:hover>input[type=text] { @include whiteOnBlue; } } @@ -401,19 +416,31 @@ input[type=text] { width: 15ch; } + /* Style helpers, like space-takers */ @for $i from 1 through 5 { - .space-#{$i} { min-height: $line-height * $i; } + .space-#{$i} { + min-height: $line-height * $i; + } } @for $width from 1 through 5 { - .width-#{$width * 5} { width: $width * 5ch; } + .width-#{$width * 5} { + width: $width * 5ch; + } } + @for $width from 1 through 5 { - .width-#{$width * 50} { width: $width * 50ch - 2ch; } + .width-#{$width * 50} { + width: $width * 50ch - 2ch; + } } @for $i from 1 through 5 { - .padding-#{$i} { padding: $i * 1ch; padding-top: $line-height * $i; padding-bottom: $line-height * $i; } -} + .padding-#{$i} { + padding: $i * 1ch; + padding-top: $line-height * $i; + padding-bottom: $line-height * $i; + } +} \ No newline at end of file