| @@ -0,0 +1,31 @@ | ||
| @import "compass/support"; | ||
|
|
||
| // The legacy support for inline-block. | ||
| // Defaults to the $graceful-usage-threshold. | ||
| $inline-block-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
| // Set `$inline-block-alignment` to `none` or `false` to disable the output | ||
| // of a vertical-align property in the inline-block mixin. | ||
| // Or set it to a legal value for `vertical-align` to change the default. | ||
| $inline-block-alignment: middle !default; | ||
|
|
||
| // Provides a cross-browser method to implement `display: inline-block;` | ||
| @mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) { | ||
| // legacy support for VERY old firefox | ||
| @if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold) { | ||
| display: -moz-inline-stack; | ||
| } | ||
| // standard | ||
| display: inline-block; | ||
| @if $alignment and $alignment != none { | ||
| vertical-align: $alignment; | ||
| } | ||
| // legacy IE support | ||
| @if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold) { | ||
| @if $ie-alignment and $ie-alignment != none { | ||
| *vertical-align: $ie-alignment; | ||
| } | ||
| *zoom: 1; | ||
| *display: inline; | ||
| } | ||
| } |
| @@ -0,0 +1,27 @@ | ||
| @import "compass/support"; | ||
|
|
||
| // The support usage threshold for opacity. Defaults to the global | ||
| // threshold for graceful degradation. | ||
| $opacity-usage-threshold: $graceful-usage-threshold !default; | ||
|
|
||
| // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity. | ||
| // | ||
| // @param $opacity | ||
| // A number between 0 and 1, where 0 is transparent and 1 is opaque. | ||
|
|
||
| @mixin opacity($opacity) { | ||
| @include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) { | ||
| @if $opacity == 1 { | ||
| filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)"); | ||
| } @else { | ||
| filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})"); | ||
| } | ||
| } | ||
| opacity: $opacity; | ||
| } | ||
|
|
||
| // Make an element completely transparent. | ||
| @mixin transparent { @include opacity(0); } | ||
|
|
||
| // Make an element completely opaque. | ||
| @mixin opaque { @include opacity(1); } |
| @@ -0,0 +1 @@ | ||
| @warn "Support for CSS3Pie has been removed."; |
| @@ -0,0 +1,27 @@ | ||
| // Regions | ||
|
|
||
| @import "compass/support"; | ||
|
|
||
| // The prefixed support threshold for css regions. | ||
| // Defaults to the $graceful-usage-threshold. | ||
| $regions-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
|
|
||
| // Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/) | ||
| // | ||
| // $target is a value you use to link two regions of your css. | ||
| // Give the source of your content the flow-into property, | ||
| // and give your target container the flow-from property. | ||
| // | ||
| // For a visual explanation, see the diagrams at Chris Coyier's | ||
| // [CSS-Tricks](http://css-tricks.com/content-folding/) | ||
|
|
||
| @mixin flow-into($target) { | ||
| $target: unquote($target); | ||
| @include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target)); | ||
| } | ||
|
|
||
| @mixin flow-from($target) { | ||
| $target: unquote($target); | ||
| @include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target)); | ||
| } |
| @@ -0,0 +1,59 @@ | ||
| @import "compass/support"; | ||
| @import "compass/utilities/color"; | ||
|
|
||
| // The prefixed support threshold for ::selection. | ||
| // Defaults to the $graceful-usage-threshold. | ||
| $selection-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
| // Style selected text. | ||
| // | ||
| // At this time, only two CSS properties are supported in most browsers | ||
| // during selection: color and background-color. Firefox supports the | ||
| // text-shadow property. | ||
| // | ||
| // At the stylesheet root, include the mixin within the * selector. | ||
| // | ||
| // * { | ||
| // @include selection(#fe57a1, #fff) | ||
| // } | ||
| // | ||
| // If a specific element or selector's selection is being styled | ||
| // you can use that selector instead. For example: | ||
| // | ||
| // .hot-pink { | ||
| // @include selection(#fe57a1, #fff) | ||
| // } | ||
| // | ||
| // These properties can be passed as arguments or you can set them via mixin | ||
| // content. | ||
| // | ||
| // For future-forward compatibility with other properties and aesthetic freedom, | ||
| // a mixin content block can be passed to this mixin in addition to or in place of | ||
| // passing arguments. | ||
| // | ||
| // .hot-pink { | ||
| // @include selection { | ||
| // background: #fe57a1; | ||
| // color: #fff; | ||
| // } | ||
| // } | ||
| // | ||
| // When `$background-color` is specified, but `$color` is not, this mixin | ||
| // styles the foreground color like the [contrasted | ||
| // mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted). To | ||
| // specify only the background-color, you should pass an explicit `null` value | ||
| // for `$color` or use mixin content. | ||
| @mixin selection($background-color: null, $color: contrast-color($background-color)) { | ||
| @include with-each-prefix(css-selection, $selection-support-threshold) { | ||
| $selector: ''; | ||
| @if $current-prefix != null { | ||
| $selector: $current-prefix + '-'; | ||
| } | ||
| $selector: "&::#{$selector}selection"; | ||
| #{$selector} { | ||
| color: $color; | ||
| background-color: $background-color; | ||
| @content; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| @warn "The compass/css3/shared module has been deprecated. | ||
| You can silence this warning by importing compass/css3/deprecated-support instead. | ||
| Please be aware that module will be removed in the next release."; | ||
|
|
||
| @import "deprecated-support"; |
| @@ -0,0 +1,82 @@ | ||
| // Text Shadow | ||
|
|
||
| @import "compass/support"; | ||
|
|
||
|
|
||
| // These defaults make the arguments optional for this mixin | ||
| // If you like, set different defaults in your project | ||
|
|
||
| $default-text-shadow-color : #aaa !default; | ||
| $default-text-shadow-h-offset : 0px !default; | ||
| $default-text-shadow-v-offset : 0px !default; | ||
| $default-text-shadow-blur : 1px !default; | ||
| $default-text-shadow-spread : false !default; | ||
|
|
||
|
|
||
| // Provides cross-browser text shadows when one or more shadows are needed. | ||
| // Each shadow argument should adhere to the standard css3 syntax for the | ||
| // text-shadow property. | ||
| // | ||
| // Note: if any shadow has a spread parameter, this will cause the mixin | ||
| // to emit the shadow declaration twice, first without the spread, | ||
| // then with the spread included. This allows you to progressively | ||
| // enhance the browsers that do support the spread parameter. | ||
| @mixin text-shadow( | ||
| $shadow... | ||
| ) { | ||
| $shadow: if(length($shadow) > 0, $shadow, default); | ||
| $default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color)); | ||
| $shadows-without-spread: join((),(),comma); | ||
| $shadows: join((),(),comma); | ||
| $has-spread: false; | ||
|
|
||
| @each $layer in $shadow { | ||
| $layer: if($layer == 'default', $default, $layer); | ||
| @if length($layer) > 4 { | ||
| $has-spread: true; | ||
| $shadows-without-spread: append($shadows-without-spread, nth($layer,1) nth($layer,2) nth($layer,3) nth($layer,5)); | ||
| $shadows: append($shadows, $layer); | ||
| } @else { | ||
| $shadows-without-spread: append($shadows-without-spread, $layer); | ||
| $shadows: append($shadows, $layer); | ||
| } | ||
| } | ||
| @if $has-spread { | ||
| text-shadow: $shadows-without-spread; | ||
| } | ||
| text-shadow: $shadows; | ||
| } | ||
|
|
||
| // Provides a single cross-browser CSS text shadow. | ||
| // | ||
| // Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread | ||
| // according to the configuration defaults above. | ||
| @mixin single-text-shadow( | ||
| $hoff: false, | ||
| $voff: false, | ||
| $blur: false, | ||
| $spread: false, | ||
| $color: false | ||
| ) { | ||
| // A lot of people think the color comes first. It doesn't. | ||
| @if type-of($hoff) == color { | ||
| $temp-color: $hoff; | ||
| $hoff: $voff; | ||
| $voff: $blur; | ||
| $blur: $spread; | ||
| $spread: $color; | ||
| $color: $temp-color; | ||
| } | ||
| // Can't rely on default assignment with multiple supported argument orders. | ||
| $hoff: if($hoff, $hoff, $default-text-shadow-h-offset); | ||
| $voff: if($voff, $voff, $default-text-shadow-v-offset); | ||
| $blur: if($blur, $blur, $default-text-shadow-blur ); | ||
| $spread: if($spread, $spread, $default-text-shadow-spread ); | ||
| $color: if($color, $color, $default-text-shadow-color ); | ||
| // We don't need experimental support for this property. | ||
| @if $color == none or $hoff == none { | ||
| @include text-shadow(none); | ||
| } @else { | ||
| @include text-shadow(compact($hoff $voff $blur $spread $color)); | ||
| } | ||
| } |
| @@ -0,0 +1,171 @@ | ||
| @import "compass/support"; | ||
|
|
||
| // The the user threshold for transition support. Defaults to `$graceful-usage-threshold` | ||
| $transition-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
|
|
||
| // CSS Transitions | ||
| // Currently only works in Webkit. | ||
| // | ||
| // * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 | ||
| // * We'll be prepared. | ||
| // | ||
| // Including this submodule sets following defaults for the mixins: | ||
| // | ||
| // $default-transition-property : all | ||
| // $default-transition-duration : 1s | ||
| // $default-transition-function : false | ||
| // $default-transition-delay : false | ||
| // | ||
| // Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s). | ||
|
|
||
| $default-transition-property: all !default; | ||
|
|
||
| $default-transition-duration: 1s !default; | ||
|
|
||
| $default-transition-function: null !default; | ||
|
|
||
| $default-transition-delay: null !default; | ||
|
|
||
| $transitionable-prefixed-values: transform, transform-origin !default; | ||
|
|
||
|
|
||
|
|
||
| // Checks if the value given is a unit of time. | ||
| @function is-time($value) { | ||
| @return if(type-of($value) == number, not not index(s ms, unit($value)), false); | ||
| } | ||
|
|
||
| // Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`. | ||
| @function prefixed-for-transition($prefix, $property) { | ||
| @if not $prefix { | ||
| @return $property; | ||
| } | ||
| @if type-of($property) == list or type-of($property) == arglist { | ||
| $new-list: comma-list(); | ||
| @each $v in $property { | ||
| $new-list: append($new-list, prefixed-for-transition($prefix, $v)); | ||
| } | ||
| @return $new-list; | ||
| } @else { | ||
| @if index($transitionable-prefixed-values, $property) { | ||
| @return #{$prefix}-#{$property}; | ||
| } @else { | ||
| @return $property; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // One or more properties to transition | ||
| // | ||
| // * for multiple, use a comma-delimited list | ||
| // * also accepts "all" or "none" | ||
|
|
||
| @mixin transition-property($properties...) { | ||
| $properties: set-arglist-default($properties, $default-transition-property); | ||
| @include with-each-prefix(css-transitions, $transition-support-threshold) { | ||
| $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties); | ||
| @include prefix-prop(transition-property, $props); | ||
| } | ||
| } | ||
|
|
||
| // One or more durations in seconds | ||
| // | ||
| // * for multiple, use a comma-delimited list | ||
| // * these durations will affect the properties in the same list position | ||
|
|
||
| @mixin transition-duration($durations...) { | ||
| $durations: set-arglist-default($durations, $default-transition-duration); | ||
| @include prefixed-properties(css-transitions, $transition-support-threshold, ( | ||
| transition-duration: $durations | ||
| )); | ||
| } | ||
|
|
||
| // One or more timing functions | ||
| // | ||
| // * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)] | ||
| // * For multiple, use a comma-delimited list | ||
| // * These functions will effect the properties in the same list position | ||
|
|
||
| @mixin transition-timing-function($functions...) { | ||
| $functions: set-arglist-default($functions, $default-transition-function); | ||
| @include prefixed-properties(css-transitions, $transition-support-threshold, ( | ||
| transition-timing-function: $functions | ||
| )); | ||
| } | ||
|
|
||
| // One or more transition-delays in seconds | ||
| // | ||
| // * for multiple, use a comma-delimited list | ||
| // * these delays will effect the properties in the same list position | ||
|
|
||
| @mixin transition-delay($delays...) { | ||
| $delays: set-arglist-default($delays, $default-transition-delay); | ||
| @include prefixed-properties(css-transitions, $transition-support-threshold, ( | ||
| transition-delay: $delays | ||
| )); | ||
| } | ||
|
|
||
| // Transition all-in-one shorthand | ||
|
|
||
| @mixin single-transition( | ||
| $property: $default-transition-property, | ||
| $duration: $default-transition-duration, | ||
| $function: $default-transition-function, | ||
| $delay: $default-transition-delay | ||
| ) { | ||
| @include transition(compact($property $duration $function $delay)); | ||
| } | ||
|
|
||
| @mixin transition($transitions...) { | ||
| $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),); | ||
| $transitions: set-arglist-default($transitions, $default); | ||
|
|
||
| @include with-each-prefix(css-transitions, $transition-support-threshold) { | ||
| $delays: comma-list(); | ||
| $transitions-without-delays: comma-list(); | ||
| $transitions-with-delays: comma-list(); | ||
| $has-delays: false; | ||
|
|
||
|
|
||
| // This block can be made considerably simpler at the point in time that | ||
| // we no longer need to deal with the differences in how delays are treated. | ||
| @each $transition in $transitions { | ||
| // Extract the values from the list | ||
| // (this would be cleaner if nth took a 3rd argument to provide a default value). | ||
| $property: nth($transition, 1); | ||
| $duration: if(length($transition) >= 2, nth($transition, 2), null); | ||
| $timing-function: if(length($transition) >= 3, nth($transition, 3), null); | ||
| $delay: if(length($transition) >= 4, nth($transition, 4), null); | ||
| $has-delays: $has-delays or $delay; | ||
|
|
||
| // If a delay is provided without a timing function | ||
| @if is-time($timing-function) and not $delay { | ||
| $delay: $timing-function; | ||
| $timing-function: null; | ||
| $has-delays: true; | ||
| } | ||
|
|
||
| @if $current-prefix == -webkit { | ||
| // Keep a list of delays in case one is specified | ||
| $delays: append($delays, if($delay, $delay, 0s)); | ||
| $transitions-without-delays: append($transitions-without-delays, | ||
| prefixed-for-transition($current-prefix, $property) $duration $timing-function); | ||
| } @else { | ||
| $transitions-with-delays: append($transitions-with-delays, | ||
| prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay); | ||
| } | ||
| } | ||
|
|
||
| @if $current-prefix == -webkit { | ||
| @include prefix-prop(transition, $transitions-without-delays); | ||
| @if $has-delays { | ||
| @include prefix-prop(transition-delay, $delays); | ||
| } | ||
| } @else if $current-prefix { | ||
| @include prefix-prop(transition, $transitions-with-delays); | ||
| } @else { | ||
| transition: $transitions-with-delays; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,71 @@ | ||
| // User Interface | ||
| // This file can be expanded to handle all the user interface properties as | ||
| // they become available in browsers: | ||
| // http://www.w3.org/TR/2000/WD-css3-userint-20000216 | ||
|
|
||
| @import "compass/support"; | ||
|
|
||
| // The prefixed support threshold for user-select. | ||
| // Defaults to the $graceful-usage-threshold. | ||
| $userselect-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
| // This property controls the selection model and granularity of an element. | ||
| // | ||
| // @param $select | ||
| // [ none | text | toggle | element | elements | all | inherit ] | ||
| @mixin user-select($select) { | ||
| $select: unquote($select); | ||
|
|
||
| @include with-each-prefix(user-select-none, $userselect-support-threshold) { | ||
| // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none` | ||
| // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select | ||
| @include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select)); | ||
| } | ||
| } | ||
|
|
||
| // The prefixed support threshold for input-placeholder. | ||
| // Defaults to the $graceful-usage-threshold. | ||
| $input-placeholder-support-threshold: $graceful-usage-threshold !default; | ||
|
|
||
| // Style the html5 input placeholder in browsers that support it. | ||
| // | ||
| // The styles for the input placeholder are passed as mixin content | ||
| // and the selector comes from the mixin's context. | ||
| // | ||
| // For example: | ||
| // | ||
| // #{elements-of-type(text-input)} { | ||
| // @include input-placeholder { | ||
| // color: #bfbfbf; | ||
| // font-style: italic; | ||
| // } | ||
| // } | ||
| // | ||
| // if you want to apply the placeholder styles to all elements supporting | ||
| // the `input-placeholder` pseudo class (beware of performance impacts): | ||
| // | ||
| // * { | ||
| // @include input-placeholder { | ||
| // color: #bfbfbf; | ||
| // font-style: italic; | ||
| // } | ||
| // } | ||
| @mixin input-placeholder { | ||
| @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) { | ||
| @if $current-prefix == -webkit { | ||
| &::-webkit-input-placeholder { @content; } | ||
| } | ||
| @elseif $current-prefix == -moz { | ||
| // for Firefox 19 and below | ||
| @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) { | ||
| &:-moz-placeholder { @content; } | ||
| } | ||
| // for Firefox 20 and above | ||
| &::-moz-placeholder { @content; } | ||
| } | ||
| @elseif $current-prefix == -ms { | ||
| &:-ms-input-placeholder { @content; } | ||
| } | ||
| } | ||
| // This is not standardized yet so no official selector is generated. | ||
| } |
| @@ -0,0 +1,93 @@ | ||
| @mixin translate-z-in($time){ | ||
|
|
||
| } | ||
|
|
||
| .animation-parent { @include perspective(1000px); } | ||
|
|
||
| .animate { @include transition-cubic-bezier(.4s); | ||
| &.translate-z-in { @include opacity(0); @include transform( translateZ(10px) ); @include transition-cubic-bezier(1.5s); | ||
| &.in { @include opacity(1); @include transform( translateZ(0px) ); } | ||
| } | ||
| &.translate-z-out { @include opacity(0); @include transform( translateZ(-10px) ); @include transition-cubic-bezier(1.5s); | ||
| &.in { @include opacity(1); @include transform( translateZ(0px) ); } | ||
| } | ||
| &.scale-out { @include opacity(0); @include transform( scale(.98) ); @include transition-cubic-bezier(1.5s); | ||
| &.in { @include opacity(1); @include transform( scale(1) ); } | ||
| } | ||
| &.scale-in { @include opacity(0); @include transform( scale(1.02) ); @include transition-cubic-bezier(.5s); | ||
| &.in { @include opacity(1); @include transform( scale(1) ); } | ||
| } | ||
| &.fade-in { @include opacity(0); | ||
| &.in { @include opacity(1); } | ||
| } | ||
| &.fade-out { @include opacity(1); | ||
| &.in { @include opacity(0); } | ||
| } | ||
|
|
||
| //&.animation-time-1s { @include transition-duration(1s); } | ||
| &.animation-time-01s { @include transition-cubic-bezier(.1s); } | ||
| &.animation-time-02s { @include transition-cubic-bezier(.2s); } | ||
| &.animation-time-03s { @include transition-cubic-bezier(.3s); } | ||
| &.animation-time-04s { @include transition-cubic-bezier(.4s); } | ||
| &.animation-time-05s { @include transition-cubic-bezier(.5s); } | ||
| &.animation-time-06s { @include transition-cubic-bezier(.6s); } | ||
| &.animation-time-07s { @include transition-cubic-bezier(.7s); } | ||
| &.animation-time-08s { @include transition-cubic-bezier(.8s); } | ||
| &.animation-time-09s { @include transition-cubic-bezier(.9s); } | ||
| &.animation-time-1s { @include transition-cubic-bezier(1s); } | ||
| &.animation-time-1-5s { @include transition-cubic-bezier(1.5s); } | ||
| &.animation-time-2s { @include transition-cubic-bezier(2s); } | ||
| &.animation-time-2-5s { @include transition-cubic-bezier(2.5s); } | ||
| &.animation-time-3s { @include transition-cubic-bezier(3s); } | ||
|
|
||
| &.delay-01s { @include transition-delay(.1s); } | ||
| &.delay-02s { @include transition-delay(.2s); } | ||
| &.delay-03s { @include transition-delay(.3s); } | ||
| &.delay-04s { @include transition-delay(.4s); } | ||
| &.delay-05s { @include transition-delay(.5s); } | ||
| &.delay-06s { @include transition-delay(.6s); } | ||
| &.delay-07s { @include transition-delay(.7s); } | ||
| &.delay-08s { @include transition-delay(.8s); } | ||
| &.delay-09s { @include transition-delay(.9s); } | ||
| &.delay-1s { @include transition-delay(1s); } | ||
| &.delay-1-5s { @include transition-delay(1.5s); } | ||
| &.delay-2s { @include transition-delay(2s); } | ||
| &.delay-2-5s { @include transition-delay(2.5s); } | ||
| } | ||
|
|
||
| @include keyframe(scaleout-scalein) { | ||
| 0% { | ||
| @include transform( scale(1) ); | ||
| } | ||
| 50% { | ||
| @include transform( scale(1.5) ); | ||
| } | ||
|
|
||
| 100% { | ||
| @include transform( scale(1) ); | ||
| } | ||
| } | ||
|
|
||
| @include keyframe(scalein) { | ||
| 0% { | ||
| @include opacity(0); | ||
| @include transform( scale(.8) ); | ||
| } | ||
| 100% { | ||
| @include opacity(1); | ||
| @include transform( scale(1) ); | ||
| } | ||
| } | ||
|
|
||
| @include keyframe(fadeout-fadein) { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 50% { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| body, html { height: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; overflow: hidden; position: relative; color: $color-white; background-color: #191919; margin-right: 0 !important; } | ||
|
|
||
| a { @include transit; outline: none !important; color: $color-white; | ||
| &:hover, &:focus, &:active { color: $color-white; text-decoration: none; } | ||
| &.icon { | ||
| i { margin-right: 6px; margin-left: 6px; } | ||
| } | ||
| } | ||
|
|
||
| dl { | ||
| dt { float: left; } | ||
| dd { text-align: right; margin-bottom: 6px; } | ||
| } | ||
|
|
||
| h1 { @include text-shadow(0px 4px 10px rgba(0,0,0,.65)); text-transform: uppercase; font-size: 90px; font-weight: 700; } | ||
| h2 { @include text-shadow(0px 4px 10px rgba(0,0,0,.45)); font-size: 24px; font-weight: normal; margin-bottom: 30px; } | ||
| h3 { margin-bottom: 25px; margin-top: 10px; } | ||
| h4 { font-size: 16px; } | ||
|
|
||
| p { @include opacity(.6); } | ||
|
|
||
| img { max-width: 100%; } |
| @@ -0,0 +1,58 @@ | ||
| input[type="text"],input[type="email"], input[type="date"], input[type="time"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], textarea.form-control { @include border-radius(0px); @include transition(.3s); @include box-shadow(none); -webkit-appearance: none; background-color: rgba($color-white,.02); border: 2px solid rgba($color-white, .3); color: $color-white; outline: none !important; padding-top: 13px; padding-bottom: 13px; padding-left: 13px; padding-right: 13px; width: 100%; height: inherit; font-size: 13px; | ||
| &:active, &:focus { @include box-shadow(none); background-color: rgba($color-white,.15); border-color: rgba($color-white,.2); } | ||
| &:hover { @include box-shadow(none); background-color: rgba($color-white,.1); } | ||
| } | ||
|
|
||
| form { | ||
| &.has-background { @include border-radius(5px); background-color: rgba($color-black, .3); padding: 20px; } | ||
| &.submitted { | ||
| .status { @include scale(1); } | ||
| .form-group, .input-group { pointer-events: none; } | ||
| } | ||
| .status { @include scale(.1); @include transit; top: -20px; right: -20px; position: absolute; | ||
| .status-icon { @include border-radius(50%); @include transit; @include shadow-big; width: 40px; height: 40px; background-color: grey; color: #fff; text-align: center; line-height: 40px; | ||
| &.valid { background-color: #50aa8d; } | ||
| &.invalid { background-color: #e45544; } | ||
| } | ||
| i { font-size: 18px; } | ||
| } | ||
| } | ||
|
|
||
| .form { | ||
| ::-webkit-input-placeholder { color: rgba($color-white, .7); } | ||
| :-moz-placeholder { color: rgba($color-white, .7); } | ||
| ::-moz-placeholder { color: rgba($color-white, .7); } | ||
| :-ms-input-placeholder { color: rgba($color-white, .7); } | ||
| } | ||
|
|
||
| .input-group { width: 100%; | ||
| .input-group-btn { position: absolute; height: 100%; right: 0; width: auto; z-index: 5; | ||
| .btn { @include transit; height: 100%; background-color: transparent; } | ||
| } | ||
| } | ||
| .form-group { | ||
| .btn { padding-top: 14px; padding-bottom: 13px; } | ||
| } | ||
|
|
||
| .btn { @include transit; outline: none !important; padding-bottom: 5px; margin-bottom: 5px; | ||
| &:active, &:focus, &:hover { outline: none !important; color: $color-white; } | ||
| &.btn-default { border-color: $color-white; border-style: solid; border-width: 2px; background-color: $color-white; font-size: 12px; font-weight: bold; text-transform: uppercase; } | ||
| &.btn-framed { background-color: transparent; color: $color-white; border-color: rgba( $color-white, .3 ); | ||
| &:hover, &:active, &:focus { background-color: transparent; color: $color-white; border-color: rgba( $color-white, 1 ); } | ||
| } | ||
| &.circle { @include border-radius(100%); padding: 0; } | ||
| &.icon-only { display: inline-block; width: 35px; height: 35px; color: $color-white; text-align: center; line-height: 33px; | ||
| i { font-size: 18px; } | ||
| &.btn-xl { width: 50px; height: 50px; line-height: 48px; } | ||
| } | ||
| &.btn-framed-dashed { border-style: dashed; } | ||
| } | ||
|
|
||
| .mailchimp-inside-button { | ||
| form { | ||
| > div { position: relative; } | ||
| input[type=submit]{ position: absolute; padding: 14px; bottom: 0; right: 0; background-color: transparent; border: none; } | ||
| } | ||
| } | ||
|
|
||
| .mc-field-group { margin-bottom: 15px; } |
| @@ -0,0 +1,66 @@ | ||
| @mixin elegant-font { @include text-shadow(none); -webkit-font-smoothing: antialiased; font-family: 'ElegantIcons'; speak: none; font-weight: normal; font-variant: normal; line-height: 1; text-transform: none; } | ||
| @mixin font-awesome { @include text-shadow(none); -webkit-font-smoothing: antialiased; font-family: 'fontawesome'; speak: none; font-weight: normal; font-variant: normal; line-height: 1; text-transform: none; } | ||
| //@mixin transit { @include transition( 0.4s cubic-bezier(.69,.01,.1,1.01) ); } | ||
| @mixin transition-cubic-bezier($time){ | ||
| @include transition( $time cubic-bezier(.69,.01,.1,1.01) ); | ||
| } | ||
| @mixin transit { @include transition( 0.5s ease ); } | ||
| @mixin shadow { @include box-shadow(1px 1px 8px rgba(0,0,0,.07)); } | ||
| @mixin uppercase { text-transform: uppercase; font-size: 10px; font-weight: 700; } | ||
| @mixin frame { border: 2px solid rgba(#000, .2); display: inline-block; } | ||
| @mixin shadow-big { @include box-shadow(0px 1px 40px rgba(0, 0, 0, 0.2)); } | ||
|
|
||
| @mixin gradient-white { | ||
| background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); | ||
| background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); | ||
| background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); | ||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); | ||
| } | ||
|
|
||
| @mixin gradient-black { | ||
| background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); | ||
| background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); | ||
| background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); | ||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); | ||
| } | ||
|
|
||
| @mixin keyframe ($animation_name) { | ||
| @-webkit-keyframes $animation_name { | ||
| @content; | ||
| } | ||
| @-moz-keyframes $animation_name { | ||
| @content; | ||
| } | ||
| @-o-keyframes $animation_name { | ||
| @content; | ||
| } | ||
| @keyframes $animation_name { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| @mixin animation ($delay, $duration, $animation, $forwards, $iteration-count) { | ||
| -webkit-animation-delay: $delay; | ||
| -webkit-animation-duration: $duration; | ||
| -webkit-animation-name: $animation; | ||
| -webkit-animation-fill-mode: $forwards; /* this prevents the animation from restarting! */ | ||
| -webkit-animation-iteration-count: $iteration-count; | ||
|
|
||
| -moz-animation-delay: $delay; | ||
| -moz-animation-duration: $duration; | ||
| -moz-animation-name: $animation; | ||
| -moz-animation-fill-mode: $forwards; /* this prevents the animation from restarting! */ | ||
| -moz-animation-iteration-count: $iteration-count; | ||
|
|
||
| -o-animation-delay: $delay; | ||
| -o-animation-duration: $duration; | ||
| -o-animation-name: $animation; | ||
| -o-animation-fill-mode: $forwards; /* this prevents the animation from restarting! */ | ||
| -o-animation-iteration-count: $iteration-count; | ||
|
|
||
| animation-delay: $delay; | ||
| animation-duration: $duration; | ||
| animation-name: $animation; | ||
| animation-fill-mode: $forwards; /* this prevents the animation from restarting! */ | ||
| -animation-iteration-count: $iteration-count; | ||
| } |
| @@ -0,0 +1,88 @@ | ||
| body::before { | ||
| display: none; | ||
| content: "lg"; | ||
| } | ||
| .gallery-carousel { width: 1170px; } | ||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| // 992px - 1199px | ||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| @media (min-width: 992px) and (max-width: 1199px) { | ||
| body::before { | ||
| content: "md"; | ||
| } | ||
| body.frame { padding: 30px; } | ||
| h1 { font-size: 70px; } | ||
| h2 { font-size: 20px; } | ||
| #outer-wrapper #inner-wrapper #table-wrapper { padding: 30px 0; } | ||
| .author-image { height: 374px; } | ||
| //#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper { width: 200px; padding: 20px; } | ||
| //body.nav-btn-only #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .navigation nav { top: 60px; right: 20px; } | ||
| .gallery-carousel { width: 970px; } | ||
| } | ||
|
|
||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| // 768px - 991px | ||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| @media (min-width: 768px) and (max-width: 991px) { | ||
| body::before { | ||
| content: "sm"; | ||
| } | ||
| body.frame { padding: 30px; font-size: 12px; } | ||
| h1 { font-size: 40px; } | ||
| h2 { font-size: 16px; } | ||
| #outer-wrapper #inner-wrapper #table-wrapper { padding: 15px 0; } | ||
| //#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper { width: 150px; padding: 10px; } | ||
| body.nav-btn-only #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .navigation nav { right: 70px; } | ||
| .side-panel { width: 600px; } | ||
| .side-panel h3, .modal h3 { font-size: 16px; margin-bottom: 15px; } | ||
| .side-panel .carousel { height: 250px; } | ||
| .side-panel .carousel .image { height: 250px; } | ||
| .side-panel .gallery .gallery-item { height: 120px; } | ||
| .author-image { height: 282px; } | ||
| .gallery-carousel { width: 750px; } | ||
| } | ||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| // max to 767px | ||
| //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| @media (max-width: 767px) { | ||
| body::before { | ||
| content: "xs"; | ||
| } | ||
| body.frame { padding: 20px; } | ||
| #outer-wrapper #inner-wrapper #table-wrapper { padding: 20px 0; } | ||
| h1 { font-size: 32px; } | ||
| h2 { font-size: 16px; margin-top: 20px; } | ||
| .side-panel { width: 100%; } | ||
| .nav-btn { top: 30px; right: 30px; } | ||
| body.nav-btn-only #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .navigation nav { top: 20px; right: 70px; } | ||
| #outer-wrapper #inner-wrapper #table-wrapper #row-content #content-wrapper.bottom { vertical-align: middle; } | ||
| #active-slider-nav { bottom: 30px; top: inherit; } | ||
| #active-slider-nav .owl-next { right: 30px; } | ||
| #active-slider-nav .owl-prev { left: 0px; } | ||
| .count-down { margin-bottom: 20px; | ||
| .countdown-row { | ||
| .countdown-section { | ||
| &:after { display: none; } | ||
| } | ||
| .countdown-amount { font-size: 32px; font-weight: bold; display: block; margin-bottom: 0px; position: relative; } | ||
| .countdown-period { @include opacity(.5); font-size: 12px; text-transform: uppercase; } | ||
| } | ||
| &.small { | ||
| .countdown-amount { font-size: 18px; } | ||
| } | ||
| } | ||
| #outer-wrapper #inner-wrapper #table-wrapper .container { width: 100%; text-align: center; } | ||
| #outer-wrapper #inner-wrapper { overflow-y: scroll; } | ||
| .has-background-padding { background-color: rgba($color-black, .4); } | ||
| .background-wrapper { position: fixed; } | ||
| .person.has-divider::after { display: none; } | ||
| .vertical-aligned-wrapper .vertical-aligned-element { display: block; } | ||
| .vertical-aligned-wrapper { display: block; height: auto; } | ||
| .side-panel .close-panel { height: 40px; width: 40px; top: 5px; left: 30px; line-height: 37px; } | ||
| .author-image { height: 200px; width: 200px; display: inline-block; } | ||
| .gallery-carousel { width: 100%; | ||
| .slide { margin-right: 0; } | ||
| } | ||
| } | ||
|
|
||
|
|
| @@ -0,0 +1,105 @@ | ||
| .background-wrapper, .active-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; | ||
| img { width: 100%; height: auto; } | ||
| .map { height: 100%; } | ||
| .background-color { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; | ||
| &.background-color-white { background-color: $color-white; } | ||
| &.background-color-black { background-color: $color-black; } | ||
| } | ||
| } | ||
|
|
||
| .bg-transfer { background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; z-index: -1; width: 100%; | ||
| img { display: none !important; } | ||
| &.bg-fixed { background-attachment: fixed; background-size: 100%; background-position: top center; } | ||
| } | ||
|
|
||
| .center { text-align: center; } | ||
|
|
||
| .note { @include opacity(.4); font-size: 12px; margin: 8px 0; } | ||
|
|
||
| .shadow { @include box-shadow(0px 1px 10px rgba(0,0,0,.07)); } | ||
|
|
||
| .opacity-90 { @include opacity(.9); } | ||
| .opacity-80 { @include opacity(.8); } | ||
| .opacity-70 { @include opacity(.7); } | ||
| .opacity-60 { @include opacity(.6); } | ||
| .opacity-50 { @include opacity(.5); } | ||
| .opacity-40 { @include opacity(.4); } | ||
| .opacity-30 { @include opacity(.3); } | ||
| .opacity-20 { @include opacity(.2); } | ||
| .opacity-19 { @include opacity(.19); } | ||
| .opacity-18 { @include opacity(.18); } | ||
| .opacity-17 { @include opacity(.17); } | ||
| .opacity-16 { @include opacity(.16); } | ||
| .opacity-15 { @include opacity(.15); } | ||
| .opacity-14 { @include opacity(.14); } | ||
| .opacity-13 { @include opacity(.13); } | ||
| .opacity-12 { @include opacity(.12); } | ||
| .opacity-11 { @include opacity(.11); } | ||
| .opacity-10 { @include opacity(.1); } | ||
| .opacity-9 { @include opacity(.09); } | ||
| .opacity-8 { @include opacity(.08); } | ||
| .opacity-7 { @include opacity(.07); } | ||
| .opacity-6 { @include opacity(.06); } | ||
| .opacity-5 { @include opacity(.05); } | ||
| .opacity-4 { @include opacity(.04); } | ||
| .opacity-3 { @include opacity(.03); } | ||
| .opacity-2 { @include opacity(.02); } | ||
| .opacity-1 { @include opacity(.01); } | ||
| .opacity-0 { @include opacity(.00); } | ||
|
|
||
| .text-align-left { text-align: left; } | ||
| .text-align-right { text-align: right; } | ||
|
|
||
| .underline { text-decoration: underline; } | ||
|
|
||
| .width-10 { width: 10%; } | ||
| .width-20 { width: 20%; } | ||
| .width-25 { width: 25%; } | ||
| .width-30 { width: 30%; } | ||
| .width-33 { width: 33%; } | ||
| .width-40 { width: 40%; } | ||
| .width-50 { width: 50%; } | ||
| .width-60 { width: 60%; } | ||
| .width-70 { width: 70%; } | ||
| .width-80 { width: 80%; } | ||
| .width-90 { width: 90%; } | ||
| .width-100 { width: 100%; } | ||
|
|
||
| .height-10 { height: 10%; } | ||
| .height-20 { height: 20%; } | ||
| .height-30 { height: 30%; } | ||
| .height-40 { height: 40%; } | ||
| .height-50 { height: 50%; } | ||
| .height-60 { height: 60%; } | ||
| .height-70 { height: 70%; } | ||
| .height-80 { height: 80%; } | ||
| .height-90 { height: 90%; } | ||
| .height-100 { height: 100%; } | ||
|
|
||
| .height-200px { height: 200px !important; } | ||
| .height-250px { height: 250px !important; } | ||
| .height-300px { height: 300px !important; } | ||
| .height-350px { height: 350px !important; } | ||
| .height-400px { height: 400px !important; } | ||
| .height-450px { height: 450px !important; } | ||
| .height-500px { height: 500px !important; } | ||
| .height-550px { height: 550px !important; } | ||
| .height-600px { height: 600px !important; } | ||
| .height-650px { height: 650px !important; } | ||
| .height-700px { height: 700px !important; } | ||
| .height-750px { height: 750px !important; } | ||
| .height-800px { height: 800px !important; } | ||
| .height-850px { height: 850px !important; } | ||
| .height-900px { height: 900px !important; } | ||
| .height-950px { height: 950px !important; } | ||
| .height-1000px { height: 1000px !important; } | ||
|
|
||
| .space { height: 60px; } | ||
|
|
||
| .vertical-aligned-wrapper { display: table; height: 100%; | ||
| .vertical-aligned-element { display: table-cell; vertical-align: middle; float: none; | ||
| &.top { vertical-align: top; } | ||
| //&.middle { vertical-align: middle; } | ||
| &.bottom { vertical-align: bottom; } | ||
| } | ||
| } |
| @@ -0,0 +1,2 @@ | ||
| $color-black: #000; | ||
| $color-white: #fff; |
| @@ -0,0 +1,55 @@ | ||
| /*------------------------------------------------------------------ | ||
| Project: Soon - Creative Coming Soon Template | ||
| Version: 1.0 | ||
| Last change: 7.11.2016 | ||
| Assigned to: ThemeStarz | ||
| [Table of contents] | ||
| 1. Elements Styling | ||
| 2. Universal classes | ||
| 3. Classes | ||
| 4. Forms | ||
| 5. Responsive | ||
| 6. Animations | ||
| [Color codes] | ||
| Default: #000; | ||
| Color White: #fff | ||
| [Typography] | ||
| Body copy: 'Roboto', sans-serif; 14px; | ||
| Headers: 'Roboto', sans-serif; | ||
| -------------------------------------------------------------------*/ | ||
|
|
||
| $color-black: #000; | ||
| $color-white: #fff; | ||
|
|
||
| @import 'compass/css3/appearance'; | ||
| @import 'compass/css3/border-radius'; | ||
| @import 'compass/css3/box-shadow'; | ||
| @import 'compass/css3/box-sizing'; | ||
| @import 'compass/css3/text-shadow'; | ||
| @import 'compass/css3/transition'; | ||
| @import 'compass/css3/transform'; | ||
| @import 'compass/css3/background-clip'; | ||
| @import 'compass/css3/opacity'; | ||
| @import 'compass/css3/filter'; | ||
|
|
||
| @import 'helpers/mixin'; | ||
| //@import 'helpers/variables'; | ||
| /* 1. Elements Styling */ | ||
| @import 'helpers/elements'; | ||
| /* 2. Universal classes */ | ||
| @import 'helpers/universal-classes'; | ||
| /* 3. Classes */ | ||
| @import 'helpers/classes'; | ||
| /* 4. Forms */ | ||
| @import 'helpers/forms'; | ||
| /* 5. Responsive */ | ||
| @import 'helpers/responsive'; | ||
| /* 6. Animation */ | ||
| @import 'helpers/animations'; |
| @@ -0,0 +1,43 @@ | ||
| $color-black: #fff; | ||
| $color-white: #000; | ||
|
|
||
| @import 'compass/css3/appearance'; | ||
| @import 'compass/css3/border-radius'; | ||
| @import 'compass/css3/box-shadow'; | ||
| @import 'compass/css3/box-sizing'; | ||
| @import 'compass/css3/text-shadow'; | ||
| @import 'compass/css3/transition'; | ||
| @import 'compass/css3/transform'; | ||
| @import 'compass/css3/background-clip'; | ||
| @import 'compass/css3/opacity'; | ||
| @import 'compass/css3/filter'; | ||
|
|
||
| @import 'helpers/mixin'; | ||
| /* 1. Elements Styling */ | ||
| @import 'helpers/elements'; | ||
| /* 2. Universal classes */ | ||
| @import 'helpers/universal-classes'; | ||
| /* 3. Classes */ | ||
| @import 'helpers/classes'; | ||
| /* 4. Forms */ | ||
| @import 'helpers/forms'; | ||
| /* 5. Responsive */ | ||
| @import 'helpers/responsive'; | ||
| /* 6. Animation */ | ||
| @import 'helpers/animations'; | ||
|
|
||
| body { background-color: #fff; } | ||
| .side-panel { | ||
| &:before { @include opacity(.9); } | ||
| } | ||
| .has-vignette { | ||
| &:before { @include box-shadow( inset 0px 0px 300px rgba($color-black,.6) ); /*background-image: url("../../assets/img/vignette-white.png");*/ } | ||
| } | ||
|
|
||
| .has-stripes { | ||
| &:after { background-image: url("../../assets/img/stripes-black.png"); } | ||
| } | ||
|
|
||
| #navigation-wrapper { | ||
| .background-wrapper { background-color: #f8f8f8; } | ||
| } |
