Skip to content

Instantly share code, notes, and snippets.

@judetucker

judetucker/responsive.dff

Forked from anonymous/-
Last active September 15, 2015 00:05
Show Gist options
  • Save judetucker/ca240906bebff58eae79 to your computer and use it in GitHub Desktop.
Save judetucker/ca240906bebff58eae79 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive.dff
11c11
< .visible-xlg {
---
> .visible-xlg {
17,32d16
<
<
< .quickview-wrapper .tab-content #quickview-notes > .inner{
< width:570px;
< }
<
< .container-fluid{
< &.container-fixed-lg{
< width: @layout-container-fixed-lg;
< margin-right: auto;
< margin-left: auto;
< }
< }
< .menu-pin .container-fluid.container-fixed-lg{
< width: @layout-container-fixed-lg - @layout-sidepanel-pin-width;
< }
38a23
> }
40,161c25,98
< .col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11 {
< float: left;
< min-height: 1px;
< padding-left: 15px;
< padding-right: 15px;
< position: relative;
< }
< .col-xlg-12 {
< float: left;
< min-height: 1px;
< padding-left: 15px;
< padding-right: 15px;
< position: relative;
< width: 100%;
< }
< .col-xlg-11 {
< width: 91.6667%;
< }
< .col-xlg-10 {
< width: 83.3333%;
< }
< .col-xlg-9 {
< width: 75%;
< }
< .col-xlg-8 {
< width: 66.6667%;
< }
< .col-xlg-7 {
< width: 58.3333%;
< }
< .col-xlg-6 {
< width: 50%;
< }
< .col-xlg-5 {
< width: 41.6667%;
< }
< .col-xlg-4 {
< width: 33.3333%;
< }
< .col-xlg-3 {
< width: 25%;
< }
< .col-xlg-2 {
< width: 16.6667%;
< }
< .col-xlg-1 {
< width: 8.33333%;
< }
< .col-xlg-pull-12 {
< right: 100%;
< }
< .col-xlg-pull-11 {
< right: 91.6667%;
< }
< .col-xlg-pull-10 {
< right: 83.3333%;
< }
< .col-xlg-pull-9 {
< right: 75%;
< }
< .col-xlg-pull-8 {
< right: 66.6667%;
< }
< .col-xlg-pull-7 {
< right: 58.3333%;
< }
< .col-xlg-pull-6 {
< right: 50%;
< }
< .col-xlg-pull-5 {
< right: 41.6667%;
< }
< .col-xlg-pull-4 {
< right: 33.3333%;
< }
< .col-xlg-pull-3 {
< right: 25%;
< }
< .col-xlg-pull-2 {
< right: 16.6667%;
< }
< .col-xlg-pull-1 {
< right: 8.33333%;
< }
< .col-xlg-pull-0 {
< right: 0;
< }
< .col-xlg-push-12 {
< left: 100%;
< }
< .col-xlg-push-11 {
< left: 91.6667%;
< }
< .col-xlg-push-10 {
< left: 83.3333%;
< }
< .col-xlg-push-9 {
< left: 75%;
< }
< .col-xlg-push-8 {
< left: 66.6667%;
< }
< .col-xlg-push-7 {
< left: 58.3333%;
< }
< .col-xlg-push-6 {
< left: 50%;
< }
< .col-xlg-push-5 {
< left: 41.6667%;
< }
< .col-xlg-push-4 {
< left: 33.3333%;
< }
< .col-xlg-push-3 {
< left: 25%;
< }
< .col-xlg-push-2 {
< left: 16.6667%;
< }
< .col-xlg-push-1 {
< left: 8.33333%;
---
> /*** Desktops & Laptops ***/
> @media only screen and (min-width: 980px) {
> .menu-content{
> -webkit-transform: none !important;
> -ms-transform: none !important;
> transform: none !important;
> }
> .menu{
> -webkit-transform: none !important;
> -ms-transform: none !important;
> transform: none !important;
> display: initial !important;
> }
> }
>
> /*** General Desktops ***/
> @media only screen and (min-width: 1200px) {
> .vcenter {
> position: relative;
> .translateY(50%);
> }
> }
>
> /*** General Small Screen Desktops ***/
> @media only screen and (max-width: 1200px) {
>
> }
>
> /*** General tablets and phones ***/
> @media (max-width: 991px) {
>
> .header .menu > li{
> display: block;
> }
> .header .menu-content .header-inner{
> line-height: 0 !important;
> }
> .menu-content{
> display: none;
> position: fixed;
> top:0;
> bottom: 0;
> height: 100%;
> width: 250px;
> background-color: #fff;
> z-index: 10;
> overflow-y: auto;
> }
> body.menu-opened > .header:before{
> position: fixed;
> width: 100%;
> height: 100%;
> top: 0;
> background-color: rgba(0, 0, 0, 0.5);
> z-index: 10;
> content: ''
> }
> }
>
> /* Landscape view of all tablet devices */
> @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
>
> }
>
> // Make all columns equal height
> // (Not applied for resolutions lowers than mentioned ex:lg,md,sm
> // because they stack up)
> @media (min-width:1200px){
> .row-same-height{
> overflow: hidden;
> & > [class*="col-lg"]{
> margin-bottom: -99999px;
> padding-bottom: 99999px;
> }
163,164c100,109
< .col-xlg-push-0 {
< left: 0;
---
> }
>
> /* Margin Helps : MD : 1024 - 768 */
> @media (max-width:1024px){
> .generate-paddings-options-md(4);
>
> .generate-paddings-options-md(@n, @i: 0) when (@i =< @n) {
> @step : @i*5;
> .md-p-t-@{step} {
> padding-top: (@step*1px) !important;
166,167c111,112
< .col-xlg-offset-12 {
< margin-left: 100%;
---
> .md-p-r-@{step} {
> padding-right: (@step*1px) !important;
169,170c114,115
< .col-xlg-offset-11 {
< margin-left: 91.6667%;
---
> .md-p-l-@{step} {
> padding-left: (@step*1px) !important;
172,173c117,118
< .col-xlg-offset-10 {
< margin-left: 83.3333%;
---
> .md-p-b-@{step} {
> padding-bottom: (@step*1px) !important;
175,176c120,121
< .col-xlg-offset-9 {
< margin-left: 75%;
---
> .md-padding-@{step} {
> padding: (@step*1px) !important;
178,179c123,131
< .col-xlg-offset-8 {
< margin-left: 66.6667%;
---
> .generate-paddings-options-md(@n, (@i + 1));
> }
>
> .generate-margin-options-md(4);
>
> .generate-margin-options-md(@n, @i: 1) when (@i =< @n) {
> @step : @i*5;
> .md-m-t-@{step} {
> margin-top: (@step*1px) !important;
181,182c133,134
< .col-xlg-offset-7 {
< margin-left: 58.3333%;
---
> .md-m-r-@{step} {
> margin-right: (@step*1px) !important;
184,185c136,137
< .col-xlg-offset-6 {
< margin-left: 50%;
---
> .md-m-l-@{step} {
> margin-left: (@step*1px) !important;
187,188c139,140
< .col-xlg-offset-5 {
< margin-left: 41.6667%;
---
> .md-m-b-@{step} {
> margin-bottom: (@step*1px) !important;
190,191c142,214
< .col-xlg-offset-4 {
< margin-left: 33.3333%;
---
> .generate-margin-options-md(@n, (@i + 1));
> }
> .md-no-margin {
> margin: 0px !important;
> }
> .md-no-padding {
> padding: 0px !important;
> }
> .md-image-responsive-width{
> height: 100%;
> width: auto;
> }
> .md-image-responsive-height{
> width: 100%;
> height: auto;
> }
> }
>
> // SM : Small screen resolutions
> @media (max-width:991px){
> /** Responsive Smart Header ***/
> .header{
> &.dark,
> &.light,
> &.light-solid,
> &.transparent-dark,
> &.transparent-light{
> .menu-content{
> .menu > li > a:not(.btn){
> &:hover,&:active{
> opacity: 0.7
> }
> &:visited,&:focus{
> opacity: 0.7
> }
> &.active{
> background-color:@color-black;
> color: @color-white;
> }
> }
> &.mobile-dark{
> a:not(.btn){
> color:@color-menu-light !important;
> &:hover,&:active{
> color:@color-menu-link-hover !important;
> }
> &:visited,&:focus{
> color:@color-menu-light;
> }
> &.active{
> color: #fff;
> }
> }
> &.mobile-dark{
> p{
> color:@color-menu-light;
> }
> .menu > li > a:not(.btn){
> color:@color-menu-light;
> &:hover,&:active{
> color:@color-menu-link-hover !important;
> }
> &:visited,&:focus{
> color:@color-menu-light;
> }
> &.active{
> background-color:@color-menu-darker;
> color: #fff ;
> }
> }
> }
> }
> }
193,194c216,219
< .col-xlg-offset-3 {
< margin-left: 25%;
---
> .menu > li > a{
> &:before, & > span:before{
> display: none;
> }
196,197c221,222
< .col-xlg-offset-2 {
< margin-left: 16.6667%;
---
> &:last-child.header{
> top: -200%;
199,200c224,225
< .col-xlg-offset-1 {
< margin-left: 8.33333%;
---
> &.bg-header .menu-content .header-inner{
> line-height: initial;
202,203c227,246
< .col-xlg-offset-0 {
< margin-left: 0;
---
> }
> .menu-content{
> .menu > li.classic > nav ul,
> .menu > li.horizontal > nav,
> .menu > li.mega .container
> {
> background-color: @color-master-lighter;
> }
> &.mobile-dark{
> background-color:@color-menu !important;
> .menu > li.classic > nav ul,
> .menu > li.horizontal > nav,
> .menu > li.mega .container
> {
> background-color: @color-menu-dark;
> }
> ul li .sub-menu-heading{
> color: @color-white !important;
> opacity: 1;
> }
204a248,249
> .menu > li.mega .container{
> margin-top: 0;
206,219d250
< }
< /*** Desktops ***/
< @media (min-width: 1600px) {
< }
< /*** Medium Size Screen ***/
< @media only screen and (max-width: 1400px) {
<
< .page-sidebar .page-sidebar-inner .sidebar-slide {
< .sidebar-menu{
< bottom:50px;
< }
< .sidebar-widgets{
< display: none
< }
221,222c252,253
< .footer-widget{
< padding: 11px 21px !important;
---
> .menu > li > a:not(.btn){
> margin-bottom: 0 !important;
224,306c255,270
< }
< /*** Desktops & Laptops ***/
< @media only screen and (min-width: 980px) {
< body{
< &.ie9.menu-pin{
< .page-sidebar{
< transform: none !important;
< -webkit-transform: none !important;
< -ms-transform: none !important;
< }
< }
< &.menu-pin{
< overflow-x: hidden;
< .header .brand{
< width: 245px;
< }
< .page-container{
< padding-left: 0;
< .page-content-wrapper {
< .content{
< padding-left:@layout-sidepanel-pin-width;
< }
< .footer{
< left: @layout-sidepanel-pin-width;
< }
< }
< }
< [data-toggle-pin="sidebar"]{
< & > i:before{
< content: "\f192";
< }
< }
< .page-sidebar{
< transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed , 0) !important;
< -webkit-transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed, 0) !important;
< -ms-transform: translate(@layout-sidepanel-width - @layout-sidepanel-width-collapsed, 0) !important;
< width: @layout-sidepanel-pin-width;
< .sidebar-header .sidebar-header-controls {
< transform: translateX(18px);
< -webkit-transform: translateX(18px);
< }
< .menu-items .icon-thumbnail {
< transform: translate3d(-14px, 0, 0);
< -webkit-transform: -webkit-translate3d(-14px, 0, 0);
< }
< }
< }
< &.menu-behind{
< .page-sidebar{
< z-index: @zIndex-navbar - 1;
< }
< .header .brand{
< width: 200px;
< text-align: left;
< padding-left: 20px;
< }
< }
< &.box-layout{
< background-color:@color-white;
< & > .container{
< height: 100%;
< padding: 0;
< background-color: @color-master-lightest;
< }
< .header{
< background-color:transparent;
< border: 0;
< padding: 0;
< & > .container {
< background-color: #fff;
< border-bottom: 1px solid rgba(230, 230, 230, 0.7);
< padding: 0 20px 0 0;
< }
< }
< .page-sidebar{
< left: auto;
< transform: none !important;
< -webkit-transform: none !important;
< }
< .page-container .page-content-wrapper .footer{
< width: auto;
< }
<
---
> ul {
> width: 100%;
> padding: 0;
> li{
> // font-size: 16px;
> padding:0;
> //margin: 0 !important;
> margin-right: 0 !important;
> a{
> opacity: 1 !important;
> padding:10px 10px 10px 35px;
> }
> .sub-menu-heading{
> padding:20px 10px 10px 35px;
> opacity: 0.5;
> }
308a273
> }
310,326c275,290
<
< .header {
< .brand{
< position: relative;
< }
< .user-info-wrapper {
< .user-details {
< .user-name {
< font-size: 16px;
< }
< .user-other {
< font-size: 10px;
< }
< }
< .user-pic {
< position: relative;
< top: -6px;
---
> .slideFromLeft();
> .slideFromRight();
> .header .menu > li{
> & > .classic{
> top: 0 !important;
> position: relative;
> left: auto;
> right: auto;
> margin-left:0;
> &:before,&:after, .arrow{
> display: none;
> }
> ul > li{
> margin: 5px 0;
> &:first-child{
> margin-top:17px;
328,351c292,293
< }
< }
<
< .notification-panel{
< width: 400px;
< }
<
< }
< /*** General Small Screen Desktops ***/
<
<
< /*** General tablets and phones ***/
< @media (max-width: 991px) {
<
< .page-container{
< padding-left: 0;
< }
<
< body{
< &.sidebar-open{
< .page-container{
< .translate3d(250px,0,0);
< overflow: hidden;
< position: fixed;
---
> &:last-child{
> margin-bottom:17px;
352a295,304
> }
> }
> & > .mega{
> position: relative;
> margin-top:0;
> border:0;
> .container{
> padding-top: 15px;
> padding-bottom: 15px;
> padding-left: 0;
354,365c306,318
< &.box-layout{
< & > .container{
< padding: 0;
< height: 100%;
< }
< .header{
< & > .container {
< padding: 0;
< .pull-right .sm-action-bar{
< right: 0;
< }
< }
---
> }
> & > .horizontal{
> position: relative;
> margin-top:0;
> border:0;
> .container{
> padding:0;
> & > ul{
> padding: 15px 0;
> margin: 0;
> & > li{
> margin: 5px;
> display: block;
366a320
> }
368,390c322,325
< }
< .header {
< padding: 0 10px;
< width: 100%;
< border-bottom: 1px solid rgba(0,0,0,.07);
< background: #fff !important;
< .header-inner{
< text-align: center;
< .toggle-sidebar{
< display: block;
< position: absolute;
< left: 23px;
< }
< .mark-email{
< left: 45px;
< position: absolute;
< top: 23px;
< }
< .quickview-link{
< position: absolute;
< right: 0;
< top: 12px;
< }
---
> }
> &.horizontal{
> & > span.arrow{
> display: none;
392,393c327,330
< .brand{
< width: auto;
---
> }
> &.mega{
> & > span.arrow{
> display: none;
395,397c332,333
< .notification-list, .search-link{
< display: none;
< }
---
> }
> }
399,431c335
< & > .pull-left, & > .pull-right{
< position: relative;
< }
< & > .pull-right{
< .sm-action-bar{
< right: 0;
< }
< }
< }
< .sm-action-bar{
< position: absolute;
< top: 50%;
< -webkit-transform: translateY(-50%);
< transform: translateY(-50%);
< z-index: 10;
< & > a{
< padding: 10px;
< display: inline-block;
< }
< }
< .pace .pace-activity{
< top: 60px;
< }
< .page-sidebar {
< width: 250px;
< z-index: auto;
< left: 0 !important;
< -webkit-transform: translate3d(0, 0px, 0px) !important;
< transform: translate3d(0, 0px, 0px) !important;
< .sidebar-menu .menu-items > li ul.sub-menu > li{
< padding: 0px 30px 0 36px;
< }
< }
---
> .generate-paddings-options-sm(6);
433,442c337,340
< .page-container{
< padding-left: 0;
< // z-index: 100;
< position: relative;
< transition: transform .25s ease;
< -webkit-transition: -webkit-transform .25s ease;
< .page-content-wrapper .content{
< overflow-x: hidden;
< height: auto; // minimizes address bar on scroll
< }
---
> .generate-paddings-options-sm(@n, @i: 0) when (@i =< @n) {
> @step : @i*5;
> .sm-p-t-@{step} {
> padding-top: (@step*1px) !important;
444,446c342,343
<
< .icon-thumbnail{
< margin-right: 24px;
---
> .sm-p-r-@{step} {
> padding-right: (@step*1px) !important;
448,485c345,346
< .page-sidebar {
< display: none;
< z-index: auto;
< &.visible {
< display: block;
< }
< .page-sidebar-inner{
< z-index: 1;
< left: 0 !important;
< width: 260px;
< .sidebar-slide{
< .sidebar-menu{
< overflow: scroll;
< -webkit-overflow-scrolling: touch;
< top:40px;
< bottom: 0;
< ul > li > a > .badge{
< display: inline-block;
< }
< }
< }
< }
< }
< .secondary-sidebar{
< float: none;
< height: auto;
< left: 50%;
< margin-left: -125px;
< padding: 20px;
< position: absolute;
< right: 0;
< top: 60px;
< z-index: 9999;
< display: none;
< border-radius: 10px;
< .btn-compose{
< display: none;
< }
---
> .sm-p-l-@{step} {
> padding-left: (@step*1px) !important;
487,488c348,349
< .inner-content{
< margin: 0;
---
> .sm-p-b-@{step} {
> padding-bottom: (@step*1px) !important;
490,510c351,352
< .breadcrumb{
< padding-left:15px;
< padding-right:15px;
< }
< .copyright{
< padding-left:15px;
< padding-right:15px;
< }
<
< // Pages Notification customizations
< body > .pgn-wrapper[data-position="top"] {
< top: @layout-mobile-header-height;
< left: 0;
< }
< body > .pgn-wrapper[data-position="bottom"] {
< left: 0;
< }
<
< body > .pgn-wrapper[data-position$='-left'] {
< left: 20px;
< right: auto;
---
> .sm-padding-@{step} {
> padding: (@step*1px) !important;
511a354,355
> .generate-paddings-options-sm(@n, (@i + 1));
> }
513,522c357
< .sm-table{
< display: table;
< width: 100%;
< }
< .user-profile-wrapper{
< position: absolute;
< right: 50px;
< top: -9px;
< }
< /*** Horizontal Menu **/
---
> .generate-margin-options-sm(6);
524,552c359,362
< .horizontal-menu .bar {
< background-color: #fff;
< display: none;
< .bar-inner {
< display: block;
< max-height: 400px;
< overflow: scroll;
< -webkit-overflow-scrolling: touch;
< & > ul > li {
< display: block;
< .classic {
< position: relative;
< background-color: transparent;
< top: 0;
< }
< & .mega,
< &.horizontal {
< position: relative;
< }
< & > .horizontal {
< position: relative;
< top: 0;
< border-bottom: 0;
< li {
< display: block;
< }
< }
< }
< }
---
> .generate-margin-options-sm(@n, @i: 1) when (@i =< @n) {
> @step : @i*5;
> .sm-m-t-@{step} {
> margin-top: (@step*1px) !important;
554,568c364,365
< }
<
< /* Landscape view of all tablet devices */
< @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
< .page-sidebar .sidebar-menu .menu-items ul{
< -webkit-transform:translateZ(0);
< -webkit-backface-visibility: hidden;
< -webkit-perspective: 1000;
< }
< .page-container{
< .page-content-wrapper{
< .content {
< padding-top: @layout-header-height;
< }
< }
---
> .sm-m-r-@{step} {
> margin-right: (@step*1px) !important;
570,571c367,368
< body.box-layout > .container{
< width: 100%;
---
> .sm-m-l-@{step} {
> margin-left: (@step*1px) !important;
573,576c370,371
< .error-page{
< .error-container{
< width: auto;
< }
---
> .sm-m-b-@{step} {
> margin-bottom: (@step*1px) !important;
578c373,419
< }
---
> .generate-margin-options-sm(@n, (@i + 1));
> }
> .sm-no-margin {
> margin: 0px !important;
> }
> .sm-no-padding {
> padding: 0px !important;
> }
> .sm-text-right{
> text-align: right !important;
> }
> .sm-text-left{
> text-align: left !important;
> }
> .sm-text-center{
> text-align: center !important;
> }
> .sm-pull-right{
> float: right !important;
> }
> .sm-pull-left{
> float: left !important;
> }
> .sm-pull-reset{
> float: none !important;
> }
> .sm-block{
> display: block !important;
> }
> .sm-inline{
> display: inline-block;
> }
> .sm-image-responsive-height{
> width: 100%;
> height: auto;
> }
> .sm-image-responsive-width{
> height: 100%;
> width: auto;
> }
> .sm-full-height{
> height: 100%;
> width: auto;
> }
> .sm-full-width{
> width: 100%;
> height: auto !important;
580,581c421,443
< // Resolution specific borders
< @media (max-width:991px){
---
> }
>
> .sm-reset-position{
> position: initial;
> }
> .sm-screen-center{
> position: absolute;
> left: -50%;
> }
> .sm-static{
> position: static !important;
> }
> .header.transparent-light .menu > li > a:not(.btn){
> color: @color-master-darkest;
> margin-bottom: 10px;
> }
> .header.dark .menu > li > a:not(.btn){
> color: @color-master-darkest;
> }
> .sm-no-border{
> border-width: 0;
> }
>
586a449
> border-style: solid;
600d462
< }
602,612c464,467
< // Make all columns equal height
< // (Not applied for resolutions lowers than mentioned ex:lg,md,sm
< // because they stack up)
< @media (min-width:1200px){
< .row-same-height{
< overflow: hidden;
< & > [class*="col-lg"]{
< margin-bottom: -99999px;
< padding-bottom: 99999px;
< }
< }
---
> //Error Container
> .error-container{
> width:auto;
> }
623,627c478,484
< .horizontal-menu .bar{
< display: table !important;
< & + div{
< padding-top: 50px;
< }
---
> .header.static{
> position: static;
> .affix {
> position: fixed !important;
> top: 0;
> width: 100%
> }
628a486,488
> .clip-mega-menu {
> overflow: hidden;
> }
639,642d498
< .box-layout .container .jumbotron, .container-fluid .jumbotron {
< padding: 0;
< }
< }
644,654d499
< /* Portrait view of all tablet devices */
< @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
<
< .page-sidebar .sidebar-menu .menu-items > li{
< & > a{
< padding-left: 27px;
< }
< ul.sub-menu > li {
< padding: 0px 27px 0 31px;
< }
< }
656,663d500
< .icon-thumbnail {
< margin-right: 21px;
< }
< .error-page{
< .error-container{
< width: auto;
< }
< }
665a503
> /*** Phones ***/
667,674c505,547
<
< .header{
< height: @layout-mobile-header-height;
< .notification-list, .search-link{
< display: none;
< }
< .header-inner{
< height: @layout-mobile-header-height;
---
> .container{
> padding-left: 20px;
> padding-right: 20px;
> }
> .menu-content{
> width: 270px;
> overflow-y: auto;
> }
> .logo{
> display: inline-block;
> }
> .header{
> &.bg-header {
> .header-sizes(@header-big-height - 40);
> }
> &.md-header {
> .header-sizes(@header-medium-height);
> }
> &.sm-header {
> .header-sizes(@header-small-height);
> }
> }
> .swiper-slide {
> &.fit{
> h1{
> font-size: 6vh;
> line-height: 7.5vh;
> }
> h2{
> font-size: 3vh;
> line-height: 5vh;
> }
> h3{
> font-size: 2vh;
> line-height: 4vh;
> }
> h4{
> font-size: 3vh;
> line-height: 4.5vh;
> }
> h5{
> font-size: 1.5vh;
> line-height: 1.8vh;
675a549,560
> }
> }
>
> }
>
> @media (max-width: 480px) {
> .generate-paddings-options-xs(4);
>
> .generate-paddings-options-xs(@n, @i: 0) when (@i =< @n) {
> @step : @i*5;
> .xs-p-t-@{step} {
> padding-top: (@step*1px) !important;
677,678c562,563
< .header .user-info-wrapper{
< display:none;
---
> .xs-p-r-@{step} {
> padding-right: (@step*1px) !important;
680,705c565,566
< .header .search-link{
< height: 19px;
< width:16px;
< overflow:hidden;
< }
<
< .jumbotron,.container-fluid{
< padding-left: 0;
< padding-right: 0;
<
< }
<
< .page-container .page-content-wrapper .content {
< padding-top: @layout-mobile-header-height;
< padding-bottom: 100px;
< }
< .page-sidebar .sidebar-header{
< padding: 0 12px;
< }
< .page-sidebar .sidebar-menu .menu-items > li{
< & > a{
< padding-left: 20px;
< }
< ul.sub-menu > li {
< padding: 0px 25px 0 28px;
< }
---
> .xs-p-l-@{step} {
> padding-left: (@step*1px) !important;
707,709c568,569
<
< .icon-thumbnail {
< margin-right: 20px;
---
> .xs-p-b-@{step} {
> padding-bottom: (@step*1px) !important;
711,733c571,574
<
< .sm-pull-bottom, .sm-pull-up{
< position: relative !important;
< }
<
< .generate-paddings-options-sm(10);
<
< .generate-paddings-options-sm(@n, @i: 0) when (@i =< @n) {
< @step : @i*5;
< .sm-p-t-@{step} {
< padding-top: (@step*1px) !important;
< }
< .sm-p-r-@{step} {
< padding-right: (@step*1px) !important;
< }
< .sm-p-l-@{step} {
< padding-left: (@step*1px) !important;
< }
< .sm-p-b-@{step} {
< padding-bottom: (@step*1px) !important;
< }
< .sm-padding-@{step} {
< padding: (@step*1px) !important;
---
> .xs-padding-@{step} {
> padding: (@step*1px) !important;
> }
> .generate-paddings-options-xs(@n, (@i + 1));
735,736d575
< .generate-paddings-options-sm(@n, (@i + 1));
< }
738c577
< .generate-margin-options-sm(10);
---
> .generate-margin-options-xs(8);
740,752c579,593
< .generate-margin-options-sm(@n, @i: 1) when (@i =< @n) {
< @step : @i*5;
< .sm-m-t-@{step} {
< margin-top: (@step*1px) !important;
< }
< .sm-m-r-@{step} {
< margin-right: (@step*1px) !important;
< }
< .sm-m-l-@{step} {
< margin-left: (@step*1px) !important;
< }
< .sm-m-b-@{step} {
< margin-bottom: (@step*1px) !important;
---
> .generate-margin-options-xs(@n, @i: 1) when (@i =< @n) {
> @step : @i*5;
> .xs-m-t-@{step} {
> margin-top: (@step*1px) !important;
> }
> .xs-m-r-@{step} {
> margin-right: (@step*1px) !important;
> }
> .xs-m-l-@{step} {
> margin-left: (@step*1px) !important;
> }
> .xs-m-b-@{step} {
> margin-bottom: (@step*1px) !important;
> }
> .generate-margin-options-xs(@n, (@i + 1));
754,757c595,596
< .generate-margin-options-sm(@n, (@i + 1));
< }
< .sm-no-margin {
< margin: 0px;
---
> .xs-no-margin {
> margin: 0px !important;
759,760c598,599
< .sm-no-padding {
< padding: 0px;
---
> .xs-no-padding {
> padding: 0px !important;
762c601
< .sm-text-right{
---
> .xs-text-right{
765c604
< .sm-text-left{
---
> .xs-text-left{
768c607
< .sm-text-center{
---
> .xs-text-center{
771c610
< .sm-pull-right{
---
> .xs-pull-right{
774c613
< .sm-pull-left{
---
> .xs-pull-left{
777c616
< .sm-pull-reset{
---
> .xs-pull-reset{
780c619,627
< .sm-block{
---
> .xs-image-responsive-height{
> width: 100%;
> height: auto;
> }
> .xs-image-responsive-width{
> height: 100%;
> width: auto;
> }
> .xs-block{
783,785c630,631
<
< .error-container{
< width:auto;
---
> .xs-inline{
> display: inline-block;
787c633,644
< .sm-image-responsive-height{
---
> .swiper-slide{
> &.fit{
> .block-title{
> font-size: 2vh;
> }
> }
> }
> .xs-full-height{
> height: 100%;
> width: auto;
> }
> .xs-full-width{
789c646,652
< height: auto;
---
> height: auto !important;
> }
> .xs-min-height{
> min-height: 100%;
> }
> .sm-no-border{
> border-width: 0;
791,825d653
< }
<
<
<
< /*** Phones ***/
< @media (max-width: 480px) {
< body{
< width: 100%;
< .header {
< width: 100%;
< height: @layout-mobile-header-height;
< border-bottom: 1px solid rgba(0,0,0,.07);
< .header-inner{
< height: @layout-mobile-header-height;
< text-align: center;
< .toggle-email-sidebar{
< font-size: 16px;
< top: 12px;
< }
< .toggle-sidebar{
< left: 14px;
< }
< .mark-email{
< left: 35px;
< top: 14px;
< }
< .quickview-link{
< top: 14px;
< }
<
< }
< .notification-list, .search-link{
< display:none;
< }
<
827,832c655,677
< .dropdown-submenu{
< top:12px;
< }
< .notification-list, .search-link{
< display:none;
< }
---
> .xs-no-border{
> border-width: 0;
> }
>
> .xs-b-r,
> .xs-b-l,
> .xs-b-t,
> .xs-b-b{
> border-width: 0;
> border-style: solid;
> }
> .xs-b-r{
> border-right-width:1px;
> }
> .xs-b-l{
> border-left-width:1px;
> }
> .xs-b-t{
> border-top-width:1px;
> }
> .xs-b-b{
> border-bottom-width:1px;
> }
834c679,685
< }
---
> .xs-reset-position{
> position: initial;
> }
> .xs-screen-center{
> position: absolute;
> left: -50%;
> }
836,864c687,689
< #overlay-search{
< font-size: 48px;
< height: 118px;
< line-height: 46px;
< }
< }
< .page-sidebar .sidebar-header{
< height: @layout-mobile-header-height;
< line-height: @layout-mobile-header-height;
< }
< .panel {
< .panel-heading{
< padding-left: 15px;
< }
< .panel-body{
< padding: 15px;
< padding-top: 0;
< }
< }
< .error-page{
< padding: 15px;
< .error-container{
< margin-top: 30px;
< width: auto;
< }
< .pull-bottom{
< position: relative;
< }
< }
---
> .xs-bg-size-cover{
> background-size: cover;
> }
866,874c691,707
< .map-controls{
< left: 10px;
< }
< .register-container{
< height: auto !important;
< }
< .error-container-innner{
< width: auto;
< }
---
> .xs-relative{
> position: relative !important;
> }
>
> .error-page{
> padding: 15px;
> .error-container{
> margin-top: 30px;
> width: auto;
> }
> .pull-bottom{
> position: relative;
> }
> }
> .error-container-innner{
> width: auto;
> }
883,900d715
< .icon-set {
< background: url('@{base-img-url}/icons/top_tray_2x.png');
< position: relative;
< background-size: 95px 19px;
< }
< .editor-icon {
< background-image: url("@{base-img-url}/editor_tray_2x.png");
< background-size: 480px 40px;
< }
< .alert .close {
< background: url("@{base-img-url}/icons/noti-cross-2x.png") no-repeat scroll 0 0 transparent;
< background-position: -9px -10px;
< width: 10px;
< height: 9px;
< position: relative;
< opacity: 0.8;
< background-size: 114px 29px;
< }
902c717,719
< }
\ No newline at end of file
---
>
> }
>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment