[+] FO : New Responsive, Bootstrap template
This commit is contained in:
Damien Metzger
@@ -0,0 +1,640 @@
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
filter: unquote("alpha(opacity=#{round($opacity * 100)})");
|
||||
-moz-opacity: $opacity;
|
||||
}
|
||||
|
||||
@mixin hideYetClickable() {
|
||||
@include opacity(0);
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@mixin inline-block() {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
@mixin ellipsis() {
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin box-shadow($def) {
|
||||
-webkit-box-shadow: $def;
|
||||
-moz-box-shadow: $def;
|
||||
box-shadow: $def;
|
||||
}
|
||||
|
||||
@mixin retina() {
|
||||
@media only screen {
|
||||
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
||||
@include use-backgrounds(url($sprite-retina), $sprite-size, url($input-background-retina), url($input-background-focus-retina), $input-background-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin use-backgrounds($sprite, $sprite-size, $input, $input-focus, $input-size) {
|
||||
div#{$class-wrapper} {
|
||||
&#{$class-select},
|
||||
&#{$class-select} span,
|
||||
&#{$class-checkbox} span,
|
||||
&#{$class-radio} span,
|
||||
&#{$class-upload},
|
||||
&#{$class-upload} span#{$class-action},
|
||||
&#{$class-button},
|
||||
&#{$class-button} span {
|
||||
background-image: $sprite;
|
||||
|
||||
@if $sprite-size > 0 {
|
||||
background-size: $sprite-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
|
||||
#{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
|
||||
#{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
|
||||
background-image: $input;
|
||||
|
||||
@if $sprite-size > 0 {
|
||||
background-size: $input-size;
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
background-image: $input-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin whenActive {
|
||||
&#{$class-active} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin whenHover {
|
||||
&#{$class-hover}, &#{$class-focus} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin whenDisabled {
|
||||
&#{$class-disabled}, &#{$class-disabled}#{$class-active} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin whenChecked {
|
||||
&#{$class-checked} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$sprite: "../../../img/jquery/uniform/sprite.png" !default;
|
||||
$sprite-retina: "../../img/jquery/uniform/sprite-retina.png" !default;
|
||||
$sprite-size: 493px !default;
|
||||
$button-height: 30px !default;
|
||||
$button-margin-left: 13px !default;
|
||||
$button-padding: 0 !default;
|
||||
$button-span-height: $button-height !default;
|
||||
$checkbox-height: 15px !default;
|
||||
$checkbox-width: 15px !default;
|
||||
$input-padding: 3px !default;
|
||||
$input-background: "../../../img/jquery/uniform/bg-input.png" !default;
|
||||
$input-background-retina: "../../../img/jquery/uniform/bg-input-retina.png" !default;
|
||||
$input-background-focus: "../../../img/jquery/uniform/bg-input-focus.png" !default;
|
||||
$input-background-focus-retina: "../../../img/jquery/uniform/bg-input-focus-retina.png" !default;
|
||||
$input-background-size: 1px !default;
|
||||
$radio-height: 13px !default;
|
||||
$radio-width: 13px !default;
|
||||
$select-fixed-width: 190px !default;
|
||||
$select-height: 27px !default;
|
||||
$select-margin-left: 10px !default;
|
||||
$select-margin-right: 30px !default;
|
||||
$select-select-height: 27px !default;
|
||||
$select-select-top: 0px !default;
|
||||
$upload-action-width:94px !default;
|
||||
$upload-filename-margin-top: 0px !default;
|
||||
$upload-filename-margin-bottom: 0px !default;
|
||||
$upload-filename-margin-left: 0px !default;
|
||||
$upload-filename-width: 172px !default;
|
||||
$upload-filename-padding: 0 10px !default;
|
||||
$upload-height: 27px !default;
|
||||
$upload-width: 100% !default;
|
||||
|
||||
|
||||
$checkbox-voffset: (-10 * $select-height);
|
||||
$radio-voffset: ($checkbox-voffset - $checkbox-height);
|
||||
$upload-voffset: ($radio-voffset - $radio-height);
|
||||
$button-voffset: ($upload-voffset - (8 * $upload-height));
|
||||
|
||||
$class-action: ".action" !default;
|
||||
$class-active: ".active" !default;
|
||||
$class-button: ".button" !default;
|
||||
$class-checkbox: ".checker" !default;
|
||||
$class-checked: ".checked" !default;
|
||||
$class-disabled: ".disabled" !default;
|
||||
$class-input: ".uniform-input" !default;
|
||||
$class-filename: ".filename" !default;
|
||||
$class-focus: ".focus" !default;
|
||||
$class-hover: ".hover" !default;
|
||||
$class-multiselect: ".uniform-multiselect" !default;
|
||||
$class-radio: ".radio" !default;
|
||||
$class-select: ".selector" !default;
|
||||
$class-select1: ".selector1" !default;
|
||||
$class-select2: ".selector2" !default;
|
||||
$class-select3: ".selector3" !default;
|
||||
$class-upload: ".uploader" !default;
|
||||
$class-textarea: ".uniform" !default;
|
||||
$class-wrapper: "" !default;
|
||||
|
||||
$class-wrapper-element: "";
|
||||
@if $class-wrapper != "" {
|
||||
$class-wrapper-element: "span"
|
||||
}
|
||||
|
||||
/* General settings */
|
||||
|
||||
div#{$class-wrapper} {
|
||||
&#{$class-select},
|
||||
&#{$class-select} span,
|
||||
&#{$class-checkbox} span,
|
||||
&#{$class-radio} span,
|
||||
&#{$class-upload},
|
||||
&#{$class-upload} span#{$class-action},
|
||||
&#{$class-button},
|
||||
&#{$class-button} span {
|
||||
background-image: url($sprite);
|
||||
background-repeat: no-repeat;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&#{$class-select},
|
||||
&#{$class-checkbox},
|
||||
&#{$class-button},
|
||||
&#{$class-radio},
|
||||
&#{$class-upload} {
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
/* Keeping this as :focus to remove browser styles */
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&#{$class-select},
|
||||
&#{$class-radio},
|
||||
&#{$class-checkbox},
|
||||
&#{$class-upload},
|
||||
&#{$class-button} {
|
||||
&, & * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highContrastDetect {
|
||||
background: url($input-background) repeat-x 0 0;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* Input & Textarea */
|
||||
|
||||
#{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
|
||||
#{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
|
||||
#{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
|
||||
padding: $input-padding;
|
||||
background: white;
|
||||
outline: 0;
|
||||
|
||||
@include whenActive {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove default webkit and possible mozilla .search styles.
|
||||
* Keeping this as :active to remove browser styles */
|
||||
div#{$class-wrapper}#{$class-checkbox} input,
|
||||
input[type="search"],
|
||||
input[type="search"]:active {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
div#{$class-wrapper}#{$class-select} {
|
||||
background-position: 0 (-2 * $select-height);
|
||||
line-height: $select-height;
|
||||
height: $select-height;
|
||||
padding: 0 0 0 $select-margin-left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
span {
|
||||
@include ellipsis();
|
||||
background-position: right 0;
|
||||
height: $select-height;
|
||||
line-height: $select-height;
|
||||
padding-right: $select-margin-right;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.fixedWidth{
|
||||
width: $select-fixed-width;
|
||||
span {
|
||||
width: ($select-fixed-width - $select-margin-left - $select-margin-right);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@include hideYetClickable();
|
||||
position: absolute;
|
||||
height: $select-select-height;
|
||||
top: $select-select-top;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-1 * $select-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: right (-1 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-1 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
|
||||
span {
|
||||
background-position: right 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Select1 */
|
||||
div#{$class-select1} {
|
||||
> div {
|
||||
background-position: 0 (-5 * $select-height);
|
||||
span {
|
||||
background-position: right (-3 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-4 * $select-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: right (-4 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-4 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
background-position: 0 (-5 * $select-height);
|
||||
span {
|
||||
background-position: right (-3 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Select2 */
|
||||
div#{$class-select2} {
|
||||
> div {
|
||||
background-position: 0 (-8 * $select-height);
|
||||
span {
|
||||
background-position: right (-6 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-7 * $select-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: right (-7 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-7 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
background-position: 0 (-8 * $select-height);
|
||||
span {
|
||||
background-position: right (-6 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Select3 */
|
||||
div#{$class-select3} {
|
||||
> div {
|
||||
background-position: 0 (-13 * $select-height);
|
||||
span {
|
||||
background-position: right (-11 * $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-12 * $select-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: right (-12* $select-height);
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: right (-12 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
background-position: 0 (-13 * $select-height);
|
||||
span {
|
||||
background-position: right (-11 * $select-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Checkbox */
|
||||
|
||||
div#{$class-wrapper}#{$class-checkbox} {
|
||||
position: relative;
|
||||
|
||||
&, span, input {
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
}
|
||||
|
||||
span {
|
||||
@include inline-block();
|
||||
text-align: center;
|
||||
background-position: 0 ($checkbox-voffset+$radio-height);
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@include hideYetClickable();
|
||||
@include inline-block();
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: (-2 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $checkbox-width) ($checkbox-voffset + $radio-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
background-position: 0 ($checkbox-voffset + $radio-height);
|
||||
|
||||
span {
|
||||
@include whenChecked {
|
||||
background-position: 0 ($checkbox-voffset + $radio-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Radio */
|
||||
|
||||
div#{$class-wrapper}#{$class-radio} {
|
||||
position: relative;
|
||||
display:inline;
|
||||
&, span, input {
|
||||
width: $radio-width;
|
||||
height: $radio-height;
|
||||
}
|
||||
span {
|
||||
@include inline-block();
|
||||
text-align: center;
|
||||
background-position: 0 ($radio-voffset + 42px);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@include hideYetClickable();
|
||||
@include inline-block();
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
background-position: (-1 * $radio-width)-36px ($radio-voffset + 42px);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
}
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
span {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: (-1 * $radio-width) ($radio-voffset + 42px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
span {
|
||||
background-position: 0 ($radio-voffset + 42px);
|
||||
|
||||
@include whenChecked {
|
||||
background-position: 0 ($radio-voffset + 42px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Uploader */
|
||||
|
||||
div#{$class-wrapper}#{$class-upload} {
|
||||
background:none;
|
||||
height: $upload-height;
|
||||
width: $upload-width;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
span#{$class-action} {
|
||||
background-position: 0 -378px;
|
||||
height: $upload-height;
|
||||
line-height: $upload-height;
|
||||
width: $upload-action-width;
|
||||
text-align: center;
|
||||
float: left;
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span#{$class-filename} {
|
||||
@include ellipsis();
|
||||
float: left;
|
||||
cursor: default;
|
||||
height: ($upload-height - $upload-filename-margin-top - $upload-filename-margin-bottom);
|
||||
margin: $upload-filename-margin-top 0 $upload-filename-margin-bottom $upload-filename-margin-left;
|
||||
line-height: ($upload-height - $upload-filename-margin-top - $upload-filename-margin-bottom);
|
||||
width: $upload-filename-width;
|
||||
padding: $upload-filename-padding;
|
||||
}
|
||||
|
||||
input {
|
||||
@include hideYetClickable();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
float: right;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
div#{$class-wrapper}#{$class-button} {
|
||||
background-position: 0 ($button-voffset + (-4 * $button-height));
|
||||
height: $button-height;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
/* Keep buttons barely visible so they can get focus */
|
||||
a, button, input {
|
||||
@include opacity(0.01);
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
span {
|
||||
@include inline-block();
|
||||
line-height: $button-span-height;
|
||||
text-align: center;
|
||||
background-position: right $button-voffset;
|
||||
height: $button-span-height;
|
||||
margin-left: $button-margin-left;
|
||||
padding: $button-padding;
|
||||
}
|
||||
|
||||
@include whenActive {
|
||||
background-position: 0 ($button-voffset + (-5 * $button-height));
|
||||
|
||||
span {
|
||||
background-position: right ($button-voffset + (-1 * $button-height));
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
background-position: 0 ($button-voffset + (-6 * $button-height));
|
||||
|
||||
span {
|
||||
background-position: right ($button-voffset + (-2 * $button-height));
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
background-position: 0 ($button-voffset + (-7 * $button-height));
|
||||
|
||||
span {
|
||||
background-position: right ($button-voffset + (-3 * $button-height));
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
* Core Owl Carousel CSS File
|
||||
* v1.24
|
||||
*/
|
||||
|
||||
/* clearfix */
|
||||
.owl-carousel .owl-wrapper:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* display none until init */
|
||||
.owl-carousel{
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-ms-touch-action: pan-y;
|
||||
overflow:hidden
|
||||
}
|
||||
.owl-carousel .owl-wrapper{
|
||||
display: none;
|
||||
position: relative;
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.owl-carousel .owl-wrapper-outer{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin:0 -10px
|
||||
}
|
||||
.owl-carousel .owl-wrapper-outer.autoHeight{
|
||||
-webkit-transition: height 500ms ease-in-out;
|
||||
-moz-transition: height 500ms ease-in-out;
|
||||
-ms-transition: height 500ms ease-in-out;
|
||||
-o-transition: height 500ms ease-in-out;
|
||||
transition: height 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.owl-carousel .owl-item{
|
||||
float: left;
|
||||
width:200px !important
|
||||
}
|
||||
.owl-controls .owl-page,
|
||||
.owl-controls .owl-buttons div{
|
||||
cursor: pointer;
|
||||
}
|
||||
.owl-controls {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* mouse grab icon */
|
||||
.grabbing {
|
||||
cursor:url(grabbing.png) 8 8, move;
|
||||
}
|
||||
|
||||
/* fix */
|
||||
.owl-carousel .owl-wrapper,
|
||||
.owl-carousel .owl-item{
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
/* CSS3 Transitions */
|
||||
|
||||
.owl-origin {
|
||||
-webkit-perspective: 1200px;
|
||||
-webkit-perspective-origin-x : 50%;
|
||||
-webkit-perspective-origin-y : 50%;
|
||||
-moz-perspective : 1200px;
|
||||
-moz-perspective-origin-x : 50%;
|
||||
-moz-perspective-origin-y : 50%;
|
||||
perspective : 1200px;
|
||||
}
|
||||
/* fade */
|
||||
.owl-fade-out {
|
||||
z-index: 10;
|
||||
-webkit-animation: fadeOut .7s both ease;
|
||||
-moz-animation: fadeOut .7s both ease;
|
||||
animation: fadeOut .7s both ease;
|
||||
}
|
||||
.owl-fade-in {
|
||||
-webkit-animation: fadeIn .7s both ease;
|
||||
-moz-animation: fadeIn .7s both ease;
|
||||
animation: fadeIn .7s both ease;
|
||||
}
|
||||
/* backSlide */
|
||||
.owl-backSlide-out {
|
||||
-webkit-animation: backSlideOut 1s both ease;
|
||||
-moz-animation: backSlideOut 1s both ease;
|
||||
animation: backSlideOut 1s both ease;
|
||||
}
|
||||
.owl-backSlide-in {
|
||||
-webkit-animation: backSlideIn 1s both ease;
|
||||
-moz-animation: backSlideIn 1s both ease;
|
||||
animation: backSlideIn 1s both ease;
|
||||
}
|
||||
/* goDown */
|
||||
.owl-goDown-out {
|
||||
-webkit-animation: scaleToFade .7s ease both;
|
||||
-moz-animation: scaleToFade .7s ease both;
|
||||
animation: scaleToFade .7s ease both;
|
||||
}
|
||||
.owl-goDown-in {
|
||||
-webkit-animation: goDown .6s ease both;
|
||||
-moz-animation: goDown .6s ease both;
|
||||
animation: goDown .6s ease both;
|
||||
}
|
||||
/* scaleUp */
|
||||
.owl-fadeUp-in {
|
||||
-webkit-animation: scaleUpFrom .5s ease both;
|
||||
-moz-animation: scaleUpFrom .5s ease both;
|
||||
animation: scaleUpFrom .5s ease both;
|
||||
}
|
||||
|
||||
.owl-fadeUp-out {
|
||||
-webkit-animation: scaleUpTo .5s ease both;
|
||||
-moz-animation: scaleUpTo .5s ease both;
|
||||
animation: scaleUpTo .5s ease both;
|
||||
}
|
||||
/* Keyframes */
|
||||
/*empty*/
|
||||
@-webkit-keyframes empty {
|
||||
0% {opacity: 1}
|
||||
}
|
||||
@-moz-keyframes empty {
|
||||
0% {opacity: 1}
|
||||
}
|
||||
@keyframes empty {
|
||||
0% {opacity: 1}
|
||||
}
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% { opacity:0; }
|
||||
100% { opacity:1; }
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% { opacity:0; }
|
||||
100% { opacity:1; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% { opacity:0; }
|
||||
100% { opacity:1; }
|
||||
}
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% { opacity:1; }
|
||||
100% { opacity:0; }
|
||||
}
|
||||
@-moz-keyframes fadeOut {
|
||||
0% { opacity:1; }
|
||||
100% { opacity:0; }
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
0% { opacity:1; }
|
||||
100% { opacity:0; }
|
||||
}
|
||||
@-webkit-keyframes backSlideOut {
|
||||
25% { opacity: .5; -webkit-transform: translateZ(-500px); }
|
||||
75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
|
||||
100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
|
||||
}
|
||||
@-moz-keyframes backSlideOut {
|
||||
25% { opacity: .5; -moz-transform: translateZ(-500px); }
|
||||
75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
|
||||
100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
|
||||
}
|
||||
@keyframes backSlideOut {
|
||||
25% { opacity: .5; transform: translateZ(-500px); }
|
||||
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
|
||||
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
|
||||
}
|
||||
@-webkit-keyframes backSlideIn {
|
||||
0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
|
||||
75% { opacity: .5; -webkit-transform: translateZ(-500px); }
|
||||
100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
|
||||
}
|
||||
@-moz-keyframes backSlideIn {
|
||||
0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
|
||||
75% { opacity: .5; -moz-transform: translateZ(-500px); }
|
||||
100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
|
||||
}
|
||||
@keyframes backSlideIn {
|
||||
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
|
||||
75% { opacity: .5; transform: translateZ(-500px); }
|
||||
100% { opacity: 1; transform: translateZ(0) translateX(0); }
|
||||
}
|
||||
@-webkit-keyframes scaleToFade {
|
||||
to { opacity: 0; -webkit-transform: scale(.8); }
|
||||
}
|
||||
@-moz-keyframes scaleToFade {
|
||||
to { opacity: 0; -moz-transform: scale(.8); }
|
||||
}
|
||||
@keyframes scaleToFade {
|
||||
to { opacity: 0; transform: scale(.8); }
|
||||
}
|
||||
@-webkit-keyframes goDown {
|
||||
from { -webkit-transform: translateY(-100%); }
|
||||
}
|
||||
@-moz-keyframes goDown {
|
||||
from { -moz-transform: translateY(-100%); }
|
||||
}
|
||||
@keyframes goDown {
|
||||
from { transform: translateY(-100%); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaleUpFrom {
|
||||
from { opacity: 0; -webkit-transform: scale(1.5); }
|
||||
}
|
||||
@-moz-keyframes scaleUpFrom {
|
||||
from { opacity: 0; -moz-transform: scale(1.5); }
|
||||
}
|
||||
@keyframes scaleUpFrom {
|
||||
from { opacity: 0; transform: scale(1.5); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaleUpTo {
|
||||
to { opacity: 0; -webkit-transform: scale(1.5); }
|
||||
}
|
||||
@-moz-keyframes scaleUpTo {
|
||||
to { opacity: 0; -moz-transform: scale(1.5); }
|
||||
}
|
||||
@keyframes scaleUpTo {
|
||||
to { opacity: 0; transform: scale(1.5); }
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
@import '_theme_variables';
|
||||
@import 'compass';
|
||||
/*
|
||||
* Owl Carousel Owl Demo Theme
|
||||
* v1.24
|
||||
*/
|
||||
.owl-theme{
|
||||
|
||||
.owl-controls{
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Styling Next and Prev buttons */
|
||||
.owl-controls{
|
||||
.owl-buttons div{
|
||||
margin-top:38px;
|
||||
height:20px;
|
||||
width:20px;
|
||||
line-height:0;
|
||||
position:absolute;
|
||||
top:40%;
|
||||
margin-top:-10px;
|
||||
font-size:0;
|
||||
overflow:hidden;
|
||||
&:before{
|
||||
padding-left:2px;
|
||||
color:#c0c0c0;
|
||||
font-family:$font1;
|
||||
font-size:20px;
|
||||
line-height:22px;
|
||||
|
||||
}
|
||||
&:hover:before{color:#333}
|
||||
}
|
||||
|
||||
.owl-next {
|
||||
right:10px;
|
||||
&:before{
|
||||
content:""
|
||||
}
|
||||
}
|
||||
|
||||
.owl-prev{
|
||||
left:10px;
|
||||
&:before{
|
||||
content:"";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Styling Pagination*/
|
||||
|
||||
.owl-pagination{display:none}
|
||||
|
||||
.owl-page{
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;/*IE7 life-saver */
|
||||
}
|
||||
.owl-page span{
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 5px 7px;
|
||||
@include opacity(0.5);
|
||||
@include border-radius(20px);
|
||||
background: #869791;
|
||||
}
|
||||
|
||||
.owl-page.active span,
|
||||
&.clickable .owl-page:hover span{
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
/* If PaginationNumbers is true */
|
||||
|
||||
.owl-page span.owl-numbers{
|
||||
height: auto;
|
||||
width: auto;
|
||||
color: #FFF;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
@include border-radius(30px);
|
||||
}
|
||||
}
|
||||
|
||||
/* preloading images */
|
||||
.owl-item.loading{
|
||||
min-height: 150px;
|
||||
background: url(AjaxLoader.gif) no-repeat center center
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/*
|
||||
Uniform Theme: Uniform Default
|
||||
Version: 1.8
|
||||
By: Josh Pyles
|
||||
License: MIT License
|
||||
---
|
||||
For use with the Uniform plugin:
|
||||
http://uniformjs.com/
|
||||
|
||||
*/
|
||||
|
||||
|
||||
@import '_uniform._base';
|
||||
|
||||
/* INPUT & TEXTAREA */
|
||||
|
||||
/* ************************************************************************************************
|
||||
uniform
|
||||
************************************************************************************************ */
|
||||
|
||||
|
||||
#{$class-wrapper-element}#{$class-wrapper} input#{$class-input},
|
||||
#{$class-wrapper-element}#{$class-wrapper} select#{$class-multiselect},
|
||||
#{$class-wrapper-element}#{$class-wrapper} textarea#{$class-textarea} {
|
||||
font-size: 13px;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
line-height:18px;
|
||||
color: #777;
|
||||
border: solid 1px #d6d4d4;
|
||||
|
||||
|
||||
@include whenHover {
|
||||
@include box-shadow(0px 0px 4px rgba(0,0,0,0.2));
|
||||
border-color: #cbcaca;
|
||||
}
|
||||
}
|
||||
|
||||
/* PRESENTATION */
|
||||
|
||||
/* Buttons */
|
||||
|
||||
div#{$class-wrapper}#{$class-button} {
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@include whenHover {
|
||||
span {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
span {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Select */
|
||||
|
||||
#compare_shipping .form-group label{display:block}
|
||||
div#{$class-wrapper}#{$class-select} {
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
span {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checker span input{margin:0 !important}
|
||||
|
||||
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{margin:0 !important}
|
||||
|
||||
.radio-inline, .checkbox-inline{cursor:default}
|
||||
|
||||
/* Checker */
|
||||
div#{$class-wrapper}#{$class-checkbox} {
|
||||
cursor:pointer;
|
||||
margin-right: 5px;
|
||||
span{position:relative;top:-2px;}
|
||||
}
|
||||
|
||||
#layered_form div#{$class-checkbox}{
|
||||
display:inline
|
||||
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
div#{$class-wrapper}#{$class-radio} {
|
||||
margin-right: 3px;
|
||||
span{position:relative;top:-2px;}
|
||||
}
|
||||
/* Uploader */
|
||||
div#{$class-wrapper}#{$class-upload} {
|
||||
span#{$class-action} {
|
||||
text-shadow: rgba(0,0,0,0.1) 0px 1px 0px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
span#{$class-filename} {
|
||||
color: #777;
|
||||
border: solid 1px #d6d4d4;
|
||||
font-size: 13px;
|
||||
background:#fbfbfb;
|
||||
margin-right:2px;
|
||||
}
|
||||
|
||||
@include whenDisabled {
|
||||
span#{$class-action} {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span#{$class-filename} {
|
||||
border-color: #ddd;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$class-wrapper-element}#{$class-wrapper} input#{$class-input} {
|
||||
&, &:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user