Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ @import "bourbon"; @import "neat"; @import "grid-settings"; @import "lsow-lib"; /* --------------- Reset styles --------- */ .panel-grid .widget { overflow: initial; } .lsow-container, .lsow-grid-container { box-sizing: border-box; *, *::after, *::before { box-sizing: inherit; } ol, ul, ol > li, ul > li, ol:hover, ul:hover, ul > li:hover, ol > li:hover, ol > li > a, ul > li > a, ol > li > a:hover, ul > li > a:hover, img { padding: 0; margin: 0; border: none; box-shadow: none; list-style: none; background: none; &:before, &:after { display: none; } } a { text-decoration: initial; } img { max-width: 100%; width: auto; height: auto; } } /* ------- General styles ------------ */ .lsow-container { @include lsow-container; margin-left: auto; margin-right: auto; } .panel-grid .widget { border: 0; } .lsow-center { text-align: center; } .lsow-grid-container { @include grid-container; @include grid-collapse(); .lsow-grid-item { min-height: 1px; /* Prevents columns from collapsing when housing absolute elements or when lazy loading content */ } @include grid-media($lsow-mobile-only-grid) { &.lsow-grid-mobile-2 { .lsow-grid-item { @include omega(2n); } } &.lsow-grid-mobile-3 { .lsow-grid-item { @include omega(3n); } } &.lsow-grid-mobile-4 { .lsow-grid-item { @include omega(4n); } } &.lsow-grid-mobile-5 { .lsow-grid-item { @include omega(5n); } } &.lsow-grid-mobile-6 { .lsow-grid-item { @include omega(6n); } } } @include grid-media($lsow-tablet-only-grid) { &.lsow-grid-tablet-2 { .lsow-grid-item { @include omega(2n); } } &.lsow-grid-tablet-3 { .lsow-grid-item { @include omega(3n); } } &.lsow-grid-tablet-4 { .lsow-grid-item { @include omega(4n); } } &.lsow-grid-tablet-5 { .lsow-grid-item { @include omega(5n); } } &.lsow-grid-tablet-6 { .lsow-grid-item { @include omega(6n); } } } @include grid-media($lsow-desktop-grid) { &.lsow-grid-desktop-2 { .lsow-grid-item { @include omega(2n); } } &.lsow-grid-desktop-3 { .lsow-grid-item { @include omega(3n); } } &.lsow-grid-desktop-4 { .lsow-grid-item { @include omega(4n); } } &.lsow-grid-desktop-5 { .lsow-grid-item { @include omega(5n); } } &.lsow-grid-desktop-6 { .lsow-grid-item { @include omega(6n); } } } &.lsow-grid-mobile-1 { .lsow-grid-item { @include grid-column(12); } } &.lsow-grid-mobile-2 { .lsow-grid-item { @include grid-column(6); } } &.lsow-grid-mobile-3 { .lsow-grid-item { @include grid-column(4); } } &.lsow-grid-mobile-4 { .lsow-grid-item { @include grid-column(3); } } &.lsow-grid-mobile-5 { .lsow-grid-item { @include grid-column(1, $lsow-five-col-grid); } } &.lsow-grid-mobile-6 { .lsow-grid-item { @include grid-column(2); } } @include grid-media($lsow-tablet-grid) { &.lsow-grid-tablet-1 { .lsow-grid-item { @include grid-column(12); } } &.lsow-grid-tablet-2 { .lsow-grid-item { @include grid-column(6); } } &.lsow-grid-tablet-3 { .lsow-grid-item { @include grid-column(4); } } &.lsow-grid-tablet-4 { .lsow-grid-item { @include grid-column(3); } } &.lsow-grid-tablet-5 { .lsow-grid-item { @include grid-column(1, $lsow-five-col-grid); } } &.lsow-grid-tablet-6 { .lsow-grid-item { @include grid-column(2); } } } @include grid-media($lsow-desktop-grid) { &.lsow-grid-desktop-1 { .lsow-grid-item { @include grid-column(12); } } &.lsow-grid-desktop-2 { .lsow-grid-item { @include grid-column(6); } } &.lsow-grid-desktop-3 { .lsow-grid-item { @include grid-column(4); } } &.lsow-grid-desktop-4 { .lsow-grid-item { @include grid-column(3); } } &.lsow-grid-desktop-5 { .lsow-grid-item { @include grid-column(1, $lsow-five-col-grid); } } &.lsow-grid-desktop-6 { .lsow-grid-item { @include grid-column(2); } } } } /*--------- Gapless grid columns ----*/ .lsow-gapless-grid { .lsow-grid-container { margin-left: 0; margin-right: 0; width: auto; &.lsow-grid-mobile-1 { .lsow-grid-item { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-mobile-2 { .lsow-grid-item { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-mobile-3 { .lsow-grid-item { @include grid-column(4, $lsow-gapless-grid); } } &.lsow-grid-mobile-4 { .lsow-grid-item { @include grid-column(3, $lsow-gapless-grid); } } &.lsow-grid-mobile-5 { .lsow-grid-item { @include grid-column(1, $lsow-gapless-five-col-grid); } } &.lsow-grid-mobile-6 { .lsow-grid-item { @include grid-column(2, $lsow-gapless-grid); } } @include grid-media($lsow-tablet-grid) { &.lsow-grid-tablet-1 { .lsow-grid-item { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-tablet-2 { .lsow-grid-item { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-tablet-3 { .lsow-grid-item { @include grid-column(4, $lsow-gapless-grid); } } &.lsow-grid-tablet-4 { .lsow-grid-item { @include grid-column(3, $lsow-gapless-grid); } } &.lsow-grid-tablet-5 { .lsow-grid-item { @include grid-column(1, $lsow-gapless-five-col-grid); } } &.lsow-grid-tablet-6 { .lsow-grid-item { @include grid-column(2, $lsow-gapless-grid); } } } @include grid-media($lsow-desktop-grid) { &.lsow-grid-desktop-1 { .lsow-grid-item { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-desktop-2 { .lsow-grid-item { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-desktop-3 { .lsow-grid-item { @include grid-column(4, $lsow-gapless-grid); } } &.lsow-grid-desktop-4 { .lsow-grid-item { @include grid-column(3, $lsow-gapless-grid); } } &.lsow-grid-desktop-5 { .lsow-grid-item { @include grid-column(1, $lsow-gapless-five-col-grid); } } &.lsow-grid-desktop-6 { .lsow-grid-item { @include grid-column(2, $lsow-gapless-grid); } } } } } /* ---------- Masonry Layout Grid columns -------------*/ .lsow-gapless-grid .lsow-masonry { /* Clear the omega for masonry layout */ .lsow-grid-item { clear: none !important; } .lsow-grid-sizer { @include grid-column(1, $lsow-gapless-grid); } &.lsow-grid-mobile-1 { .lsow-grid-item.lsow-wide { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-mobile-2 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); // keep it small for now } } &.lsow-grid-mobile-3 { .lsow-grid-item.lsow-wide { @include grid-column(8, $lsow-gapless-grid); } } &.lsow-grid-mobile-4 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-mobile-5 { .lsow-grid-item.lsow-wide { @include grid-column(2, $lsow-gapless-five-col-grid); } } &.lsow-grid-mobile-6 { .lsow-grid-item.lsow-wide { @include grid-column(4, $lsow-gapless-grid); } } @include grid-media($lsow-tablet-grid) { &.lsow-grid-tablet-1 { .lsow-grid-item.lsow-wide { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-tablet-2 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); // keep it small for now } } &.lsow-grid-tablet-3 { .lsow-grid-item.lsow-wide { @include grid-column(8, $lsow-gapless-grid); } } &.lsow-grid-tablet-4 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-tablet-5 { .lsow-grid-item.lsow-wide { @include grid-column(2, $lsow-gapless-five-col-grid); } } &.lsow-grid-tablet-6 { .lsow-grid-item.lsow-wide { @include grid-column(4, $lsow-gapless-grid); } } } @include grid-media($lsow-desktop-grid) { &.lsow-grid-desktop-1 { .lsow-grid-item.lsow-wide { @include grid-column(12, $lsow-gapless-grid); } } &.lsow-grid-desktop-2 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); // keep it small for now } } &.lsow-grid-desktop-3 { .lsow-grid-item.lsow-wide { @include grid-column(8, $lsow-gapless-grid); } } &.lsow-grid-desktop-4 { .lsow-grid-item.lsow-wide { @include grid-column(6, $lsow-gapless-grid); } } &.lsow-grid-desktop-5 { .lsow-grid-item.lsow-wide { @include grid-column(2, $lsow-gapless-five-col-grid); } } &.lsow-grid-desktop-6 { .lsow-grid-item.lsow-wide { @include grid-column(4, $lsow-gapless-grid); } } } } /* --------------- Flexslider Styles -------------- */ .lsow-container { .lsow-thumbnailslider.lsow-flexslider { margin-top: 15px; .lsow-slide { margin: 0 5px 0 0; img { display: block; opacity: .5; cursor: pointer; &:hover { opacity: 1; } } &.lsow-flex-active-slide img { opacity: 1; cursor: default; } } } .lsow-flex-direction-nav { padding: 0 !important; margin: 0 !important; } .lsow-flex-direction-nav li { position: initial; } .lsow-flex-direction-nav a, .lsow-flex-direction-nav a:hover { opacity: 1; text-shadow: none; background: none; color: #888; @include lsow-icon-font(); font-size: 24px; width: 28px; height: 28px; margin: -14px 0 0; bottom: initial; left: initial; right: initial; top: 50%; text-indent: 0; text-align: center; color: #aaa; transition: all 0.3s ease-in-out 0s; outline: none; &:before { margin: 2px; vertical-align: middle; display: inline; font-family: inherit !important; opacity: 1; } .lsow-dark-bg & { color: #888; &:hover { color: #aaa; } } @include respond-to-max(960) { display: none; /* Let users navigate via touch */ } } .lsow-flex-direction-nav a.lsow-flex-prev { left: -30px; &:before { content: "\e900"; } } .lsow-flex-direction-nav a.lsow-flex-next { right: -30px; &:before { content: "\e901"; } } .lsow-flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; padding: 0 !important; margin: 0 !important; li, li:hover { margin: 0 8px 0 0; padding: 0; border: none; box-shadow: none; } li a, li a:hover { background: #aaa; border: 1px solid #aaa; border-radius: 50%; width: 12px; height: 12px; box-shadow: none; transition: all 0.2s ease-in 0s; display: inline-block; vertical-align: middle; outline: none; .lsow-dark-bg & { background: #ccc; border-color: #ccc; } } li a.lsow-flex-active, li a:hover.lsow-flex-active, li a:hover { background: none; } li a.lsow-flex-active, li a:hover.lsow-flex-active { width: 14px; height: 14px; } } .lsow-flex-control-thumbs { bottom: -120px; @include respond-to-max(600) { bottom: -80px; } li { width: auto; float: none; img { max-width: 100%; width: 150px; @include respond-to-max(600) { width: 100px; } } } } } /* Sleek Carousel Styles */ .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } .lsow-container { button.slick-prev, button.slick-next { position: absolute; bottom: initial; left: initial; right: initial; top: 50%; width: 28px; height: 28px; margin: -14px 0 0; &, &:before, &:after { text-shadow: none; background: none !important; border: none; padding: 0; opacity: 1; @include lsow-icon-font(); font-size: 24px; color: #aaa !important; overflow: hidden; box-shadow: none; outline: none; text-indent: 0; text-align: center; transition: all 0.3s ease-in-out 0s; } &:before { margin: 2px; vertical-align: middle; } &:hover { &:before, &:after { color: #888 !important; } } .lsow-dark-bg & { &:before, &:after { color: #888 !important; } &:hover { &:before, &:after { color: #aaa !important; background: none !important; } } } @include respond-to-max(1024) { display: none !important; /* Let users navigate via touch */ } } button.slick-prev { left: -40px; &:before { content: "\e900"; } } button.slick-next { right: -40px; &:before { content: "\e901"; } } ul.slick-dots { width: 100%; position: absolute; bottom: -30px; text-align: center; padding: 0 !important; margin: 0 !important; li { margin: 0 8px 0 0 !important; padding: 0 !important; display: inline-block; font-size: 0; } li button { padding: 0; background: #aaa; border: 1px solid #aaa; border-radius: 50%; width: 12px; height: 12px; box-shadow: none; transition: background 0.3s ease-in-out 0s; font-size: 0; outline: none; .lsow-dark-bg & { background: #888 !important; border-color: #888 !important; } } li button:hover, li.slick-active button { background: none !important; border-color: #aaa !important; } li.slick-active button { width: 14px; height: 14px; } } } /* -------- Widget separator headline ------------ */ .lsow-widget-heading { @include lsow-heading-style(); font-size: 40px; line-height: 52px; text-align: center; @include respond-to-max(767) { font-size: 32px; line-height: 44px; } } /* --------------- Button CSS -------------------- */ input.lsow-button, button.lsow-button, a.lsow-button, .lsow-button:active, .lsow-button:visited { display: inline-block; text-align: center; line-height: 1; cursor: pointer; -webkit-appearance: none; vertical-align: middle; border: 1px solid transparent; border-radius: 3px; padding: 16px 40px; margin: 0; font-size: 12px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; background-color: #f94213; color: #fefefe; outline: none; transition: all 0.4s ease-in-out 0s; &.lsow-rounded { border-radius: 999px; } &.lsow-large { padding: 20px 60px; } &.lsow-small { padding: 12px 25px; font-size: 11px; } &:hover { background-color: #f9633e; color: #fefefe; } img, span.lsow-icon { margin-right: 10px; } } $skin-names: ("black", "blue", "cyan", "green", "orange", "pink", "red", "teal"); $color-collection: (#363636, #46a5d5, #57c0dc, #00a57d, #e87151, #dd5679, #da4f49, #28c2ba); @for $i from 0 to length($skin-names) { $skin-name: nth($skin-names, $i+1); $skin-color: nth($color-collection, $i+1); .lsow-button.lsow-#{$skin-name} { background-color: $skin-color; } .lsow-button.lsow-#{$skin-name}:hover { background-color: lighten($skin-color, 5%); } } .lsow-button.lsow-trans { color: #333; background-color: transparent; /* IE */ background-color: rgba(0, 0, 0, 0); border: 2px solid #a5a5a5; &:hover { background-color: #fff; color: #333 !important; border-color: #fff; } } .lsow-button.lsow-semitrans { color: #fff; background-color: transparent; /* IE */ background-color: rgba(125, 125, 125, 0.5); &:hover { background-color: #fff; color: #333 !important; } } .lsow-clear { clear: both; } /*------------- Powertip Tooltip ----------- */ /* PowerTip Plugin */ #powerTip { cursor: default; background-color: #333; background-color: rgba(0, 0, 0, 0.8); border-radius: 6px; color: #fff; display: none; padding: 10px; position: absolute; white-space: nowrap; z-index: 2147483647; } #powerTip:before { content: ""; position: absolute; } #powerTip.n:before, #powerTip.s:before { border-right: 5px solid transparent; border-left: 5px solid transparent; left: 50%; margin-left: -5px; } #powerTip.e:before, #powerTip.w:before { border-bottom: 5px solid transparent; border-top: 5px solid transparent; margin-top: -5px; top: 50%; } #powerTip.n:before { border-top: 10px solid #333; border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: -10px; } #powerTip.e:before { border-right: 10px solid #333; border-right: 10px solid rgba(0, 0, 0, 0.8); left: -10px; } #powerTip.s:before { border-bottom: 10px solid #333; border-bottom: 10px solid rgba(0, 0, 0, 0.8); top: -10px; } #powerTip.w:before { border-left: 10px solid #333; border-left: 10px solid rgba(0, 0, 0, 0.8); right: -10px; } #powerTip.ne:before, #powerTip.se:before { border-right: 10px solid transparent; border-left: 0; left: 10px; } #powerTip.nw:before, #powerTip.sw:before { border-left: 10px solid transparent; border-right: 0; right: 10px; } #powerTip.ne:before, #powerTip.nw:before { border-top: 10px solid #333; border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: -10px; } #powerTip.se:before, #powerTip.sw:before { border-bottom: 10px solid #333; border-bottom: 10px solid rgba(0, 0, 0, 0.8); top: -10px; } #powerTip.nw-alt:before, #powerTip.ne-alt:before, #powerTip.sw-alt:before, #powerTip.se-alt:before { border-top: 10px solid #333; border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; left: 10px; } #powerTip.ne-alt:before { left: auto; right: 10px; } #powerTip.sw-alt:before, #powerTip.se-alt:before { border-top: none; border-bottom: 10px solid #333; border-bottom: 10px solid rgba(0, 0, 0, 0.8); bottom: auto; top: -10px; } #powerTip.se-alt:before { left: auto; right: 10px; }