init repo
This commit is contained in:
nikolay ivanov
12
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/_recipes.scss
vendored
Normal file
12
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/_recipes.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
@import "recipes/google-webfont";
|
||||
@import "recipes/background";
|
||||
@import "recipes/color";
|
||||
@import "recipes/effect";
|
||||
@import "recipes/form";
|
||||
@import "recipes/layout";
|
||||
@import "recipes/media-queries";
|
||||
@import "recipes/shadow";
|
||||
@import "recipes/shape";
|
||||
@import "recipes/shared";
|
||||
@import "recipes/ui";
|
||||
@import "recipes/webfont-icon";
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "recipes/background/noise";
|
||||
@import "recipes/background/gradients";
|
||||
@import "recipes/background/blueprint-grid";
|
||||
@import "recipes/background/radial-overlay";
|
||||
@import "recipes/background/striped";
|
||||
@import "recipes/background/tartan";
|
||||
@import "recipes/background/carbon-fiber";
|
||||
@import "recipes/background/stripes";
|
||||
@import "recipes/background/cicada";
|
||||
@import "recipes/background/tablecloth";
|
||||
@import "recipes/background/lined-paper";
|
||||
@import "recipes/background/madras";
|
||||
@import "recipes/background/checkerboard";
|
||||
@import "recipes/background/houndstooth";
|
||||
@import "recipes/background/polka-dot";
|
||||
200
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_color.scss
vendored
Normal file
200
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_color.scss
vendored
Normal file
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
*
|
||||
* @class Color
|
||||
* @author David Kaneda - http://www.davidkaneda.com
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Returns the brightness (out of 100) of a specified color.
|
||||
* @todo explain why this is useful
|
||||
* @param {color} $color The color you want the brightness value of
|
||||
* @return {measurement}
|
||||
*/
|
||||
@function brightness($color) {
|
||||
$r: red($color) / 255 * 100;
|
||||
$g: green($color) / 255 * 100;
|
||||
$b: blue($color) / 255 * 100;
|
||||
|
||||
$brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@return $brightness;
|
||||
}
|
||||
|
||||
// @private
|
||||
@function color-difference($c1, $c2) {
|
||||
@return (max(red($c1), red($c2)) - min(red($c1), red($c2))) + (max(green($c1), green($c2)) - min(green($c1), green($c2))) + (max(blue($c1), blue($c2)) - min(blue($c1), blue($c2)));
|
||||
}
|
||||
|
||||
// @private
|
||||
@function color-luminance($value) {
|
||||
@if $value <= 0.03928 {
|
||||
@return $value / 12.92;
|
||||
} @else {
|
||||
@return ($value + 0.055)/1.055 * ($value + 0.055)/1.055;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the luminosity for a specified color
|
||||
* @param {color} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
@function luminosity($color) {
|
||||
$r: color-luminance(red($color) / 255);
|
||||
$g: color-luminance(green($color) / 255);
|
||||
$b: color-luminance(blue($color) / 255);
|
||||
$l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
|
||||
@debug 'luminosity for ' + $color + ' is ' + $l;
|
||||
@return $l;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the contrast ratio between two colors
|
||||
* @param {color1} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
@function contrast-ratio($color1, $color2) {
|
||||
$l1: luminosity($color1);
|
||||
$l2: luminosity($color2);
|
||||
|
||||
@if $l2 > $l1 {
|
||||
@return $l2 / $l1;
|
||||
} @else {
|
||||
@return $l1 / $l2;
|
||||
}
|
||||
}
|
||||
|
||||
@function get-color-mode($color) {
|
||||
@if brightness($color) > 55 {
|
||||
@return light;
|
||||
} @else {
|
||||
@return dark;
|
||||
}
|
||||
}
|
||||
|
||||
@function color-offset($color, $contrast: 85%, $mode: $color-mode, $inverse: false) {
|
||||
$flat_color: check-opacity($color);
|
||||
|
||||
@if $mode == inverse {
|
||||
$mode: reverse-color-mode($color-mode);
|
||||
}
|
||||
|
||||
@if $inverse == true {
|
||||
$mode: reverse-color-mode($mode);
|
||||
}
|
||||
|
||||
@if ($mode == light) {
|
||||
@return rgba(lighten($flat_color, $contrast), opacity($color));
|
||||
} @else if ($mode == dark) {
|
||||
@return rgba(darken($flat_color, $contrast), opacity($color));
|
||||
} @else {
|
||||
@debug $mode " is not a valid color mode. Use light, dark, or inverse.";
|
||||
@return white;
|
||||
}
|
||||
}
|
||||
|
||||
@function reverse-color-mode($mode) {
|
||||
@if $mode == dark {
|
||||
@return light;
|
||||
} @else {
|
||||
@return dark;
|
||||
}
|
||||
}
|
||||
|
||||
@function check-opacity($color) {
|
||||
@if (opacity($color) == 0) {
|
||||
$color: opacify($color, 1);
|
||||
}
|
||||
@if $color == transparent {
|
||||
$color: opacify($color, 1);
|
||||
}
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@function color-by-background($bg-color, $contrast: $default-text-contrast) {
|
||||
$bg-color: check-opacity($bg-color);
|
||||
$tmpmode: get-color-mode($bg-color);
|
||||
|
||||
@return color-offset($bg-color, $contrast, $tmpmode, $inverse: true);
|
||||
}
|
||||
|
||||
@function get-inset-offset($mode){
|
||||
@if $mode == light {
|
||||
@return 1px;
|
||||
} @else {
|
||||
@return -1px;
|
||||
}
|
||||
}
|
||||
|
||||
@function safe-saturate($color, $amount) {
|
||||
@if saturation($color) > 0 {
|
||||
@return saturate($color, $amount);
|
||||
} @else {
|
||||
@return $color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors the text of an element based on lightness of its background.
|
||||
*
|
||||
* .my-element {
|
||||
* @include color-by-background(#fff); // Colors text black.
|
||||
* }
|
||||
*
|
||||
* .my-element {
|
||||
* @include color-by-background(#fff, 40%); // Colors text gray.
|
||||
* }
|
||||
*
|
||||
* @param {color} $bg-color Background color of element.
|
||||
* @param {percent} $contrast Contrast of text color to its background.
|
||||
*
|
||||
*/
|
||||
@mixin color-by-background($bg-color, $contrast: $default-text-contrast, $default-color: false, $inset-text: false) {
|
||||
@if $default-color {
|
||||
color: color-by-background(hsla(hue($default-color), saturation($default-color), lightness($bg-color), opacity($bg-color)), $contrast);
|
||||
} @else {
|
||||
color: color-by-background($bg-color, $contrast);
|
||||
}
|
||||
|
||||
@if $inset-text {
|
||||
@include inset-by-background($bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inset-by-background($bg-color, $contrast: 10%, $box: false){
|
||||
$bg-color: check-opacity($bg-color);
|
||||
$offset: get-inset-offset(get-color-mode($bg-color));
|
||||
|
||||
@if ($box == true) {
|
||||
@include box-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
|
||||
}
|
||||
|
||||
@include text-shadow(color-offset($bg-color, $contrast, $mode: get-color-mode($bg-color)) 0 $offset 0);
|
||||
}
|
||||
|
||||
@function hsv-to-rgb($color) {
|
||||
$r: red($color) / 255;
|
||||
$g: green($color) / 255;
|
||||
$b: blue($color) / 255;
|
||||
$a: opacity($color);
|
||||
}
|
||||
|
||||
// @debug hsv(rgba(#3E87E3, .5));
|
||||
|
||||
@function brighten($color, $amount) {
|
||||
$current_brightness: brightness($color);
|
||||
}
|
||||
|
||||
$base-color: blue !default;
|
||||
$neutral-color: #ccc !default;
|
||||
$highlight-color: darken(safe-saturate($base-color, 15), 5) !default;
|
||||
|
||||
$base-gradient: matte !default;
|
||||
$default-text-contrast: 85% !default;
|
||||
$color-mode: get-color-mode($neutral-color) !default;
|
||||
|
||||
// @debug color-difference(#95419F, #0FFF90);
|
||||
// @debug brightness(#cbea0d) - brightness(#ea850d);
|
||||
// @debug contrast-ratio(#95419F, #0FFF90);
|
||||
// @debug brightness(#E0F200);
|
||||
@@ -0,0 +1,6 @@
|
||||
@import "effect/glass";
|
||||
@import "effect/cutout";
|
||||
@import "effect/bevel";
|
||||
@import "effect/tape";
|
||||
@import "effect/corner-folded";
|
||||
@import "effect/folded-corner";
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "recipes/form/element";
|
||||
@import "recipes/form/skin";
|
||||
@@ -0,0 +1,15 @@
|
||||
$google-font-name: false !default;
|
||||
$google-font-weights: false !default;
|
||||
|
||||
@if $google-font-name and $google-font-weights {
|
||||
@include google-webfont($google-font-name, $google-font-weights);
|
||||
}
|
||||
|
||||
@mixin google-webfont(
|
||||
$font-name,
|
||||
$font-weights: 500
|
||||
) {
|
||||
// @debug join($font-name,'', '|');
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=#{$font-name}:#{$font-weights}");
|
||||
}
|
||||
34
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_icons.scss
vendored
Normal file
34
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_icons.scss
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
@mixin icon($background-position: 0 50%, $display: inline-block)
|
||||
{
|
||||
background-repeat: no-repeat;
|
||||
background-position: $background-position;
|
||||
display: $display;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@mixin icon-inline(
|
||||
$side: left,
|
||||
$width: 24px,
|
||||
$height: auto,
|
||||
$background-position: 2px 50%,
|
||||
$display: inline-block
|
||||
) {
|
||||
@if $height == auto
|
||||
{
|
||||
$height: $width;
|
||||
}
|
||||
|
||||
@include icon($background-position, $display);
|
||||
padding-#{$side}: $width;
|
||||
line-height: $height;
|
||||
}
|
||||
|
||||
@mixin icon-left($width: 24px, $height: auto, $background-position: 2px 50%, $display: inline-block)
|
||||
{
|
||||
@include icon-inline(left, $width, $height, $background-position, $display);
|
||||
}
|
||||
|
||||
@mixin icon-right($width: 24px, $height: auto, $background-position: 100% 50%, $display: inline-block)
|
||||
{
|
||||
@include icon-inline(right, $width, $height, $background-position, $display);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "recipes/layout/vertical-align";
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* Media Queries Mixins
|
||||
*
|
||||
* @todo Do we have to take care of print ?
|
||||
*
|
||||
* @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
|
||||
* @author Maxime Thirouin <maxime.thirouin@gmail.com>
|
||||
*/
|
||||
|
||||
// differentes screen width definition: 3 limits allow 4 configurations
|
||||
/*
|
||||
$media-query-width-big: 1280px;
|
||||
$media-query-width-medium: 960px;
|
||||
$media-query-width-small: 480px;
|
||||
*/
|
||||
// recent desktop & big screen
|
||||
@mixin media-big
|
||||
{
|
||||
//@media (min-width: $media-query-width-big)
|
||||
@media (min-width: 1280px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// average desktop
|
||||
@mixin media-medium
|
||||
{
|
||||
//@media (max-width: $media-query-width-big - 1px)
|
||||
@media (max-width: 1279px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin media-medium-only
|
||||
{
|
||||
//@media (min-width: $media-query-width-medium) and (max-width: $media-query-width-big - 1px)
|
||||
@media (min-width: 960px) and (max-width: 1279px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// old computer & tablet
|
||||
@mixin media-small
|
||||
{
|
||||
//@media (max-width: $media-query-width-medium - 1px)
|
||||
@media (max-width: 959px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-small-only
|
||||
{
|
||||
//@media (min-width: $media-query-width-small) and (max-width: $media-query-width-medium - 1px)
|
||||
@media (min-width: 480px) and (max-width: 959px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// mobile
|
||||
@mixin media-tiny
|
||||
{
|
||||
//@media (max-width: $media-query-width-small - 1px)
|
||||
@media (max-width: 479px)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// orientation
|
||||
@mixin media-portrait
|
||||
{
|
||||
@media (orientation:portrait)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-landscape
|
||||
{
|
||||
@media (orientation:landscape)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// media for high resolution screen
|
||||
@mixin media-highres
|
||||
{
|
||||
|
||||
@media
|
||||
(-webkit-min-device-pixel-ratio: 2),
|
||||
(-o-min-device-pixel-ratio: 3/2),
|
||||
(min-device-pixel-ratio: 2)
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "recipes/shadow/drop";
|
||||
@import "recipes/shadow/top-edge";
|
||||
11
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_shape.scss
vendored
Normal file
11
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/stylesheets/recipes/_shape.scss
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Shapes !
|
||||
* Polygons, ellipses and symbols
|
||||
*
|
||||
* @thanks Chris Coyier @chriscoyier
|
||||
* @link http://css-tricks.com/examples/ShapesOfCSS/
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@import "recipes/shape/ellipse";
|
||||
@import "recipes/shape/polygon";
|
||||
@import "recipes/shape/symbol";
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "shared/block-inline-block";
|
||||
@import "shared/clearfix";
|
||||
@import "shared/list-inline-block";
|
||||
@import "shared/pseudo-element";
|
||||
@import "shared/user-select";
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "recipes/ui/convex";
|
||||
@import "recipes/ui/glossy";
|
||||
@import "recipes/ui/gradient";
|
||||
@import "recipes/ui/helper";
|
||||
@import "recipes/ui/keyboard";
|
||||
@import "recipes/ui/menu";
|
||||
@import "recipes/ui/overlay";
|
||||
@import "recipes/ui/separator";
|
||||
@@ -0,0 +1,209 @@
|
||||
@import 'compass';
|
||||
|
||||
@import 'shared';
|
||||
@import 'background/gradients';
|
||||
|
||||
/**
|
||||
* @class Webfont Icon
|
||||
* Great to use with the [Pictos font](http://pictos.drewwilson.com/)
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @cfg {color} $webfont-icon-base-color
|
||||
* The default color of icons when using the {@link #webfont-icon} mixin.
|
||||
*
|
||||
* Defaults to `white`.
|
||||
*/
|
||||
$webfont-icon-base-color: #999 !default;
|
||||
|
||||
/**
|
||||
* @cfg {color} $webfont-icon-default-stroke
|
||||
* The default color to use on the border of icons, when using the {@link #webfont-icon} mixin.
|
||||
*
|
||||
* Defaults to `null`.
|
||||
*/
|
||||
$webfont-icon-default-stroke: darken($webfont-icon-base-color, 10) !default;
|
||||
|
||||
$webfont-icon-highlight-color: #3778E5 !default;
|
||||
|
||||
/**
|
||||
* @cfg {string} $webfont-icon-default-gradient
|
||||
* The default gradient to use when using the {@link #webfont-icon} mixin.
|
||||
*
|
||||
* Defaults to `matte`.
|
||||
*/
|
||||
$webfont-icon-default-gradient: matte !default;
|
||||
|
||||
// Base style for pseudo-selectors
|
||||
// @todo Doc me yo
|
||||
|
||||
.webfont-icon-base {
|
||||
color: transparent;
|
||||
@include background-clip(text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-indent: 0;
|
||||
@include text-shadow(none);
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
// @todo Doc me yo
|
||||
|
||||
@mixin include-font-websymbols {
|
||||
@include font-face(
|
||||
"websymbols",
|
||||
font-files(
|
||||
"websymbols/websymbols-regular-webfont.ttf", truetype,
|
||||
|
||||
"websymbols/websymbols-regular-webfont.eot", opentype
|
||||
)
|
||||
);
|
||||
.webfont-icon-websymbols {
|
||||
font-family: websymbols;
|
||||
@extend .webfont-icon-base;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin include-font-heydings {
|
||||
@include font-face(
|
||||
"heydings",
|
||||
font-files(
|
||||
"heydings/heydings_icons.ttf", truetype
|
||||
)
|
||||
);
|
||||
.webfont-icon-heydings {
|
||||
font-family: heydings;
|
||||
@extend .webfont-icon-base;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin include-font-iconic {
|
||||
@include font-face(
|
||||
"iconic",
|
||||
font-files(
|
||||
"iconic/iconic_stroke.ttf", truetype,
|
||||
"iconic/iconic_stroke.otf", opentype
|
||||
)
|
||||
);
|
||||
.webfont-icon-iconic {
|
||||
font-family: iconic;
|
||||
@extend .webfont-icon-base;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Includes a character into the specified selector, styled as an icon.
|
||||
*
|
||||
* @include webfont-icon('a');
|
||||
*
|
||||
* @param {color} $color
|
||||
* The color of the icon. Defaults to {@link #$webfont-icon-default-background $webfont-icon-default-background}.
|
||||
*
|
||||
* @param {measurement} $size
|
||||
* The size of the icon
|
||||
*
|
||||
* @param {color} $stroke
|
||||
* The color of the border. Defautls to {@link #$webfont-icon-default-border $webfont-icon-default-border}.
|
||||
*
|
||||
* @param {boolean} $include-staes
|
||||
* True to include states for hover and active. Defaults to `true`.
|
||||
*/
|
||||
@mixin webfont-icon(
|
||||
$character: attr(data-icon),
|
||||
$class: 'base',
|
||||
|
||||
$color: $webfont-icon-base-color,
|
||||
$color-hover: $webfont-icon-highlight-color,
|
||||
$color-active: darken($color-hover, 7%),
|
||||
|
||||
$size: 48px,
|
||||
|
||||
$glow: null,
|
||||
$glow-hover: $webfont-icon-highlight-color 0 0 10px,
|
||||
$glow-active: $glow-hover,
|
||||
|
||||
$shadow: rgba(#000, .5) 0 1px 3px, // Shadow doesn't change, but hover does
|
||||
|
||||
$stroke: false,
|
||||
$stroke-hover: 1px darken($color-hover, 5),
|
||||
$stroke-active: 1px darken($color-active, 5),
|
||||
|
||||
$gradient: $webfont-icon-default-gradient,
|
||||
$gradient-hover: $gradient,
|
||||
$gradient-active: recessed,
|
||||
|
||||
$include-states: true,
|
||||
$hide-text: true,
|
||||
$text-align: right,
|
||||
$text-spacing: 4px
|
||||
) {
|
||||
@include background-clip(text);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: $size;
|
||||
|
||||
@if $hide-text == true {
|
||||
text-indent: -9000px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
} @else {
|
||||
@if $text-align == right {
|
||||
padding-left: $size + $text-spacing;
|
||||
} @else {
|
||||
padding-right: $size + $text-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@if $stroke {
|
||||
-webkit-text-stroke: if($stroke == true, darken($color, 10), $stroke);
|
||||
}
|
||||
&:after, &:before {
|
||||
@extend .webfont-icon-#{$class};
|
||||
|
||||
@if ($hide-text != true and $text-align == left) {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
font-size: $size;
|
||||
content: $character;
|
||||
|
||||
@include background-gradient($color, $gradient);
|
||||
}
|
||||
&:before {
|
||||
// @include background-clip(padding-box);
|
||||
background: none;
|
||||
@include text-shadow($shadow);
|
||||
}
|
||||
|
||||
@if $include-states {
|
||||
&:hover {
|
||||
@if $stroke-hover and $stroke {
|
||||
-webkit-text-stroke: $stroke-hover;
|
||||
}
|
||||
color: $color-hover;
|
||||
|
||||
&:before {
|
||||
@include text-shadow($shadow, $glow-hover);
|
||||
}
|
||||
&:after {
|
||||
@include background-gradient($color-hover, $gradient-hover);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@if $stroke-active and $stroke {
|
||||
-webkit-text-stroke: $stroke-active;
|
||||
}
|
||||
color: $color-active;
|
||||
&:before {
|
||||
@include text-shadow($shadow, $glow-active);
|
||||
}
|
||||
&:after {
|
||||
@include background-gradient($color-active, $gradient-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// Keyframes for Animations
|
||||
|
||||
@mixin keyframes($name)
|
||||
{
|
||||
@-webkit-keyframes $name
|
||||
{
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes $name
|
||||
{
|
||||
@content;
|
||||
}
|
||||
@-o-keyframes $name
|
||||
{
|
||||
@content;
|
||||
}
|
||||
@keyframes $name
|
||||
{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Blueprint grid background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#blueprint-grid
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-blueprint-grid(
|
||||
$background-color: #4285C9,
|
||||
$foreground-color: rgba(#fff, .2),
|
||||
$foreground-color-alt: rgba(#fff, .1),
|
||||
$width: 100px,
|
||||
$width-alt: 20px,
|
||||
$border-width: 2px,
|
||||
$border-width-alt: 1px)
|
||||
{
|
||||
background-color: $background-color;
|
||||
|
||||
$transparent: transparentize($foreground-color, 1);
|
||||
|
||||
// cannot use 0 (sass_extensions error) for horizontal linear-gradient, so we use keyword 'left'
|
||||
@include background-image(
|
||||
// big square
|
||||
linear-gradient($foreground-color $border-width, $transparent $border-width),
|
||||
linear-gradient(left, $foreground-color $border-width, $transparent $border-width),
|
||||
|
||||
// tiny square
|
||||
linear-gradient($foreground-color-alt $border-width-alt, $transparent $border-width-alt),
|
||||
linear-gradient(left, $foreground-color-alt $border-width-alt, $transparent $border-width-alt)
|
||||
);
|
||||
|
||||
background-size:
|
||||
// big square
|
||||
$width $width,
|
||||
$width $width,
|
||||
// tiny square
|
||||
$width-alt $width-alt,
|
||||
$width-alt $width-alt
|
||||
;
|
||||
|
||||
// to replace the grid correctly
|
||||
background-position:
|
||||
-#{$border-width} -#{$border-width},
|
||||
-#{$border-width} -#{$border-width},
|
||||
-#{$border-width-alt} -#{$border-width-alt},
|
||||
-#{$border-width-alt} -#{$border-width-alt}
|
||||
;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Carbon Fiber background pattern
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author David Kaneda http://www.davidkaneda.com/ for the Sass mixin
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/
|
||||
*
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
$base-color: #222 !default;
|
||||
|
||||
@mixin background-carbon-fiber(
|
||||
$background-color: $base-color,
|
||||
$dot-color: scale-lightness($background-color, -50),
|
||||
$highlight-color: rgba(#fff, .1),
|
||||
$spacing-size: 16px,
|
||||
$dot-size: 12.5%
|
||||
) {
|
||||
@include background-image(
|
||||
radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size),
|
||||
radial-gradient($dot-color $dot-size, rgba(darken($dot-color, 5), 0) $dot-size),
|
||||
radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size),
|
||||
radial-gradient($highlight-color $dot-size, rgba(#fff, 0) $dot-size)
|
||||
);
|
||||
|
||||
background-repeat: repeat;
|
||||
background-position: 0 0, $spacing-size/2 $spacing-size/2, 0 1px, $spacing-size/2 $spacing-size/2 + 1px;
|
||||
background-color: $background-color;
|
||||
background-size: $spacing-size $spacing-size;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Checkerboard background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#checkerboard
|
||||
* @link http://lea.verou.me/css3patterns/#diagonal-checkerboard
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-checkerboard($bg-color: #eee, $box-color: black, $size: 60px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$box-color 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$box-color 75%,
|
||||
$box-color
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$box-color 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$box-color 75%,
|
||||
$box-color
|
||||
)
|
||||
);
|
||||
background-size: $size $size;
|
||||
background-position: 0 0, ($size / 2) ($size / 2);
|
||||
}
|
||||
|
||||
|
||||
@mixin background-checkerboard-diagonal($bg-color: #eee, $box-color: black, $size: 60px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$box-color 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$box-color 75%,
|
||||
$box-color
|
||||
),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
$box-color 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$box-color 75%,
|
||||
$box-color
|
||||
)
|
||||
);
|
||||
background-size:$size $size;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Cicada background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#cicada-stripes
|
||||
*
|
||||
* @author Randy Merril http://forthedeveloper.com/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-stripes-cicada($bg-color: gray, $stripe-color: white, $dir: left) {
|
||||
$transparent: rgba(black, 0);
|
||||
$stripe-color1: rgba($stripe-color, 0.07);
|
||||
$stripe-color2: rgba($stripe-color, 0.13);
|
||||
$stripe-color3: rgba($stripe-color, 0.17);
|
||||
$stripe-color4: rgba($stripe-color, 0.19);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
$dir,
|
||||
$stripe-color1 50%,
|
||||
$transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
$dir,
|
||||
$stripe-color2 50%,
|
||||
$transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
$dir,
|
||||
$transparent 50%,
|
||||
$stripe-color3 50%
|
||||
),
|
||||
linear-gradient(
|
||||
$dir,
|
||||
$transparent 50%,
|
||||
$stripe-color4 50%
|
||||
)
|
||||
);
|
||||
background-size: 13px, 29px, 37px, 53px;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
*
|
||||
* @class Gradients
|
||||
* @author David Kaneda http://www.davidkaneda.com/
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Adds a background gradient into a specified selector.
|
||||
*
|
||||
* @include background-gradient(#444, 'glossy');
|
||||
*
|
||||
* You can also use color-stops if you want full control of the gradient:
|
||||
*
|
||||
* @include background-gradient(#444, color-stops(#333, #222, #111));
|
||||
*
|
||||
* @param {color} $bg-color
|
||||
* The base color of the gradient.
|
||||
*
|
||||
* @param {string/list} $type
|
||||
* The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or linear:
|
||||
*
|
||||
* @include background-gradient(red, 'glossy');
|
||||
*
|
||||
* It can also accept a list of color-stop values:;
|
||||
*
|
||||
* @include background-gradient(black, color-stops(#333, #111, #000));
|
||||
*
|
||||
* @param {string} $direction
|
||||
* The direction of the gradient.
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
$default-gradient: matte !default;
|
||||
|
||||
@mixin background-gradient($bg-color, $type: $default-gradient, $direction: top, $contrast: 1) {
|
||||
background-image: none;
|
||||
background-color: $bg-color;
|
||||
|
||||
@if $type != null and $bg-color != transparent {
|
||||
// Color stops provided
|
||||
@if type-of($type) == "list" {
|
||||
@include background-image(linear-gradient($direction, $type));
|
||||
}
|
||||
|
||||
// Default gradients
|
||||
@else if $type == bevel {
|
||||
@include background-image(bevel-gradient($bg-color, $direction, $contrast));
|
||||
} @else if $type == glossy {
|
||||
@include background-image(glossy-gradient($bg-color, $direction, $contrast));
|
||||
} @else if $type == recessed {
|
||||
@include background-image(recessed-gradient($bg-color, $direction, $contrast));
|
||||
} @else if $type == linear {
|
||||
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));
|
||||
} @else if $type == matte {
|
||||
@include background-image(matte-gradient($bg-color, $direction, $contrast));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// These are functions so they can be combined together with background-image()// ie. @include background-image(background_noise(), glossy-gradient());
|
||||
|
||||
@function bevel-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
|
||||
@return linear-gradient($direction, color_stops(
|
||||
lighten($bg-color, 15%),
|
||||
lighten($bg-color, 8%) 30%,
|
||||
$bg-color 65%,
|
||||
darken($bg-color, 6%)
|
||||
));
|
||||
}
|
||||
|
||||
@function glossy-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
|
||||
@return linear-gradient($direction, color_stops(lighten($bg-color, 15% * $contrast), lighten($bg-color, 5% * $contrast) 50%, $bg-color 51%, darken($bg-color, 5% * $contrast)));
|
||||
}
|
||||
|
||||
@function recessed-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
|
||||
@return linear-gradient($direction, color_stops(darken($bg-color, 10% * $contrast), darken($bg-color, 5% * $contrast) 10%, $bg-color 65%, lighten($bg-color, .5% * $contrast)));
|
||||
}
|
||||
|
||||
@function matte-gradient (
|
||||
$bg-color: $base-color,
|
||||
$direction: top,
|
||||
$contrast: 1
|
||||
) {
|
||||
@return linear-gradient(
|
||||
$direction,
|
||||
color_stops(
|
||||
lighten($bg-color, 15% * $contrast),
|
||||
lighten($bg-color, 5% * $contrast) 3%,
|
||||
darken($bg-color, 5% * $contrast)
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
*
|
||||
* Houndstooth background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#houndstooth
|
||||
*
|
||||
* @author Antoine Bernier http://abernier.name for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-houndstooth($color-1: white, $color-2: black, $size: 2em) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $color-1;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
$color-1 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$color-2 75%,
|
||||
$color-2
|
||||
),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
$color-2 25%,
|
||||
$transparent 25%,
|
||||
$transparent 75%,
|
||||
$color-1 75%,
|
||||
$color-1
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
$color-2 17%,
|
||||
$transparent 17%,
|
||||
$transparent 25%,
|
||||
$color-2 25%,
|
||||
$color-2 36%,
|
||||
$transparent 36%,
|
||||
$transparent 64%,
|
||||
$color-2 64%,
|
||||
$color-2 75%,
|
||||
$transparent 75%,
|
||||
$transparent 83%,
|
||||
$color-2 83%
|
||||
)
|
||||
);
|
||||
background-size: $size $size;
|
||||
background-position: 0 0, ($size / 2) ($size / 2), ($size / 2) ($size / 2)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Lined paper background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#lined-paper
|
||||
*
|
||||
* @author Sarah Backhouse http://www.jadu.net/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-lined-paper($bg-color: white, $rule-color: #eeeeee, $guide-color: #abced4, $baseline: 1.5em, $margin: 79px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
left,
|
||||
$transparent $margin,
|
||||
$guide-color $margin,
|
||||
$guide-color $margin + 3,
|
||||
$transparent $margin + 3
|
||||
),
|
||||
linear-gradient(
|
||||
top,
|
||||
$rule-color 0.05em,
|
||||
$transparent 0.05em
|
||||
)
|
||||
);
|
||||
background-size: 100% $baseline;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Madras background pattern
|
||||
*
|
||||
* Before compass 0.11.5, you need to add
|
||||
* Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
|
||||
* To your configuration (config.rb)
|
||||
* @see https://github.com/chriseppstein/compass/issues/401
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#madras
|
||||
*
|
||||
* @author Divya Manian http://nimbupani.com/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-madras($bg-color: hsl(34, 53%, 82%), $color1: $bg-color, $color2: $bg-color, $color3: $bg-color) {
|
||||
$transparent: rgba(black, 0);
|
||||
// calculate colors if specific colors aren't passed in
|
||||
@if ($color1 == $bg-color){
|
||||
$color1: change-color(rgba(complement($bg-color), 1), $saturation: 65%, $lightness: 10%, $alpha: 0.5);
|
||||
}
|
||||
@if ($color2 == $bg-color){
|
||||
$color2: adjust-color(rgba($bg-color, 1), $hue: -30, $lightness: -20%, $alpha: -0.5);
|
||||
}
|
||||
@if ($color3 == $bg-color){
|
||||
$color3: adjust-color(rgba($bg-color, 1), $saturation: 35%, $lightness: -20%, $alpha: -0.5);
|
||||
}
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 5px,
|
||||
$color1 5px,
|
||||
$color1 10px,
|
||||
$transparent 10px,
|
||||
$transparent 35px,
|
||||
$color2 35px,
|
||||
$color2 40px,
|
||||
$color1 40px,
|
||||
$color1 50px,
|
||||
$transparent 50px,
|
||||
$transparent 60px,
|
||||
$color2 60px,
|
||||
$color2 70px,
|
||||
$color3 70px,
|
||||
$color3 80px,
|
||||
$transparent 80px,
|
||||
$transparent 90px,
|
||||
$color2 90px,
|
||||
$color2 110px,
|
||||
$transparent 110px,
|
||||
$transparent 120px,
|
||||
$color1 120px,
|
||||
$color1 140px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
135deg,
|
||||
transparent 5px,
|
||||
$color1 5px,
|
||||
$color1 10px,
|
||||
$transparent 10px,
|
||||
$transparent 35px,
|
||||
$color2 35px,
|
||||
$color2 40px,
|
||||
$color1 40px,
|
||||
$color1 50px,
|
||||
$transparent 50px,
|
||||
$transparent 60px,
|
||||
$color2 60px,
|
||||
$color2 70px,
|
||||
$color3 70px,
|
||||
$color3 80px,
|
||||
$transparent 80px,
|
||||
$transparent 90px,
|
||||
$color2 90px,
|
||||
$color2 110px,
|
||||
$transparent 110px,
|
||||
$transparent 140px,
|
||||
$color1 140px,
|
||||
$color1 160px
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Background noise recipe
|
||||
*
|
||||
* This recipe use a sass function to generate a .png file
|
||||
*
|
||||
* Inspired by a jQuery plugin "Noisy" by Daniel Rapp @DanielRapp
|
||||
* @link https://github.com/DanielRapp/Noisy
|
||||
*
|
||||
* Converted using Sass by Aaron Russell @aaronrussell & Philipp Bosch @philippbosch
|
||||
* @link https://gist.github.com/1021332
|
||||
*
|
||||
* Ported to a sass gem by Antti Salonen @antsa
|
||||
* @link https://github.com/antsa/sassy_noise
|
||||
*
|
||||
* Mixin: background-noise
|
||||
* Function: background_noise
|
||||
*
|
||||
* @author Daniel Rapp @DanielRapp
|
||||
* @author Aaron Russell @aaronrussell
|
||||
* @author Philipp Bosch @philippbosch
|
||||
* @author Antti Salonen @antsa
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
// default values
|
||||
$background-noise-intensity-default: 0.5 !default;
|
||||
$background-noise-opacity-default: 0.08 !default;
|
||||
$background-noise-size-default: 200 !default;
|
||||
$background-noise-monochrome-default: false !default;
|
||||
|
||||
@mixin background-noise(
|
||||
$intensity: $background-noise-intensity-default,
|
||||
$opacity: $background-noise-opacity-default,
|
||||
$size: $background-noise-size-default,
|
||||
$monochrome: $background-noise-monochrome-default
|
||||
)
|
||||
{
|
||||
background-image: background_noise(
|
||||
$intensity: $intensity,
|
||||
$opacity: $opacity,
|
||||
$size: $size,
|
||||
$monochrome: $monochrome
|
||||
);
|
||||
background-repeat: repeat;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
*
|
||||
* Polkadot background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#polka-dot
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-polka-dot($bg-color: black, $dot-color: white, $size: 15%, $spacing: 60px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
radial-gradient(
|
||||
$dot-color $size,
|
||||
$transparent $size + 1
|
||||
),
|
||||
radial-gradient(
|
||||
$dot-color $size,
|
||||
$transparent $size + 1
|
||||
)
|
||||
);
|
||||
background-size: $spacing $spacing;
|
||||
background-position: 0 0, ($spacing / 2) ($spacing / 2);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Background overlay inspired by Google Chrome modal overlay
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-radial-overlay(
|
||||
$background-color: rgba(#000, .7),
|
||||
$foreground-color: rgba(#7f7f7f, .5),
|
||||
$radial-change-color-distance: 35%)
|
||||
{
|
||||
@include background-image(radial-gradient($foreground-color, $foreground-color $radial-change-color-distance, $background-color));
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Striped background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author David Kaneda http://www.davidkaneda.com @davidkaneda for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-striped(
|
||||
$bgcolor: $base-color,
|
||||
$stripe-color: darken($bgcolor, 5),
|
||||
$minorsize: 20px,
|
||||
$majorsize: 40px,
|
||||
$angle: 45deg
|
||||
) {
|
||||
background-color: $bgcolor;
|
||||
@include background-image(
|
||||
linear-gradient($angle, rgba($stripe-color, 0), rgba($stripe-color, 0) $minorsize, $stripe-color $minorsize, $stripe-color $majorsize)
|
||||
);
|
||||
background-size: $majorsize;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Striped background patterns
|
||||
*
|
||||
* Before compass 0.11.5, you need to add
|
||||
* Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
|
||||
* To your configuration (config.rb)
|
||||
* @see https://github.com/chriseppstein/compass/issues/401
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#horizontal-stripes
|
||||
* @link http://lea.verou.me/css3patterns/#vertical-stripes
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-stripes-straight($dir: left, $bg-color: gray, $stripe-color: rgba(white, 0.5), $size: 50px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
$dir,
|
||||
$transparent 50%,
|
||||
$stripe-color 50%
|
||||
)
|
||||
);
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
|
||||
@mixin background-diagonal-stripes($dir: 45deg, $bg-color: gray, $stripe-color: rgba(white, 0.5), $size: 50px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
repeating-linear-gradient(
|
||||
$dir,
|
||||
$transparent,
|
||||
$transparent $size / 2,
|
||||
$stripe-color $size / 2,
|
||||
$stripe-color $size
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
*
|
||||
* Tablecloth background pattern
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#tablecloth
|
||||
*
|
||||
* @author Lea Verou http://lea.verou.me/ for the original pattern
|
||||
* @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-tablecloth($bg-color: white, $stripe-color: rgba(200,0,0,.5), $size: 50px) {
|
||||
$transparent: rgba(black, 0);
|
||||
background-color: $bg-color;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
0,
|
||||
$stripe-color 50%,
|
||||
$transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
$stripe-color 50%,
|
||||
$transparent 50%
|
||||
)
|
||||
);
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
*
|
||||
* Before compass 0.11.5, you need to add
|
||||
* Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
|
||||
* To your configuration (config.rb)
|
||||
* @see https://github.com/chriseppstein/compass/issues/401
|
||||
*
|
||||
* @link http://lea.verou.me/css3patterns/#tartan
|
||||
*
|
||||
* @author Marta Armada http://swwweet.com/ for the original pattern
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx for the sass mixin
|
||||
*/
|
||||
|
||||
@import "compass/css3/images";
|
||||
|
||||
@mixin background-tartan($background-color: hsl(2, 57%, 40%))
|
||||
{
|
||||
$transparent: rgba(#fff, 0);
|
||||
|
||||
background-color: $background-color;
|
||||
@include background-image(
|
||||
repeating-linear-gradient(
|
||||
$transparent,
|
||||
$transparent 50px,
|
||||
rgba(#000,.4) 50px,
|
||||
rgba(#000,.4) 53px,
|
||||
$transparent 53px,
|
||||
$transparent 63px,
|
||||
rgba(#000,.4) 63px,
|
||||
rgba(#000,.4) 66px,
|
||||
$transparent 66px,
|
||||
$transparent 116px,
|
||||
rgba(#000,.5) 116px,
|
||||
rgba(#000,.5) 166px,
|
||||
rgba(#fff,.2) 166px,
|
||||
rgba(#fff,.2) 169px,
|
||||
rgba(#000,.5) 169px,
|
||||
rgba(#000,.5) 179px,
|
||||
rgba(#fff,.2) 179px,
|
||||
rgba(#fff,.2) 182px,
|
||||
rgba(#000,.5) 182px,
|
||||
rgba(#000,.5) 232px,
|
||||
$transparent 232px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
// same as above, just with 180deg
|
||||
$transparent,
|
||||
$transparent 50px,
|
||||
rgba(#000,.4) 50px,
|
||||
rgba(#000,.4) 53px,
|
||||
$transparent 53px,
|
||||
$transparent 63px,
|
||||
rgba(#000,.4) 63px,
|
||||
rgba(#000,.4) 66px,
|
||||
$transparent 66px,
|
||||
$transparent 116px,
|
||||
rgba(#000,.5) 116px,
|
||||
rgba(#000,.5) 166px,
|
||||
rgba(#fff,.2) 166px,
|
||||
rgba(#fff,.2) 169px,
|
||||
rgba(#000,.5) 169px,
|
||||
rgba(#000,.5) 179px,
|
||||
rgba(#fff,.2) 179px,
|
||||
rgba(#fff,.2) 182px,
|
||||
rgba(#000,.5) 182px,
|
||||
rgba(#000,.5) 232px,
|
||||
$transparent 232px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-35deg,
|
||||
$transparent,
|
||||
$transparent 2px,
|
||||
rgba(#000,.2) 2px,
|
||||
rgba(#000,.2) 3px,
|
||||
$transparent 3px,
|
||||
$transparent 5px,
|
||||
rgba(#000,.2) 5px
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
$bevel-base-color: rgba(#333, .5) !default;
|
||||
$bevel-size: 5px !default;
|
||||
$bevel-contrast: 8% !default;
|
||||
$bevel-border-width: 1px !default;
|
||||
$bevel-blur: 0 !default;
|
||||
|
||||
@mixin bevel
|
||||
{
|
||||
@include bevel-border;
|
||||
@include bevel-shadow;
|
||||
}
|
||||
|
||||
@mixin bevel-border(
|
||||
$base-color: $bevel-base-color,
|
||||
$border-width: $bevel-border-width,
|
||||
$contrast: $bevel-contrast
|
||||
)
|
||||
{
|
||||
border: $border-width solid $base-color;
|
||||
border-top-color: lighten($base-color, $contrast);
|
||||
border-bottom-color: darken($base-color, $contrast);
|
||||
}
|
||||
|
||||
// @todo: $direction
|
||||
|
||||
@mixin bevel-shadow(
|
||||
$size: $bevel-size,
|
||||
$blur: $bevel-blur
|
||||
)
|
||||
{
|
||||
@include box-shadow(
|
||||
inset 0 0 (1px + $blur) rgba(#000, .8),
|
||||
inset 0 2px $blur rgba(#fff, .5),
|
||||
inset 0 (-$size) $blur rgba(#000, .6),
|
||||
inset 0 (-$size - 1px - $blur) $blur rgba(#fff, .3)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Corner folded with pure CSS
|
||||
*
|
||||
* Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
|
||||
* IE8 is not supported because it not render properly box-shadow and
|
||||
* pseudo element should be selected with ::element and not :element
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
|
||||
* @todo Nix in .4
|
||||
*/
|
||||
|
||||
@import "recipes/effect/folded-corner";
|
||||
|
||||
@mixin effect-corner-folded(
|
||||
$position: top-right,
|
||||
$color: #ddd,
|
||||
$background-color: #fff,
|
||||
$width: 1em,
|
||||
$border-radius: .3em,
|
||||
$box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
|
||||
{
|
||||
@warn 'Deprecated, please use folded-corner mixin instead.';
|
||||
|
||||
@include folded-corner($position, $color, $background-color, $width, $border-radius, $box-shadow);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
$cutout-size: 5px !default;
|
||||
$cutout-blur: 5px !default;
|
||||
|
||||
@mixin cutout(
|
||||
$size: 5px,
|
||||
$blur: 5px
|
||||
) {
|
||||
@include box-shadow(cutout($size, $blur))
|
||||
}
|
||||
|
||||
@function cutout(
|
||||
$depth: 5px,
|
||||
$blur: 5px
|
||||
) {
|
||||
@return
|
||||
0 1px 0 rgba(255,255,255,.2),
|
||||
inset 0 $depth ($blur) rgba(0,0,0,.6),
|
||||
inset 0 1px $blur rgba(0,0,0,.6)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Corner folded with pure CSS
|
||||
*
|
||||
* Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
|
||||
* IE8 is not supported because it not render properly box-shadow and
|
||||
* pseudo element should be selected with ::element and not :element
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
|
||||
*/
|
||||
|
||||
@import "recipes/shared/pseudo-element";
|
||||
|
||||
@mixin folded-corner (
|
||||
$position: top-right,
|
||||
$color: #ddd,
|
||||
$background-color: #fff,
|
||||
$width: 1em,
|
||||
$border-radius: .3em,
|
||||
$box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
|
||||
{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before
|
||||
{
|
||||
@include pseudo-element;
|
||||
border-style: solid;
|
||||
|
||||
@include box-shadow($box-shadow);
|
||||
|
||||
@if ($position == 'top-right')
|
||||
{
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 0 $width $width 0;
|
||||
border-color: $color $background-color;
|
||||
@include border-radius(0 0 0 $border-radius);
|
||||
}
|
||||
@elseif ($position == 'top-left')
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: $width $width 0 0;
|
||||
border-color: $background-color $color;
|
||||
@include border-radius(0 0 $border-radius 0);
|
||||
}
|
||||
@elseif ($position == 'bottom-right')
|
||||
{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 0 $width $width;
|
||||
border-color: $background-color $color;
|
||||
@include border-radius($border-radius 0 0 0);
|
||||
}
|
||||
@elseif ($position == 'bottom-left')
|
||||
{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-width: $width 0 0 $width;
|
||||
border-color: $color $background-color;
|
||||
@include border-radius(0 $border-radius 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Glass effect
|
||||
* Use this on image for better effect render
|
||||
*
|
||||
* Inspired from Simurai's IMDB redisign
|
||||
*
|
||||
* @link http://lab.simurai.com/redesign/imdb
|
||||
* @thanks Simurai @simurai
|
||||
*/
|
||||
|
||||
@import '../shared/pseudo-element';
|
||||
|
||||
@mixin effect-glass(
|
||||
$color: #fff,
|
||||
$reflectDegree: -45deg,
|
||||
$border-radius: 4px
|
||||
)
|
||||
{
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&:after
|
||||
{
|
||||
@include pseudo-element($width: auto);
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: transparent solid 1px;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow(
|
||||
inset $color 0 0 2px,
|
||||
inset rgba($color,.4) 0 5px 10px
|
||||
);
|
||||
@include background(
|
||||
linear-gradient($reflectDegree, rgba($color,.12) 50%, rgba($color, 0) 50.5% ));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Scotch tape effect with pure CSS
|
||||
*
|
||||
* @thanks Nick La @nickla for original concept
|
||||
* @link http://webdesignerwall.com/tutorials/css3-image-styles
|
||||
*
|
||||
* @author David Kaneda http://www.davidkaneda.com
|
||||
*
|
||||
*/
|
||||
|
||||
@import "../shared/pseudo-element";
|
||||
|
||||
$tape-width: 60px !default;
|
||||
$tape-height: 25px !default;
|
||||
$tape-color: rgb(254,243,127) !default;
|
||||
$tape-opacity: .4 !default;
|
||||
$tape-angle: -2deg !default;
|
||||
|
||||
@mixin tape (
|
||||
$width: $tape-width,
|
||||
$height: $tape-height,
|
||||
$color: $tape-color,
|
||||
$opacity: $tape-opacity,
|
||||
$angle: $tape-angle
|
||||
)
|
||||
{
|
||||
overflow: visible;
|
||||
&:after {
|
||||
@include pseudo-element($width: $width, $height: $height);
|
||||
top: ceil(-$height/2);
|
||||
left: 50%;
|
||||
margin-left: -$width/2;
|
||||
|
||||
border: solid 1px darken($color, 10);
|
||||
|
||||
@include background-gradient(rgba($color, $opacity), $type: matte);
|
||||
@include rotate($angle);
|
||||
@include box-shadow(
|
||||
inset 0 1px 0 rgba(255,255,255,.3),
|
||||
0 1px 0 rgba(0,0,0,.2)
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "recipes/form/element/inline";
|
||||
@@ -0,0 +1 @@
|
||||
@import "recipes/form/skin/natural";
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Form element inline mixin
|
||||
* This mixin allow you to have a label inline with your input
|
||||
* It's simply based on inline-block behavior
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin form-element-inline($label-width: 8em, $input-width: 20em)
|
||||
{
|
||||
label
|
||||
{
|
||||
display: inline-block;
|
||||
width: $label-width;
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea
|
||||
{
|
||||
width: $input-width;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
@mixin form-skin-natural-input($color: #999, $border: #3399e9)
|
||||
{
|
||||
padding: .4em;
|
||||
|
||||
border: 1px solid $border;
|
||||
border-top-color: lighten($border, 4%);
|
||||
border-bottom-color: darken($border, 4%);
|
||||
|
||||
@include border-radius(.4em);
|
||||
@include background(linear-gradient(#fff, darken(#fff, 10%) 1%, #fff 30%));
|
||||
|
||||
@include box-shadow(rgba(0, 0, 0, .1) 0 0 .4em); // , inset rgba(0, 0, 0, .2) 0 1px 2px
|
||||
|
||||
$border-transition: border linear .2s;
|
||||
$box-shadow-transition: box-shadow linear .2s;
|
||||
$transition: $box-shadow-transition, $border-transition;
|
||||
-moz-transition: -moz-$transition;
|
||||
-webkit-transition: -webkit-$transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
@mixin form-skin-natural-input-hover($border: #3399e9)
|
||||
{
|
||||
@include box-shadow(0 0 .8em rgba($border,.4));
|
||||
}
|
||||
|
||||
@mixin form-skin-natural-input-focus($border: #3399e9)
|
||||
{
|
||||
outline:none; // reset default browser behavior
|
||||
border-color: $border;
|
||||
@include box-shadow(0 0 .4em rgba($border,.65));
|
||||
}
|
||||
|
||||
@mixin form-skin-natural-label($color: #999)
|
||||
{
|
||||
cursor: pointer;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// here we can make better selector because when including mixin, & is too long
|
||||
@mixin form-skin-natural-label-adjacent-effect($color-hover, $color-focus)
|
||||
{
|
||||
label:hover input, // <label><input /></label>
|
||||
label:hover select, // <label><select /></label>
|
||||
label:hover textarea, // <label><textarea /></label>
|
||||
input:hover + label, // <input /> <label> </label>
|
||||
select:hover + label, // <select /> <label> </label>
|
||||
textarea:hover + label // <textarea /> <label> </label>
|
||||
/* CANT WORK :( we need oposited of the + adjacent selector
|
||||
label + input:hover, // <label> </label> <input />
|
||||
label + select:hover, // <label> </label> <select />
|
||||
label + textarea:hover, // <label> </label> <textarea />
|
||||
*/
|
||||
{
|
||||
color: $color-hover;
|
||||
}
|
||||
|
||||
label:focus input, // <label><input /></label>
|
||||
label:focus select, // <label><select /></label>
|
||||
label:focus textarea, // <label><textarea /></label>
|
||||
input:focus + label, // <input /> <label> </label>
|
||||
select:focus + label, // <select /> <label> </label>
|
||||
textarea:focus + label // <textarea /> <label> </label>
|
||||
/* CANT WORK :( we need oposited of the + adjacent selector
|
||||
label + input:focus, // <label> </label> <input />
|
||||
label + select:focus, // <label> </label> <select />
|
||||
label + textarea:focus, // <label> </label> <textarea />
|
||||
*/
|
||||
{
|
||||
color: $color-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-skin-natural-button($color: #fff, $background: #3399e9)
|
||||
{
|
||||
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
|
||||
color: $color;
|
||||
|
||||
padding: .6em 1em;
|
||||
|
||||
text-shadow: 0 1px 0 rgba(darken($background, 80%), .4);
|
||||
|
||||
border: 1px solid darken($background, 5%);
|
||||
border-top-color: darken($background, 10%);
|
||||
border-bottom-color: lighten($background, 10%);
|
||||
background: $background; //fallback
|
||||
@include background(linear-gradient(lighten($background, 10%), darken($background, 10%)));
|
||||
|
||||
@include border-radius(.6em);
|
||||
@include box-shadow(rgba(0, 0, 0, .4) 0 .1em .2em);
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
{
|
||||
text-decoration: none; // for <a>
|
||||
background: darken($background, 5%); //fallback
|
||||
@include background(linear-gradient(lighten($background, 12%), darken($background, 12%)));
|
||||
}
|
||||
|
||||
&:active
|
||||
{
|
||||
text-decoration: none; // for <a>
|
||||
background: darken($background, 8%); //fallback
|
||||
@include background(linear-gradient(darken($background, 12%), lighten($background, 12%)));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin form-skin-natural($color-label: #666, $color-input: #999, $border-input: #3399e9, $color-button: #fff, $background-button: #3399e9)
|
||||
{
|
||||
label
|
||||
{
|
||||
@include form-skin-natural-label($color-label);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
{
|
||||
@include form-skin-natural-input($color-input, $border-input);
|
||||
|
||||
&:hover,
|
||||
label:hover + &
|
||||
{
|
||||
@include form-skin-natural-input-hover($border-input);
|
||||
}
|
||||
|
||||
&:focus
|
||||
{
|
||||
@include form-skin-natural-input-focus($border-input);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
.button
|
||||
{
|
||||
@include form-skin-natural-button($color-button, $background-button);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Shortcuts for Flexible Box Model
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* SCSS
|
||||
* @include box-layout;
|
||||
* .mycontainer { @extend .hbox }
|
||||
* .mybox { @extend .flex2 }
|
||||
*
|
||||
* Or in HTML:;
|
||||
* <div class="vbox">
|
||||
* <div class="flex">
|
||||
* ...
|
||||
*
|
||||
* @autor David Kaneda
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin flexible-box-layout {
|
||||
.box {
|
||||
@include display-box;
|
||||
@include box-align(stretch);
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
@extend .flex-0;
|
||||
}
|
||||
}
|
||||
|
||||
.hbox {
|
||||
@extend .box;
|
||||
@include display-orient(horizontal);
|
||||
}
|
||||
|
||||
.vbox {
|
||||
@extend .box;
|
||||
@include display-orient(vertical);
|
||||
}
|
||||
|
||||
.reverse {
|
||||
@include box-direction(reverse);
|
||||
}
|
||||
|
||||
.flex-0 {
|
||||
@include box-flex(0);
|
||||
}
|
||||
|
||||
.flex, .spacer, .flex-1 {
|
||||
@include box-flex(1);
|
||||
}
|
||||
|
||||
.flex-2 {
|
||||
@include box-flex(2);
|
||||
}
|
||||
|
||||
.start {
|
||||
@include box-pack(start);
|
||||
}
|
||||
|
||||
.end {
|
||||
@include box-pack(end);
|
||||
}
|
||||
|
||||
.center {
|
||||
@include box-pack(center);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* Responsive grid
|
||||
*
|
||||
* @link http://foundation.zurb.com/docs/grid.php
|
||||
*
|
||||
* @author Zurb http://www.zurb.com/ Original concept
|
||||
* @author David Kaneda http://www.davidkaneda.com/ Further abstraction
|
||||
*/
|
||||
|
||||
// Note: This can/should be abstracted further, but will require new Sass version
|
||||
|
||||
$grid-max-width: 960px !default;
|
||||
$grid-min-width: 600px !default;
|
||||
$grid-columns: 12 !default;
|
||||
$grid-mobile-columns: 4 !default;
|
||||
$grid-gutter: 4.4% !default;
|
||||
$support-block-grid-nth-child: true !default;
|
||||
|
||||
.clearfix {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin responsive-grid(
|
||||
$columns: $grid-columns,
|
||||
$gutter: $grid-gutter
|
||||
) {
|
||||
|
||||
img, object, embed {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
$single: (100% - ($columns - 1) * $gutter) / $columns;
|
||||
|
||||
.column {
|
||||
margin-left: $gutter;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
background-color: rgba(#999, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
@extend .clearfix;
|
||||
width: 100%;
|
||||
max-width: $grid-max-width;
|
||||
min-width: $grid-min-width;
|
||||
margin: 0 auto;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.row {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.columns-#{$i} {
|
||||
@extend .column;
|
||||
width: $single * $i + $gutter * ($i - 1);
|
||||
}
|
||||
|
||||
.phone-#{$i} {
|
||||
@extend .column;
|
||||
}
|
||||
|
||||
// We don't need "offset-by-12"
|
||||
@if $i < $columns {
|
||||
.offset-by-#{$i} {
|
||||
margin-left: $single * $i + $gutter * ($i + 1);
|
||||
|
||||
&:first-child {
|
||||
margin-left: $single * $i + $gutter * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.push-#{$i} {
|
||||
left: $single * $i + $gutter * $i;
|
||||
}
|
||||
|
||||
.pull-#{$i} {
|
||||
right: $single * $i + $gutter * $i;
|
||||
}
|
||||
|
||||
$flex-gutter: ($gutter * ($i - 1)) / $i;
|
||||
.grid-#{$i} {
|
||||
@extend .grid;
|
||||
margin-left: - $flex-gutter;
|
||||
|
||||
> li {
|
||||
margin-left: $flex-gutter;
|
||||
width: (100% - $flex-gutter * $i) / $i;
|
||||
|
||||
@if $support-block-grid-nth-child {
|
||||
&:nth-child(#{$i}n+1) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // End loop
|
||||
|
||||
.row .centered {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
#map_canvas img, .map_canvas img {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@include responsive-grid;
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.grid.mobile {
|
||||
margin-left: 0%;
|
||||
|
||||
> li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
.row .column {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Loop again for mobile
|
||||
|
||||
.no-margin-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
.no-left {
|
||||
left: 0;
|
||||
}
|
||||
.no-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid-columns {
|
||||
.offset-by-#{$i}, .offset-by-#{$i}:first-child {
|
||||
@extend .no-margin-left;
|
||||
}
|
||||
.push-#{$i} {
|
||||
@extend .no-left;
|
||||
}
|
||||
.pull-#{$i} {
|
||||
@extend .no-right;
|
||||
}
|
||||
}
|
||||
|
||||
$mobile-single: (100% - ($grid-mobile-columns - 1) * $grid-gutter) / $grid-mobile-columns;
|
||||
|
||||
@for $i from 1 through $grid-mobile-columns {
|
||||
.phone-#{$i} {
|
||||
float: left;
|
||||
margin-left: $grid-gutter;
|
||||
width: $mobile-single * $i + $grid-gutter * ($i - 1);
|
||||
}
|
||||
|
||||
// @todo phone-push/pull
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Vertical alignement for page
|
||||
* Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* SCSS
|
||||
* @include vertical-align-requirement;
|
||||
* .v-align-container { @include vertical-align-container }
|
||||
* .v-align-content-container { @include vertical-align-content-container }
|
||||
* .v-align-content { @include vertical-align-content }
|
||||
*
|
||||
* HTML
|
||||
* <body>
|
||||
* <div class="v-align-container">
|
||||
* <div class="v-align-content-container">
|
||||
* <div class="v-align-content">
|
||||
* Your content !
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </body>
|
||||
*
|
||||
* @thanks Chris Coyier @chriscoyier
|
||||
* @autor Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
|
||||
@mixin vertical-align-requirement
|
||||
{
|
||||
html,
|
||||
body
|
||||
{
|
||||
height:100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical-align-container
|
||||
{
|
||||
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 100%;
|
||||
|
||||
// ie6 ie7
|
||||
*position:relative;
|
||||
}
|
||||
|
||||
@mixin vertical-align-content-container
|
||||
{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
// ie6 ie7
|
||||
*position: absolute;
|
||||
*top: 50%;
|
||||
}
|
||||
|
||||
@mixin vertical-align-content
|
||||
{
|
||||
// ie6 ie7
|
||||
*position: relative;
|
||||
*top: -50%;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Drop shadow mixins from Nicolas Gallagher demo
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
|
||||
*
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
|
||||
@import "recipes/shadow/drop/curled-corners";
|
||||
@import "recipes/shadow/drop/curved";
|
||||
@import "recipes/shadow/drop/flying"; // not ready yet
|
||||
@import "recipes/shadow/drop/lifted-corners";
|
||||
@import "recipes/shadow/drop/perspective";
|
||||
@import "recipes/shadow/drop/raised";
|
||||
@import "recipes/shadow/drop/transform-requirement";
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Shadow along the top edge of the browser viewport
|
||||
*
|
||||
* @link http://playground.genelocklin.com/depth/
|
||||
*/
|
||||
|
||||
@mixin top-shadow($height: 1em, $color: rgba(0,0,0,.8), $z-index: 100, $position: fixed)
|
||||
{
|
||||
content: "";
|
||||
|
||||
position: $position;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
|
||||
top: -$height;
|
||||
height: $height;
|
||||
@include box-shadow(0 0 $height $color);
|
||||
|
||||
z-index: $z-index;
|
||||
}
|
||||
|
||||
/*
|
||||
// Usage
|
||||
body:before
|
||||
{
|
||||
@include top-shadow;
|
||||
}
|
||||
*/
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Drop shadow curled
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-curled-corners($border-radius: 0 0 120px 120px / 0 0 6px 6px, $box-shadow: 0 8px 12px rgba(#000, .5), $skew: 8deg, $rotate: 3deg, $distance: 10px)
|
||||
{
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
|
||||
bottom: $distance*1.2;
|
||||
|
||||
width: 50%;
|
||||
height: 55%;
|
||||
@include box-shadow($box-shadow);
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
left: $distance;
|
||||
@include transform(skew(-$skew) rotate(-$rotate));
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
right: $distance;
|
||||
@include transform(skew($skew) rotate($rotate));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Drop shadow curved
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-curved($side: 'vertical', $distance: 10px, $box-shadow: 0 0 15px rgba(#000, .6), $radius-1: 10px, $radius-2: 100px)
|
||||
{
|
||||
position: relative;
|
||||
// vertical by default
|
||||
|
||||
//@if ($side == 'vertical')
|
||||
//{
|
||||
$top: $distance;
|
||||
$bottom: $distance;
|
||||
$left: 0;
|
||||
$right: 0;
|
||||
$border-radius-1: $radius-1;
|
||||
$border-radius-2: $radius-2;
|
||||
//}
|
||||
|
||||
|
||||
@if ($side == 'left')
|
||||
{
|
||||
$right: 50%;
|
||||
|
||||
}
|
||||
@elseif($side == 'right')
|
||||
{
|
||||
$left: 50%;
|
||||
}
|
||||
|
||||
@elseif ($side == 'horizontal')
|
||||
{
|
||||
$top:0;
|
||||
$bottom:0;
|
||||
$left: $distance;
|
||||
$right: $distance;
|
||||
$border-radius-1: $radius-2;
|
||||
$border-radius-2: $radius-1;
|
||||
}
|
||||
@elseif ($side == 'top')
|
||||
{
|
||||
$top: 0;
|
||||
$bottom: 50%;
|
||||
$left: $distance;
|
||||
$right: $distance;
|
||||
$border-radius-1: $radius-2;
|
||||
$border-radius-2: $radius-1;
|
||||
}
|
||||
@elseif ($side == 'bottom')
|
||||
{
|
||||
$top: 50%;
|
||||
$bottom: 0;
|
||||
$left: $distance;
|
||||
$right: $distance;
|
||||
$border-radius-1: $radius-2;
|
||||
$border-radius-2: $radius-1;
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
left: $left;
|
||||
right: $right;
|
||||
@include box-shadow($box-shadow);
|
||||
@include border-radius($border-radius-1 / $border-radius-2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* Drop shadow flying
|
||||
*
|
||||
* @thanks Geoffrey Crofte @geoffrey_crofte
|
||||
* @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
|
||||
*/
|
||||
@mixin drop-shadow-flying(
|
||||
$box-shadow-radius: 30px,
|
||||
$color: #000,
|
||||
$distance: 1em,
|
||||
$height: 2px
|
||||
)
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
bottom: -$distance;
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
left: 8%;
|
||||
width: 84%;
|
||||
height: $height;
|
||||
background: rgba(#000, .3);
|
||||
@include border-radius(#{50%} / #{1px});
|
||||
@include box-shadow(0 $height $box-shadow-radius/2 rgba(#000, .2), 0 $height $box-shadow-radius rgba(#000, .15));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Drop shadow w/ lifted corners
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-lifted-corners($height: 15px, $margin: 10px, $angle: 4deg, $color: rgba(#000, .7))
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after
|
||||
{
|
||||
content:"";
|
||||
position:absolute;
|
||||
z-index: -2;
|
||||
|
||||
bottom: $height;
|
||||
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
|
||||
@include box-shadow(0 $height $margin $color);
|
||||
|
||||
}
|
||||
|
||||
&::before
|
||||
{
|
||||
left: $margin;
|
||||
@include transform(rotate(-$angle));
|
||||
}
|
||||
|
||||
&::after
|
||||
{
|
||||
right: $margin;
|
||||
@include transform(rotate($angle));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Drop shadow w/ perspective
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-perspective($skew: 50deg, $distance-x: 80px, $distance-y: 5px, $box-shadow-radius: 8px, $color: rgba(#000, .4))
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&:before
|
||||
{
|
||||
content:"";
|
||||
position:absolute;
|
||||
z-index:-2;
|
||||
|
||||
left: $distance-x;
|
||||
bottom: $distance-y;
|
||||
width: 50%;
|
||||
height: 35%;
|
||||
|
||||
@include box-shadow(-$distance-x 0 $box-shadow-radius $color);
|
||||
@include transform(skew($skew));
|
||||
@include transform-origin(0 100%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Drop shadow raised
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-raised($height: 10px, $color: #000)
|
||||
{
|
||||
@include box-shadow(
|
||||
0 $height*1.5 $height #{-$height} rgba($color, .5),
|
||||
0 $height/10 $height*.4 rgba($color, .3)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Drop shadow rules required for transform on drop shadow
|
||||
*
|
||||
* /!\ This is required if you want to apply some transform on the element using drop shadow
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
@mixin drop-shadow-transform-requirement($background: #fff)
|
||||
{
|
||||
position: relative;
|
||||
|
||||
& > :last-child::before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $background;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Shape/Ellipse
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@import "compass/css3/border-radius";
|
||||
|
||||
@mixin ellipse($width: 200px, $height: 100px)
|
||||
{
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
@if ($width == $height) {
|
||||
@include border-radius($width/2);
|
||||
}
|
||||
@else {
|
||||
@include border-radius($width/2, $height/2);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin circle($width: 100px)
|
||||
{
|
||||
@include ellipse($width, $width);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Shape/Polygon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@import "recipes/shape/polygon/hexagon";
|
||||
@import "recipes/shape/polygon/octagon";
|
||||
@import "recipes/shape/polygon/parallelogram";
|
||||
@import "recipes/shape/polygon/pentagon";
|
||||
@import "recipes/shape/polygon/rectangle";
|
||||
@import "recipes/shape/polygon/rhombus";
|
||||
@import "recipes/shape/polygon/square";
|
||||
@import "recipes/shape/polygon/star";
|
||||
@import "recipes/shape/polygon/trapezoid";
|
||||
@import "recipes/shape/polygon/triangle";
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Shape/Symbol
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@import "recipes/shape/symbol/diamond";
|
||||
@import "recipes/shape/symbol/egg";
|
||||
@import "recipes/shape/symbol/heart";
|
||||
@import "recipes/shape/symbol/infinity";
|
||||
@import "recipes/shape/symbol/pacman";
|
||||
@import "recipes/shape/symbol/yin-yang";
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Shape/Polygon/Hexagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin hexagon($width: 100px, $height: 55px, $background-color: transparent)
|
||||
{
|
||||
width: $width;
|
||||
height: $height/2;
|
||||
background-color: $background-color;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
left: 0;
|
||||
|
||||
border-left: $width/2 solid transparent;
|
||||
border-right: $width/2 solid transparent;
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
top: -$width/4;
|
||||
border-bottom: $width/4 solid $background-color;
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
bottom: -$width/4;
|
||||
border-top: $width/4 solid $background-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Shape/Polygon/Octagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
|
||||
//Don't ask me when the coefficient cames from... I just compute then from original code by @chriscoyier
|
||||
@mixin octagon($width: 100px, $height: 100px, $background-color: transparent)
|
||||
{
|
||||
width: $width;
|
||||
height: $height*0.42;
|
||||
background: $background-color;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
width: $width*0.42;
|
||||
height: 0;
|
||||
|
||||
border-left: $width*0.29 solid transparent;
|
||||
border-right: $width*0.29 solid transparent;
|
||||
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
top: -$height*0.29;
|
||||
border-bottom: $height*0.29 solid $background-color;
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
bottom: -$height*0.29;
|
||||
border-top: $height*0.29 solid $background-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Shape/Polygon/Parallelogram
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
|
||||
@import "compass/css3/transform";
|
||||
|
||||
@mixin parallelogram($width: 150px, $height: 100px, $skew: 20deg, $background: transparent)
|
||||
{
|
||||
width: $width;
|
||||
height: $height;
|
||||
@include transform(skew($skew));
|
||||
background: $background;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Shape/Polygon/Pentagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin pentagon($width: 100px, $height: 100px, $background-color: transparent)
|
||||
{
|
||||
position: relative;
|
||||
width: $width*0.54;
|
||||
border-width: $height*0.5 $width*0.18 0;
|
||||
border-style: solid;
|
||||
border-color: $background-color transparent;
|
||||
|
||||
&:before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -$height*0.85;
|
||||
left: -$width*0.18;
|
||||
border-width: 0 $width*0.45 $height*0.35;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent $background-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Shape/Polygon/Rectangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin rectangle($width: 100px, $height: 100px, $background: transparent)
|
||||
{
|
||||
width: $width;
|
||||
height: $height;
|
||||
background: $background;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Shape/Polygon/Rhombus
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin rhombus($width, $color: #000, $skew: 0deg, $rotate: -45deg)
|
||||
{
|
||||
@include square($width, $color);
|
||||
@include transform(rotate($rotate) skew($skew, $skew));
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Shape/Polygon/Square
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin square($width: 100px, $background: transparent)
|
||||
{
|
||||
width: $width;
|
||||
height: $width;
|
||||
background: $background;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* Shape/Polygon/Star
|
||||
*
|
||||
* @todo check if setting a z-index by default is a good thing
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
|
||||
// Star (5-points)
|
||||
// @author Kit Macallister
|
||||
// @link http://kitmacallister.com/2011/css-only-5-point-star/
|
||||
@mixin star-5($width: $width, $background-color: transparent, $z-index: 0)
|
||||
{
|
||||
margin-top: $width/2;
|
||||
margin-bottom: $width/2;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-right: $width solid transparent;
|
||||
border-bottom: $width*0.7 solid $background-color;
|
||||
border-left: $width solid transparent;
|
||||
@include transform(rotate(35deg));
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: $z-index - 1;
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
top: -$width*0.45;
|
||||
left: -$width*0.65;
|
||||
border-bottom: $width*0.8 solid $background-color;
|
||||
border-left: $width*0.3 solid transparent;
|
||||
border-right: $width*0.3 solid transparent;
|
||||
@include transform(rotate(-35deg));
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
top: $width*0.03;
|
||||
left: -$width*1.05;
|
||||
border-right: $width solid transparent;
|
||||
border-bottom: $width*0.7 solid $background-color;
|
||||
border-left: $width solid transparent;
|
||||
@include transform(rotate(-70deg));
|
||||
}
|
||||
}
|
||||
|
||||
// Star (6-points)
|
||||
@mixin star-6($width: $width, $background-color: transparent, $z-index: 0)
|
||||
{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $width/2 solid transparent;
|
||||
border-right: $width/2 solid transparent;
|
||||
border-bottom: $width solid $background-color;
|
||||
position: relative;
|
||||
z-index: $z-index;
|
||||
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: $z-index - 1;
|
||||
|
||||
border-left: $width/2 solid transparent;
|
||||
border-right: $width/2 solid transparent;
|
||||
border-top: $width solid $background-color;
|
||||
|
||||
top: $width*0.3;
|
||||
left: - $width /2;
|
||||
}
|
||||
}
|
||||
|
||||
// @author Alan Johnson
|
||||
// @link http://commondream.net/post/8848553728/pure-css-badges
|
||||
// @todo maybe improve this to be able to include text without the transform()
|
||||
@mixin star-8($width: 8em, $color: #000, $z-index: 0)
|
||||
{
|
||||
&,
|
||||
&:before,
|
||||
{
|
||||
@include square($width, $color);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include transform(rotate(20deg));
|
||||
z-index: $z-index;
|
||||
|
||||
&:before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@include transform(rotate(135deg));
|
||||
z-index: $z-index - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin star-12($width: 8em, $color: #000, $z-index: 0)
|
||||
{
|
||||
&,
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
@include square($width, $color);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: $z-index;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $z-index - 1;
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
@include transform(rotate(30deg));
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
@include transform(rotate(60deg));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Shape/Polygon/Trapezoid
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin trapezoid($width: 100px, $height: 100px, $background-color: transparent)
|
||||
{
|
||||
border-bottom: $height solid $background-color;
|
||||
border-left: $width/2 solid transparent;
|
||||
border-right: $width/2 solid transparent;
|
||||
height: 0;
|
||||
width: $width;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Shape/Polygon/Triangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin triangle($direction: top, $width: 1em, $height: 0, $color: #000)
|
||||
{
|
||||
@if ($height == 0)
|
||||
{
|
||||
$height: $width;
|
||||
}
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
@if ($direction == 'top')
|
||||
{
|
||||
border-left: $width solid transparent;
|
||||
border-right: $width solid transparent;
|
||||
border-bottom: $height solid $color;
|
||||
}
|
||||
@elseif ($direction == 'bottom')
|
||||
{
|
||||
border-left: $width solid transparent;
|
||||
border-right: $width solid transparent;
|
||||
border-top: $height solid $color;
|
||||
}
|
||||
@elseif ($direction == 'left')
|
||||
{
|
||||
border-top: $width solid transparent;
|
||||
border-right: $height solid $color;
|
||||
border-bottom: $width solid transparent;
|
||||
}
|
||||
@elseif ($direction == 'right')
|
||||
{
|
||||
border-top: $width solid transparent;
|
||||
border-left: $height solid $color;
|
||||
border-bottom: $width solid transparent;
|
||||
}
|
||||
@elseif ($direction == 'top-left')
|
||||
{
|
||||
border-top: $width solid $color;
|
||||
border-bottom: $width solid transparent;
|
||||
border-left: $width solid $color;
|
||||
border-right: $width solid transparent;
|
||||
}
|
||||
@elseif ($direction == 'top-right')
|
||||
{
|
||||
border-top: $width solid $color;
|
||||
border-bottom: $width solid transparent;
|
||||
border-left: $width solid transparent;
|
||||
border-right: $width solid $color;
|
||||
}
|
||||
@elseif ($direction == 'bottom-left')
|
||||
{
|
||||
border-top: $width solid transparent;
|
||||
border-bottom: $width solid $color;
|
||||
border-left: $width solid $color;
|
||||
border-right: $width solid transparent;
|
||||
}
|
||||
@elseif ($direction == 'bottom-right')
|
||||
{
|
||||
border-top: $width solid transparent;
|
||||
border-left: $width solid transparent;
|
||||
border-bottom: $width solid $color;
|
||||
border-right: $width solid $color;
|
||||
}
|
||||
@else
|
||||
{
|
||||
// @todo https://gist.github.com/1671259#comments
|
||||
@warn 'The direction used does not exist';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Shape/Symbol/Diamond
|
||||
*
|
||||
* @todo add height support
|
||||
*
|
||||
* @author Alexander Futekov
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin diamond($width: 5em, $color: #000)
|
||||
{
|
||||
$half-width: $width/2;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent $color transparent;
|
||||
|
||||
border-width: 0 $half-width $half-width $half-width;
|
||||
height: 0;
|
||||
width: $width;
|
||||
position: relative;
|
||||
margin: $half-width/5*2 0 $width 0;
|
||||
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: $half-width;
|
||||
left: -$half-width;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: $color transparent transparent transparent;
|
||||
border-width: $half-width/5*7 $width 0 $width;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Shape/Symbol/Egg
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin egg($width: 12em, $height: 18em, $color: #000)
|
||||
{
|
||||
display:block;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: $color;
|
||||
@include border-radius(50% 50% 50% 50% / 60% 60% 40% 40%);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Shape/Symbol/Heart
|
||||
*
|
||||
* @author Nicolas Gallagher @necolas
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin heart($width: 100px, $height: 90px, $background-color: transparent)
|
||||
{
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
width: $width/2;
|
||||
height: $height;
|
||||
background: $background-color;
|
||||
@include border-radius($height/2 $height/2 0 0);
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
left: $width/2;
|
||||
@include transform(rotate(-45deg));
|
||||
@include transform-origin(0%, 100%);
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
left: 0;
|
||||
@include transform(rotate(45deg));
|
||||
@include transform-origin(100%, 100%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Shape/Symbol/Infinity
|
||||
*
|
||||
* @author Nicolas Gallagher @necolas
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin infinity($width: 212px, $height: 100px, $background-color: transparent)
|
||||
{
|
||||
$coefficient: 2.12;
|
||||
@if $width == false
|
||||
{
|
||||
$width : $height*$coefficient;
|
||||
}
|
||||
@if $height == false
|
||||
{
|
||||
$height : $width/$coefficient;
|
||||
}
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
width: $height*.6;
|
||||
height: $height*.6;
|
||||
border: $height*.2 solid $background-color;
|
||||
}
|
||||
|
||||
$radius: $height/2;
|
||||
&:before
|
||||
{
|
||||
left: 0;
|
||||
@include border-radius($radius $radius 0 $radius);
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
right: 0;
|
||||
@include border-radius($radius $radius $radius 0);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Shape/Symbol/Pacman
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin pacman($width: 6em, $color: #000)
|
||||
{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: $width solid transparent;
|
||||
border-top: $width solid $color;
|
||||
border-left: $width solid $color;
|
||||
border-bottom: $width solid $color;
|
||||
border-top-left-radius: $width;
|
||||
border-top-right-radius: $width;
|
||||
border-bottom-left-radius: $width;
|
||||
border-bottom-right-radius: $width;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Shape/Symbol/Yin-yang
|
||||
*
|
||||
* @author Alexander Futekov
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin yin-yang($width: 10em, $color: #000, $color-alt: #fff)
|
||||
{
|
||||
width: $width*96/100;
|
||||
height: $width*48/100;
|
||||
background: $color-alt;
|
||||
border-color: $color;
|
||||
border-style: solid;
|
||||
$twopercente: $width*2/100;
|
||||
border-width: $twopercente $twopercente $width*5/10 $twopercente;
|
||||
position: relative;
|
||||
|
||||
&,
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
@include border-radius(100%);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border: $width*18/100 solid;
|
||||
width: $width*12/100;
|
||||
height: $width*12/100;
|
||||
}
|
||||
|
||||
&:before
|
||||
{
|
||||
left: 0;
|
||||
background: $color-alt;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
left: 50%;
|
||||
background: $color;
|
||||
border-color: $color-alt;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// native block element can use inline-block with IE6/7
|
||||
@mixin block-inline-block
|
||||
{
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Micro clearfix hack
|
||||
*
|
||||
* The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.
|
||||
* Known support: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
*/
|
||||
@mixin clearfix
|
||||
{
|
||||
// For modern browsers
|
||||
&:before,
|
||||
&:after
|
||||
{
|
||||
content:"";
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
&:after
|
||||
{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
//For IE 6/7 (trigger hasLayout)
|
||||
&
|
||||
{
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "recipes/shared/block-inline-block";
|
||||
|
||||
// use this for ul,ol (ex: nav menu)
|
||||
@mixin list-inline-block
|
||||
{
|
||||
@include block-inline-block;
|
||||
|
||||
li
|
||||
{
|
||||
@include block-inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Note IE7/6 doesn't understand pseudo element as ::before and ::after
|
||||
* IE8 need to have :before and not ::before
|
||||
* So use only : and not :: if you want to support IE8
|
||||
* IE9 Webkit Firefox Opera understand ::
|
||||
*/
|
||||
@mixin pseudo-element($width: 0, $height: auto, $content: "", $display: block, $position: absolute)
|
||||
{
|
||||
content: $content;
|
||||
@if ($position != default)
|
||||
{
|
||||
position: $position;
|
||||
}
|
||||
@if ($display != default)
|
||||
{
|
||||
display: $display;
|
||||
}
|
||||
|
||||
@if ($width != auto) {
|
||||
width: $width; // Default 0 is for FF3 positioning
|
||||
}
|
||||
|
||||
@if ($height != auto)
|
||||
{
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@mixin user-select($select) {
|
||||
$select: unquote($select);
|
||||
@include experimental(user-select, $select,
|
||||
-moz, -webkit, not -o, not -ms, -khtml, official
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* UI convex effect from one color
|
||||
*
|
||||
* @todo merge with ui-button ?
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin ui-convex($color: #ddd, $button-effect: true, $opacity-top: .5, $opacity-bottom: 0, $color-mix: #fff)
|
||||
{
|
||||
background: $color; // fallback
|
||||
|
||||
// the original idea was to just add a layer of transparent white to make the convex effect
|
||||
// but this didn't work with css3/pie module, so I've used sass_extensions color functions to get the same result
|
||||
//@include background($color linear-gradient(transparentize($color-mix, $opacity-top ), transparentize($color-mix, $opacity-bottom )));
|
||||
|
||||
$opacity-top: percentage(1-$opacity-top);
|
||||
$opacity-bottom: percentage(1-$opacity-bottom);
|
||||
$color-top: mix($color, $color-mix, $opacity-top);
|
||||
$color-bottom: mix($color, $color-mix, $opacity-bottom);
|
||||
@include background(linear-gradient($color-top, $color-bottom));
|
||||
|
||||
@if $button-effect == true
|
||||
{
|
||||
&:hover,
|
||||
&:focus,
|
||||
{
|
||||
@include background(linear-gradient($color-bottom, $color-top));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* UI Glossy helper
|
||||
*
|
||||
* @deprecated
|
||||
* @todo Remove in 0.4
|
||||
* @see background/gradients
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
@mixin ui-glossy($color: #000, $opacity: .6, $border-width: .1em, $border-color-top: rgba(255,255,255,.5), $border-color-bottom: rgba(85,85,85,.6))
|
||||
{
|
||||
|
||||
@warn '@mixin ui-glossy has been deprecated: Use background-gradient mixin/functions instead.';
|
||||
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
border: $border-width solid $border-color-top;
|
||||
border-bottom-color: $border-color-bottom;
|
||||
|
||||
outline: $border-width solid rgba(0,0,0,.6);
|
||||
background: $color;
|
||||
background: transparentize($color, $opacity);
|
||||
@include background(linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58) 51%));
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* UI simple gradient from one color
|
||||
*
|
||||
* @todo merge with ui-button ?
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
* @deprecated See background/gradients
|
||||
*/
|
||||
@mixin ui-gradient($color: #ddd, $lighten-top: 10%, $darken-bottom: 10%)
|
||||
{
|
||||
@include ui-gradient-from-middle($color, $lighten-top, $darken-bottom);
|
||||
}
|
||||
|
||||
@mixin ui-gradient-from-middle($color: #ddd, $lighten-top: 10%, $darken-bottom: 10%)
|
||||
{
|
||||
background: $color;
|
||||
@include background(linear-gradient(lighten($color, $lighten-top), darken($color, $darken-bottom)));
|
||||
}
|
||||
|
||||
@mixin ui-gradient-from-top($color: #ddd, $darken-bottom: 20%)
|
||||
{
|
||||
background: $color;
|
||||
@include background(linear-gradient($color, darken($color, $darken-bottom)));
|
||||
}
|
||||
|
||||
@mixin ui-gradient-from-bottom($color: #ddd, $lighten-top: 20%)
|
||||
{
|
||||
background: $color;
|
||||
@include background(linear-gradient(lighten($color, $lighten-top), $color));
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "recipes/ui/helper/arrow";
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* Keyboard key touch
|
||||
* A simple stylesheet for rendering beautiful keyboard-style elements.
|
||||
|
||||
* @author Michael Hüneburg http://michaelhue.com/keyscss
|
||||
* @link https://github.com/michaelhue/keyscss (commit 76bb603e921d0145362e0f60eabb79d4f69cbda0)
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
|
||||
// Base style, essential for every key
|
||||
@mixin ui-keyboard-key-requirements($font-size: .85em, $line-height: 1, $font-family: "Lucida Grande")
|
||||
{
|
||||
padding: .2em .3em;
|
||||
min-width: 1em;
|
||||
font: normal $font-size/$line-height $font-family, Lucida, Arial, sans-serif;
|
||||
text-align: center;
|
||||
@include border-radius(.25em);
|
||||
border: none;
|
||||
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
//@include user-select(none);
|
||||
|
||||
&[title]
|
||||
{
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
// it's will be nice to manage color schema with mixin like
|
||||
// key-light, key-dark but, we can't @include them with a variable
|
||||
// it's not yet possible to make a @include key-#{$color-schema};
|
||||
@mixin ui-keyboard-key-color-schema($color-schema: light)
|
||||
{
|
||||
@if ($color-schema == dark)
|
||||
{
|
||||
// Dark style for display on light background.
|
||||
background: rgb(80, 80, 80);
|
||||
@include background(linear-gradient(rgb(60, 60, 60), rgb(80, 80, 80)));
|
||||
color: rgb(250, 250, 250);
|
||||
text-shadow: -1px -1px 0 rgb(70, 70, 70);
|
||||
@include box-shadow(inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3));
|
||||
}
|
||||
@elseif ($color-schema == light)
|
||||
{
|
||||
// Light style for display on dark background
|
||||
background: rgb(250, 250, 250);
|
||||
@include background(linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)));
|
||||
color: #444;
|
||||
text-shadow: 0 0 2px rgb(255, 255, 255);
|
||||
/*@include box-shadow(
|
||||
inset 0 0 1px #fff,
|
||||
inset 0 0 .4em rgb(200, 200, 200),
|
||||
0 .1em 0 rgb(130, 130, 130),
|
||||
0 .11em 0 rgba(#000, .4),
|
||||
0 .1em .11em rgba(#000, .9)
|
||||
);
|
||||
*/
|
||||
@include box-shadow(
|
||||
inset 0 0 25px #e8e8e8,
|
||||
0 1px 0 #c3c3c3,
|
||||
0 2px 0 #c9c9c9,
|
||||
0 2px 3px #333
|
||||
);
|
||||
text-shadow: 0px 1px 0px #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ui-keyboard-key-rules-large($color-schema: light, $default: true)
|
||||
{
|
||||
&,
|
||||
&.#{$color-schema},
|
||||
.#{$color-schema}-keys &
|
||||
{
|
||||
@include ui-keyboard-key-color-schema($color-schema);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ui-keyboard-kbd($default-color-schema: light)
|
||||
{
|
||||
$alternate-color-schema: dark;
|
||||
@if ($default-color-schema == dark)
|
||||
{
|
||||
$alternate-color-schema: light;
|
||||
}
|
||||
|
||||
kbd,
|
||||
.kbd
|
||||
{
|
||||
@include ui-keyboard-key-requirements;
|
||||
@include ui-keyboard-key-rules-large($alternate-color-schema, false);
|
||||
@include ui-keyboard-key-rules-large($default-color-schema);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ui-keyboard-key($default-color-schema: light)
|
||||
{
|
||||
@include ui-keyboard-key-requirements;
|
||||
@include ui-keyboard-key-color-schema($default-color-schema);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "recipes/ui/menu/dropdown";
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Ui background overlay inspired by Google Chrome modal overlay
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
|
||||
@import "recipes/background/radial-overlay";
|
||||
|
||||
@mixin ui-overlay($z-index: 10)
|
||||
{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: $z-index;
|
||||
|
||||
|
||||
|
||||
@include background-radial-overlay;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* <hr /> separator style
|
||||
*
|
||||
* @author Chris Coyier @chriscoyier
|
||||
* @link http://jsfiddle.net/chriscoyier/GaEzp/35/
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
|
||||
@mixin ui-separator-gradient($color: rgba(#000, .75), $color-alt: rgba(#000, 0), $height: 1px)
|
||||
{
|
||||
border: 0; //cancel default <hr> style
|
||||
height: $height;
|
||||
background: opacify($color, 1); // fallback
|
||||
@include background(linear-gradient(left, $color-alt, $color, $color-alt));
|
||||
}
|
||||
|
||||
@mixin ui-separator-dashed($color: #999, $color-alt: #ccc, $height: 1px)
|
||||
{
|
||||
border: 0; //cancel default <hr> style
|
||||
border-bottom: $height dashed $color-alt;
|
||||
background: $color;
|
||||
}
|
||||
|
||||
@mixin ui-separator-dropshadow($color: #000, $height: 6px)
|
||||
{
|
||||
border: 0; //cancel default <hr> style
|
||||
height: $height;
|
||||
box-shadow: inset 0 $height $height -#{$height} $color;
|
||||
}
|
||||
|
||||
@mixin ui-separator-shadow($color: #000, $height: 10px, $spread: 1px)
|
||||
{
|
||||
border: 0; //cancel default <hr> style
|
||||
height: 0;
|
||||
box-shadow: 0 0 $height $spread $color;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// @todo Remove in .4
|
||||
|
||||
@mixin ui-border-bevel($width, $color, $variation: 15%)
|
||||
{
|
||||
@warn 'ui-border-bevel has been deprecated. Please use effects/bevel mixins instead';
|
||||
border: $width solid $color;
|
||||
border-top-color: lighten($color, $variation);
|
||||
border-bottom-color: darken($color, $variation);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
@import "recipes/shape/polygon/triangle";
|
||||
|
||||
@mixin ui-helper-arrow($position: bottom, $width: 6px, $color: #fff)
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&:after
|
||||
{
|
||||
@include ui-helper-arrow-element($position, $width, $color)
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ui-helper-arrow-element($position: bottom, $width: 6px, $color: #fff, $margin-side: auto, $margin: auto)
|
||||
{
|
||||
position: absolute;
|
||||
|
||||
display: block;
|
||||
content: "";
|
||||
width:0; height:0;
|
||||
|
||||
$position-offset: 50%;
|
||||
@if ($margin-side == auto)
|
||||
{
|
||||
$margin: -#{$width};
|
||||
|
||||
}
|
||||
@else
|
||||
{
|
||||
$position-offset: 0;
|
||||
}
|
||||
|
||||
// vertical
|
||||
@if ($position == top)
|
||||
{
|
||||
top: -$width;
|
||||
}
|
||||
@if ($position == bottom)
|
||||
{
|
||||
bottom: -$width;
|
||||
}
|
||||
@if ($position == top or $position == bottom)
|
||||
{
|
||||
left: $position-offset;
|
||||
@if ($margin-side == center)
|
||||
{
|
||||
margin-left: $margin;
|
||||
}
|
||||
@else
|
||||
{
|
||||
margin-#{$margin-side}: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($position == left)
|
||||
{
|
||||
left: -$width;
|
||||
}
|
||||
@if ($position == right)
|
||||
{
|
||||
right: -$width;
|
||||
}
|
||||
@if ($position == left or $position == right)
|
||||
{
|
||||
top: $position-offset;
|
||||
@if ($margin-side == center)
|
||||
{
|
||||
margin-top: $margin;
|
||||
}
|
||||
@else
|
||||
{
|
||||
margin-#{$margin-side}: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
@include triangle($position, $width, 0, $color);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Menu dropdown helper
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
|
||||
// this mixin have to be used with a js for dropdown menu behavior
|
||||
// (display onhover with a timeout like 500ms for better UX)
|
||||
|
||||
// sometimes we don't use nesting all the time to optimize some selector
|
||||
|
||||
@import "recipes/shared/block-inline-block";
|
||||
|
||||
@mixin ui-menu-dropdown($z-index: 3)
|
||||
{
|
||||
z-index: $z-index;
|
||||
|
||||
ul
|
||||
{
|
||||
z-index: $z-index + 1;
|
||||
list-style-position: outside; // ie fix
|
||||
|
||||
li
|
||||
{
|
||||
position: relative;
|
||||
@include block-inline-block;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// sub menu
|
||||
ul ul
|
||||
{
|
||||
position: absolute;
|
||||
z-index: $z-index + 2;
|
||||
|
||||
// default behavior
|
||||
display: none;
|
||||
}
|
||||
|
||||
// we use a selector with a parent class like this to do not override
|
||||
// eventual js added behavior (see comment a the top of this file)
|
||||
.no-js & li:hover > ul
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user