/////////////////////////////////////////////// // // Adapta Mixins // /////////////////////////////////////////////// /* prefix declarations */ @mixin prefixed($property, $value) { -webkit-#{$property}: $value; -moz-#{$property}: $value; -ms-#{$property}: $value; -o-#{$property}: $value; #{$property}: $value; } /* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ } //////////////////////////////////////////////////////////////////// // // // Old Styles from QSF4 // // // //////////////////////////////////////////////////////////////////// // MIXINS // ----------------------------------------------------------------- @mixin font($weight: normal, $size: 1em, $lineheight: 1em, $fontfamily: $sans) { font: $weight #{$size}/#{$lineheight} $fontfamily; } @mixin gradient-vertical-stops($startColor: #555, $startStop: 0%, $endColor: #333, $endStop: 100%) { background-color: mix($startColor, $endColor, 60%); background-image: -moz-linear-gradient(top, $startColor $startStop, $endColor $endStop); // FF 3.6+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor $startStop), to($endColor $endStop)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, $startColor $startStop, $endColor $endStop); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, $startColor $startStop, $endColor $endStop); // Opera 11.10 background-image: linear-gradient(to bottom, $startColor $startStop, $endColor $endStop); // Standard, IE10 background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down } @mixin remove-gradient() { background-color:transparent; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-repeat: no-repeat; filter: none; } @mixin hline($startColor: #B0BAC5, $midColor1: #9DA7B2, $midColor2: #919CA8, $endColor: #7E8A98) { background: $endColor; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: auto auto !important; background-size: 100% 100%; background: -moz-linear-gradient(top, $startColor 0%, $midColor1 50%, $midColor2 51%, $endColor 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startColor), color-stop(50%,$midColor1), color-stop(51%,$midColor2), color-stop(100%,$endColor)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{$startColor}', endColorstr='#{$endColor}')"; } // Transitions @mixin transition($transition: all linear .1s) { -webkit-transition: $transition; -o-transition: $transition; -moz-transition: $transition; transition: $transition; } // Table minimal design @mixin common-table($bgColor: lighten($system, 10%), $padding: 10px) { th { background: $bgColor; @include ts(0 1px 0 rgb(255,255,255)); color: $gray-dark; padding: $padding; border-right: 1px solid $system; border-bottom: 1px solid $system; } td { border-bottom: 1px solid $system; border-right: 1px solid $system; padding: 10px; } } @mixin adaptive-columns($columns) { float:left; @include adaptive-columns-width($columns); @media all and (max-width:978px) { @include adaptive-columns-width($columns - 2); } @media all and (max-width:768px) { @include adaptive-columns-width($columns - 1); } @media all and (max-width:560px) { @include adaptive-columns-width($columns - 2); } @media all and (max-width:460px) { @include adaptive-columns-width($columns - 3); } } @mixin adaptive-columns-width($columns) { $gutter: 2%; $gutters: $columns * $gutter; margin-right: $gutter; width: ((100% - $gutters) / $columns); } .hardware-acceleration { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /////////////////////////////////////////////// // // OVERRIDE BOOTSTRAP RULES // /////////////////////////////////////////////// hr {margin:($baseLineHeight / 2) 0; border-color:#eee;} .row-fluid [class*="span"] { min-height:1px;} // Columns .clmn-to-right {float:right !important;} .clmn-to-left {float:left !important; margin-left: 0 !important;} // buttons .btn-primary { //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight, #fff, 0px 1px 1px #5e9307); background: $btnPrimaryBackground; &:hover, &:focus { background: lighten($btnPrimaryBackground, 10%); } } .btn-secondary { //@include buttonBackground($accent-sec, darken($accent-sec, 5%), #fff, 0px 1px 1px darken($accent-sec, 10%)); background: $btnSecondaryBg; &:hover, &:focus { background: darken($btnSecondaryBg, 10%); } } // forms form {margin: 0;} input[type="file"] { height: auto; line-height: normal; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { color: darken($textColor, 15%); } // dropdowns .caret { border-top: 6px solid $black; border-right: 6px solid transparent; border-left: 6px solid transparent; } .dropdown-menu { margin: 0; border: none; // Fallback for IE7-8 border: none; *border-right-width: 0; *border-bottom-width: 0; @include border-radius(4px !important); @include box-shadow(none); .dropdown-menu { margin-left: 1px !important; } } .dropdown-submenu > a:after {margin-top: 7px;} // nav pills .nav-pills.top-links { margin: $baseLineHeight/2 0;} .nav-pills.top-links > li > a {background-color: $grayLighter;} // navbar #nav-main { clear:right; > li:last-child > .dropdown-menu {left:auto; right:0;} } .navbar-static-top .navbar-inner { @include border-radius(0); border-width: 0; } .navbar-search { .search-query { padding: 1px 12px; @include border-radius(12px); } } .navbar .nav .dropdown-toggle .caret { margin-top: 10px; margin-left: 4px; } .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { background-color: transparent; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { background-color: transparent; @include box-shadow(none); } .navbar .nav > li > .dropdown-menu { &:before, &:after { display: none; } } .navbar .pull-right > li > .dropdown-menu { left: 0; right: auto; .dropdown-menu { left: 100%; right: auto; } } .navbar-inverse { .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; } .nav .active > a, .nav .active > a:hover, .nav .active > a:focus { background-color: transparent; } .nav li.dropdown.open > .dropdown-toggle, .nav li.dropdown.active > .dropdown-toggle, .nav li.dropdown.open.active > .dropdown-toggle { background-color: transparent; } .navbar-search { .search-query { border: 0; @include box-shadow(inset 1px 1px 2px 1px rgba(0,0,0,.3)); @include transition(width .35s ease-out); &:focus, &.focused { padding: 1px 12px; width: 150px; @include transition(width .35s ease); } } } } .table { th { font-weight: normal; font-size: $baseFontSize - 2; line-height: $baseFontSize; text-transform: uppercase; color: $grayDarker; } th.text-center, td.text-center {text-align: center;} th.text-right, td.text-right {text-align: right;} } /////////////////////////////////////////////// // TABLE // ----------------------------------------------------------------- .grid, .linear_grid, .cms_container { border-collapse:collapse; border-spacing:0; width:100%; margin-bottom: 15px; } .grid { th, td { border:solid silver 1px; padding:5px 8px;} th { text-align:center; font-weight:bold; color:#000; padding:7px 5px; white-space:nowrap; a { color: darken($linkColor, 30%);} } tr td { background-color:$grayLighter;} tr.odd td { background-color:$white;} tfoot td { border-top:1px solid silver; background-color:#eee; text-align:right;} } .table { .grid_no, .grid_date, .grid_link_enum, .grid_options, .cell_usage_count, .cell_id, .grid_image, .grid_money, .grid_quantity, .grid_total, .grid_checkbox, .grid_members {text-align:center;} .grid_no {width:30px;} .cell_show {width:60px;} .cell_enabled, .cell_featured, .cell_sold_out {width:90px;} .grid_image { width: 150px;} .grid_options { width:120px; white-space:nowrap;} .grid_page_list {width:200px;} .cell_row_total, .cell_total {text-align: right;} } .linear_grid { margin-top: $baseLineHeight; th, td {border:solid silver 1px; padding:7px 5px;} th {font-weight:bold; text-align:right; color:#000; background-color: $tableBackgroundAccent; width:20%;} tfoot td {border-bottom:none; border-top:2px solid silver;} } .table-linear { border-bottom: 1px solid $tableBorder; td.grid-label { background-color: $tableBackgroundAccent; width: 20%; font-weight: bold; } }