assets/css/romo/base.scss in romo-0.18.2 vs assets/css/romo/base.scss in romo-0.19.0

- old
+ new

@@ -1,571 +1,580 @@ @import 'css/romo/vars'; @import 'css/romo/mixins'; -/* Globals */ -/* ------- */ +html { height: 100%; } -*, *:before, *:after { @include border-box; } +body.romo { -html, body { height: 100%; } + height: 100%; -body { @include rm-push; @include bg-base; + +} + +.romo { + + /* Globals */ + + @include border-box; + + *, *:before, *:after { @include border-box; } + color: $baseColor; font-weight: normal; -} -*, -legend { @include border-base; } + *, + legend { @include border-base; } -table { - max-width: 100%; - background-color: transparent; - border-collapse: collapse; - border-spacing: 0; -} + table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + } -th, -td { - @include rm-pad; - @include rm-border; - @include align-left; - @include align-middle; -} + th, + td { + @include rm-pad; + @include rm-border; + @include align-left; + @include align-middle; + } -ul, ol { @include list-styled; } + ul, ol { @include list-styled; } -img { - width: auto\9; - height: auto; - max-width: 100%; - vertical-align: middle; - border: 0; - -ms-interpolation-mode: bicubic; -} + img { + width: auto\9; + height: auto; + max-width: 100%; + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; + } -/* Typography */ -/* ---------- */ + /* Typography */ -body { font-family: $baseFontFamily; font-size: $baseFontSize; line-height: $baseLineHeight; -} -p { - margin: 0 0 ($baseLineHeight / 2); -} + p { + margin: 0 0 ($baseLineHeight / 2); + } -small { font-size: 85%; } /* Ex: 14px base font * 85% = about 12px */ -strong { font-weight: bold; } -em { font-style: italic; } + small { font-size: 85%; } /* Ex: 14px base font * 85% = about 12px */ + strong { font-weight: bold; } + em { font-style: italic; } -a, -a:link, -a:visited, -a:hover, -a:focus, -a:active { - outline: 0; -} + a, + a:link, + a:visited, + a:hover, + a:focus, + a:active { + outline: 0; + } -a, -a:link, -a:visited { - color: $linkColor; - text-decoration: none; -} -a:hover, -a:focus, -a:active { - color: $linkColorHover; - text-decoration: underline; -} + a, + a:link, + a:visited { + color: $linkColor; + text-decoration: none; + } + a:hover, + a:focus, + a:active { + color: $linkColorHover; + text-decoration: underline; + } -a.romo-text { - color: $baseColor; - text-decoration: none; -} -.romo-link { color: $linkColor !important; } -.romo-link:hover, -.romo-link-hover:hover { color: $linkColorHover !important;} + /* Typography */ -.romo-cursor-default { cursor: default; } -.romo-pointer { cursor: pointer; } -.romo-grab { @include cursor-grab; } -.romo-grabbing { @include cursor-grabbing; } + a.romo-text { + color: $baseColor; + text-decoration: none; + } + .romo-link { color: $linkColor !important; } + .romo-link:hover, + .romo-link-hover:hover { color: $linkColorHover !important;} -.romo-user-select-none{ @include user-select(none); } + .romo-cursor-default { cursor: default; } + .romo-pointer { cursor: pointer; } + .romo-grab { @include cursor-grab; } + .romo-grabbing { @include cursor-grabbing; } -/* images */ + .romo-user-select-none{ @include user-select(none); } -.romo-img-rounded { @include border-radius(6px); } -.romo-img-circle { @include border-radius(50%); } -.romo-img-card { - padding: 3px; - background-color: $baseBgColor; - border: 1px solid; - border: 1px solid rgba(0, 0, 0, 0.2); - @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); -} + /* images */ -.romo-img0 { height: $imgHeight0 !important; } -.romo-img1 { height: $imgHeight1 !important; } -.romo-img2 { height: $imgHeight2 !important; } -.romo-img3 { height: $imgHeight3 !important; } + .romo-img-rounded { @include border-radius(6px); } + .romo-img-circle { @include border-radius(50%); } + .romo-img-card { + padding: 3px; + background-color: $baseBgColor; + border: 1px solid; + border: 1px solid rgba(0, 0, 0, 0.2); + @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); + } -.romo-img-inline0 { line-height: $imgHeight0 !important; @include align-middle; } -.romo-img-inline1 { line-height: $imgHeight1 !important; @include align-middle; } -.romo-img-inline2 { line-height: $imgHeight2 !important; @include align-middle; } -.romo-img-inline3 { line-height: $imgHeight3 !important; @include align-middle; } + .romo-img0 { height: $imgHeight0 !important; } + .romo-img1 { height: $imgHeight1 !important; } + .romo-img2 { height: $imgHeight2 !important; } + .romo-img3 { height: $imgHeight3 !important; } -/* headings */ + .romo-img-inline0 { line-height: $imgHeight0 !important; @include align-middle; } + .romo-img-inline1 { line-height: $imgHeight1 !important; @include align-middle; } + .romo-img-inline2 { line-height: $imgHeight2 !important; @include align-middle; } + .romo-img-inline3 { line-height: $imgHeight3 !important; @include align-middle; } -h1, h2, h3 { - margin: ($baseLineHeight / 2) 0; - font-weight: bold; - text-rendering: optimizelegibility; - small { - font-weight: normal; - line-height: 1; + /* headings */ + + h1, h2, h3 { + margin: ($baseLineHeight / 2) 0; + font-weight: bold; + text-rendering: optimizelegibility; + small { + font-weight: normal; + line-height: 1; + } } -} -h1 { @include text3; } -h2 { @include text2; } -h3 { @include text1; } + h1 { @include text3; } + h2 { @include text2; } + h3 { @include text1; } -/* text size */ + /* text size */ -.romo-text0, -.romo-text1, -.romo-text2, -.romo-text3 { - text-rendering: optimizelegibility; -} + .romo-text0, + .romo-text1, + .romo-text2, + .romo-text3 { + text-rendering: optimizelegibility; + } -.romo-text-small, -.romo-text0 { @include text0(!important); @include font-weight0; } -.romo-text1 { @include text1(!important); @include font-weight1; } -.romo-text-large, -.romo-text2 { @include text2(!important); @include font-weight2; } -.romo-text3 { @include text3(!important); @include font-weight3; } + .romo-text-small, + .romo-text0 { @include text0(!important); @include font-weight0; } + .romo-text1 { @include text1(!important); @include font-weight1; } + .romo-text-large, + .romo-text2 { @include text2(!important); @include font-weight2; } + .romo-text3 { @include text3(!important); @include font-weight3; } -.romo-text-small-hover:hover, -.romo-text0-hover:hover { @include text0(!important); @include font-weight0; } -.romo-text1-hover:hover { @include text1(!important); @include font-weight1; } -.romo-text-large-hover:hover, -.romo-text2-hover:hover { @include text2(!important); @include font-weight2; } -.romo-text3-hover:hover { @include text3(!important); @include font-weight3; } + .romo-text-small-hover:hover, + .romo-text0-hover:hover { @include text0(!important); @include font-weight0; } + .romo-text1-hover:hover { @include text1(!important); @include font-weight1; } + .romo-text-large-hover:hover, + .romo-text2-hover:hover { @include text2(!important); @include font-weight2; } + .romo-text3-hover:hover { @include text3(!important); @include font-weight3; } -.romo-text-inline-small, -.romo-text-inline0 { @include line-height0(!important); } -.romo-text-inline1 { @include line-height1(!important); } -.romo-text-inline-large, -.romo-text-inline2 { @include line-height2(!important); } -.romo-text-inline3 { @include line-height3(!important); } + .romo-text-inline-small, + .romo-text-inline0 { @include line-height0(!important); } + .romo-text-inline1 { @include line-height1(!important); } + .romo-text-inline-large, + .romo-text-inline2 { @include line-height2(!important); } + .romo-text-inline3 { @include line-height3(!important); } -/* text weight */ + /* text weight */ -.romo-text-normal { @include font-weight(normal, !important); } -.romo-text-lighter { @include font-weight(lighter, !important); } -.romo-text-bold { @include font-weight(bold, !important); } -.romo-text-bolder { @include font-weight(bolder, !important); } -.romo-text-100 { @include font-weight(100, !important); } -.romo-text-200 { @include font-weight(200, !important); } -.romo-text-300 { @include font-weight(300, !important); } -.romo-text-400 { @include font-weight(400, !important); } -.romo-text-500 { @include font-weight(500, !important); } -.romo-text-600 { @include font-weight(600, !important); } -.romo-text-700 { @include font-weight(700, !important); } -.romo-text-800 { @include font-weight(800, !important); } -.romo-text-900 { @include font-weight(900, !important); } + .romo-text-normal { @include font-weight(normal, !important); } + .romo-text-lighter { @include font-weight(lighter, !important); } + .romo-text-bold { @include font-weight(bold, !important); } + .romo-text-bolder { @include font-weight(bolder, !important); } + .romo-text-100 { @include font-weight(100, !important); } + .romo-text-200 { @include font-weight(200, !important); } + .romo-text-300 { @include font-weight(300, !important); } + .romo-text-400 { @include font-weight(400, !important); } + .romo-text-500 { @include font-weight(500, !important); } + .romo-text-600 { @include font-weight(600, !important); } + .romo-text-700 { @include font-weight(700, !important); } + .romo-text-800 { @include font-weight(800, !important); } + .romo-text-900 { @include font-weight(900, !important); } -.romo-text-normal-hover:hover { @include font-weight(normal, !important); } -.romo-text-lighter-hover:hover { @include font-weight(lighter, !important); } -.romo-text-bold-hover:hover { @include font-weight(bold, !important); } -.romo-text-bolder-hover:hover { @include font-weight(bolder, !important); } -.romo-text-100-hover:hover { @include font-weight(100, !important); } -.romo-text-200-hover:hover { @include font-weight(200, !important); } -.romo-text-300-hover:hover { @include font-weight(300, !important); } -.romo-text-400-hover:hover { @include font-weight(400, !important); } -.romo-text-500-hover:hover { @include font-weight(500, !important); } -.romo-text-600-hover:hover { @include font-weight(600, !important); } -.romo-text-700-hover:hover { @include font-weight(700, !important); } -.romo-text-800-hover:hover { @include font-weight(800, !important); } -.romo-text-900-hover:hover { @include font-weight(900, !important); } + .romo-text-normal-hover:hover { @include font-weight(normal, !important); } + .romo-text-lighter-hover:hover { @include font-weight(lighter, !important); } + .romo-text-bold-hover:hover { @include font-weight(bold, !important); } + .romo-text-bolder-hover:hover { @include font-weight(bolder, !important); } + .romo-text-100-hover:hover { @include font-weight(100, !important); } + .romo-text-200-hover:hover { @include font-weight(200, !important); } + .romo-text-300-hover:hover { @include font-weight(300, !important); } + .romo-text-400-hover:hover { @include font-weight(400, !important); } + .romo-text-500-hover:hover { @include font-weight(500, !important); } + .romo-text-600-hover:hover { @include font-weight(600, !important); } + .romo-text-700-hover:hover { @include font-weight(700, !important); } + .romo-text-800-hover:hover { @include font-weight(800, !important); } + .romo-text-900-hover:hover { @include font-weight(900, !important); } -/* text decoration */ + /* text decoration */ -.romo-text-underline { @include text-decoration-underline(!important); } -.romo-text-overline { @include text-decoration-overline(!important); } -.romo-text-line-through, -.romo-text-strikethrough { @include text-decoration-line-through(!important); } -.romo-text-no-line { @include text-decoration-none(!important); } + .romo-text-underline { @include text-decoration-underline(!important); } + .romo-text-overline { @include text-decoration-overline(!important); } + .romo-text-line-through, + .romo-text-strikethrough { @include text-decoration-line-through(!important); } + .romo-text-no-line { @include text-decoration-none(!important); } -.romo-text-underline-hover:hover { @include text-decoration-underline(!important); } -.romo-text-overline-hover:hover { @include text-decoration-overline(!important); } -.romo-text-line-through-hover:hover, -.romo-text-strikethrough-hover:hover { @include text-decoration-line-through(!important); } -.romo-text-no-line-hover:hover { @include text-decoration-none(!important); } + .romo-text-underline-hover:hover { @include text-decoration-underline(!important); } + .romo-text-overline-hover:hover { @include text-decoration-overline(!important); } + .romo-text-line-through-hover:hover, + .romo-text-strikethrough-hover:hover { @include text-decoration-line-through(!important); } + .romo-text-no-line-hover:hover { @include text-decoration-none(!important); } -/* alignment */ + /* alignment */ -.romo-align-left { @include align-left(!important); } -.romo-align-center { @include align-center(!important); } -.romo-align-right { @include align-right(!important); } + .romo-align-left { @include align-left(!important); } + .romo-align-center { @include align-center(!important); } + .romo-align-right { @include align-right(!important); } -.romo-align-top { @include align-top(!important); } -.romo-align-middle { @include align-middle(!important); } -.romo-align-bottom { @include align-bottom(!important); } + .romo-align-top { @include align-top(!important); } + .romo-align-middle { @include align-middle(!important); } + .romo-align-bottom { @include align-bottom(!important); } -/* Scaffolding */ -/* ----------- */ + /* Scaffolding */ + /* ----------- */ -/* border helpers */ + /* border helpers */ -.romo-border-solid { @include border-style(solid, !important); } -.romo-border-dashed { @include border-style(dashed, !important); } -.romo-border-dotted { @include border-style(dotted, !important); } -.romo-border-double { @include border-style(double, !important); } -.romo-border-groove { @include border-style(groove, !important); } -.romo-border-inset { @include border-style(inset, !important); } -.romo-border-hidden { @include border-style(hidden, !important); } -.romo-border-none { @include border-style(none, !important); } + .romo-border-solid { @include border-style(solid, !important); } + .romo-border-dashed { @include border-style(dashed, !important); } + .romo-border-dotted { @include border-style(dotted, !important); } + .romo-border-double { @include border-style(double, !important); } + .romo-border-groove { @include border-style(groove, !important); } + .romo-border-inset { @include border-style(inset, !important); } + .romo-border-hidden { @include border-style(hidden, !important); } + .romo-border-none { @include border-style(none, !important); } -.romo-border-solid-hover:hover { @include border-style(solid, !important); } -.romo-border-dashed-hover:hover { @include border-style(dashed, !important); } -.romo-border-dotted-hover:hover { @include border-style(dotted, !important); } -.romo-border-double-hover:hover { @include border-style(double, !important); } -.romo-border-groove-hover:hover { @include border-style(groove, !important); } -.romo-border-inset-hover:hover { @include border-style(inset, !important); } -.romo-border-hidden-hover:hover { @include border-style(hidden, !important); } -.romo-border-none-hover:hover { @include border-style(none, !important); } + .romo-border-solid-hover:hover { @include border-style(solid, !important); } + .romo-border-dashed-hover:hover { @include border-style(dashed, !important); } + .romo-border-dotted-hover:hover { @include border-style(dotted, !important); } + .romo-border-double-hover:hover { @include border-style(double, !important); } + .romo-border-groove-hover:hover { @include border-style(groove, !important); } + .romo-border-inset-hover:hover { @include border-style(inset, !important); } + .romo-border-hidden-hover:hover { @include border-style(hidden, !important); } + .romo-border-none-hover:hover { @include border-style(none, !important); } -.romo-border-solid-top { @include border-style-top(solid, !important); } -.romo-border-dashed-top { @include border-style-top(dashed, !important); } -.romo-border-dotted-top { @include border-style-top(dotted, !important); } -.romo-border-double-top { @include border-style-top(double, !important); } -.romo-border-groove-top { @include border-style-top(groove, !important); } -.romo-border-inset-top { @include border-style-top(inset, !important); } -.romo-border-hidden-top { @include border-style-top(hidden, !important); } -.romo-border-none-top { @include border-style-top(none, !important); } + .romo-border-solid-top { @include border-style-top(solid, !important); } + .romo-border-dashed-top { @include border-style-top(dashed, !important); } + .romo-border-dotted-top { @include border-style-top(dotted, !important); } + .romo-border-double-top { @include border-style-top(double, !important); } + .romo-border-groove-top { @include border-style-top(groove, !important); } + .romo-border-inset-top { @include border-style-top(inset, !important); } + .romo-border-hidden-top { @include border-style-top(hidden, !important); } + .romo-border-none-top { @include border-style-top(none, !important); } -.romo-border-solid-top-hover:hover { @include border-style-top(solid, !important); } -.romo-border-dashed-top-hover:hover { @include border-style-top(dashed, !important); } -.romo-border-dotted-top-hover:hover { @include border-style-top(dotted, !important); } -.romo-border-double-top-hover:hover { @include border-style-top(double, !important); } -.romo-border-groove-top-hover:hover { @include border-style-top(groove, !important); } -.romo-border-inset-top-hover:hover { @include border-style-top(inset, !important); } -.romo-border-hidden-top-hover:hover { @include border-style-top(hidden, !important); } -.romo-border-none-top-hover:hover { @include border-style-top(none, !important); } + .romo-border-solid-top-hover:hover { @include border-style-top(solid, !important); } + .romo-border-dashed-top-hover:hover { @include border-style-top(dashed, !important); } + .romo-border-dotted-top-hover:hover { @include border-style-top(dotted, !important); } + .romo-border-double-top-hover:hover { @include border-style-top(double, !important); } + .romo-border-groove-top-hover:hover { @include border-style-top(groove, !important); } + .romo-border-inset-top-hover:hover { @include border-style-top(inset, !important); } + .romo-border-hidden-top-hover:hover { @include border-style-top(hidden, !important); } + .romo-border-none-top-hover:hover { @include border-style-top(none, !important); } -.romo-border-solid-right { @include border-style-right(solid, !important); } -.romo-border-dashed-right { @include border-style-right(dashed, !important); } -.romo-border-dotted-right { @include border-style-right(dotted, !important); } -.romo-border-double-right { @include border-style-right(double, !important); } -.romo-border-groove-right { @include border-style-right(groove, !important); } -.romo-border-inset-right { @include border-style-right(inset, !important); } -.romo-border-hidden-right { @include border-style-right(hidden, !important); } -.romo-border-none-right { @include border-style-right(none, !important); } + .romo-border-solid-right { @include border-style-right(solid, !important); } + .romo-border-dashed-right { @include border-style-right(dashed, !important); } + .romo-border-dotted-right { @include border-style-right(dotted, !important); } + .romo-border-double-right { @include border-style-right(double, !important); } + .romo-border-groove-right { @include border-style-right(groove, !important); } + .romo-border-inset-right { @include border-style-right(inset, !important); } + .romo-border-hidden-right { @include border-style-right(hidden, !important); } + .romo-border-none-right { @include border-style-right(none, !important); } -.romo-border-solid-right-hover:hover { @include border-style-right(solid, !important); } -.romo-border-dashed-right-hover:hover { @include border-style-right(dashed, !important); } -.romo-border-dotted-right-hover:hover { @include border-style-right(dotted, !important); } -.romo-border-double-right-hover:hover { @include border-style-right(double, !important); } -.romo-border-groove-right-hover:hover { @include border-style-right(groove, !important); } -.romo-border-inset-right-hover:hover { @include border-style-right(inset, !important); } -.romo-border-hidden-right-hover:hover { @include border-style-right(hidden, !important); } -.romo-border-none-right-hover:hover { @include border-style-right(none, !important); } + .romo-border-solid-right-hover:hover { @include border-style-right(solid, !important); } + .romo-border-dashed-right-hover:hover { @include border-style-right(dashed, !important); } + .romo-border-dotted-right-hover:hover { @include border-style-right(dotted, !important); } + .romo-border-double-right-hover:hover { @include border-style-right(double, !important); } + .romo-border-groove-right-hover:hover { @include border-style-right(groove, !important); } + .romo-border-inset-right-hover:hover { @include border-style-right(inset, !important); } + .romo-border-hidden-right-hover:hover { @include border-style-right(hidden, !important); } + .romo-border-none-right-hover:hover { @include border-style-right(none, !important); } -.romo-border-solid-bottom { @include border-style-bottom(solid, !important); } -.romo-border-dashed-bottom { @include border-style-bottom(dashed, !important); } -.romo-border-dotted-bottom { @include border-style-bottom(dotted, !important); } -.romo-border-double-bottom { @include border-style-bottom(double, !important); } -.romo-border-groove-bottom { @include border-style-bottom(groove, !important); } -.romo-border-inset-bottom { @include border-style-bottom(inset, !important); } -.romo-border-hidden-bottom { @include border-style-bottom(hidden, !important); } -.romo-border-none-bottom { @include border-style-bottom(none, !important); } + .romo-border-solid-bottom { @include border-style-bottom(solid, !important); } + .romo-border-dashed-bottom { @include border-style-bottom(dashed, !important); } + .romo-border-dotted-bottom { @include border-style-bottom(dotted, !important); } + .romo-border-double-bottom { @include border-style-bottom(double, !important); } + .romo-border-groove-bottom { @include border-style-bottom(groove, !important); } + .romo-border-inset-bottom { @include border-style-bottom(inset, !important); } + .romo-border-hidden-bottom { @include border-style-bottom(hidden, !important); } + .romo-border-none-bottom { @include border-style-bottom(none, !important); } -.romo-border-solid-bottom-hover:hover { @include border-style-bottom(solid, !important); } -.romo-border-dashed-bottom-hover:hover { @include border-style-bottom(dashed, !important); } -.romo-border-dotted-bottom-hover:hover { @include border-style-bottom(dotted, !important); } -.romo-border-double-bottom-hover:hover { @include border-style-bottom(double, !important); } -.romo-border-groove-bottom-hover:hover { @include border-style-bottom(groove, !important); } -.romo-border-inset-bottom-hover:hover { @include border-style-bottom(inset, !important); } -.romo-border-hidden-bottom-hover:hover { @include border-style-bottom(hidden, !important); } -.romo-border-none-bottom-hover:hover { @include border-style-bottom(none, !important); } + .romo-border-solid-bottom-hover:hover { @include border-style-bottom(solid, !important); } + .romo-border-dashed-bottom-hover:hover { @include border-style-bottom(dashed, !important); } + .romo-border-dotted-bottom-hover:hover { @include border-style-bottom(dotted, !important); } + .romo-border-double-bottom-hover:hover { @include border-style-bottom(double, !important); } + .romo-border-groove-bottom-hover:hover { @include border-style-bottom(groove, !important); } + .romo-border-inset-bottom-hover:hover { @include border-style-bottom(inset, !important); } + .romo-border-hidden-bottom-hover:hover { @include border-style-bottom(hidden, !important); } + .romo-border-none-bottom-hover:hover { @include border-style-bottom(none, !important); } -.romo-border-solid-left { @include border-style-left(solid, !important); } -.romo-border-dashed-left { @include border-style-left(dashed, !important); } -.romo-border-dotted-left { @include border-style-left(dotted, !important); } -.romo-border-double-left { @include border-style-left(double, !important); } -.romo-border-groove-left { @include border-style-left(groove, !important); } -.romo-border-inset-left { @include border-style-left(inset, !important); } -.romo-border-hidden-left { @include border-style-left(hidden, !important); } -.romo-border-none-left { @include border-style-left(none, !important); } + .romo-border-solid-left { @include border-style-left(solid, !important); } + .romo-border-dashed-left { @include border-style-left(dashed, !important); } + .romo-border-dotted-left { @include border-style-left(dotted, !important); } + .romo-border-double-left { @include border-style-left(double, !important); } + .romo-border-groove-left { @include border-style-left(groove, !important); } + .romo-border-inset-left { @include border-style-left(inset, !important); } + .romo-border-hidden-left { @include border-style-left(hidden, !important); } + .romo-border-none-left { @include border-style-left(none, !important); } -.romo-border-solid-left-hover:hover { @include border-style-left(solid, !important); } -.romo-border-dashed-left-hover:hover { @include border-style-left(dashed, !important); } -.romo-border-dotted-left-hover:hover { @include border-style-left(dotted, !important); } -.romo-border-double-left-hover:hover { @include border-style-left(double, !important); } -.romo-border-groove-left-hover:hover { @include border-style-left(groove, !important); } -.romo-border-inset-left-hover:hover { @include border-style-left(inset, !important); } -.romo-border-hidden-left-hover:hover { @include border-style-left(hidden, !important); } -.romo-border-none-left-hover:hover { @include border-style-left(none, !important); } + .romo-border-solid-left-hover:hover { @include border-style-left(solid, !important); } + .romo-border-dashed-left-hover:hover { @include border-style-left(dashed, !important); } + .romo-border-dotted-left-hover:hover { @include border-style-left(dotted, !important); } + .romo-border-double-left-hover:hover { @include border-style-left(double, !important); } + .romo-border-groove-left-hover:hover { @include border-style-left(groove, !important); } + .romo-border-inset-left-hover:hover { @include border-style-left(inset, !important); } + .romo-border-hidden-left-hover:hover { @include border-style-left(hidden, !important); } + .romo-border-none-left-hover:hover { @include border-style-left(none, !important); } -.romo-border, -.romo-border1 { @include border1(!important); } -.romo-border0 { @include border0(!important); } -.romo-border2 { @include border2(!important); } -.romo-rm-border { @include rm-border(!important); } + .romo-border, + .romo-border1 { @include border1(!important); } + .romo-border0 { @include border0(!important); } + .romo-border2 { @include border2(!important); } + .romo-rm-border { @include rm-border(!important); } -.romo-border-hover:hover, -.romo-border1-hover:hover { @include border1(!important); } -.romo-border0-hover:hover { @include border0(!important); } -.romo-border2-hover:hover { @include border2(!important); } -.romo-rm-border-hover:hover { @include rm-border(!important); } + .romo-border-hover:hover, + .romo-border1-hover:hover { @include border1(!important); } + .romo-border0-hover:hover { @include border0(!important); } + .romo-border2-hover:hover { @include border2(!important); } + .romo-rm-border-hover:hover { @include rm-border(!important); } -.romo-border-top, -.romo-border1-top { @include border1-top(!important); } -.romo-border0-top { @include border0-top(!important); } -.romo-border2-top { @include border2-top(!important); } -.romo-rm-border-top { @include rm-border-top(!important); } + .romo-border-top, + .romo-border1-top { @include border1-top(!important); } + .romo-border0-top { @include border0-top(!important); } + .romo-border2-top { @include border2-top(!important); } + .romo-rm-border-top { @include rm-border-top(!important); } -.romo-border-top-hover:hover, -.romo-border1-top-hover:hover { @include border1-top(!important); } -.romo-border0-top-hover:hover { @include border0-top(!important); } -.romo-border2-top-hover:hover { @include border2-top(!important); } -.romo-rm-border-top-hover:hover { @include rm-border-top(!important); } + .romo-border-top-hover:hover, + .romo-border1-top-hover:hover { @include border1-top(!important); } + .romo-border0-top-hover:hover { @include border0-top(!important); } + .romo-border2-top-hover:hover { @include border2-top(!important); } + .romo-rm-border-top-hover:hover { @include rm-border-top(!important); } -.romo-border-right, -.romo-border1-right { @include border1-right(!important); } -.romo-border0-right { @include border0-right(!important); } -.romo-border2-right { @include border2-right(!important); } -.romo-rm-border-right { @include rm-border-right(!important); } + .romo-border-right, + .romo-border1-right { @include border1-right(!important); } + .romo-border0-right { @include border0-right(!important); } + .romo-border2-right { @include border2-right(!important); } + .romo-rm-border-right { @include rm-border-right(!important); } -.romo-border-right-hover:hover, -.romo-border1-right-hover:hover { @include border1-right(!important); } -.romo-border0-right-hover:hover { @include border0-right(!important); } -.romo-border2-right-hover:hover { @include border2-right(!important); } -.romo-rm-border-right-hover:hover { @include rm-border-right(!important); } + .romo-border-right-hover:hover, + .romo-border1-right-hover:hover { @include border1-right(!important); } + .romo-border0-right-hover:hover { @include border0-right(!important); } + .romo-border2-right-hover:hover { @include border2-right(!important); } + .romo-rm-border-right-hover:hover { @include rm-border-right(!important); } -.romo-border-bottom, -.romo-border1-bottom { @include border1-bottom(!important); } -.romo-border0-bottom { @include border0-bottom(!important); } -.romo-border2-bottom { @include border2-bottom(!important); } -.romo-rm-border-bottom { @include rm-border-bottom(!important); } + .romo-border-bottom, + .romo-border1-bottom { @include border1-bottom(!important); } + .romo-border0-bottom { @include border0-bottom(!important); } + .romo-border2-bottom { @include border2-bottom(!important); } + .romo-rm-border-bottom { @include rm-border-bottom(!important); } -.romo-border-bottom-hover:hover, -.romo-border1-bottom-hover:hover { @include border1-bottom(!important); } -.romo-border0-bottom-hover:hover { @include border0-bottom(!important); } -.romo-border2-bottom-hover:hover { @include border2-bottom(!important); } -.romo-rm-border-bottom-hover:hover { @include rm-border-bottom(!important); } + .romo-border-bottom-hover:hover, + .romo-border1-bottom-hover:hover { @include border1-bottom(!important); } + .romo-border0-bottom-hover:hover { @include border0-bottom(!important); } + .romo-border2-bottom-hover:hover { @include border2-bottom(!important); } + .romo-rm-border-bottom-hover:hover { @include rm-border-bottom(!important); } -.romo-border-left, -.romo-border1-left { @include border1-left(!important); } -.romo-border0-left { @include border0-left(!important); } -.romo-border2-left { @include border2-left(!important); } -.romo-rm-border-left { @include rm-border-left(!important); } + .romo-border-left, + .romo-border1-left { @include border1-left(!important); } + .romo-border0-left { @include border0-left(!important); } + .romo-border2-left { @include border2-left(!important); } + .romo-rm-border-left { @include rm-border-left(!important); } -.romo-border-left-hover:hover, -.romo-border1-left-hover:hover { @include border1-left(!important); } -.romo-border0-left-hover:hover { @include border0-left(!important); } -.romo-border2-left-hover:hover { @include border2-left(!important); } -.romo-rm-border-left-hover:hover { @include rm-border-left(!important); } + .romo-border-left-hover:hover, + .romo-border1-left-hover:hover { @include border1-left(!important); } + .romo-border0-left-hover:hover { @include border0-left(!important); } + .romo-border2-left-hover:hover { @include border2-left(!important); } + .romo-rm-border-left-hover:hover { @include rm-border-left(!important); } -.romo-border-radius, -.romo-border1-radius { @include border1-radius(!important); } -.romo-border0-radius { @include border0-radius(!important); } -.romo-border2-radius { @include border2-radius(!important); } -.romo-rm-border-radius { @include rm-border-radius(!important); } + .romo-border-radius, + .romo-border1-radius { @include border1-radius(!important); } + .romo-border0-radius { @include border0-radius(!important); } + .romo-border2-radius { @include border2-radius(!important); } + .romo-rm-border-radius { @include rm-border-radius(!important); } -.romo-border-radius-hover:hover, -.romo-border1-radius-hover:hover { @include border1-radius(!important); } -.romo-border0-radius-hover:hover { @include border0-radius(!important); } -.romo-border2-radius-hover:hover { @include border2-radius(!important); } -.romo-rm-border-radius-hover:hover { @include rm-border-radius(!important); } + .romo-border-radius-hover:hover, + .romo-border1-radius-hover:hover { @include border1-radius(!important); } + .romo-border0-radius-hover:hover { @include border0-radius(!important); } + .romo-border2-radius-hover:hover { @include border2-radius(!important); } + .romo-rm-border-radius-hover:hover { @include rm-border-radius(!important); } -.romo-border-top-left-radius, -.romo-border1-top-left-radius { @include border1-top-left-radius(!important); } -.romo-border0-top-left-radius { @include border0-top-left-radius(!important); } -.romo-border2-top-left-radius { @include border2-top-left-radius(!important); } -.romo-rm-border-top-left-radius { @include rm-border-top-left-radius(!important); } + .romo-border-top-left-radius, + .romo-border1-top-left-radius { @include border1-top-left-radius(!important); } + .romo-border0-top-left-radius { @include border0-top-left-radius(!important); } + .romo-border2-top-left-radius { @include border2-top-left-radius(!important); } + .romo-rm-border-top-left-radius { @include rm-border-top-left-radius(!important); } -.romo-border-top-left-radius-hover:hover, -.romo-border1-top-left-radius-hover:hover { @include border1-top-left-radius(!important); } -.romo-border0-top-left-radius-hover:hover { @include border0-top-left-radius(!important); } -.romo-border2-top-left-radius-hover:hover { @include border2-top-left-radius(!important); } -.romo-rm-border-top-left-radius-hover:hover { @include rm-border-top-left-radius(!important); } + .romo-border-top-left-radius-hover:hover, + .romo-border1-top-left-radius-hover:hover { @include border1-top-left-radius(!important); } + .romo-border0-top-left-radius-hover:hover { @include border0-top-left-radius(!important); } + .romo-border2-top-left-radius-hover:hover { @include border2-top-left-radius(!important); } + .romo-rm-border-top-left-radius-hover:hover { @include rm-border-top-left-radius(!important); } -.romo-border-top-right-radius, -.romo-border1-top-right-radius { @include border1-top-right-radius(!important); } -.romo-border0-top-right-radius { @include border0-top-right-radius(!important); } -.romo-border2-top-right-radius { @include border2-top-right-radius(!important); } -.romo-rm-border-top-right-radius { @include rm-border-top-right-radius(!important); } + .romo-border-top-right-radius, + .romo-border1-top-right-radius { @include border1-top-right-radius(!important); } + .romo-border0-top-right-radius { @include border0-top-right-radius(!important); } + .romo-border2-top-right-radius { @include border2-top-right-radius(!important); } + .romo-rm-border-top-right-radius { @include rm-border-top-right-radius(!important); } -.romo-border-top-right-radius-hover:hover, -.romo-border1-top-right-radius-hover:hover { @include border1-top-right-radius(!important); } -.romo-border0-top-right-radius-hover:hover { @include border0-top-right-radius(!important); } -.romo-border2-top-right-radius-hover:hover { @include border2-top-right-radius(!important); } -.romo-rm-border-top-right-radius-hover:hover { @include rm-border-top-right-radius(!important); } + .romo-border-top-right-radius-hover:hover, + .romo-border1-top-right-radius-hover:hover { @include border1-top-right-radius(!important); } + .romo-border0-top-right-radius-hover:hover { @include border0-top-right-radius(!important); } + .romo-border2-top-right-radius-hover:hover { @include border2-top-right-radius(!important); } + .romo-rm-border-top-right-radius-hover:hover { @include rm-border-top-right-radius(!important); } -.romo-border-bottom-right-radius, -.romo-border1-bottom-right-radius { @include border1-bottom-right-radius(!important); } -.romo-border0-bottom-right-radius { @include border0-bottom-right-radius(!important); } -.romo-border2-bottom-right-radius { @include border2-bottom-right-radius(!important); } -.romo-rm-border-bottom-right-radius { @include rm-border-bottom-right-radius(!important); } + .romo-border-bottom-right-radius, + .romo-border1-bottom-right-radius { @include border1-bottom-right-radius(!important); } + .romo-border0-bottom-right-radius { @include border0-bottom-right-radius(!important); } + .romo-border2-bottom-right-radius { @include border2-bottom-right-radius(!important); } + .romo-rm-border-bottom-right-radius { @include rm-border-bottom-right-radius(!important); } -.romo-border-bottom-right-radius-hover:hover, -.romo-border1-bottom-right-radius-hover:hover { @include border1-bottom-right-radius(!important); } -.romo-border0-bottom-right-radius-hover:hover { @include border0-bottom-right-radius(!important); } -.romo-border2-bottom-right-radius-hover:hover { @include border2-bottom-right-radius(!important); } -.romo-rm-border-bottom-right-radius-hover:hover { @include rm-border-bottom-right-radius(!important); } + .romo-border-bottom-right-radius-hover:hover, + .romo-border1-bottom-right-radius-hover:hover { @include border1-bottom-right-radius(!important); } + .romo-border0-bottom-right-radius-hover:hover { @include border0-bottom-right-radius(!important); } + .romo-border2-bottom-right-radius-hover:hover { @include border2-bottom-right-radius(!important); } + .romo-rm-border-bottom-right-radius-hover:hover { @include rm-border-bottom-right-radius(!important); } -.romo-border-bottom-left-radius, -.romo-border1-bottom-left-radius { @include border1-bottom-left-radius(!important); } -.romo-border0-bottom-left-radius { @include border0-bottom-left-radius(!important); } -.romo-border2-bottom-left-radius { @include border2-bottom-left-radius(!important); } -.romo-rm-border-bottom-left-radius { @include rm-border-bottom-left-radius(!important); } + .romo-border-bottom-left-radius, + .romo-border1-bottom-left-radius { @include border1-bottom-left-radius(!important); } + .romo-border0-bottom-left-radius { @include border0-bottom-left-radius(!important); } + .romo-border2-bottom-left-radius { @include border2-bottom-left-radius(!important); } + .romo-rm-border-bottom-left-radius { @include rm-border-bottom-left-radius(!important); } -.romo-border-bottom-left-radius-hover:hover, -.romo-border1-bottom-left-radius-hover:hover { @include border1-bottom-left-radius(!important); } -.romo-border0-bottom-left-radius-hover:hover { @include border0-bottom-left-radius(!important); } -.romo-border2-bottom-left-radius-hover:hover { @include border2-bottom-left-radius(!important); } -.romo-rm-border-bottom-left-radius-hover:hover { @include rm-border-bottom-left-radius(!important); } + .romo-border-bottom-left-radius-hover:hover, + .romo-border1-bottom-left-radius-hover:hover { @include border1-bottom-left-radius(!important); } + .romo-border0-bottom-left-radius-hover:hover { @include border0-bottom-left-radius(!important); } + .romo-border2-bottom-left-radius-hover:hover { @include border2-bottom-left-radius(!important); } + .romo-rm-border-bottom-left-radius-hover:hover { @include rm-border-bottom-left-radius(!important); } -.romo-border-radius-circle { @include border-radius(50%); } -.romo-border-radius-circle-hover:hover { @include border-radius(50%); } -.romo-border-radius-pill { @include border-radius(500px); } -.romo-border-radius-pill-hover:hover { @include border-radius(500px); } + .romo-border-radius-circle { @include border-radius(50%); } + .romo-border-radius-circle-hover:hover { @include border-radius(50%); } + .romo-border-radius-pill { @include border-radius(500px); } + .romo-border-radius-pill-hover:hover { @include border-radius(500px); } -/* spacing */ + /* spacing */ -.romo-pad, -.romo-pad1 { @include pad1(!important); } -.romo-pad0 { @include pad0(!important); } -.romo-pad2 { @include pad2(!important); } -.romo-pad-none, -.romo-rm-pad { @include rm-pad(!important); } + .romo-pad, + .romo-pad1 { @include pad1(!important); } + .romo-pad0 { @include pad0(!important); } + .romo-pad2 { @include pad2(!important); } + .romo-pad-none, + .romo-rm-pad { @include rm-pad(!important); } -.romo-pad-top, -.romo-pad1-top { @include pad1-top(!important); } -.romo-pad0-top { @include pad0-top(!important); } -.romo-pad2-top { @include pad2-top(!important); } -.romo-pad-none-top, -.romo-rm-pad-top { @include rm-pad-top(!important); } + .romo-pad-top, + .romo-pad1-top { @include pad1-top(!important); } + .romo-pad0-top { @include pad0-top(!important); } + .romo-pad2-top { @include pad2-top(!important); } + .romo-pad-none-top, + .romo-rm-pad-top { @include rm-pad-top(!important); } -.romo-pad-right, -.romo-pad1-right { @include pad1-right(!important); } -.romo-pad0-right { @include pad0-right(!important); } -.romo-pad2-right { @include pad2-right(!important); } -.romo-pad-none-right, -.romo-rm-pad-right { @include rm-pad-right(!important); } + .romo-pad-right, + .romo-pad1-right { @include pad1-right(!important); } + .romo-pad0-right { @include pad0-right(!important); } + .romo-pad2-right { @include pad2-right(!important); } + .romo-pad-none-right, + .romo-rm-pad-right { @include rm-pad-right(!important); } -.romo-pad-bottom, -.romo-pad1-bottom { @include pad1-bottom(!important); } -.romo-pad0-bottom { @include pad0-bottom(!important); } -.romo-pad2-bottom { @include pad2-bottom(!important); } -.romo-pad-none-bottom, -.romo-rm-pad-bottom { @include rm-pad-bottom(!important); } + .romo-pad-bottom, + .romo-pad1-bottom { @include pad1-bottom(!important); } + .romo-pad0-bottom { @include pad0-bottom(!important); } + .romo-pad2-bottom { @include pad2-bottom(!important); } + .romo-pad-none-bottom, + .romo-rm-pad-bottom { @include rm-pad-bottom(!important); } -.romo-pad-left, -.romo-pad1-left { @include pad1-left(!important); } -.romo-pad0-left { @include pad0-left(!important); } -.romo-pad2-left { @include pad2-left(!important); } -.romo-pad-none-left, -.romo-rm-pad-left { @include rm-pad-left(!important); } + .romo-pad-left, + .romo-pad1-left { @include pad1-left(!important); } + .romo-pad0-left { @include pad0-left(!important); } + .romo-pad2-left { @include pad2-left(!important); } + .romo-pad-none-left, + .romo-rm-pad-left { @include rm-pad-left(!important); } -.romo-push, -.romo-push1 { @include push1(!important); } -.romo-push0 { @include push0(!important); } -.romo-push2 { @include push2(!important); } -.romo-push-none, -.romo-rm-push { @include rm-push(!important); } + .romo-push, + .romo-push1 { @include push1(!important); } + .romo-push0 { @include push0(!important); } + .romo-push2 { @include push2(!important); } + .romo-push-none, + .romo-rm-push { @include rm-push(!important); } -.romo-push-top, -.romo-push1-top { @include push1-top(!important); } -.romo-push0-top { @include push0-top(!important); } -.romo-push2-top { @include push2-top(!important); } -.romo-push-none-top, -.romo-rm-push-top { @include rm-push-top(!important); } + .romo-push-top, + .romo-push1-top { @include push1-top(!important); } + .romo-push0-top { @include push0-top(!important); } + .romo-push2-top { @include push2-top(!important); } + .romo-push-none-top, + .romo-rm-push-top { @include rm-push-top(!important); } -.romo-push-right, -.romo-push1-right { @include push1-right(!important); } -.romo-push0-right { @include push0-right(!important); } -.romo-push2-right { @include push2-right(!important); } -.romo-push-none-right, -.romo-rm-push-right { @include rm-push-right(!important); } + .romo-push-right, + .romo-push1-right { @include push1-right(!important); } + .romo-push0-right { @include push0-right(!important); } + .romo-push2-right { @include push2-right(!important); } + .romo-push-none-right, + .romo-rm-push-right { @include rm-push-right(!important); } -.romo-push-bottom, -.romo-push1-bottom { @include push1-bottom(!important); } -.romo-push0-bottom { @include push0-bottom(!important); } -.romo-push2-bottom { @include push2-bottom(!important); } -.romo-push-none-bottom, -.romo-rm-push-bottom { @include rm-push-bottom(!important); } + .romo-push-bottom, + .romo-push1-bottom { @include push1-bottom(!important); } + .romo-push0-bottom { @include push0-bottom(!important); } + .romo-push2-bottom { @include push2-bottom(!important); } + .romo-push-none-bottom, + .romo-rm-push-bottom { @include rm-push-bottom(!important); } -.romo-push-left, -.romo-push1-left { @include push1-left(!important); } -.romo-push0-left { @include push0-left(!important); } -.romo-push2-left { @include push2-left(!important); } -.romo-push-none-left, -.romo-rm-push-left { @include rm-push-left(!important); } + .romo-push-left, + .romo-push1-left { @include push1-left(!important); } + .romo-push0-left { @include push0-left(!important); } + .romo-push2-left { @include push2-left(!important); } + .romo-push-none-left, + .romo-rm-push-left { @include rm-push-left(!important); } -.romo-push-center { margin: 0 auto !important; } + .romo-push-center { margin: 0 auto !important; } -/* other helpers */ + /* other helpers */ -.romo-full-width { width: 100% !important; } -.romo-full-height { height: 100% !important; } -.romo-match-line-height { line-height: 1 !important; } + .romo-full-width { width: 100% !important; } + .romo-full-height { height: 100% !important; } + .romo-match-line-height { line-height: 1 !important; } -.romo-nowrap { white-space: nowrap !important; } -.romo-crop { white-space: nowrap !important; overflow: hidden !important; } -.romo-ellipsis { overflow: hidden !important; text-overflow: ellipsis !important; } -.romo-crop-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } + .romo-nowrap { white-space: nowrap !important; } + .romo-crop { white-space: nowrap !important; overflow: hidden !important; } + .romo-ellipsis { overflow: hidden !important; text-overflow: ellipsis !important; } + .romo-crop-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } -.romo-inline { display: inline !important; } -.romo-inline-block { display: inline-block !important; } -.romo-inline-flex { @include display-inline-flex(!important); } -.romo-flex { @include display-flex(!important); } -.romo-block { display: block !important; } -.romo-display-none { display: none !important;} + .romo-inline { display: inline !important; } + .romo-inline-block { display: inline-block !important; } + .romo-inline-flex { @include display-inline-flex(!important); } + .romo-flex { @include display-flex(!important); } + .romo-block { display: block !important; } + .romo-display-none { display: none !important;} -.romo-hover:hover { - .romo-inline-hover { display: inline !important; } - .romo-inline-block-hover { display: inline-block !important; } - .romo-inline-flex-hover { @include display-inline-flex(!important); } - .romo-flex-hover { @include display-flex(!important); } - .romo-block-hover { display: block !important; } - .romo-display-none-hover { display: none !important;} -} + .romo-hover:hover { + .romo-inline-hover { display: inline !important; } + .romo-inline-block-hover { display: inline-block !important; } + .romo-inline-flex-hover { @include display-inline-flex(!important); } + .romo-flex-hover { @include display-flex(!important); } + .romo-block-hover { display: block !important; } + .romo-display-none-hover { display: none !important;} + } -.romo-relative { position: relative !important; } -.romo-absolute { position: absolute !important; } -.romo-absolute-fill { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} -.romo-fixed { position: fixed !important; } + .romo-relative { position: relative !important; } + .romo-absolute { position: absolute !important; } + .romo-absolute-fill { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + .romo-fixed { position: fixed !important; } -.romo-clearfix { @include clearfix; } -.romo-pull-left, -.romo-float-left { float: left !important; } -.romo-pull-right, -.romo-float-right { float: right !important; } + .romo-clearfix { @include clearfix; } + .romo-pull-left, + .romo-float-left { float: left !important; } + .romo-pull-right, + .romo-float-right { float: right !important; } -.romo-overflow-hidden { overflow: hidden !important; } -.romo-overflow-auto { overflow: auto !important; } -.romo-overflow-scroll { overflow: scroll !important; } + .romo-overflow-hidden { overflow: hidden !important; } + .romo-overflow-auto { overflow: auto !important; } + .romo-overflow-scroll { overflow: scroll !important; } -.romo-overflow-x-hidden { overflow-x: hidden !important; } -.romo-overflow-x-auto { overflow-x: auto !important; } -.romo-overflow-x-scroll { overflow-x: scroll !important; } + .romo-overflow-x-hidden { overflow-x: hidden !important; } + .romo-overflow-x-auto { overflow-x: auto !important; } + .romo-overflow-x-scroll { overflow-x: scroll !important; } -.romo-overflow-y-hidden { overflow-y: hidden !important; } -.romo-overflow-y-auto { overflow-y: auto !important; } -.romo-overflow-y-scroll { overflow-y: scroll !important; } + .romo-overflow-y-hidden { overflow-y: hidden !important; } + .romo-overflow-y-auto { overflow-y: auto !important; } + .romo-overflow-y-scroll { overflow-y: scroll !important; } + +}