init repo
This commit is contained in:
nikolay ivanov
34
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/_tests.scss
vendored
Normal file
34
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/_tests.scss
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
@import "compass/css3";
|
||||
|
||||
html
|
||||
{
|
||||
padding: 1em;
|
||||
@include background(linear-gradient(#ddd, #fff) no-repeat);
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc
|
||||
{
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
|
||||
a
|
||||
{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../">recipes</a>/background</h1>
|
||||
|
||||
<h2>Patterns</h2>
|
||||
|
||||
<p class="doc">
|
||||
See <a href="http://lea.verou.me/css3patterns/">http://lea.verou.me/css3patterns/</a> for most of originals patterns
|
||||
</p>
|
||||
|
||||
<div class="background-blueprint-grid"></div>
|
||||
|
||||
<div class="background-noise"></div>
|
||||
|
||||
<div class="background-radial-overlay"></div>
|
||||
|
||||
<div class="background-tartan"></div>
|
||||
|
||||
<div class="background-carbon-fiber"></div>
|
||||
|
||||
<div class="background-horizontal-stripes"></div>
|
||||
|
||||
<div class="background-diagonal-stripes"></div>
|
||||
|
||||
<div class="background-stripes-cicada"></div>
|
||||
|
||||
<div class="background-tablecloth"></div>
|
||||
|
||||
<div class="background-lined-paper"></div>
|
||||
|
||||
<div class="background-madras"></div>
|
||||
|
||||
<div class="background-checkerboard"></div>
|
||||
|
||||
<div class="background-checkerboard-diagonal"></div>
|
||||
|
||||
<div class="background-houndstooth"></div>
|
||||
|
||||
<div class="background-polka-dot"></div>
|
||||
|
||||
<h2>Gradients</h2>
|
||||
|
||||
<p class="doc">
|
||||
In order: Matte, glossy, bevel, recessed, and a mixed demo.
|
||||
</p>
|
||||
|
||||
<div class="background-matte"></div>
|
||||
|
||||
<div class="background-glossy"></div>
|
||||
|
||||
<div class="background-bevel"></div>
|
||||
|
||||
<div class="background-recessed"></div>
|
||||
|
||||
<div class="background-mixed"></div>
|
||||
424
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/background/s.css
vendored
Normal file
424
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/background/s.css
vendored
Normal file
File diff suppressed because one or more lines are too long
115
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/background/s.scss
vendored
Normal file
115
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/background/s.scss
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/background";
|
||||
|
||||
div {
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
|
||||
cursor: pointer;
|
||||
background-color: #ccc;
|
||||
@include border-radius(50%);
|
||||
@include box-shadow(
|
||||
-3px -3px 10px 2px rgba(0,0,0,.3) inset,
|
||||
0 0 0 15px rgba(255, 255, 255, .6) inset,
|
||||
0 0 0 1px rgba(0,0,0,.5),
|
||||
2px 2px 10px rgba(0,0,0,.6)
|
||||
);
|
||||
}
|
||||
|
||||
.background-blueprint-grid {
|
||||
@include background-blueprint-grid;
|
||||
}
|
||||
|
||||
.background-noise {
|
||||
//background-color: #000;
|
||||
@include background-noise(
|
||||
//$intensity: .5,
|
||||
//$size: 200,
|
||||
//$monochrome: true,
|
||||
$opacity: .15
|
||||
);
|
||||
}
|
||||
|
||||
.background-radial-overlay {
|
||||
@include background-radial-overlay;
|
||||
}
|
||||
|
||||
.background-tartan {
|
||||
@include background-tartan;
|
||||
}
|
||||
|
||||
.background-carbon-fiber {
|
||||
@include background-carbon-fiber;
|
||||
}
|
||||
|
||||
.background-horizontal-stripes {
|
||||
@include background-stripes-straight;
|
||||
}
|
||||
|
||||
.background-diagonal-stripes {
|
||||
@include background-diagonal-stripes;
|
||||
}
|
||||
|
||||
.background-stripes-cicada {
|
||||
@include background-stripes-cicada;
|
||||
}
|
||||
|
||||
.background-tablecloth {
|
||||
@include background-tablecloth;
|
||||
}
|
||||
|
||||
.background-lined-paper {
|
||||
@include background-lined-paper;
|
||||
}
|
||||
|
||||
.background-madras {
|
||||
@include background-madras;
|
||||
}
|
||||
|
||||
.background-checkerboard {
|
||||
@include background-checkerboard;
|
||||
}
|
||||
|
||||
.background-checkerboard-diagonal {
|
||||
@include background-checkerboard-diagonal;
|
||||
}
|
||||
|
||||
.background-houndstooth {
|
||||
@include background-houndstooth;
|
||||
}
|
||||
|
||||
.background-polka-dot {
|
||||
@include background-polka-dot;
|
||||
}
|
||||
|
||||
// Gradients
|
||||
$gradient-color: #CF714A;
|
||||
|
||||
.background-glossy {
|
||||
@include background-gradient($gradient-color, glossy);
|
||||
}
|
||||
|
||||
.background-matte {
|
||||
@include background-gradient($gradient-color, matte);
|
||||
}
|
||||
|
||||
.background-bevel {
|
||||
@include background-gradient($gradient-color, bevel);
|
||||
}
|
||||
|
||||
.background-recessed {
|
||||
@include background-gradient($gradient-color, recessed);
|
||||
}
|
||||
|
||||
|
||||
// Caution! Mixing background noise with other gradients will output
|
||||
// the same base64-encoded image for every vendor prefixed gradient syntax.
|
||||
// Consider overlaying with a pseudo-element, or disabling specific vendor prefixes
|
||||
.background-mixed {
|
||||
@include background-image(
|
||||
background_noise($size: 40),
|
||||
matte-gradient(rgba(yellow, .2)),
|
||||
glossy-gradient($gradient-color)
|
||||
);
|
||||
}
|
||||
24
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/index.html
vendored
Normal file
24
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/index.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../">recipes</a>/color</h1>
|
||||
|
||||
<p class="doc">
|
||||
A series of functions/mixins which assist in dynamic color manipulation.
|
||||
Created by <a href="http://www.davidkaneda.com">David Kaneda</a>.
|
||||
</p>
|
||||
|
||||
<p class="doc">
|
||||
By default, Sass comes with a <code>lightness()</code> function, which returns the expected value from the HSLa system of colors. To properly judge readability, though, we have to look at perceived brightness. This class adds a <code>brightness()</code> function to Sass, as well as <code>luminosity()</code> so we can easily generate a readable text color from the background.<br><br>
|
||||
|
||||
The sample below shows the lightness value (all are the same), but will show the brightness value as you mouse over the examples.
|
||||
</p>
|
||||
|
||||
<div class="swatch1"></div>
|
||||
|
||||
<div class="swatch2"></div>
|
||||
|
||||
<div class="swatch3"></div>
|
||||
|
||||
<div class="swatch4"></div>
|
||||
|
||||
<div class="swatch5"></div>
|
||||
161
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/s.css
vendored
Normal file
161
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/s.css
vendored
Normal file
@@ -0,0 +1,161 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @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}
|
||||
*/
|
||||
/**
|
||||
* Returns the luminosity for a specified color
|
||||
* @param {color} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
/**
|
||||
* Returns the contrast ratio between two colors
|
||||
* @param {color1} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
.swatch, .swatch1, .swatch2, .swatch3, .swatch4 {
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-khtml-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.swatch1 {
|
||||
background-color: #ea0d0d;
|
||||
color: #fcc7c7;
|
||||
text-shadow: #ba0a0a 0 -1px 0;
|
||||
border: 1px solid #a20909;
|
||||
}
|
||||
.swatch1:after {
|
||||
content: "48.431%";
|
||||
}
|
||||
.swatch1:hover:after {
|
||||
content: "31.011%";
|
||||
}
|
||||
.swatch1:active {
|
||||
background-color: #d20c0c;
|
||||
color: #fddfdf;
|
||||
text-shadow: #a20909 0 -1px 0;
|
||||
}
|
||||
|
||||
.swatch2 {
|
||||
background-color: #ea850d;
|
||||
color: #291702;
|
||||
text-shadow: #f49d36 0 1px 0;
|
||||
border: 1px solid #a25c09;
|
||||
}
|
||||
.swatch2:after {
|
||||
content: "48.431%";
|
||||
}
|
||||
.swatch2:hover:after {
|
||||
content: "58.635%";
|
||||
}
|
||||
.swatch2:active {
|
||||
background-color: #d2770c;
|
||||
color: black;
|
||||
text-shadow: #f3911e 0 1px 0;
|
||||
}
|
||||
|
||||
.swatch3 {
|
||||
background-color: #cbea0d;
|
||||
color: #232902;
|
||||
text-shadow: #d9f436 0 1px 0;
|
||||
border: 1px solid #8ca209;
|
||||
}
|
||||
.swatch3:after {
|
||||
content: "48.431%";
|
||||
}
|
||||
.swatch3:hover:after {
|
||||
content: "78.25%";
|
||||
}
|
||||
.swatch3:active {
|
||||
background-color: #b6d20c;
|
||||
color: black;
|
||||
text-shadow: #d5f31e 0 1px 0;
|
||||
}
|
||||
|
||||
.swatch4 {
|
||||
background-color: #0d65ea;
|
||||
color: #c7dcfc;
|
||||
text-shadow: #0a50ba 0 -1px 0;
|
||||
border: 1px solid #0946a2;
|
||||
}
|
||||
.swatch4:after {
|
||||
content: "48.431%";
|
||||
}
|
||||
.swatch4:hover:after {
|
||||
content: "35.235%";
|
||||
}
|
||||
.swatch4:active {
|
||||
background-color: #0c5bd2;
|
||||
color: #dfebfd;
|
||||
text-shadow: #0946a2 0 -1px 0;
|
||||
}
|
||||
|
||||
.swatch4 {
|
||||
background-color: #b90dea;
|
||||
color: #f0c7fc;
|
||||
text-shadow: #930aba 0 -1px 0;
|
||||
border: 1px solid #8009a2;
|
||||
}
|
||||
.swatch4:after {
|
||||
content: "48.431%";
|
||||
}
|
||||
.swatch4:hover:after {
|
||||
content: "35.146%";
|
||||
}
|
||||
.swatch4:active {
|
||||
background-color: #a60cd2;
|
||||
color: #f7dffd;
|
||||
text-shadow: #8009a2 0 -1px 0;
|
||||
}
|
||||
59
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/s.scss
vendored
Normal file
59
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/color/s.scss
vendored
Normal file
@@ -0,0 +1,59 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/color";
|
||||
|
||||
|
||||
// All of these colors have the same "lightness"
|
||||
$swatch1: #ea0d0d;
|
||||
$swatch2: #ea850d;
|
||||
$swatch3: #cbea0d;
|
||||
$swatch4: #0d65ea;
|
||||
$swatch5: #b90dea;
|
||||
|
||||
.swatch {
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
|
||||
@mixin color-swatch($color) {
|
||||
@extend .swatch;
|
||||
background-color: $color;
|
||||
@include color-by-background($color, 40%);
|
||||
border: 1px solid darken($color, 15%);
|
||||
|
||||
&:after {
|
||||
content: "#{lightness($color)}";
|
||||
}
|
||||
&:hover:after {
|
||||
content: "#{brightness($color)}%";
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color, 5%);
|
||||
@include color-by-background(darken($color, 5%), 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.swatch1 {
|
||||
@include color-swatch($swatch1);
|
||||
}
|
||||
.swatch2 {
|
||||
@include color-swatch($swatch2);
|
||||
}
|
||||
.swatch3 {
|
||||
@include color-swatch($swatch3);
|
||||
}
|
||||
.swatch4 {
|
||||
@include color-swatch($swatch4);
|
||||
}
|
||||
.swatch4 {
|
||||
@include color-swatch($swatch5);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/bevel</h1>
|
||||
|
||||
<h2>Bevel Shadow</h2>
|
||||
<div class="avatar1 bevel-shadow"></div>
|
||||
<div class="avatar2 bevel-shadow"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Bevel Shadow (w/options)</h2>
|
||||
<div class="avatar1 bevel-shadow-soft"></div>
|
||||
<div class="avatar2 bevel-shadow-soft"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Bevel Border</h2>
|
||||
<div class="avatar1 bevel-border"></div>
|
||||
<div class="avatar2 bevel-border"></div>
|
||||
@@ -0,0 +1,73 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.avatar, .avatar1, .avatar2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-size: 100px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-khtml-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
background: none center center no-repeat;
|
||||
}
|
||||
|
||||
.avatar1 {
|
||||
background-image: url(http://a3.twimg.com/profile_images/1106236669/twitter_sharp.png);
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
background-image: url(https://twimg0-a.akamaihd.net/profile_images/1513955198/IMG_0853-cut.jpg);
|
||||
}
|
||||
|
||||
.bevel-shadow {
|
||||
-moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
|
||||
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
|
||||
-o-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
|
||||
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.6), inset 0 -6px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
border: 1px solid rgba(51, 51, 51, 0.5);
|
||||
border-top-color: rgba(71, 71, 71, 0.5);
|
||||
border-bottom-color: rgba(31, 31, 31, 0.5);
|
||||
}
|
||||
|
||||
.bevel-shadow-soft {
|
||||
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
|
||||
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
|
||||
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -10px 2px rgba(0, 0, 0, 0.6), inset 0 -13px 2px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import "tests";
|
||||
|
||||
// @import "compass/css3/border-radius";
|
||||
// @import "recipes/effect/corner-folded";
|
||||
|
||||
|
||||
@import 'recipes/effect/bevel';
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-size: 100px;
|
||||
@include border-radius(5px);
|
||||
display: inline-block;
|
||||
background: none center center no-repeat;
|
||||
}
|
||||
|
||||
.avatar1 {
|
||||
@extend .avatar;
|
||||
@include background-image(url(http://a3.twimg.com/profile_images/1106236669/twitter_sharp.png));
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
@extend .avatar;
|
||||
@include background-image(url(https://twimg0-a.akamaihd.net/profile_images/1513955198/IMG_0853-cut.jpg));
|
||||
}
|
||||
|
||||
.bevel-shadow {
|
||||
@include bevel-shadow;
|
||||
}
|
||||
|
||||
.bevel-border {
|
||||
@include bevel-border;
|
||||
}
|
||||
|
||||
.bevel-shadow-soft {
|
||||
@include bevel-shadow(
|
||||
$blur: 2px,
|
||||
$size: 10px
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/corner-folded</h1>
|
||||
|
||||
<p class="doc">
|
||||
See <a href="http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/">http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/</a> for original effect
|
||||
</p>
|
||||
|
||||
<h2>Top Left</h2>
|
||||
<div class="wrapper">
|
||||
<div class="corner-folded-top-left"></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Top Right</h2>
|
||||
<div class="wrapper">
|
||||
<div class="corner-folded-top-right"></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Bottom Left</h2>
|
||||
<div class="wrapper">
|
||||
<div class="corner-folded-bottom-left"></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Bottom Right</h2>
|
||||
<div class="wrapper">
|
||||
<div class="corner-folded-bottom-right"></div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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/
|
||||
*/
|
||||
/**
|
||||
* 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 ::
|
||||
*/
|
||||
.wrapper {
|
||||
background: #fff;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.corner-folded-top-left,
|
||||
.corner-folded-top-right,
|
||||
.corner-folded-bottom-left,
|
||||
.corner-folded-bottom-right {
|
||||
background: #ddd;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
-moz-border-radius: 0.3em;
|
||||
-webkit-border-radius: 0.3em;
|
||||
-o-border-radius: 0.3em;
|
||||
-ms-border-radius: 0.3em;
|
||||
-khtml-border-radius: 0.3em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
.corner-folded-top-left {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.corner-folded-top-left::before {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 1em 1em 0 0;
|
||||
border-color: white #dddddd;
|
||||
-moz-border-radius: 0 0 0.3em 0;
|
||||
-webkit-border-radius: 0 0 0.3em 0;
|
||||
-o-border-radius: 0 0 0.3em 0;
|
||||
-ms-border-radius: 0 0 0.3em 0;
|
||||
-khtml-border-radius: 0 0 0.3em 0;
|
||||
border-radius: 0 0 0.3em 0;
|
||||
}
|
||||
|
||||
.corner-folded-top-right {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.corner-folded-top-right::before {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 0 1em 1em 0;
|
||||
border-color: #dddddd white;
|
||||
-moz-border-radius: 0 0 0 0.3em;
|
||||
-webkit-border-radius: 0 0 0 0.3em;
|
||||
-o-border-radius: 0 0 0 0.3em;
|
||||
-ms-border-radius: 0 0 0 0.3em;
|
||||
-khtml-border-radius: 0 0 0 0.3em;
|
||||
border-radius: 0 0 0 0.3em;
|
||||
}
|
||||
|
||||
.corner-folded-bottom-left {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.corner-folded-bottom-left::before {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-width: 1em 0 0 1em;
|
||||
border-color: #dddddd white;
|
||||
-moz-border-radius: 0 0.3em 0 0;
|
||||
-webkit-border-radius: 0 0.3em 0 0;
|
||||
-o-border-radius: 0 0.3em 0 0;
|
||||
-ms-border-radius: 0 0.3em 0 0;
|
||||
-khtml-border-radius: 0 0.3em 0 0;
|
||||
border-radius: 0 0.3em 0 0;
|
||||
}
|
||||
|
||||
.corner-folded-bottom-right {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.corner-folded-bottom-right::before {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-width: 0 0 1em 1em;
|
||||
border-color: white #dddddd;
|
||||
-moz-border-radius: 0.3em 0 0 0;
|
||||
-webkit-border-radius: 0.3em 0 0 0;
|
||||
-o-border-radius: 0.3em 0 0 0;
|
||||
-ms-border-radius: 0.3em 0 0 0;
|
||||
-khtml-border-radius: 0.3em 0 0 0;
|
||||
border-radius: 0.3em 0 0 0;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import "tests";
|
||||
|
||||
@import "compass/css3/border-radius";
|
||||
|
||||
@import "recipes/effect/folded-corner";
|
||||
|
||||
.wrapper
|
||||
{
|
||||
background: #fff; //same color as the corner-folded background-color
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.corner-folded-top-left,
|
||||
.corner-folded-top-right,
|
||||
.corner-folded-bottom-left,
|
||||
.corner-folded-bottom-right
|
||||
{
|
||||
background: #ddd; // corner-folded near color
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
@include border-radius(.3em);
|
||||
}
|
||||
|
||||
.corner-folded-top-left
|
||||
{
|
||||
@include folded-corner(top-left);
|
||||
}
|
||||
|
||||
.corner-folded-top-right
|
||||
{
|
||||
@include folded-corner(top-right);
|
||||
}
|
||||
|
||||
.corner-folded-bottom-left
|
||||
{
|
||||
@include folded-corner(bottom-left);
|
||||
}
|
||||
|
||||
.corner-folded-bottom-right
|
||||
{
|
||||
@include folded-corner(bottom-right);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/cutout</h1>
|
||||
|
||||
<h2>Cutout</h2>
|
||||
<div class="avatar1 cutout"></div>
|
||||
<div class="avatar2 cutout"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Cutout (w/options)</h2>
|
||||
<div class="avatar1 cutout-deep"></div>
|
||||
<div class="avatar2 cutout-deep"></div>
|
||||
@@ -0,0 +1,67 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.avatar, .avatar1, .avatar2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-size: 100px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-khtml-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
background: none center center no-repeat;
|
||||
}
|
||||
|
||||
.avatar1 {
|
||||
background-image: url(http://a3.twimg.com/profile_images/1106236669/twitter_sharp.png);
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
background-image: url(https://twimg0-a.akamaihd.net/profile_images/1513955198/IMG_0853-cut.jpg);
|
||||
}
|
||||
|
||||
.cutout {
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.6), inset 0 1px 5px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.6), inset 0 1px 5px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.6), inset 0 1px 5px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.6), inset 0 1px 5px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.cutout-deep {
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 20px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 20px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 20px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 20px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import "tests";
|
||||
|
||||
@import 'recipes/effect/cutout';
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-size: 100px;
|
||||
@include border-radius(5px);
|
||||
display: inline-block;
|
||||
background: none center center no-repeat;
|
||||
}
|
||||
|
||||
.avatar1 {
|
||||
@extend .avatar;
|
||||
@include background-image(url(http://a3.twimg.com/profile_images/1106236669/twitter_sharp.png));
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
@extend .avatar;
|
||||
@include background-image(url(https://twimg0-a.akamaihd.net/profile_images/1513955198/IMG_0853-cut.jpg));
|
||||
}
|
||||
|
||||
.cutout {
|
||||
@include cutout;
|
||||
}
|
||||
|
||||
.cutout-deep {
|
||||
@include cutout($size: 10px, $blur: 20px);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">effect</a>/glass</h1>
|
||||
|
||||
<p class="doc">
|
||||
Inspired by @simurai's Imdb redesign <a href="http://lab.simurai.com/redesign/imdb">http://lab.simurai.com/redesign/imdb</a>
|
||||
</p>
|
||||
|
||||
<div class="body">
|
||||
<div class="glass"></div>
|
||||
<div class="glass-blue"></div>
|
||||
</div>
|
||||
128
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/effect/glass/s.css
vendored
Normal file
128
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/effect/glass/s.css
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
/**
|
||||
* 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 ::
|
||||
*/
|
||||
.glass,
|
||||
.glass-blue {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 20px auto;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.glass {
|
||||
position: relative;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.glass:after {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: transparent solid 1px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
|
||||
-webkit-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
|
||||
-o-box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
|
||||
box-shadow: inset white 0 0 2px, inset rgba(255, 255, 255, 0.4) 0 5px 10px;
|
||||
background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, rgba(255, 255, 255, 0.12)), color-stop(50.5%, rgba(255, 255, 255, 0)));
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
|
||||
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
|
||||
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 50.5%);
|
||||
}
|
||||
|
||||
.glass-blue {
|
||||
position: relative;
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
-o-border-radius: 1em;
|
||||
-ms-border-radius: 1em;
|
||||
-khtml-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.glass-blue:after {
|
||||
content: "";
|
||||
position: asolute;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: transparent solid 1px;
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
-o-border-radius: 1em;
|
||||
-ms-border-radius: 1em;
|
||||
-khtml-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
-moz-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
|
||||
-webkit-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
|
||||
-o-box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
|
||||
box-shadow: inset #ddddff 0 0 2px, inset rgba(221, 221, 255, 0.4) 0 5px 10px;
|
||||
background: -webkit-gradient(linear, -20deg, -20deg, color-stop(50%, rgba(221, 221, 255, 0.12)), color-stop(50.5%, rgba(221, 221, 255, 0)));
|
||||
background: -webkit-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
|
||||
background: -moz-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
|
||||
background: -o-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
|
||||
background: -ms-linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
|
||||
background: linear-gradient(-20deg, rgba(221, 221, 255, 0.12) 50%, rgba(221, 221, 255, 0) 50.5%);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "tests";
|
||||
@import "recipes/effect/glass";
|
||||
|
||||
.body
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
.glass,
|
||||
.glass-blue
|
||||
{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 20px auto;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.glass
|
||||
{
|
||||
@include effect-glass;
|
||||
}
|
||||
|
||||
.glass-blue
|
||||
{
|
||||
@include effect-glass(#ddf, -20deg, 1em);
|
||||
}
|
||||
10
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/effect/index.html
vendored
Normal file
10
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/effect/index.html
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/effect</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="corner-folded">corner-folded</a></li>
|
||||
<li><a href="glass">glass</a></li>
|
||||
<li><a href="bevel">bevel</a></li>
|
||||
<li><a href="cutout">cutout</a></li>
|
||||
|
||||
</ul>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">form</a>/<a href="../">element</a>/inline</h1>
|
||||
<form>
|
||||
<p class="form-element">
|
||||
<label>Label before</label> <input />
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<input /> <label>Label after</label>
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<label>Label before</label> <textarea></textarea>
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<textarea></textarea> <label>Label after</label>
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<label>Huge textarea</label> <textarea rows="10"></textarea>
|
||||
</p>
|
||||
|
||||
<button>Button</button>
|
||||
|
||||
</form>
|
||||
@@ -0,0 +1,50 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 20em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/form/element/inline";
|
||||
|
||||
@include form-element-inline;
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/form</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="skin">skin</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">form</a>/skin</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="natural">natural</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">form</a>/<a href="../">skin</a>/natural</h1>
|
||||
<p class="doc">
|
||||
Note: Clicks on labels adjacent to inputs does not give focus (no for="" defined)
|
||||
</p>
|
||||
<form>
|
||||
<label class="form-element">Input in label,label text before input <input /> </label>
|
||||
|
||||
<label class="form-element"> <input /> Input in label,label text after input</label>
|
||||
|
||||
<p class="form-element">
|
||||
<label>Label before</label> <input />
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<input /> <label>Label after</label>
|
||||
</p>
|
||||
|
||||
<label class="form-element">Select in label,label text before input <select></select> </label>
|
||||
|
||||
<label class="form-element"> <select></select> Select in label,label text after input</label>
|
||||
|
||||
<p class="form-element">
|
||||
<label>Label before</label> <select></select>
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<select></select> <label>Label after</label>
|
||||
</p>
|
||||
|
||||
<label class="form-element">Textarea in label,label text before input <textarea></textarea> </label>
|
||||
|
||||
<label class="form-element"><textarea></textarea> Textarea in label,label text after input</label>
|
||||
|
||||
<p class="form-element">
|
||||
<label>Label before</label> <textarea></textarea>
|
||||
</p>
|
||||
|
||||
<p class="form-element">
|
||||
<textarea></textarea> <label>Label after</label>
|
||||
</p>
|
||||
|
||||
<button>Button</button>
|
||||
|
||||
</form>
|
||||
@@ -0,0 +1,157 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2em;
|
||||
background: #fff;
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
-o-border-radius: 1em;
|
||||
-ms-border-radius: 1em;
|
||||
-khtml-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
-moz-box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.form-element {
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: .4em;
|
||||
border: 1px solid #3399e9;
|
||||
border-top-color: #45a2eb;
|
||||
border-bottom-color: #2190e7;
|
||||
-moz-border-radius: 0.4em;
|
||||
-webkit-border-radius: 0.4em;
|
||||
-o-border-radius: 0.4em;
|
||||
-ms-border-radius: 0.4em;
|
||||
-khtml-border-radius: 0.4em;
|
||||
border-radius: 0.4em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1%, #e6e6e6), color-stop(30%, #ffffff));
|
||||
background: -webkit-linear-gradient(#ffffff, #e6e6e6 1%, #ffffff 30%);
|
||||
background: -moz-linear-gradient(#ffffff, #e6e6e6 1%, #ffffff 30%);
|
||||
background: -o-linear-gradient(#ffffff, #e6e6e6 1%, #ffffff 30%);
|
||||
background: -ms-linear-gradient(#ffffff, #e6e6e6 1%, #ffffff 30%);
|
||||
background: linear-gradient(#ffffff, #e6e6e6 1%, #ffffff 30%);
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.4em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.4em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.4em;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.4em;
|
||||
-moz-transition: -moz- box-shadow linear 0.2s, border linear 0.2s;
|
||||
-webkit-transition: -webkit- box-shadow linear 0.2s, border linear 0.2s;
|
||||
transition: box-shadow linear 0.2s, border linear 0.2s;
|
||||
}
|
||||
input:hover, label:hover + input,
|
||||
select:hover, label:hover +
|
||||
select,
|
||||
textarea:hover, label:hover +
|
||||
textarea {
|
||||
-moz-box-shadow: 0 0 0.8em rgba(51, 153, 233, 0.4);
|
||||
-webkit-box-shadow: 0 0 0.8em rgba(51, 153, 233, 0.4);
|
||||
-o-box-shadow: 0 0 0.8em rgba(51, 153, 233, 0.4);
|
||||
box-shadow: 0 0 0.8em rgba(51, 153, 233, 0.4);
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3399e9;
|
||||
-moz-box-shadow: 0 0 0.4em rgba(51, 153, 233, 0.65);
|
||||
-webkit-box-shadow: 0 0 0.4em rgba(51, 153, 233, 0.65);
|
||||
-o-box-shadow: 0 0 0.4em rgba(51, 153, 233, 0.65);
|
||||
box-shadow: 0 0 0.4em rgba(51, 153, 233, 0.65);
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
color: white;
|
||||
padding: .6em 1em;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid #1c8de7;
|
||||
border-top-color: #1780d2;
|
||||
border-bottom-color: #61b0ee;
|
||||
background: #3399e9;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #61b0ee), color-stop(100%, #1780d2));
|
||||
background: -webkit-linear-gradient(#61b0ee, #1780d2);
|
||||
background: -moz-linear-gradient(#61b0ee, #1780d2);
|
||||
background: -o-linear-gradient(#61b0ee, #1780d2);
|
||||
background: -ms-linear-gradient(#61b0ee, #1780d2);
|
||||
background: linear-gradient(#61b0ee, #1780d2);
|
||||
-moz-border-radius: 0.6em;
|
||||
-webkit-border-radius: 0.6em;
|
||||
-o-border-radius: 0.6em;
|
||||
-ms-border-radius: 0.6em;
|
||||
-khtml-border-radius: 0.6em;
|
||||
border-radius: 0.6em;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.2em;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.2em;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.2em;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.2em;
|
||||
}
|
||||
button:focus, button:hover,
|
||||
.button:focus,
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
background: #1c8de7;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6ab5ef), color-stop(100%, #167ac9));
|
||||
background: -webkit-linear-gradient(#6ab5ef, #167ac9);
|
||||
background: -moz-linear-gradient(#6ab5ef, #167ac9);
|
||||
background: -o-linear-gradient(#6ab5ef, #167ac9);
|
||||
background: -ms-linear-gradient(#6ab5ef, #167ac9);
|
||||
background: linear-gradient(#6ab5ef, #167ac9);
|
||||
}
|
||||
button:active,
|
||||
.button:active {
|
||||
text-decoration: none;
|
||||
background: #1885dc;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #167ac9), color-stop(100%, #6ab5ef));
|
||||
background: -webkit-linear-gradient(#167ac9, #6ab5ef);
|
||||
background: -moz-linear-gradient(#167ac9, #6ab5ef);
|
||||
background: -o-linear-gradient(#167ac9, #6ab5ef);
|
||||
background: -ms-linear-gradient(#167ac9, #6ab5ef);
|
||||
background: linear-gradient(#167ac9, #6ab5ef);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/form/skin/natural";
|
||||
|
||||
form
|
||||
{
|
||||
padding: 2em;
|
||||
background: #fff;
|
||||
@include border-radius(1em);
|
||||
@include box-shadow(0 .2em .4em rgba(#000, .4));
|
||||
}
|
||||
|
||||
.form-element
|
||||
{
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
@include form-skin-natural;
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../">recipes</a>/google-webfont</h1>
|
||||
|
||||
<h2>I’m Ubuntu!</h2>
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
*
|
||||
* @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}
|
||||
*/
|
||||
/**
|
||||
* Returns the luminosity for a specified color
|
||||
* @param {color} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
/**
|
||||
* Returns the contrast ratio between two colors
|
||||
* @param {color1} The color to check
|
||||
* @return {measurement}
|
||||
*/
|
||||
@import url("//fonts.googleapis.com/css?family=Ubuntu:700");
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 144px;
|
||||
letter-spacing: -10px;
|
||||
font-weight: 700;
|
||||
color: rgba(110, 110, 110, 0.5);
|
||||
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import 'recipes/google-webfont';
|
||||
@import 'recipes/color';
|
||||
|
||||
@include google-webfont('Ubuntu', 700);
|
||||
|
||||
@import 'tests';
|
||||
|
||||
h2 {
|
||||
font-family: Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 144px;
|
||||
letter-spacing: -10px;
|
||||
font-weight: 700;
|
||||
@include color-by-background(rgba(#eee, .5), 50);
|
||||
}
|
||||
17
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/index.html
vendored
Normal file
17
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/index.html
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for recipes</h1>
|
||||
|
||||
<a href="../">Back to index</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="color">color</a></li>
|
||||
<li><a href="effect">effect</a></li>
|
||||
<li><a href="form">form</a></li>
|
||||
<li><a href="google-webfont">google-webfont</a></li>
|
||||
<li><a href="layout">layout</a></li>
|
||||
<li><a href="pattern">pattern</a></li>
|
||||
<li><a href="shadow">shadow</a></li>
|
||||
<li><a href="shape">shape</a></li>
|
||||
<li><a href="shared">shared</a></li>
|
||||
<li><a href="ui">ui</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,455 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
|
||||
<p>This method was inspired by the Foundation grid, from Zurb. It is made slightly more dynamic, but will require Sass 3.2 to become truly configureable.</p>
|
||||
|
||||
|
||||
<h4>Examples</h4>
|
||||
<p>Take this page for example - we've set up this page by containing this section in columns-8, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>
|
||||
|
||||
<p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row display">
|
||||
<div class="columns-4 columns">
|
||||
.columns-4
|
||||
</div>
|
||||
<div class="columns-4">
|
||||
.columns-4
|
||||
</div>
|
||||
<div class="columns-4">
|
||||
.columns-4
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-3">
|
||||
.columns-3
|
||||
</div>
|
||||
<div class="columns-6">
|
||||
.columns-6
|
||||
</div>
|
||||
<div class="columns-3">
|
||||
.columns-3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-2">
|
||||
.columns-2
|
||||
</div>
|
||||
<div class="columns-8">
|
||||
.columns-8
|
||||
</div>
|
||||
<div class="columns-2">
|
||||
.columns-2
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-11">
|
||||
.columns-11
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-2">
|
||||
.columns-2
|
||||
</div>
|
||||
<div class="columns-10">
|
||||
.columns-10
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-3">
|
||||
.columns-3
|
||||
</div>
|
||||
<div class="columns-9">
|
||||
.columns-9
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-4">
|
||||
.columns-4
|
||||
</div>
|
||||
<div class="columns-8">
|
||||
.columns-8
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-5">
|
||||
.columns-5
|
||||
</div>
|
||||
<div class="columns-7">
|
||||
.columns-7
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-6">
|
||||
.columns-6
|
||||
</div>
|
||||
<div class="columns-6">
|
||||
.columns-6
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-7">
|
||||
.columns-7
|
||||
</div>
|
||||
<div class="columns-5">
|
||||
.columns-5
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-8">
|
||||
.columns-8
|
||||
</div>
|
||||
<div class="columns-4">
|
||||
columns-4
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-9">
|
||||
.columns-9
|
||||
</div>
|
||||
<div class="columns-3">
|
||||
.columns-3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-10">
|
||||
.columns-10
|
||||
</div>
|
||||
<div class="columns-2">
|
||||
.columns-2
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-11">
|
||||
.columns-11
|
||||
</div>
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-12">
|
||||
.columns-12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-11">
|
||||
.columns-11
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-10 offset-by-1">
|
||||
.columns-10.offset-by-one
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-9 offset-by-2">
|
||||
.columns-9.offset-by-two
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-1">
|
||||
.columns-1
|
||||
</div>
|
||||
<div class="columns-8 offset-by-3">
|
||||
.columns-8.offset-by.three
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-7 offset-by-5">
|
||||
.columns-7.offset-by-five
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-6 offset-by-6">
|
||||
.columns-6.offset-by-six
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-5 offset-by-7">
|
||||
.columns-5.offset-by-six
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-4 offset-by-8">
|
||||
columns-4.offset-by-eight
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h4>Centered Columns</h4>
|
||||
<p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: for this to work, there cannot be any other column blocks in the row.</p>
|
||||
|
||||
<div class="row display">
|
||||
<div class="columns-1 centered">
|
||||
.columns-1.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-2 centered">
|
||||
.columns-2.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-3 centered">
|
||||
.columns-3.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-4 centered">
|
||||
columns-4.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-5 centered">
|
||||
.columns-5.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-6 centered">
|
||||
.columns-6.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-7 centered">
|
||||
.columns-7.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-8 centered">
|
||||
.columns-8.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-9 centered">
|
||||
.columns-9.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-10 centered">
|
||||
.columns-10.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-11 centered">
|
||||
.columns-11.centered
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-12 centered">
|
||||
.columns-12.centered
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4>Source Ordering</h4>
|
||||
<p>Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets. On phones the grid will still be linearized into the order of the markup.</p>
|
||||
|
||||
<div class="row display">
|
||||
<div class="columns-2 push-ten">
|
||||
.columns-2 </div>
|
||||
<div class="columns-10">
|
||||
.columns-10 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-3 push-nine">
|
||||
.columns-3
|
||||
</div>
|
||||
<div class="columns-9 pull-three">
|
||||
.columns-9 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-4 push-eight">
|
||||
columns-4
|
||||
</div>
|
||||
<div class="columns-8 pull-four">
|
||||
.columns-8 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-5 push-seven">
|
||||
.five
|
||||
</div>
|
||||
<div class="columns-7 pull-five">
|
||||
.columns-7 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-6 push-six">
|
||||
.columns-6
|
||||
</div>
|
||||
<div class="columns-6 pull-six">
|
||||
.columns-6 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-7 push-five">
|
||||
.columns-7
|
||||
</div>
|
||||
<div class="columns-5 pull-seven">
|
||||
.columns-5 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-8 push-four">
|
||||
.columns-8
|
||||
</div>
|
||||
<div class="columns-4 pull-eight">
|
||||
columns-4 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-9 push-three">
|
||||
.columns-9
|
||||
</div>
|
||||
<div class="columns-3 pull-nine">
|
||||
.columns-3 (last)
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-10 push-two">
|
||||
.columns-10
|
||||
</div>
|
||||
<div class="columns-2 pull-ten">
|
||||
.two (last)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
<h4>Offsets</h4>
|
||||
<p>Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they're nestable.</p>
|
||||
|
||||
<hr>
|
||||
<h4>Mobile Grid</h4>
|
||||
<p>The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.</p>
|
||||
<h5>Four Column Mobile Grid</h5>
|
||||
<p>When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.</p>
|
||||
<div class="row display">
|
||||
<div class="columns-3 phone-1">
|
||||
.columns-3.phone-1
|
||||
</div>
|
||||
<div class="columns-9 phone-3">
|
||||
.columns-9.phone-3
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-6 phone-2">
|
||||
.columns-6
|
||||
</div>
|
||||
<div class="columns-6 phone-2">
|
||||
.columns-6
|
||||
</div>
|
||||
</div>
|
||||
<div class="row display">
|
||||
<div class="columns-10 phone-3">
|
||||
.columns-10.phone-3
|
||||
</div>
|
||||
<div class="columns-2 phone-1">
|
||||
.columns-2.phone-1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Two-up</h5>
|
||||
<ul class="grid-2">
|
||||
<li>Two-up element</li>
|
||||
<li>Two-up element</li>
|
||||
<li>Two-up element</li>
|
||||
<li>Two-up element</li>
|
||||
<li>Two-up element</li>
|
||||
</ul>
|
||||
|
||||
<h5>Three-up</h5>
|
||||
<ul class="grid-3">
|
||||
<li>Three-up element</li>
|
||||
<li>Three-up element</li>
|
||||
<li>Three-up element</li>
|
||||
<li>Three-up element</li>
|
||||
<li>Three-up element</li>
|
||||
</ul>
|
||||
|
||||
<h5>Four-up (Mobile)</h5>
|
||||
<ul class="grid-4 mobile">
|
||||
<li>Four-up element</li>
|
||||
<li>Four-up element</li>
|
||||
<li>Four-up element</li>
|
||||
<li>Four-up element</li>
|
||||
<li>Four-up element</li>
|
||||
<li>Four-up element</li>
|
||||
</ul>
|
||||
|
||||
<h5>Five-up</h5>
|
||||
<ul class="grid-5">
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
<li>Five-up element</li>
|
||||
</ul>
|
||||
|
||||
<h5>Mobile Source Ordering</h5>
|
||||
<p>You can use the same push and pull style classes on the 4 column phone grid. The syntax includes .pull-one-phone, .pull-two-phone, .pull-three-phone, as well as .push-one-phone, .push-two-phone, .push-three.phone.</p>
|
||||
|
||||
<h4>Other Layout Options</h4>
|
||||
<p>Be sure to check out the <a href="layout.php">Layout docs</a> to see how you can turn various grid elements on and off, as well as use 2/3/4/5-up block grids for gallery style layouts.</p>
|
||||
</div>
|
||||
531
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/grid/s.css
vendored
Normal file
531
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/layout/grid/s.css
vendored
Normal file
@@ -0,0 +1,531 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
.clearfix:before, .row:before, .clearfix:after, .row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after, .row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
#map_canvas img, .map_canvas img {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
img, object, embed {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12 {
|
||||
margin-left: 4.4%;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
position: relative;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.column:first-child, .columns-1:first-child, .phone-1:first-child, .columns-2:first-child, .phone-2:first-child, .columns-3:first-child, .phone-3:first-child, .columns-4:first-child, .phone-4:first-child, .columns-5:first-child, .phone-5:first-child, .columns-6:first-child, .phone-6:first-child, .columns-7:first-child, .phone-7:first-child, .columns-8:first-child, .phone-8:first-child, .columns-9:first-child, .phone-9:first-child, .columns-10:first-child, .phone-10:first-child, .columns-11:first-child, .phone-11:first-child, .columns-12:first-child, .phone-12:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.grid > li, .grid-1 > li, .grid-2 > li, .grid-3 > li, .grid-4 > li, .grid-5 > li, .grid-6 > li, .grid-7 > li, .grid-8 > li, .grid-9 > li, .grid-10 > li, .grid-11 > li, .grid-12 > li {
|
||||
float: left;
|
||||
background-color: rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
min-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.row .row {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.columns-1 {
|
||||
width: 4.3%;
|
||||
}
|
||||
|
||||
.offset-by-1 {
|
||||
margin-left: 13.1%;
|
||||
}
|
||||
.offset-by-1:first-child {
|
||||
margin-left: 8.7%;
|
||||
}
|
||||
|
||||
.push-1 {
|
||||
left: 8.7%;
|
||||
}
|
||||
|
||||
.pull-1 {
|
||||
right: 8.7%;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
.grid-1 > li {
|
||||
margin-left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-1 > li:nth-child(1n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-2 {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
.offset-by-2 {
|
||||
margin-left: 21.8%;
|
||||
}
|
||||
.offset-by-2:first-child {
|
||||
margin-left: 17.4%;
|
||||
}
|
||||
|
||||
.push-2 {
|
||||
left: 17.4%;
|
||||
}
|
||||
|
||||
.pull-2 {
|
||||
right: 17.4%;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
margin-left: -2.2%;
|
||||
}
|
||||
.grid-2 > li {
|
||||
margin-left: 2.2%;
|
||||
width: 47.8%;
|
||||
}
|
||||
.grid-2 > li:nth-child(2n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
width: 21.7%;
|
||||
}
|
||||
|
||||
.offset-by-3 {
|
||||
margin-left: 30.5%;
|
||||
}
|
||||
.offset-by-3:first-child {
|
||||
margin-left: 26.1%;
|
||||
}
|
||||
|
||||
.push-3 {
|
||||
left: 26.1%;
|
||||
}
|
||||
|
||||
.pull-3 {
|
||||
right: 26.1%;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
margin-left: -2.933%;
|
||||
}
|
||||
.grid-3 > li {
|
||||
margin-left: 2.933%;
|
||||
width: 30.4%;
|
||||
}
|
||||
.grid-3 > li:nth-child(3n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-4 {
|
||||
width: 30.4%;
|
||||
}
|
||||
|
||||
.offset-by-4 {
|
||||
margin-left: 39.2%;
|
||||
}
|
||||
.offset-by-4:first-child {
|
||||
margin-left: 34.8%;
|
||||
}
|
||||
|
||||
.push-4 {
|
||||
left: 34.8%;
|
||||
}
|
||||
|
||||
.pull-4 {
|
||||
right: 34.8%;
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
margin-left: -3.3%;
|
||||
}
|
||||
.grid-4 > li {
|
||||
margin-left: 3.3%;
|
||||
width: 21.7%;
|
||||
}
|
||||
.grid-4 > li:nth-child(4n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-5 {
|
||||
width: 39.1%;
|
||||
}
|
||||
|
||||
.offset-by-5 {
|
||||
margin-left: 47.9%;
|
||||
}
|
||||
.offset-by-5:first-child {
|
||||
margin-left: 43.5%;
|
||||
}
|
||||
|
||||
.push-5 {
|
||||
left: 43.5%;
|
||||
}
|
||||
|
||||
.pull-5 {
|
||||
right: 43.5%;
|
||||
}
|
||||
|
||||
.grid-5 {
|
||||
margin-left: -3.52%;
|
||||
}
|
||||
.grid-5 > li {
|
||||
margin-left: 3.52%;
|
||||
width: 16.48%;
|
||||
}
|
||||
.grid-5 > li:nth-child(5n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
width: 47.8%;
|
||||
}
|
||||
|
||||
.offset-by-6 {
|
||||
margin-left: 56.6%;
|
||||
}
|
||||
.offset-by-6:first-child {
|
||||
margin-left: 52.2%;
|
||||
}
|
||||
|
||||
.push-6 {
|
||||
left: 52.2%;
|
||||
}
|
||||
|
||||
.pull-6 {
|
||||
right: 52.2%;
|
||||
}
|
||||
|
||||
.grid-6 {
|
||||
margin-left: -3.667%;
|
||||
}
|
||||
.grid-6 > li {
|
||||
margin-left: 3.667%;
|
||||
width: 13%;
|
||||
}
|
||||
.grid-6 > li:nth-child(6n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-7 {
|
||||
width: 56.5%;
|
||||
}
|
||||
|
||||
.offset-by-7 {
|
||||
margin-left: 65.3%;
|
||||
}
|
||||
.offset-by-7:first-child {
|
||||
margin-left: 60.9%;
|
||||
}
|
||||
|
||||
.push-7 {
|
||||
left: 60.9%;
|
||||
}
|
||||
|
||||
.pull-7 {
|
||||
right: 60.9%;
|
||||
}
|
||||
|
||||
.grid-7 {
|
||||
margin-left: -3.771%;
|
||||
}
|
||||
.grid-7 > li {
|
||||
margin-left: 3.771%;
|
||||
width: 10.514%;
|
||||
}
|
||||
.grid-7 > li:nth-child(7n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-8 {
|
||||
width: 65.2%;
|
||||
}
|
||||
|
||||
.offset-by-8 {
|
||||
margin-left: 74%;
|
||||
}
|
||||
.offset-by-8:first-child {
|
||||
margin-left: 69.6%;
|
||||
}
|
||||
|
||||
.push-8 {
|
||||
left: 69.6%;
|
||||
}
|
||||
|
||||
.pull-8 {
|
||||
right: 69.6%;
|
||||
}
|
||||
|
||||
.grid-8 {
|
||||
margin-left: -3.85%;
|
||||
}
|
||||
.grid-8 > li {
|
||||
margin-left: 3.85%;
|
||||
width: 8.65%;
|
||||
}
|
||||
.grid-8 > li:nth-child(8n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-9 {
|
||||
width: 73.9%;
|
||||
}
|
||||
|
||||
.offset-by-9 {
|
||||
margin-left: 82.7%;
|
||||
}
|
||||
.offset-by-9:first-child {
|
||||
margin-left: 78.3%;
|
||||
}
|
||||
|
||||
.push-9 {
|
||||
left: 78.3%;
|
||||
}
|
||||
|
||||
.pull-9 {
|
||||
right: 78.3%;
|
||||
}
|
||||
|
||||
.grid-9 {
|
||||
margin-left: -3.911%;
|
||||
}
|
||||
.grid-9 > li {
|
||||
margin-left: 3.911%;
|
||||
width: 7.2%;
|
||||
}
|
||||
.grid-9 > li:nth-child(9n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-10 {
|
||||
width: 82.6%;
|
||||
}
|
||||
|
||||
.offset-by-10 {
|
||||
margin-left: 91.4%;
|
||||
}
|
||||
.offset-by-10:first-child {
|
||||
margin-left: 87%;
|
||||
}
|
||||
|
||||
.push-10 {
|
||||
left: 87%;
|
||||
}
|
||||
|
||||
.pull-10 {
|
||||
right: 87%;
|
||||
}
|
||||
|
||||
.grid-10 {
|
||||
margin-left: -3.96%;
|
||||
}
|
||||
.grid-10 > li {
|
||||
margin-left: 3.96%;
|
||||
width: 6.04%;
|
||||
}
|
||||
.grid-10 > li:nth-child(10n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-11 {
|
||||
width: 91.3%;
|
||||
}
|
||||
|
||||
.offset-by-11 {
|
||||
margin-left: 100.1%;
|
||||
}
|
||||
.offset-by-11:first-child {
|
||||
margin-left: 95.7%;
|
||||
}
|
||||
|
||||
.push-11 {
|
||||
left: 95.7%;
|
||||
}
|
||||
|
||||
.pull-11 {
|
||||
right: 95.7%;
|
||||
}
|
||||
|
||||
.grid-11 {
|
||||
margin-left: -4%;
|
||||
}
|
||||
.grid-11 > li {
|
||||
margin-left: 4%;
|
||||
width: 5.091%;
|
||||
}
|
||||
.grid-11 > li:nth-child(11n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.columns-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.push-12 {
|
||||
left: 104.4%;
|
||||
}
|
||||
|
||||
.pull-12 {
|
||||
right: 104.4%;
|
||||
}
|
||||
|
||||
.grid-12 {
|
||||
margin-left: -4.033%;
|
||||
}
|
||||
.grid-12 > li {
|
||||
margin-left: 4.033%;
|
||||
width: 4.3%;
|
||||
}
|
||||
.grid-12 > li:nth-child(12n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.row .centered {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.grid.mobile, .mobile.grid-1, .mobile.grid-2, .mobile.grid-3, .mobile.grid-4, .mobile.grid-5, .mobile.grid-6, .mobile.grid-7, .mobile.grid-8, .mobile.grid-9, .mobile.grid-10, .mobile.grid-11, .mobile.grid-12 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
.grid.mobile > li, .mobile.grid-1 > li, .mobile.grid-2 > li, .mobile.grid-3 > li, .mobile.grid-4 > li, .mobile.grid-5 > li, .mobile.grid-6 > li, .mobile.grid-7 > li, .mobile.grid-8 > li, .mobile.grid-9 > li, .mobile.grid-10 > li, .mobile.grid-11 > li, .mobile.grid-12 > li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.row .row .column, .row .row .columns-1, .row .row .phone-1, .row .row .columns-2, .row .row .phone-2, .row .row .columns-3, .row .row .phone-3, .row .row .columns-4, .row .row .phone-4, .row .row .columns-5, .row .row .phone-5, .row .row .columns-6, .row .row .phone-6, .row .row .columns-7, .row .row .phone-7, .row .row .columns-8, .row .row .phone-8, .row .row .columns-9, .row .row .phone-9, .row .row .columns-10, .row .row .phone-10, .row .row .columns-11, .row .row .phone-11, .row .row .columns-12, .row .row .phone-12 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12 {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.no-margin-left, .offset-by-1, .offset-by-1:first-child, .offset-by-2, .offset-by-2:first-child, .offset-by-3, .offset-by-3:first-child, .offset-by-4, .offset-by-4:first-child, .offset-by-5, .offset-by-5:first-child, .offset-by-6, .offset-by-6:first-child, .offset-by-7, .offset-by-7:first-child, .offset-by-8, .offset-by-8:first-child, .offset-by-9, .offset-by-9:first-child, .offset-by-10, .offset-by-10:first-child, .offset-by-11, .offset-by-11:first-child, .offset-by-12, .offset-by-12:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-left, .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {
|
||||
left: none;
|
||||
}
|
||||
|
||||
.no-right, .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {
|
||||
right: none;
|
||||
}
|
||||
|
||||
.phone-1 {
|
||||
float: left;
|
||||
margin-left: 4.4%;
|
||||
width: 21.7%;
|
||||
}
|
||||
|
||||
.phone-2 {
|
||||
float: left;
|
||||
margin-left: 4.4%;
|
||||
width: 47.8%;
|
||||
}
|
||||
|
||||
.phone-3 {
|
||||
float: left;
|
||||
margin-left: 4.4%;
|
||||
width: 73.9%;
|
||||
}
|
||||
|
||||
.phone-4 {
|
||||
float: left;
|
||||
margin-left: 4.4%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
background-color: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
|
||||
background-color: rgba(0, 128, 0, 0.3);
|
||||
}
|
||||
|
||||
.column, .columns-1, .phone-1, .columns-2, .phone-2, .columns-3, .phone-3, .columns-4, .phone-4, .columns-5, .phone-5, .columns-6, .phone-6, .columns-7, .phone-7, .columns-8, .phone-8, .columns-9, .phone-9, .columns-10, .phone-10, .columns-11, .phone-11, .columns-12, .phone-12, .grid > li, .grid-1 > li, .grid-2 > li, .grid-3 > li, .grid-4 > li, .grid-5 > li, .grid-6 > li, .grid-7 > li, .grid-8 > li, .grid-9 > li, .grid-10 > li, .grid-11 > li, .grid-12 > li {
|
||||
background-color: rgba(0, 0, 255, 0.3);
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/layout/grid";
|
||||
|
||||
// Simply to highlight some classes
|
||||
|
||||
.row {
|
||||
background-color: rgba(red, .3);
|
||||
}
|
||||
|
||||
.grid {
|
||||
background-color: rgba(green, .3);
|
||||
}
|
||||
.column, .grid > li {
|
||||
background-color: rgba(blue, .3);
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/layout</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="vertical-align">vertical-align</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<div class="v-align-container">
|
||||
<div class="v-align-content-container">
|
||||
<div class="v-align-content">
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">layout</a>/vertical-align</h1>
|
||||
<p class="doc">Original trick <a href="http://css-tricks.com/snippets/css/center-div-with-dynamic-height/">by Chris Coyier</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,85 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v-align-container {
|
||||
display: table;
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 100%;
|
||||
*position: relative;
|
||||
}
|
||||
|
||||
.v-align-content-container {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
*position: absolute;
|
||||
*top: 50%;
|
||||
}
|
||||
|
||||
.v-align-content {
|
||||
*position: relative;
|
||||
*top: -50%;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/layout/vertical-align";
|
||||
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../">recipes</a>/media-queries</h1>
|
||||
|
||||
<p class="doc">Resize this window</p>
|
||||
|
||||
<div class="big">I'm big</div>
|
||||
|
||||
<div class="medium">I'm medium</div>
|
||||
<div class="medium-only">I'm medium-only</div>
|
||||
|
||||
<div class="small">I'm small</div>
|
||||
<div class="small-only">I'm small-only</div>
|
||||
|
||||
<div class="tiny">I'm tiny</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/media-queries";
|
||||
|
||||
div
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big { @include media-big { display: block }}
|
||||
.medium { @include media-medium { display: block }}
|
||||
.medium-only { @include media-medium-only { display: block }}
|
||||
.small { @include media-small { display: block }}
|
||||
.small-only { @include media-small-only { display: block }}
|
||||
.tiny { @include media-tiny { display: block }}
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">shadow</a>/<a href="../">drop</a>/curved</h1>
|
||||
|
||||
<div class="drop-shadow-curved-vt-1">
|
||||
<p>Left vertical curve</p>
|
||||
</div>
|
||||
|
||||
<div class="drop-shadow-curved-vt-2">
|
||||
<p>Right vertical curve</p>
|
||||
</div>
|
||||
|
||||
<div class="drop-shadow-curved-vt">
|
||||
<p>Vertical curves</p>
|
||||
</div>
|
||||
|
||||
<div class="drop-shadow-curved-hz-1">
|
||||
<p>Top horizontal curve</p>
|
||||
</div>
|
||||
|
||||
<div class="drop-shadow-curved-hz-2">
|
||||
<p>Bottom horizontal curves</p>
|
||||
</div>
|
||||
|
||||
<div class="drop-shadow-curved-hz">
|
||||
<p>Horizontal curves</p>
|
||||
</div>
|
||||
@@ -0,0 +1,271 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Drop shadow mixins from Nicolas Gallagher demo
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
|
||||
*
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow curled
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow curved
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow flying
|
||||
*
|
||||
* @thanks Geoffrey Crofte @geoffrey_crofte
|
||||
* @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow w/ lifted corners
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow w/ perspective
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow raised
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* 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/
|
||||
*/
|
||||
/**
|
||||
* Shadow along the top edge of the browser viewport
|
||||
*
|
||||
* @link http://playground.genelocklin.com/depth/
|
||||
*/
|
||||
div {
|
||||
width: 18em;
|
||||
height: 10em;
|
||||
margin: 5em auto;
|
||||
background: #eeeeee;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
div p {
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
}
|
||||
div:hover {
|
||||
-moz-transform: rotate(3deg);
|
||||
-webkit-transform: rotate(3deg);
|
||||
-o-transform: rotate(3deg);
|
||||
-ms-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* This is required is you want to apply some transform on the element using drop shadow
|
||||
*/
|
||||
.drop-shadow-curved-vt-1,
|
||||
.drop-shadow-curved-vt-2,
|
||||
.drop-shadow-curved-vt,
|
||||
.drop-shadow-curved-hz-1,
|
||||
.drop-shadow-curved-hz-2,
|
||||
.drop-shadow-curved-hz {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt-1 > :last-child::before,
|
||||
.drop-shadow-curved-vt-2 > :last-child::before,
|
||||
.drop-shadow-curved-vt > :last-child::before,
|
||||
.drop-shadow-curved-hz-1 > :last-child::before,
|
||||
.drop-shadow-curved-hz-2 > :last-child::before,
|
||||
.drop-shadow-curved-hz > :last-child::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt-1 {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt-1:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 50%;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 0.1;
|
||||
-webkit-border-radius: 0.1;
|
||||
-o-border-radius: 0.1;
|
||||
-ms-border-radius: 0.1;
|
||||
-khtml-border-radius: 0.1;
|
||||
border-radius: 0.1;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt-2 {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt-2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 0.1;
|
||||
-webkit-border-radius: 0.1;
|
||||
-o-border-radius: 0.1;
|
||||
-ms-border-radius: 0.1;
|
||||
-khtml-border-radius: 0.1;
|
||||
border-radius: 0.1;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 0.1;
|
||||
-webkit-border-radius: 0.1;
|
||||
-o-border-radius: 0.1;
|
||||
-ms-border-radius: 0.1;
|
||||
-khtml-border-radius: 0.1;
|
||||
border-radius: 0.1;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz-1 {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-hz-1:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 10;
|
||||
-webkit-border-radius: 10;
|
||||
-o-border-radius: 10;
|
||||
-ms-border-radius: 10;
|
||||
-khtml-border-radius: 10;
|
||||
border-radius: 10;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz-2 {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-hz-2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 10;
|
||||
-webkit-border-radius: 10;
|
||||
-o-border-radius: 10;
|
||||
-ms-border-radius: 10;
|
||||
-khtml-border-radius: 10;
|
||||
border-radius: 10;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-hz:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 10;
|
||||
-webkit-border-radius: 10;
|
||||
-o-border-radius: 10;
|
||||
-ms-border-radius: 10;
|
||||
-khtml-border-radius: 10;
|
||||
border-radius: 10;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shadow";
|
||||
|
||||
$background: #eee;
|
||||
|
||||
div
|
||||
{
|
||||
width: 18em;
|
||||
height: 10em;
|
||||
margin: 5em auto;
|
||||
background: $background;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
p
|
||||
{
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover
|
||||
{
|
||||
@include transform(rotate(3deg));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* This is required is you want to apply some transform on the element using drop shadow
|
||||
*/
|
||||
.drop-shadow-curved-vt-1,
|
||||
.drop-shadow-curved-vt-2,
|
||||
.drop-shadow-curved-vt,
|
||||
.drop-shadow-curved-hz-1,
|
||||
.drop-shadow-curved-hz-2,
|
||||
.drop-shadow-curved-hz
|
||||
{
|
||||
@include drop-shadow-transform-requirement($background);
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt-1
|
||||
{
|
||||
@include drop-shadow-curved('left');
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt-2
|
||||
{
|
||||
@include drop-shadow-curved('right');
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt
|
||||
{
|
||||
@include drop-shadow-curved;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz-1
|
||||
{
|
||||
@include drop-shadow-curved('top');
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz-2
|
||||
{
|
||||
@include drop-shadow-curved('bottom');
|
||||
}
|
||||
|
||||
.drop-shadow-curved-hz
|
||||
{
|
||||
@include drop-shadow-curved('horizontal');
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">shadow</a>/drop</h1>
|
||||
|
||||
<p class="doc">Original effect from <a href="http://nicolasgallagher.com/css-drop-shadows-without-images/demo/">http://nicolasgallagher.com/css-drop-shadows-without-images/demo/</a></p>
|
||||
|
||||
<div class="drop-shadow-curled-corners">
|
||||
<p>Curled corners</p>
|
||||
</div>
|
||||
<!--<a class="more" href="curled-corners">more examples</a>-->
|
||||
|
||||
<div class="drop-shadow-curved-vt">
|
||||
<p>Curves</p>
|
||||
</div>
|
||||
<a class="more" href="curved">more examples</a>
|
||||
<!-- Not Ready yet
|
||||
<div class="drop-shadow-flying">
|
||||
<p>Flying box</p>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="drop-shadow-lifted-corners">
|
||||
<p>Lifted corners</p>
|
||||
</div>
|
||||
<!--<a class="more" href="lifted-corners">more examples</a>-->
|
||||
|
||||
<div class="drop-shadow-perspective">
|
||||
<p>Perspective</p>
|
||||
</div>
|
||||
<!--<a class="more" href="perspective">more examples</a>-->
|
||||
|
||||
<div class="drop-shadow-raised">
|
||||
<p>Raised box</p>
|
||||
</div>
|
||||
<!--<a class="more" href="raised">more examples</a>-->
|
||||
268
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shadow/drop/s.css
vendored
Normal file
268
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shadow/drop/s.css
vendored
Normal file
@@ -0,0 +1,268 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Drop shadow mixins from Nicolas Gallagher demo
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas, @simurai, @cameronmoll, @matthamm
|
||||
*
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow curled
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow curved
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow flying
|
||||
*
|
||||
* @thanks Geoffrey Crofte @geoffrey_crofte
|
||||
* @link http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow w/ lifted corners
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow w/ perspective
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* Drop shadow raised
|
||||
*
|
||||
* @thanks Nicolas Gallagher @necolas
|
||||
* @link http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
|
||||
*/
|
||||
/**
|
||||
* 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/
|
||||
*/
|
||||
/**
|
||||
* Shadow along the top edge of the browser viewport
|
||||
*
|
||||
* @link http://playground.genelocklin.com/depth/
|
||||
*/
|
||||
div {
|
||||
width: 18em;
|
||||
height: 10em;
|
||||
margin: 5em auto;
|
||||
background: #eeeeee;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
div p {
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.more {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: -50px auto 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* This is required is you want to apply some transform on the element using drop shadow
|
||||
*/
|
||||
.drop-shadow-curved-vt,
|
||||
.drop-shadow-lifted-corners,
|
||||
.drop-shadow-perspective {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt > :last-child::before,
|
||||
.drop-shadow-lifted-corners > :last-child::before,
|
||||
.drop-shadow-perspective > :last-child::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.drop-shadow-curved-vt:hover,
|
||||
.drop-shadow-lifted-corners:hover,
|
||||
.drop-shadow-perspective:hover {
|
||||
-moz-transform: rotate(3deg);
|
||||
-webkit-transform: rotate(3deg);
|
||||
-o-transform: rotate(3deg);
|
||||
-ms-transform: rotate(3deg);
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.drop-shadow-curled-corners {
|
||||
position: relative;
|
||||
-moz-border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
-webkit-border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
-o-border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
-ms-border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
-khtml-border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
border-radius: 0 0 120px 120px/0 0 6px 6px;
|
||||
}
|
||||
.drop-shadow-curled-corners:before, .drop-shadow-curled-corners:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
bottom: 12px;
|
||||
width: 50%;
|
||||
height: 55%;
|
||||
-moz-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
-o-box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.drop-shadow-curled-corners:before {
|
||||
left: 10px;
|
||||
-moz-transform: skew(-8deg) rotate(-3deg);
|
||||
-webkit-transform: skew(-8deg) rotate(-3deg);
|
||||
-o-transform: skew(-8deg) rotate(-3deg);
|
||||
-ms-transform: skew(-8deg) rotate(-3deg);
|
||||
transform: skew(-8deg) rotate(-3deg);
|
||||
}
|
||||
.drop-shadow-curled-corners:after {
|
||||
right: 10px;
|
||||
-moz-transform: skew(8deg) rotate(3deg);
|
||||
-webkit-transform: skew(8deg) rotate(3deg);
|
||||
-o-transform: skew(8deg) rotate(3deg);
|
||||
-ms-transform: skew(8deg) rotate(3deg);
|
||||
transform: skew(8deg) rotate(3deg);
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-curved-vt:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
-moz-border-radius: 0.1;
|
||||
-webkit-border-radius: 0.1;
|
||||
-o-border-radius: 0.1;
|
||||
-ms-border-radius: 0.1;
|
||||
-khtml-border-radius: 0.1;
|
||||
border-radius: 0.1;
|
||||
}
|
||||
|
||||
/*
|
||||
.drop-shadow-flying
|
||||
{
|
||||
@include drop-shadow-flying;
|
||||
}
|
||||
*/
|
||||
.drop-shadow-lifted-corners {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-lifted-corners::before, .drop-shadow-lifted-corners::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
bottom: 15px;
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
|
||||
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
|
||||
-o-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.drop-shadow-lifted-corners::before {
|
||||
left: 10px;
|
||||
-moz-transform: rotate(-4deg);
|
||||
-webkit-transform: rotate(-4deg);
|
||||
-o-transform: rotate(-4deg);
|
||||
-ms-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
.drop-shadow-lifted-corners::after {
|
||||
right: 10px;
|
||||
-moz-transform: rotate(4deg);
|
||||
-webkit-transform: rotate(4deg);
|
||||
-o-transform: rotate(4deg);
|
||||
-ms-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
|
||||
.drop-shadow-perspective {
|
||||
position: relative;
|
||||
}
|
||||
.drop-shadow-perspective:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
left: 80px;
|
||||
bottom: 5px;
|
||||
width: 50%;
|
||||
height: 35%;
|
||||
-moz-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);
|
||||
-moz-transform: skew(50deg);
|
||||
-webkit-transform: skew(50deg);
|
||||
-o-transform: skew(50deg);
|
||||
-ms-transform: skew(50deg);
|
||||
transform: skew(50deg);
|
||||
-moz-transform-origin: 0 100% 50%;
|
||||
-webkit-transform-origin: 0 100% 50%;
|
||||
-o-transform-origin: 0 100% 50%;
|
||||
-ms-transform-origin: 0 100% 50%;
|
||||
transform-origin: 0 100% 50%;
|
||||
}
|
||||
|
||||
.drop-shadow-raised {
|
||||
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shadow";
|
||||
|
||||
$background: #eee;
|
||||
|
||||
div
|
||||
{
|
||||
width: 18em;
|
||||
height: 10em;
|
||||
margin: 5em auto;
|
||||
background: $background;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
p
|
||||
{
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.more
|
||||
{
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: -50px auto 0;
|
||||
}
|
||||
/*
|
||||
* This is required is you want to apply some transform on the element using drop shadow
|
||||
*/
|
||||
|
||||
//.drop-shadow-curled-corners,
|
||||
.drop-shadow-curved-vt,
|
||||
.drop-shadow-lifted-corners,
|
||||
.drop-shadow-perspective,
|
||||
{
|
||||
@include drop-shadow-transform-requirement($background);
|
||||
|
||||
&:hover
|
||||
{
|
||||
@include transform(rotate(3deg));
|
||||
}
|
||||
}
|
||||
|
||||
.drop-shadow-curled-corners
|
||||
{
|
||||
@include drop-shadow-curled-corners;
|
||||
}
|
||||
|
||||
.drop-shadow-curved-vt
|
||||
{
|
||||
@include drop-shadow-curved;
|
||||
}
|
||||
/*
|
||||
.drop-shadow-flying
|
||||
{
|
||||
@include drop-shadow-flying;
|
||||
}
|
||||
*/
|
||||
.drop-shadow-lifted-corners
|
||||
{
|
||||
@include drop-shadow-lifted-corners;
|
||||
}
|
||||
|
||||
.drop-shadow-perspective
|
||||
{
|
||||
@include drop-shadow-perspective;
|
||||
}
|
||||
|
||||
.drop-shadow-raised
|
||||
{
|
||||
@include drop-shadow-raised;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../">recipes</a>/shadow</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="drop">drop</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,8 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">shape</a>/ellipse</h1>
|
||||
|
||||
<div class="circle"></div>
|
||||
<div class="ellipse-h"></div>
|
||||
<div class="ellipse-v"></div>
|
||||
<div class="ellipse-nw"></div>
|
||||
@@ -0,0 +1,90 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape/Ellipse
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
div {
|
||||
background: #000;
|
||||
margin: 4em auto;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
-moz-border-radius: 5em;
|
||||
-webkit-border-radius: 5em;
|
||||
-o-border-radius: 5em;
|
||||
-ms-border-radius: 5em;
|
||||
-khtml-border-radius: 5em;
|
||||
border-radius: 5em;
|
||||
}
|
||||
|
||||
.ellipse-h {
|
||||
width: 20em;
|
||||
height: 10em;
|
||||
-webkit-border-radius: 10em 5em;
|
||||
-moz-border-radius: 10em / 5em;
|
||||
-o-border-radius: 10em / 5em;
|
||||
-ms-border-radius: 10em / 5em;
|
||||
-khtml-border-radius: 10em / 5em;
|
||||
border-radius: 10em / 5em;
|
||||
}
|
||||
|
||||
.ellipse-v {
|
||||
width: 10em;
|
||||
height: 20em;
|
||||
-webkit-border-radius: 5em 10em;
|
||||
-moz-border-radius: 5em / 10em;
|
||||
-o-border-radius: 5em / 10em;
|
||||
-ms-border-radius: 5em / 10em;
|
||||
-khtml-border-radius: 5em / 10em;
|
||||
border-radius: 5em / 10em;
|
||||
}
|
||||
|
||||
.ellipse-nw {
|
||||
width: 20em;
|
||||
height: 10em;
|
||||
-webkit-border-radius: 10em 5em;
|
||||
-moz-border-radius: 10em / 5em;
|
||||
-o-border-radius: 10em / 5em;
|
||||
-ms-border-radius: 10em / 5em;
|
||||
-khtml-border-radius: 10em / 5em;
|
||||
border-radius: 10em / 5em;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shape/ellipse";
|
||||
@import "compass/css3/transform";
|
||||
|
||||
div
|
||||
{
|
||||
background: #000;
|
||||
margin: 4em auto;
|
||||
}
|
||||
|
||||
.circle
|
||||
{
|
||||
@include circle(10em);
|
||||
}
|
||||
|
||||
.ellipse-h
|
||||
{
|
||||
@include ellipse(20em, 10em);
|
||||
}
|
||||
|
||||
.ellipse-v
|
||||
{
|
||||
@include ellipse(10em, 20em);
|
||||
}
|
||||
|
||||
.ellipse-nw
|
||||
{
|
||||
@include ellipse(20em, 10em);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/shape</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="ellipse">circle and ellipse</a></li>
|
||||
<li><a href="polygon">polygon</a></li>
|
||||
<li><a href="symbol">symbol</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">shape</a>/polygon</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="star">star</a></li>
|
||||
<li><a href="triangle">triangle</a></li>
|
||||
</ul>
|
||||
<div class="hexagon">hexagon</div>
|
||||
<div class="hexagon2">hexagon</div>
|
||||
<div class="hexagon3">hexagon</div>
|
||||
<div class="octagon">octagon</div>
|
||||
<div class="octagon2">octagon</div>
|
||||
<div class="octagon3">octagon</div>
|
||||
<div class="parallelogram">parallelogram</div>
|
||||
<div class="parallelogram2">parallelogram</div>
|
||||
<div class="pentagon">pentagon</div>
|
||||
<div class="pentagon2">pentagon</div>
|
||||
<div class="pentagon3">pentagon</div>
|
||||
<div class="rectangle">rectangle</div>
|
||||
<div class="rectangle2">rectangle</div>
|
||||
<div class="rhombus">rhombus</div>
|
||||
<div class="rhombus2">rhombus</div>
|
||||
<div class="rhombus3">rhombus</div>
|
||||
<div class="square">square</div>
|
||||
<div class="square2">square</div>
|
||||
<div class="trapezoid">trapezoid</div>
|
||||
<div class="trapezoid2">trapezoid</div>
|
||||
<div class="trapezoid3">trapezoid</div>
|
||||
398
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shape/polygon/s.css
vendored
Normal file
398
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shape/polygon/s.css
vendored
Normal file
@@ -0,0 +1,398 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape/Polygon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Hexagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Octagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Parallelogram
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Pentagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Rectangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Rhombus
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Square
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Star
|
||||
*
|
||||
* @todo check if setting a z-index by default is a good thing
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Trapezoid
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Triangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
div {
|
||||
color: #fff;
|
||||
text-shadow: 0 -0.1em 0.2em black;
|
||||
margin: 4em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hexagon {
|
||||
width: 5em;
|
||||
height: 2.5em;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
.hexagon:before, .hexagon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
}
|
||||
.hexagon:before {
|
||||
top: -1.25em;
|
||||
border-bottom: 1.25em solid black;
|
||||
}
|
||||
.hexagon:after {
|
||||
bottom: -1.25em;
|
||||
border-top: 1.25em solid black;
|
||||
}
|
||||
|
||||
.hexagon2 {
|
||||
width: 8em;
|
||||
height: 2.5em;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
.hexagon2:before, .hexagon2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
border-left: 4em solid transparent;
|
||||
border-right: 4em solid transparent;
|
||||
}
|
||||
.hexagon2:before {
|
||||
top: -2em;
|
||||
border-bottom: 2em solid black;
|
||||
}
|
||||
.hexagon2:after {
|
||||
bottom: -2em;
|
||||
border-top: 2em solid black;
|
||||
}
|
||||
|
||||
.hexagon3 {
|
||||
width: 5em;
|
||||
height: 4em;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
.hexagon3:before, .hexagon3:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
}
|
||||
.hexagon3:before {
|
||||
top: -1.25em;
|
||||
border-bottom: 1.25em solid black;
|
||||
}
|
||||
.hexagon3:after {
|
||||
bottom: -1.25em;
|
||||
border-top: 1.25em solid black;
|
||||
}
|
||||
|
||||
.octagon {
|
||||
width: 5em;
|
||||
height: 2.1em;
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
.octagon:before, .octagon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 2.1em;
|
||||
height: 0;
|
||||
border-left: 1.45em solid transparent;
|
||||
border-right: 1.45em solid transparent;
|
||||
}
|
||||
.octagon:before {
|
||||
top: -1.45em;
|
||||
border-bottom: 1.45em solid black;
|
||||
}
|
||||
.octagon:after {
|
||||
bottom: -1.45em;
|
||||
border-top: 1.45em solid black;
|
||||
}
|
||||
|
||||
.octagon2 {
|
||||
width: 5em;
|
||||
height: 3.36em;
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
.octagon2:before, .octagon2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 2.1em;
|
||||
height: 0;
|
||||
border-left: 1.45em solid transparent;
|
||||
border-right: 1.45em solid transparent;
|
||||
}
|
||||
.octagon2:before {
|
||||
top: -2.32em;
|
||||
border-bottom: 2.32em solid black;
|
||||
}
|
||||
.octagon2:after {
|
||||
bottom: -2.32em;
|
||||
border-top: 2.32em solid black;
|
||||
}
|
||||
|
||||
.octagon3 {
|
||||
width: 8em;
|
||||
height: 2.1em;
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
.octagon3:before, .octagon3:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 3.36em;
|
||||
height: 0;
|
||||
border-left: 2.32em solid transparent;
|
||||
border-right: 2.32em solid transparent;
|
||||
}
|
||||
.octagon3:before {
|
||||
top: -1.45em;
|
||||
border-bottom: 1.45em solid black;
|
||||
}
|
||||
.octagon3:after {
|
||||
bottom: -1.45em;
|
||||
border-top: 1.45em solid black;
|
||||
}
|
||||
|
||||
.parallelogram {
|
||||
width: 8em;
|
||||
height: 5em;
|
||||
-moz-transform: skew(30deg);
|
||||
-webkit-transform: skew(30deg);
|
||||
-o-transform: skew(30deg);
|
||||
-ms-transform: skew(30deg);
|
||||
transform: skew(30deg);
|
||||
background: black;
|
||||
}
|
||||
|
||||
.parallelogram2 {
|
||||
width: 5em;
|
||||
height: 8em;
|
||||
-moz-transform: skew(-10deg);
|
||||
-webkit-transform: skew(-10deg);
|
||||
-o-transform: skew(-10deg);
|
||||
-ms-transform: skew(-10deg);
|
||||
transform: skew(-10deg);
|
||||
background: black;
|
||||
}
|
||||
|
||||
.pentagon {
|
||||
position: relative;
|
||||
width: 2.7em;
|
||||
border-width: 2.5em 0.9em 0;
|
||||
border-style: solid;
|
||||
border-color: black transparent;
|
||||
}
|
||||
.pentagon:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -4.25em;
|
||||
left: -0.9em;
|
||||
border-width: 0 2.25em 1.75em;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black;
|
||||
}
|
||||
|
||||
.pentagon2 {
|
||||
position: relative;
|
||||
width: 4.32em;
|
||||
border-width: 2.5em 1.44em 0;
|
||||
border-style: solid;
|
||||
border-color: black transparent;
|
||||
}
|
||||
.pentagon2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -4.25em;
|
||||
left: -1.44em;
|
||||
border-width: 0 3.6em 1.75em;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black;
|
||||
}
|
||||
|
||||
.pentagon3 {
|
||||
position: relative;
|
||||
width: 2.7em;
|
||||
border-width: 4em 0.9em 0;
|
||||
border-style: solid;
|
||||
border-color: black transparent;
|
||||
}
|
||||
.pentagon3:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -6.8em;
|
||||
left: -0.9em;
|
||||
border-width: 0 2.25em 2.8em;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black;
|
||||
}
|
||||
|
||||
.rectangle {
|
||||
width: 8em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.rectangle2 {
|
||||
width: 5em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.rhombus {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
-moz-transform: rotate(-45deg) skew(0deg, 0deg);
|
||||
-webkit-transform: rotate(-45deg) skew(0deg, 0deg);
|
||||
-o-transform: rotate(-45deg) skew(0deg, 0deg);
|
||||
-ms-transform: rotate(-45deg) skew(0deg, 0deg);
|
||||
transform: rotate(-45deg) skew(0deg, 0deg);
|
||||
}
|
||||
|
||||
.rhombus2 {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
-moz-transform: rotate(-45deg) skew(-10deg, -10deg);
|
||||
-webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
|
||||
-o-transform: rotate(-45deg) skew(-10deg, -10deg);
|
||||
-ms-transform: rotate(-45deg) skew(-10deg, -10deg);
|
||||
transform: rotate(-45deg) skew(-10deg, -10deg);
|
||||
}
|
||||
|
||||
.rhombus3 {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
-moz-transform: rotate(-45deg) skew(20deg, 20deg);
|
||||
-webkit-transform: rotate(-45deg) skew(20deg, 20deg);
|
||||
-o-transform: rotate(-45deg) skew(20deg, 20deg);
|
||||
-ms-transform: rotate(-45deg) skew(20deg, 20deg);
|
||||
transform: rotate(-45deg) skew(20deg, 20deg);
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.square2 {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.trapezoid {
|
||||
border-bottom: 5em solid black;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
height: 0;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.trapezoid2 {
|
||||
border-bottom: 5em solid black;
|
||||
border-left: 4em solid transparent;
|
||||
border-right: 4em solid transparent;
|
||||
height: 0;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.trapezoid3 {
|
||||
border-bottom: 8em solid black;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
height: 0;
|
||||
width: 5em;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shape/polygon";
|
||||
|
||||
div
|
||||
{
|
||||
color: #fff;
|
||||
text-shadow: 0 -.1em .2em #000;
|
||||
margin: 4em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hexagon { @include hexagon(5em, 5em, #000) }
|
||||
.hexagon2 { @include hexagon(8em, 5em, #000) }
|
||||
.hexagon3 { @include hexagon(5em, 8em, #000) }
|
||||
|
||||
.octagon { @include octagon(5em, 5em, #000) }
|
||||
.octagon2 { @include octagon(5em, 8em, #000) }
|
||||
.octagon3 { @include octagon(8em, 5em, #000) }
|
||||
|
||||
.parallelogram { @include parallelogram(8em, 5em, 30deg, #000) }
|
||||
.parallelogram2 { @include parallelogram(5em, 8em, -10deg, #000) }
|
||||
|
||||
.pentagon { @include pentagon(5em, 5em, #000) }
|
||||
.pentagon2 { @include pentagon(8em, 5em, #000) }
|
||||
.pentagon3 { @include pentagon(5em, 8em, #000) }
|
||||
|
||||
.rectangle { @include rectangle(8em, 5em, #000) }
|
||||
.rectangle2 { @include rectangle(5em, 8em, #000) }
|
||||
|
||||
.rhombus { @include rhombus(5em, #000) }
|
||||
.rhombus2 { @include rhombus(8em, #000, -10deg) }
|
||||
.rhombus3 { @include rhombus(5em, #000, 20deg) }
|
||||
|
||||
.square { @include square(5em, #000) }
|
||||
.square2 { @include square(8em, #000) }
|
||||
|
||||
.trapezoid { @include trapezoid(5em, 5em, #000) }
|
||||
.trapezoid2 { @include trapezoid(8em, 5em, #000) }
|
||||
.trapezoid3 { @include trapezoid(5em, 8em, #000) }
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">shape</a>/<a href="../">polygon</a>/star</h1>
|
||||
|
||||
<div class="star-5">star 5</div>
|
||||
<div class="star-5-2">star 5</div>
|
||||
|
||||
<div class="star-6">star 6</div>
|
||||
<div class="star-6-2">star 6</div>
|
||||
|
||||
<div class="star-8">star 8</div>
|
||||
<div class="star-8-2">star 8</div>
|
||||
|
||||
<div class="star-12">star 12</div>
|
||||
<div class="star-12-2">star 12</div>
|
||||
@@ -0,0 +1,356 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape/Polygon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Hexagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Octagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Parallelogram
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Pentagon
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Rectangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Rhombus
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Square
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Star
|
||||
*
|
||||
* @todo check if setting a z-index by default is a good thing
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Trapezoid
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Polygon/Triangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
div {
|
||||
color: #fff;
|
||||
text-shadow: 0 -0.1em 0.2em black;
|
||||
margin: 4em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.star-5 {
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 2.5em;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 5em solid transparent;
|
||||
border-bottom: 3.5em solid black;
|
||||
border-left: 5em solid transparent;
|
||||
-moz-transform: rotate(35deg);
|
||||
-webkit-transform: rotate(35deg);
|
||||
-o-transform: rotate(35deg);
|
||||
-ms-transform: rotate(35deg);
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
.star-5:before, .star-5:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.star-5:before {
|
||||
top: -2.25em;
|
||||
left: -3.25em;
|
||||
border-bottom: 4em solid black;
|
||||
border-left: 1.5em solid transparent;
|
||||
border-right: 1.5em solid transparent;
|
||||
-moz-transform: rotate(-35deg);
|
||||
-webkit-transform: rotate(-35deg);
|
||||
-o-transform: rotate(-35deg);
|
||||
-ms-transform: rotate(-35deg);
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
.star-5:after {
|
||||
top: 0.15em;
|
||||
left: -5.25em;
|
||||
border-right: 5em solid transparent;
|
||||
border-bottom: 3.5em solid black;
|
||||
border-left: 5em solid transparent;
|
||||
-moz-transform: rotate(-70deg);
|
||||
-webkit-transform: rotate(-70deg);
|
||||
-o-transform: rotate(-70deg);
|
||||
-ms-transform: rotate(-70deg);
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
|
||||
.star-5-2 {
|
||||
margin-top: 4em;
|
||||
margin-bottom: 4em;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 8em solid transparent;
|
||||
border-bottom: 5.6em solid black;
|
||||
border-left: 8em solid transparent;
|
||||
-moz-transform: rotate(35deg);
|
||||
-webkit-transform: rotate(35deg);
|
||||
-o-transform: rotate(35deg);
|
||||
-ms-transform: rotate(35deg);
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
.star-5-2:before, .star-5-2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.star-5-2:before {
|
||||
top: -3.6em;
|
||||
left: -5.2em;
|
||||
border-bottom: 6.4em solid black;
|
||||
border-left: 2.4em solid transparent;
|
||||
border-right: 2.4em solid transparent;
|
||||
-moz-transform: rotate(-35deg);
|
||||
-webkit-transform: rotate(-35deg);
|
||||
-o-transform: rotate(-35deg);
|
||||
-ms-transform: rotate(-35deg);
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
.star-5-2:after {
|
||||
top: 0.24em;
|
||||
left: -8.4em;
|
||||
border-right: 8em solid transparent;
|
||||
border-bottom: 5.6em solid black;
|
||||
border-left: 8em solid transparent;
|
||||
-moz-transform: rotate(-70deg);
|
||||
-webkit-transform: rotate(-70deg);
|
||||
-o-transform: rotate(-70deg);
|
||||
-ms-transform: rotate(-70deg);
|
||||
transform: rotate(-70deg);
|
||||
}
|
||||
|
||||
.star-6 {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
border-bottom: 5em solid black;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.star-6:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
border-left: 2.5em solid transparent;
|
||||
border-right: 2.5em solid transparent;
|
||||
border-top: 5em solid black;
|
||||
top: 1.5em;
|
||||
left: -2.5em;
|
||||
}
|
||||
|
||||
.star-6-2 {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4em solid transparent;
|
||||
border-right: 4em solid transparent;
|
||||
border-bottom: 8em solid black;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.star-6-2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
border-left: 4em solid transparent;
|
||||
border-right: 4em solid transparent;
|
||||
border-top: 8em solid black;
|
||||
top: 2.4em;
|
||||
left: -4em;
|
||||
}
|
||||
|
||||
.star-8 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-moz-transform: rotate(20deg);
|
||||
-webkit-transform: rotate(20deg);
|
||||
-o-transform: rotate(20deg);
|
||||
-ms-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.star-8, .star-8:before {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
}
|
||||
.star-8:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-moz-transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
-o-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.star-8-2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-moz-transform: rotate(20deg);
|
||||
-webkit-transform: rotate(20deg);
|
||||
-o-transform: rotate(20deg);
|
||||
-ms-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.star-8-2, .star-8-2:before {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
}
|
||||
.star-8-2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-moz-transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
-o-transform: rotate(135deg);
|
||||
-ms-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.star-12 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 0;
|
||||
}
|
||||
.star-12, .star-12:before, .star-12:after {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
background: black;
|
||||
}
|
||||
.star-12:before, .star-12:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.star-12:before {
|
||||
-moz-transform: rotate(30deg);
|
||||
-webkit-transform: rotate(30deg);
|
||||
-o-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
.star-12:after {
|
||||
-moz-transform: rotate(60deg);
|
||||
-webkit-transform: rotate(60deg);
|
||||
-o-transform: rotate(60deg);
|
||||
-ms-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.star-12-2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 0;
|
||||
}
|
||||
.star-12-2, .star-12-2:before, .star-12-2:after {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
}
|
||||
.star-12-2:before, .star-12-2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.star-12-2:before {
|
||||
-moz-transform: rotate(30deg);
|
||||
-webkit-transform: rotate(30deg);
|
||||
-o-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
.star-12-2:after {
|
||||
-moz-transform: rotate(60deg);
|
||||
-webkit-transform: rotate(60deg);
|
||||
-o-transform: rotate(60deg);
|
||||
-ms-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shape/polygon";
|
||||
|
||||
div
|
||||
{
|
||||
color: #fff;
|
||||
text-shadow: 0 -.1em .2em #000;
|
||||
margin: 4em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.star-5 { @include star-5(5em, #000) }
|
||||
.star-5-2 { @include star-5(8em, #000) }
|
||||
|
||||
.star-6 { @include star-6(5em, #000) }
|
||||
.star-6-2 { @include star-6(8em, #000) }
|
||||
|
||||
.star-8 { @include star-8(5em, #000) }
|
||||
.star-8-2 { @include star-8(8em, #000) }
|
||||
|
||||
.star-12 { @include star-12(5em, #000) }
|
||||
.star-12-2 { @include star-12(8em, #000) }
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">shape</a>/<a href="../">polygon</a>/triangle</h1>
|
||||
|
||||
<h2>Top</h2>
|
||||
<div class="triangle-top"></div>
|
||||
|
||||
<h2>Bottom</h2>
|
||||
<div class="triangle-bottom"></div>
|
||||
|
||||
<h2>Left</h2>
|
||||
<div class="triangle-left"></div>
|
||||
|
||||
<h2>Right</h2>
|
||||
<div class="triangle-right"></div>
|
||||
|
||||
<h2>Top Left</h2>
|
||||
<div class="triangle-top-left"></div>
|
||||
|
||||
<h2>Top Right</h2>
|
||||
<div class="triangle-top-right"></div>
|
||||
|
||||
<h2>Bottom Left</h2>
|
||||
<div class="triangle-bottom-left"></div>
|
||||
|
||||
<h2>Bottom Right</h2>
|
||||
<div class="triangle-bottom-right"></div>
|
||||
@@ -0,0 +1,104 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape/Polygon/Triangle
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
.triangle-top {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1em solid transparent;
|
||||
border-right: 1em solid transparent;
|
||||
border-bottom: 1em solid black;
|
||||
}
|
||||
|
||||
.triangle-bottom {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1em solid transparent;
|
||||
border-right: 1em solid transparent;
|
||||
border-top: 1em solid black;
|
||||
}
|
||||
|
||||
.triangle-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent;
|
||||
border-right: 1em solid black;
|
||||
border-bottom: 1em solid transparent;
|
||||
}
|
||||
|
||||
.triangle-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent;
|
||||
border-left: 1em solid black;
|
||||
border-bottom: 1em solid transparent;
|
||||
}
|
||||
|
||||
.triangle-top-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid black;
|
||||
border-bottom: 1em solid transparent;
|
||||
border-left: 1em solid black;
|
||||
border-right: 1em solid transparent;
|
||||
}
|
||||
|
||||
.triangle-top-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid black;
|
||||
border-bottom: 1em solid transparent;
|
||||
border-left: 1em solid transparent;
|
||||
border-right: 1em solid black;
|
||||
}
|
||||
|
||||
.triangle-bottom-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent;
|
||||
border-bottom: 1em solid black;
|
||||
border-left: 1em solid black;
|
||||
border-right: 1em solid transparent;
|
||||
}
|
||||
|
||||
.triangle-bottom-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 1em solid transparent;
|
||||
border-left: 1em solid transparent;
|
||||
border-bottom: 1em solid black;
|
||||
border-right: 1em solid black;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shape/polygon/triangle";
|
||||
|
||||
.triangle-top
|
||||
{
|
||||
@include triangle;
|
||||
}
|
||||
|
||||
.triangle-bottom
|
||||
{
|
||||
@include triangle(bottom);
|
||||
}
|
||||
|
||||
.triangle-left
|
||||
{
|
||||
@include triangle(left);
|
||||
}
|
||||
|
||||
.triangle-right
|
||||
{
|
||||
@include triangle(right);
|
||||
}
|
||||
|
||||
.triangle-top-left
|
||||
{
|
||||
@include triangle(top-left);
|
||||
}
|
||||
|
||||
.triangle-top-right
|
||||
{
|
||||
@include triangle(top-right);
|
||||
}
|
||||
|
||||
.triangle-bottom-left
|
||||
{
|
||||
@include triangle(bottom-left);
|
||||
}
|
||||
|
||||
.triangle-bottom-right
|
||||
{
|
||||
@include triangle(bottom-right);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">shape</a>/symbol</h1>
|
||||
|
||||
<div class="diamond"></div>
|
||||
<div class="diamond2"></div>
|
||||
<div class="egg"></div>
|
||||
<div class="egg2"></div>
|
||||
<div class="heart"></div>
|
||||
<div class="heart2"></div>
|
||||
<div class="infinity"></div>
|
||||
<div class="infinity2"></div>
|
||||
<div class="pacman"></div>
|
||||
<div class="pacman2"></div>
|
||||
<div class="yin-yang"></div>
|
||||
<div class="yin-yang2"></div>
|
||||
414
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shape/symbol/s.css
vendored
Normal file
414
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/shape/symbol/s.css
vendored
Normal file
@@ -0,0 +1,414 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shape/Symbol
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Diamond
|
||||
*
|
||||
* @todo add height support
|
||||
*
|
||||
* @author Alexander Futekov
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Egg
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Heart
|
||||
*
|
||||
* @author Nicolas Gallagher @necolas
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Infinity
|
||||
*
|
||||
* @author Nicolas Gallagher @necolas
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Pacman
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
/**
|
||||
* Shape/Symbol/Yin-yang
|
||||
*
|
||||
* @author Alexander Futekov
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
.diamond {
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black transparent;
|
||||
border-width: 0 2.5em 2.5em 2.5em;
|
||||
height: 0;
|
||||
width: 5em;
|
||||
position: relative;
|
||||
margin: 1em 0 5em 0;
|
||||
}
|
||||
.diamond:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
left: -2.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
border-width: 3.5em 5em 0 5em;
|
||||
}
|
||||
|
||||
.diamond2 {
|
||||
border-style: solid;
|
||||
border-color: transparent transparent black transparent;
|
||||
border-width: 0 4em 4em 4em;
|
||||
height: 0;
|
||||
width: 8em;
|
||||
position: relative;
|
||||
margin: 1.6em 0 8em 0;
|
||||
}
|
||||
.diamond2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
left: -4em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
border-width: 5.6em 8em 0 8em;
|
||||
}
|
||||
|
||||
.egg {
|
||||
display: block;
|
||||
width: 5em;
|
||||
height: 8em;
|
||||
background-color: black;
|
||||
-moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-o-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-khtml-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
}
|
||||
|
||||
.egg2 {
|
||||
display: block;
|
||||
width: 8em;
|
||||
height: 10em;
|
||||
background-color: black;
|
||||
-moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-o-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
-khtml-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: relative;
|
||||
width: 5em;
|
||||
height: 4em;
|
||||
}
|
||||
.heart:before, .heart:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
width: 2.5em;
|
||||
height: 4em;
|
||||
background: black;
|
||||
-moz-border-radius: 2em 2em 0 0;
|
||||
-webkit-border-radius: 2em 2em 0 0;
|
||||
-o-border-radius: 2em 2em 0 0;
|
||||
-ms-border-radius: 2em 2em 0 0;
|
||||
-khtml-border-radius: 2em 2em 0 0;
|
||||
border-radius: 2em 2em 0 0;
|
||||
}
|
||||
.heart:before {
|
||||
left: 2.5em;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-moz-transform-origin: 0% 100%;
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
-o-transform-origin: 0% 100%;
|
||||
-ms-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
.heart:after {
|
||||
left: 0;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-moz-transform-origin: 100% 100%;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-o-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.heart2 {
|
||||
position: relative;
|
||||
width: 10em;
|
||||
height: 8em;
|
||||
}
|
||||
.heart2:before, .heart2:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
width: 5em;
|
||||
height: 8em;
|
||||
background: black;
|
||||
-moz-border-radius: 4em 4em 0 0;
|
||||
-webkit-border-radius: 4em 4em 0 0;
|
||||
-o-border-radius: 4em 4em 0 0;
|
||||
-ms-border-radius: 4em 4em 0 0;
|
||||
-khtml-border-radius: 4em 4em 0 0;
|
||||
border-radius: 4em 4em 0 0;
|
||||
}
|
||||
.heart2:before {
|
||||
left: 5em;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-moz-transform-origin: 0% 100%;
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
-o-transform-origin: 0% 100%;
|
||||
-ms-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
.heart2:after {
|
||||
left: 0;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-moz-transform-origin: 100% 100%;
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
-o-transform-origin: 100% 100%;
|
||||
-ms-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.infinity {
|
||||
position: relative;
|
||||
width: 5em;
|
||||
height: 2.358em;
|
||||
}
|
||||
.infinity:before, .infinity:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1.415em;
|
||||
height: 1.415em;
|
||||
border: 0.472em solid black;
|
||||
}
|
||||
.infinity:before {
|
||||
left: 0;
|
||||
-moz-border-radius: 1.179em 1.179em 0 1.179em;
|
||||
-webkit-border-radius: 1.179em 1.179em 0 1.179em;
|
||||
-o-border-radius: 1.179em 1.179em 0 1.179em;
|
||||
-ms-border-radius: 1.179em 1.179em 0 1.179em;
|
||||
-khtml-border-radius: 1.179em 1.179em 0 1.179em;
|
||||
border-radius: 1.179em 1.179em 0 1.179em;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.infinity:after {
|
||||
right: 0;
|
||||
-moz-border-radius: 1.179em 1.179em 1.179em 0;
|
||||
-webkit-border-radius: 1.179em 1.179em 1.179em 0;
|
||||
-o-border-radius: 1.179em 1.179em 1.179em 0;
|
||||
-ms-border-radius: 1.179em 1.179em 1.179em 0;
|
||||
-khtml-border-radius: 1.179em 1.179em 1.179em 0;
|
||||
border-radius: 1.179em 1.179em 1.179em 0;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.infinity2 {
|
||||
position: relative;
|
||||
width: 10.6em;
|
||||
height: 5em;
|
||||
}
|
||||
.infinity2:before, .infinity2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border: 1em solid black;
|
||||
}
|
||||
.infinity2:before {
|
||||
left: 0;
|
||||
-moz-border-radius: 2.5em 2.5em 0 2.5em;
|
||||
-webkit-border-radius: 2.5em 2.5em 0 2.5em;
|
||||
-o-border-radius: 2.5em 2.5em 0 2.5em;
|
||||
-ms-border-radius: 2.5em 2.5em 0 2.5em;
|
||||
-khtml-border-radius: 2.5em 2.5em 0 2.5em;
|
||||
border-radius: 2.5em 2.5em 0 2.5em;
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.infinity2:after {
|
||||
right: 0;
|
||||
-moz-border-radius: 2.5em 2.5em 2.5em 0;
|
||||
-webkit-border-radius: 2.5em 2.5em 2.5em 0;
|
||||
-o-border-radius: 2.5em 2.5em 2.5em 0;
|
||||
-ms-border-radius: 2.5em 2.5em 2.5em 0;
|
||||
-khtml-border-radius: 2.5em 2.5em 2.5em 0;
|
||||
border-radius: 2.5em 2.5em 2.5em 0;
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.pacman {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 5em solid transparent;
|
||||
border-top: 5em solid black;
|
||||
border-left: 5em solid black;
|
||||
border-bottom: 5em solid black;
|
||||
border-top-left-radius: 5em;
|
||||
border-top-right-radius: 5em;
|
||||
border-bottom-left-radius: 5em;
|
||||
border-bottom-right-radius: 5em;
|
||||
}
|
||||
|
||||
.pacman2 {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 8em solid transparent;
|
||||
border-top: 8em solid black;
|
||||
border-left: 8em solid black;
|
||||
border-bottom: 8em solid black;
|
||||
border-top-left-radius: 8em;
|
||||
border-top-right-radius: 8em;
|
||||
border-bottom-left-radius: 8em;
|
||||
border-bottom-right-radius: 8em;
|
||||
}
|
||||
|
||||
.yin-yang {
|
||||
width: 4.8em;
|
||||
height: 2.4em;
|
||||
background: white;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 0.1em 0.1em 2.5em 0.1em;
|
||||
position: relative;
|
||||
}
|
||||
.yin-yang, .yin-yang:before, .yin-yang:after {
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-o-border-radius: 100%;
|
||||
-ms-border-radius: 100%;
|
||||
-khtml-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.yin-yang:before, .yin-yang:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border: 0.9em solid;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
}
|
||||
.yin-yang:before {
|
||||
left: 0;
|
||||
background: white;
|
||||
border-color: black;
|
||||
}
|
||||
.yin-yang:after {
|
||||
left: 50%;
|
||||
background: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.yin-yang2 {
|
||||
width: 7.68em;
|
||||
height: 3.84em;
|
||||
background: red;
|
||||
border-color: lime;
|
||||
border-style: solid;
|
||||
border-width: 0.16em 0.16em 4em 0.16em;
|
||||
position: relative;
|
||||
}
|
||||
.yin-yang2, .yin-yang2:before, .yin-yang2:after {
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-o-border-radius: 100%;
|
||||
-ms-border-radius: 100%;
|
||||
-khtml-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.yin-yang2:before, .yin-yang2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border: 1.44em solid;
|
||||
width: 0.96em;
|
||||
height: 0.96em;
|
||||
}
|
||||
.yin-yang2:before {
|
||||
left: 0;
|
||||
background: red;
|
||||
border-color: lime;
|
||||
}
|
||||
.yin-yang2:after {
|
||||
left: 50%;
|
||||
background: lime;
|
||||
border-color: red;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/shape/symbol";
|
||||
|
||||
.diamond { @include diamond(5em, #000) }
|
||||
.diamond2 { @include diamond(8em, #000) }
|
||||
.egg { @include egg(5em, 8em, #000) }
|
||||
.egg2 { @include egg(8em, 10em, #000) }
|
||||
.heart { @include heart(5em, 4em, #000) }
|
||||
.heart2 { @include heart(10em, 8em, #000) }
|
||||
.infinity { @include infinity(5em, false, #000) }
|
||||
.infinity2 { @include infinity(false, 5em, #000) }
|
||||
.pacman { @include pacman(5em, #000) }
|
||||
.pacman2 { @include pacman(8em, #000) }
|
||||
.yin-yang { @include yin-yang(5em, #000) }
|
||||
.yin-yang2 { @include yin-yang(8em, #0f0, #f00) }
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">shared</a>/clearfix</h1>
|
||||
|
||||
<p class="doc">
|
||||
See <a href="http://nicolasgallagher.com/micro-clearfix-hack/demo/">http://nicolasgallagher.com/micro-clearfix-hack/demo/</a> for original effect
|
||||
</p>
|
||||
|
||||
<div class="body">
|
||||
<div class="container">
|
||||
<div class="section">Float</div>
|
||||
<div class="section">Float</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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/
|
||||
*/
|
||||
.body {
|
||||
width: 480px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #DCE6BE;
|
||||
}
|
||||
.container:before, .container:after {
|
||||
content: "";
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
.container {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.section {
|
||||
float: left;
|
||||
display: inline;
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
padding: 30px 0 0;
|
||||
margin: 20px 10px;
|
||||
text-align: center;
|
||||
background: #A0C431;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "tests";
|
||||
@import "recipes/shared/clearfix";
|
||||
|
||||
.body
|
||||
{
|
||||
width: 480px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
background: #DCE6BE;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.section
|
||||
{
|
||||
float: left;
|
||||
display: inline;
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
padding:30px 0 0;
|
||||
margin: 20px 10px;
|
||||
text-align:center;
|
||||
background: #A0C431;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/shared</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="clearfix">clearfix</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/convex</h1>
|
||||
|
||||
<div class="ui-convex">No hover</div>
|
||||
<div class="ui-convex-hover">Hover me</div>
|
||||
73
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/convex/s.css
vendored
Normal file
73
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/convex/s.css
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* UI convex effect from one color
|
||||
*
|
||||
* @todo merge with ui-button ?
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
.ui-convex,
|
||||
.ui-convex-hover {
|
||||
width: 10em;
|
||||
height: 2em;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.ui-convex {
|
||||
background: #dddddd;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
|
||||
background: -webkit-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -moz-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -o-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -ms-linear-gradient(#eeeeee, #dddddd);
|
||||
background: linear-gradient(#eeeeee, #dddddd);
|
||||
}
|
||||
|
||||
.ui-convex-hover {
|
||||
background: #dddddd;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
|
||||
background: -webkit-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -moz-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -o-linear-gradient(#eeeeee, #dddddd);
|
||||
background: -ms-linear-gradient(#eeeeee, #dddddd);
|
||||
background: linear-gradient(#eeeeee, #dddddd);
|
||||
}
|
||||
.ui-convex-hover:hover, .ui-convex-hover:focus {
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee));
|
||||
background: -webkit-linear-gradient(#dddddd, #eeeeee);
|
||||
background: -moz-linear-gradient(#dddddd, #eeeeee);
|
||||
background: -o-linear-gradient(#dddddd, #eeeeee);
|
||||
background: -ms-linear-gradient(#dddddd, #eeeeee);
|
||||
background: linear-gradient(#dddddd, #eeeeee);
|
||||
}
|
||||
22
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/convex/s.scss
vendored
Normal file
22
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/convex/s.scss
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/convex";
|
||||
|
||||
.ui-convex,
|
||||
.ui-convex-hover,
|
||||
{
|
||||
width: 10em;
|
||||
height: 2em;
|
||||
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.ui-convex
|
||||
{
|
||||
@include ui-convex(#ddd, false)
|
||||
}
|
||||
|
||||
.ui-convex-hover
|
||||
{
|
||||
@include ui-convex;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/gradient</h1>
|
||||
|
||||
<div class="ui-gradient-demo ui-gradient"></div>
|
||||
<div class="ui-gradient-demo ui-gradient-top"></div>
|
||||
<div class="ui-gradient-demo ui-gradient-bottom"></div>
|
||||
74
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/gradient/s.css
vendored
Normal file
74
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/gradient/s.css
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* UI simple gradient from one color
|
||||
*
|
||||
* @todo merge with ui-button ?
|
||||
*
|
||||
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
||||
*/
|
||||
.ui-gradient-demo {
|
||||
width: 10em;
|
||||
height: 2em;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.ui-gradient {
|
||||
background: #dddddd;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(100%, #c4c4c4));
|
||||
background: -webkit-linear-gradient(#f7f7f7, #c4c4c4);
|
||||
background: -moz-linear-gradient(#f7f7f7, #c4c4c4);
|
||||
background: -o-linear-gradient(#f7f7f7, #c4c4c4);
|
||||
background: -ms-linear-gradient(#f7f7f7, #c4c4c4);
|
||||
background: linear-gradient(#f7f7f7, #c4c4c4);
|
||||
}
|
||||
|
||||
.ui-gradient-top {
|
||||
background: #dddddd;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||
background: -webkit-linear-gradient(#dddddd, #aaaaaa);
|
||||
background: -moz-linear-gradient(#dddddd, #aaaaaa);
|
||||
background: -o-linear-gradient(#dddddd, #aaaaaa);
|
||||
background: -ms-linear-gradient(#dddddd, #aaaaaa);
|
||||
background: linear-gradient(#dddddd, #aaaaaa);
|
||||
}
|
||||
|
||||
.ui-gradient-bottom {
|
||||
background: #dddddd;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
|
||||
background: -webkit-linear-gradient(#ffffff, #dddddd);
|
||||
background: -moz-linear-gradient(#ffffff, #dddddd);
|
||||
background: -o-linear-gradient(#ffffff, #dddddd);
|
||||
background: -ms-linear-gradient(#ffffff, #dddddd);
|
||||
background: linear-gradient(#ffffff, #dddddd);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/gradient";
|
||||
|
||||
.ui-gradient-demo
|
||||
{
|
||||
width: 10em;
|
||||
height: 2em;
|
||||
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.ui-gradient
|
||||
{
|
||||
@include ui-gradient-from-middle;
|
||||
}
|
||||
|
||||
.ui-gradient-top
|
||||
{
|
||||
@include ui-gradient-from-top;
|
||||
}
|
||||
|
||||
.ui-gradient-bottom
|
||||
{
|
||||
@include ui-gradient-from-bottom;
|
||||
}
|
||||
13
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/index.html
vendored
Normal file
13
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/index.html
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../">recipes</a>/ui</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="convex">convex</a></li>
|
||||
<li><a href="gradient">gradient</a></li>
|
||||
<li><a href="glossy">glossy</a></li>
|
||||
<li><a href="keyboard">keyboard</a></li>
|
||||
<li><a href="menu">menu</a></li>
|
||||
<li><a href="overlay">overlay</a></li>
|
||||
<li><a href="separator">separator</a></li>
|
||||
<li><a href="webfont-icons">webfont icons</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/keyboard</h1>
|
||||
|
||||
<kbd>A</kbd>
|
||||
<kbd>Z</kbd>
|
||||
<kbd>E</kbd>
|
||||
<kbd>R</kbd>
|
||||
<kbd>T</kbd>
|
||||
<kbd>Y</kbd>
|
||||
|
||||
<span class="ui-keyboard-dark">
|
||||
|
||||
<kbd>U</kbd>
|
||||
<kbd>I</kbd>
|
||||
<kbd>O</kbd>
|
||||
<kbd>P</kbd>
|
||||
|
||||
</span>
|
||||
122
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/keyboard/s.css
vendored
Normal file
122
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/keyboard/s.css
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
kbd {
|
||||
padding: .2em .3em;
|
||||
min-width: 1em;
|
||||
font: normal 0.85em "Lucida Grande", Lucida, Arial, sans-serif;
|
||||
text-align: center;
|
||||
-moz-border-radius: 0.25em;
|
||||
-webkit-border-radius: 0.25em;
|
||||
-o-border-radius: 0.25em;
|
||||
-ms-border-radius: 0.25em;
|
||||
-khtml-border-radius: 0.25em;
|
||||
border-radius: 0.25em;
|
||||
border: none;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background: #fafafa;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d2d2d2), color-stop(100%, #ffffff));
|
||||
background: -webkit-linear-gradient(top, #d2d2d2, #ffffff);
|
||||
background: -moz-linear-gradient(top, #d2d2d2, #ffffff);
|
||||
background: -o-linear-gradient(top, #d2d2d2, #ffffff);
|
||||
background: -ms-linear-gradient(top, #d2d2d2, #ffffff);
|
||||
background: linear-gradient(top, #d2d2d2, #ffffff);
|
||||
color: #444;
|
||||
text-shadow: 0 0 2px white;
|
||||
/*@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)
|
||||
);
|
||||
*/
|
||||
-moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333333;
|
||||
-webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333333;
|
||||
-o-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333333;
|
||||
box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333333;
|
||||
text-shadow: 0px 1px 0px #f5f5f5;
|
||||
}
|
||||
kbd[title] {
|
||||
cursor: help;
|
||||
}
|
||||
.ui-keyboard-dark kbd {
|
||||
padding: .2em .3em;
|
||||
min-width: 1em;
|
||||
font: normal 0.85em "Lucida Grande", Lucida, Arial, sans-serif;
|
||||
text-align: center;
|
||||
-moz-border-radius: 0.25em;
|
||||
-webkit-border-radius: 0.25em;
|
||||
-o-border-radius: 0.25em;
|
||||
-ms-border-radius: 0.25em;
|
||||
-khtml-border-radius: 0.25em;
|
||||
border-radius: 0.25em;
|
||||
border: none;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background: #505050;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c3c3c), color-stop(100%, #505050));
|
||||
background: -webkit-linear-gradient(#3c3c3c, #505050);
|
||||
background: -moz-linear-gradient(#3c3c3c, #505050);
|
||||
background: -o-linear-gradient(#3c3c3c, #505050);
|
||||
background: -ms-linear-gradient(#3c3c3c, #505050);
|
||||
background: linear-gradient(#3c3c3c, #505050);
|
||||
color: #fafafa;
|
||||
text-shadow: -1px -1px 0 #464646;
|
||||
-moz-box-shadow: inset 0 0 1px #969696, inset 0 -0.05em 0.4em #505050, 0 0.1em 0 #1e1e1e, 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: inset 0 0 1px #969696, inset 0 -0.05em 0.4em #505050, 0 0.1em 0 #1e1e1e, 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: inset 0 0 1px #969696, inset 0 -0.05em 0.4em #505050, 0 0.1em 0 #1e1e1e, 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 0 1px #969696, inset 0 -0.05em 0.4em #505050, 0 0.1em 0 #1e1e1e, 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.ui-keyboard-dark kbd[title] {
|
||||
cursor: help;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/keyboard";
|
||||
|
||||
// For a simpler approch, you can just include @include ui-keyboard-kbd
|
||||
|
||||
kbd
|
||||
{
|
||||
@include ui-keyboard-key;
|
||||
|
||||
.ui-keyboard-dark &
|
||||
{
|
||||
@include ui-keyboard-key(dark);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html class="no-js">
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">ui</a>/<a href="../">menu</a>/dropdown</h1>
|
||||
|
||||
<p class="doc">You just need to do two things :</p>
|
||||
<ul class="doc">
|
||||
<li>Add a class "no-js" to a parent element (e.g.: <html class="no-js"></li>
|
||||
<li>style ul/li !</li>
|
||||
</ul>
|
||||
<p class="doc">Optionnaly use a javascript to manage change 'no-js' class, and add a timer to make a better UX (see <a href="http://www.useit.com/alertbox/mega-dropdown-menus.html">here</a>)
|
||||
<br />@todo a jquery plugin link here (I need to make a jquery plugin of the helper I use everytime i need a dropdown menu)</p>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
One
|
||||
<ul>
|
||||
<li>
|
||||
Sub
|
||||
<ul>
|
||||
<li>
|
||||
Sub sub
|
||||
</li>
|
||||
<li>
|
||||
Sub sub
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Sub
|
||||
<ul>
|
||||
<li>
|
||||
Sub sub
|
||||
</li>
|
||||
<li>
|
||||
Sub sub
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Sub
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Two
|
||||
<ul>
|
||||
<li>
|
||||
Sub
|
||||
</li>
|
||||
<li>
|
||||
Sub
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Tree
|
||||
<ul>
|
||||
<li>
|
||||
Sub
|
||||
</li>
|
||||
<li>
|
||||
Sub
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -0,0 +1,68 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Menu dropdown helper
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
nav {
|
||||
z-index: 3;
|
||||
}
|
||||
nav ul {
|
||||
z-index: 4;
|
||||
list-style-position: outside;
|
||||
}
|
||||
nav ul li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
nav ul a {
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul ul {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
.no-js nav li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
nav ul {
|
||||
padding: 0;
|
||||
background: #ccc;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
nav ul li {
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/menu/dropdown";
|
||||
|
||||
nav
|
||||
{
|
||||
@include ui-menu-dropdown;
|
||||
|
||||
// minimal style
|
||||
ul
|
||||
{
|
||||
padding: 0;
|
||||
background: #ccc;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
li
|
||||
{
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/menu</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="dropdown">dropdown</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/overlay</h1>
|
||||
|
||||
<div class="ui-overlay"></div>
|
||||
57
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/overlay/s.css
vendored
Normal file
57
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/overlay/s.css
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ui background overlay inspired by Google Chrome modal overlay
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
/**
|
||||
* Background overlay inspired by Google Chrome modal overlay
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
.ui-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(127, 127, 127, 0.5)), color-stop(35%, rgba(127, 127, 127, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.7)));
|
||||
background-image: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
|
||||
background-image: -moz-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
|
||||
background-image: -o-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
|
||||
background-image: -ms-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
|
||||
background-image: radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
|
||||
pointer-events: none;
|
||||
}
|
||||
11
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/overlay/s.scss
vendored
Normal file
11
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/overlay/s.scss
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/overlay";
|
||||
|
||||
.ui-overlay
|
||||
{
|
||||
@include ui-overlay;
|
||||
|
||||
// just to be able to click on the navigation link for the demo
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/separator</h1>
|
||||
|
||||
<p class="doc">Original examples by @chriscoyier <a href="http://jsfiddle.net/chriscoyier/GaEzp/35/">http://jsfiddle.net/chriscoyier/GaEzp/35/</a></p>
|
||||
|
||||
<hr class="ui-separator-gradient"/>
|
||||
|
||||
<hr class="ui-separator-gradient-2"/>
|
||||
|
||||
<hr class="ui-separator-gradient-3"/>
|
||||
|
||||
<hr class="ui-separator-dashed"/>
|
||||
|
||||
<hr class="ui-separator-dashed-2"/>
|
||||
|
||||
<hr class="ui-separator-dropshadow"/>
|
||||
|
||||
<hr class="ui-separator-dropshadow-2"/>
|
||||
|
||||
<hr class="ui-separator-shadow"/>
|
||||
|
||||
<br /> <!-- Need since the ui-separator-shadow use no height (so collapse with the previous)-->
|
||||
|
||||
<hr class="ui-separator-shadow-2"/>
|
||||
115
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/separator/s.css
vendored
Normal file
115
OfficeWeb/3rdparty/touch/resources/themes/vendor/compass-recipes/tests/recipes/ui/separator/s.css
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* <hr /> separator style
|
||||
*
|
||||
* @author Chris Coyier @chriscoyier
|
||||
* @link http://jsfiddle.net/chriscoyier/GaEzp/35/
|
||||
*
|
||||
* @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
|
||||
*/
|
||||
hr {
|
||||
margin: 5em 0;
|
||||
}
|
||||
|
||||
.ui-separator-gradient {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: black;
|
||||
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.75)), color-stop(100%, rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.ui-separator-gradient-2 {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #333333;
|
||||
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #cccccc), color-stop(50%, #333333), color-stop(100%, #cccccc));
|
||||
background: -webkit-linear-gradient(left, #cccccc, #333333, #cccccc);
|
||||
background: -moz-linear-gradient(left, #cccccc, #333333, #cccccc);
|
||||
background: -o-linear-gradient(left, #cccccc, #333333, #cccccc);
|
||||
background: -ms-linear-gradient(left, #cccccc, #333333, #cccccc);
|
||||
background: linear-gradient(left, #cccccc, #333333, #cccccc);
|
||||
}
|
||||
|
||||
.ui-separator-gradient-3 {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #cccccc;
|
||||
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #333333), color-stop(50%, #cccccc), color-stop(100%, #333333));
|
||||
background: -webkit-linear-gradient(left, #333333, #cccccc, #333333);
|
||||
background: -moz-linear-gradient(left, #333333, #cccccc, #333333);
|
||||
background: -o-linear-gradient(left, #333333, #cccccc, #333333);
|
||||
background: -ms-linear-gradient(left, #333333, #cccccc, #333333);
|
||||
background: linear-gradient(left, #333333, #cccccc, #333333);
|
||||
}
|
||||
|
||||
.ui-separator-dashed {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed #cccccc;
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
.ui-separator-dashed-2 {
|
||||
border: 0;
|
||||
border-bottom: 2px dashed rgba(0, 0, 0, 0.7);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ui-separator-dropshadow {
|
||||
border: 0;
|
||||
height: 6px;
|
||||
box-shadow: inset 0 6px 6px -6px black;
|
||||
}
|
||||
|
||||
.ui-separator-dropshadow-2 {
|
||||
border: 0;
|
||||
height: 0.8em;
|
||||
box-shadow: inset 0 0.8em 0.8em -0.8em #cccccc;
|
||||
}
|
||||
|
||||
.ui-separator-shadow {
|
||||
border: 0;
|
||||
height: 0;
|
||||
box-shadow: 0 0 10px 1px black;
|
||||
}
|
||||
|
||||
.ui-separator-shadow-2 {
|
||||
border: 0;
|
||||
height: 0;
|
||||
box-shadow: 0 0 0.4em 0.1em #aaaaaa;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import "tests";
|
||||
|
||||
@import "recipes/ui/separator";
|
||||
|
||||
hr
|
||||
{
|
||||
margin: 5em 0;
|
||||
}
|
||||
|
||||
.ui-separator-gradient
|
||||
{
|
||||
@include ui-separator-gradient;
|
||||
}
|
||||
|
||||
.ui-separator-gradient-2
|
||||
{
|
||||
@include ui-separator-gradient(#333, #ccc);
|
||||
}
|
||||
|
||||
.ui-separator-gradient-3
|
||||
{
|
||||
@include ui-separator-gradient(#ccc, #333);
|
||||
}
|
||||
|
||||
.ui-separator-dashed
|
||||
{
|
||||
@include ui-separator-dashed;
|
||||
}
|
||||
|
||||
.ui-separator-dashed-2
|
||||
{
|
||||
@include ui-separator-dashed(#fff, rgba(#000, .7), 2px);
|
||||
}
|
||||
|
||||
.ui-separator-dropshadow
|
||||
{
|
||||
@include ui-separator-dropshadow;
|
||||
}
|
||||
|
||||
.ui-separator-dropshadow-2
|
||||
{
|
||||
@include ui-separator-dropshadow(#ccc, .8em);
|
||||
}
|
||||
|
||||
.ui-separator-shadow
|
||||
{
|
||||
@include ui-separator-shadow;
|
||||
}
|
||||
|
||||
.ui-separator-shadow-2
|
||||
{
|
||||
@include ui-separator-shadow(#aaa, .4em, .1em);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<link rel="stylesheet" href="s.css" />
|
||||
<h1>Tests for <a href="../../">recipes</a>/<a href="../">ui</a>/webfont-icons</h1>
|
||||
|
||||
<a data-icon="a" class="websymbols"></a>
|
||||
<a data-icon="b" class="websymbols"></a>
|
||||
<a data-icon="c" class="websymbols"></a>
|
||||
|
||||
<a data-icon="a" class="heydings"></a>
|
||||
<a data-icon="b" class="heydings"></a>
|
||||
<a data-icon="c" class="heydings"></a>
|
||||
|
||||
<a data-icon="a" class="iconic"></a>
|
||||
<a data-icon="b" class="iconic"></a>
|
||||
<a data-icon="c" class="iconic"></a>
|
||||
|
||||
<a class="smiley">Test Text (to be hidden)</a>
|
||||
@@ -0,0 +1,395 @@
|
||||
html {
|
||||
padding: 1em;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #ffffff)) no-repeat;
|
||||
background: -webkit-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -moz-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -o-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: -ms-linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
background: linear-gradient(#dddddd, #ffffff) no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: #fff;
|
||||
border: #ddd;
|
||||
padding: 1em;
|
||||
color: #aaa;
|
||||
margin: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
.doc a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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/
|
||||
*/
|
||||
/**
|
||||
* 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 ::
|
||||
*/
|
||||
/**
|
||||
*
|
||||
* @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.
|
||||
*/
|
||||
/**
|
||||
* @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`.
|
||||
*/
|
||||
/**
|
||||
* @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`.
|
||||
*/
|
||||
/**
|
||||
* @cfg {string} $webfont-icon-default-gradient
|
||||
* The default gradient to use when using the {@link #webfont-icon} mixin.
|
||||
*
|
||||
* Defaults to `matte`.
|
||||
*/
|
||||
.webfont-icon-base, .webfont-icon-websymbols, .websymbols:after, .websymbols:before, .webfont-icon-heydings, .heydings:after, .heydings:before, .webfont-icon-iconic, .iconic:after, .iconic:before, .smiley:after, .smiley:before {
|
||||
color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-o-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
-khtml-background-clip: text;
|
||||
background-clip: text;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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`.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: "websymbols";
|
||||
src: url('../../../../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('../../../../fonts/websymbols/websymbols-regular-webfont.eot') format('opentype');
|
||||
}
|
||||
|
||||
.webfont-icon-websymbols, .websymbols:after, .websymbols:before {
|
||||
font-family: websymbols;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "heydings";
|
||||
src: url('../../../../fonts/heydings/heydings_icons.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.webfont-icon-heydings, .heydings:after, .heydings:before {
|
||||
font-family: heydings;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iconic";
|
||||
src: url('../../../../fonts/iconic/iconic_stroke.ttf') format('truetype'), url('../../../../fonts/iconic/iconic_stroke.otf') format('opentype');
|
||||
}
|
||||
|
||||
.webfont-icon-iconic, .iconic:after, .iconic:before {
|
||||
font-family: iconic;
|
||||
}
|
||||
|
||||
.smiley {
|
||||
-moz-background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-o-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
-khtml-background-clip: text;
|
||||
background-clip: text;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
display: inline-block;
|
||||
line-height: 500px;
|
||||
text-indent: -9000px;
|
||||
width: 500px;
|
||||
display: block;
|
||||
}
|
||||
.smiley:after, .smiley:before {
|
||||
font-size: 500px;
|
||||
content: "\263a";
|
||||
background-image: none;
|
||||
background-color: #cfab4f;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dfc88b), color-stop(3%, #d4b563), color-stop(100%, #caa13b));
|
||||
background-image: -webkit-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
|
||||
background-image: -moz-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
|
||||
background-image: -o-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
|
||||
background-image: -ms-linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
|
||||
background-image: linear-gradient(top, #dfc88b, #d4b563 3%, #caa13b);
|
||||
}
|
||||
.smiley:before {
|
||||
background: none;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
|
||||
}
|
||||
.smiley:hover:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.smiley:hover:after {
|
||||
background-image: none;
|
||||
background-color: #3778e5;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
|
||||
background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
}
|
||||
.smiley:active:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.smiley:active:after {
|
||||
background-image: none;
|
||||
background-color: #1d64dc;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
|
||||
background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
}
|
||||
|
||||
.heydings {
|
||||
-moz-background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-o-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
-khtml-background-clip: text;
|
||||
background-clip: text;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
line-height: 100px;
|
||||
text-indent: -9000px;
|
||||
width: 100px;
|
||||
}
|
||||
.heydings:after, .heydings:before {
|
||||
font-size: 100px;
|
||||
content: attr(data-icon);
|
||||
background-image: none;
|
||||
background-color: #999999;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
|
||||
background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
}
|
||||
.heydings:before {
|
||||
background: none;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
|
||||
}
|
||||
.heydings:hover:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.heydings:hover:after {
|
||||
background-image: none;
|
||||
background-color: #3778e5;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
|
||||
background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
}
|
||||
.heydings:active:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.heydings:active:after {
|
||||
background-image: none;
|
||||
background-color: #1d64dc;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
|
||||
background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
}
|
||||
|
||||
.websymbols {
|
||||
-moz-background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-o-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
-khtml-background-clip: text;
|
||||
background-clip: text;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
line-height: 100px;
|
||||
text-indent: -9000px;
|
||||
width: 100px;
|
||||
}
|
||||
.websymbols:after, .websymbols:before {
|
||||
font-size: 100px;
|
||||
content: attr(data-icon);
|
||||
background-image: none;
|
||||
background-color: #999999;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
|
||||
background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
}
|
||||
.websymbols:before {
|
||||
background: none;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
|
||||
}
|
||||
.websymbols:hover:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.websymbols:hover:after {
|
||||
background-image: none;
|
||||
background-color: #3778e5;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
|
||||
background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
}
|
||||
.websymbols:active:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.websymbols:active:after {
|
||||
background-image: none;
|
||||
background-color: #1d64dc;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
|
||||
background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
}
|
||||
|
||||
.iconic {
|
||||
-moz-background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-o-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
-khtml-background-clip: text;
|
||||
background-clip: text;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
line-height: 100px;
|
||||
text-indent: -9000px;
|
||||
width: 100px;
|
||||
}
|
||||
.iconic:after, .iconic:before {
|
||||
font-size: 100px;
|
||||
content: attr(data-icon);
|
||||
background-image: none;
|
||||
background-color: #999999;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfbfbf), color-stop(3%, #a6a6a6), color-stop(100%, #8c8c8c));
|
||||
background-image: -webkit-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -moz-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -o-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: -ms-linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
background-image: linear-gradient(top, #bfbfbf, #a6a6a6 3%, #8c8c8c);
|
||||
}
|
||||
.iconic:before {
|
||||
background: none;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
|
||||
}
|
||||
.iconic:hover:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.iconic:hover:after {
|
||||
background-image: none;
|
||||
background-color: #3778e5;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7ba6ee), color-stop(3%, #4e87e8), color-stop(100%, #2069e2));
|
||||
background-image: -webkit-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -moz-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -o-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: -ms-linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
background-image: linear-gradient(top, #7ba6ee, #4e87e8 3%, #2069e2);
|
||||
}
|
||||
.iconic:active:before {
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px, #3778e5 0 0 10px;
|
||||
}
|
||||
.iconic:active:after {
|
||||
background-image: none;
|
||||
background-color: #1d64dc;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #174faf), color-stop(10%, #1a5ac5), color-stop(65%, #1d64dc), color-stop(100%, #1d65de));
|
||||
background-image: -webkit-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -moz-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -o-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: -ms-linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
background-image: linear-gradient(top, #174faf, #1a5ac5 10%, #1d64dc 65%, #1d65de);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "tests";
|
||||
@import "recipes/webfont-icon";
|
||||
|
||||
|
||||
@include include-font-websymbols;
|
||||
@include include-font-heydings;
|
||||
@include include-font-iconic;
|
||||
|
||||
.smiley {
|
||||
@include webfont-icon('\263a', $size: 500px, $color: #CFAB4F);
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.heydings {
|
||||
@include webfont-icon($class: 'heydings', $size: 100px);
|
||||
|
||||
}
|
||||
|
||||
.websymbols {
|
||||
@include webfont-icon($class: 'websymbols', $size: 100px);
|
||||
}
|
||||
|
||||
.iconic {
|
||||
@include webfont-icon($class: 'iconic', $size: 100px);
|
||||
}
|
||||
Reference in New Issue
Block a user