@import 'css/romo/vars'; @import 'css/romo/mixins'; /* Globals */ /* ------- */ *, *:before, *:after { @include border-box; } html, body { height: 100%; } body { @include rm-push; @include bg-base; color: $baseColor; font-weight: normal; } *, legend { @include border-base; } 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; } ul, ol { @include list-styled; } img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /* Typography */ /* ---------- */ body { font-family: $baseFontFamily; font-size: $baseFontSize; line-height: $baseLineHeight; } 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; } 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.romo-text { color: $baseColor; text-decoration: none; } .romo-pointer { cursor: pointer; } .romo-grab { @include cursor-grab; } .romo-grabbing { @include cursor-grabbing; } /* images */ .romo-img-rounded { @include border-radius(6px); } .romo-img-circle { @include border-radius(500px); } .romo-img-card { padding: 3px; background-color: $baseBackground; 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-img0 { height: $imgHeight0 !important; } .romo-img1 { height: $imgHeight1 !important; } .romo-img2 { height: $imgHeight2 !important; } .romo-img3 { height: $imgHeight3 !important; } .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; } /* 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; } /* text size */ .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-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); } /* 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-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 */ .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); } /* alignment */ .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); } /* color emphasis */ .romo-bg-base { @include bg-base(!important); } .romo-bg-alt { @include bg-alt(!important); } .romo-bg-hover { @include bg-hover(!important); } .romo-border-base { @include border-base(!important); } .romo-border-alt { @include border-alt(!important); } .romo-text-border-base { @include text-border-base(!important); } .romo-text-border-alt { @include text-border-alt(!important); } .romo-text-muted { @include text-muted(!important); } .romo-text-warning { @include text-warning(!important); } .romo-text-error { @include text-error(!important); } .romo-text-info { @include text-info(!important); } .romo-text-success { @include text-success(!important); } .romo-text-inverse { @include text-inverse(!important); } .romo-text-muted-hover:hover, a.romo-text-muted:hover, a.romo-text-muted:focus { @include text-muted-hover(!important); } .romo-text-warning-hover:hover, a.romo-text-warning:hover, a.romo-text-warning:focus { @include text-warning-hover(!important); } .romo-text-error-hover:hover, a.romo-text-error:hover, a.romo-text-error:focus { @include text-error-hover(!important); } .romo-text-info-hover:hover, a.romo-text-info:hover, a.romo-text-info:focus { @include text-info-hover(!important); } .romo-text-success-hover:hover, a.romo-text-success:hover, a.romo-text-success:focus { @include text-success-hover(!important); } .romo-text-inverse-hover:hover, a.romo-text-inverse:hover, a.romo-text-inverse:focus { @include text-inverse-hover(!important); } .romo-bg-muted { @include bg-muted(!important); } .romo-bg-warning { @include bg-warning(!important); } .romo-bg-error { @include bg-error(!important); } .romo-bg-info { @include bg-info(!important); } .romo-bg-success { @include bg-success(!important); } .romo-bg-inverse { @include bg-inverse(!important); } .romo-bg-muted-hover:hover, a.romo-bg-muted:hover, a.romo-bg-muted:focus { @include bg-muted-hover(!important); } .romo-bg-warning-hover:hover, a.romo-bg-warning:hover, a.romo-bg-warning:focus { @include bg-warning-hover(!important); } .romo-bg-error-hover:hover, a.romo-bg-error:hover, a.romo-bg-error:focus { @include bg-error-hover(!important); } .romo-bg-info-hover:hover, a.romo-bg-info:hover, a.romo-bg-info:focus { @include bg-info-hover(!important); } .romo-bg-success-hover:hover, a.romo-bg-success:hover, a.romo-bg-success:focus { @include bg-success-hover(!important); } .romo-bg-inverse-hover:hover, a.romo-bg-inverse:hover, a.romo-bg-inverse:focus { @include bg-inverse-hover(!important); } .romo-border-muted { @include border-muted(!important); } .romo-border-warning { @include border-warning(!important); } .romo-border-error { @include border-error(!important); } .romo-border-info { @include border-info(!important); } .romo-border-success { @include border-success(!important); } .romo-border-inverse { @include border-inverse(!important); } .romo-border-muted-hover:hover, a.romo-border-muted:hover, a.romo-border-muted:focus { @include border-muted(!important); } .romo-border-warning-hover:hover, a.romo-border-warning:hover, a.romo-border-warning:focus { @include border-warning(!important); } .romo-border-error-hover:hover, a.romo-border-error:hover, a.romo-border-error:focus { @include border-error(!important); } .romo-border-info-hover:hover, a.romo-border-info:hover, a.romo-border-info:focus { @include border-info(!important); } .romo-border-success-hover:hover, a.romo-border-success:hover, a.romo-border-success:focus { @include border-success(!important); } .romo-border-inverse-hover:hover, a.romo-border-inverse:hover, a.romo-border-inverse:focus { @include border-inverse(!important); } /* Scaffolding */ /* ----------- */ /* 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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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); } /* 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-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-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-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-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-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; } /* other helpers */ .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-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-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-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-y-hidden { overflow-y: hidden !important; } .romo-overflow-y-auto { overflow-y: auto !important; } .romo-overflow-y-scroll { overflow-y: scroll !important; }