Cleaning unused scss files
Benoit Favreault
Francis Lachapelle
parent
a276ac366e
commit
46a262acfa
|
|
@ -11,6 +11,7 @@
|
|||
"grunt-contrib-sass": ">=0.8.0",
|
||||
"grunt-contrib-watch": ">=0.5.3",
|
||||
"grunt-postcss": "^0.3.0",
|
||||
"kss": "^2.0.2",
|
||||
"sassyjson": "^1.1.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Resources page
|
||||
*
|
||||
**/
|
||||
|
||||
.page--resources {
|
||||
& .article-section__icon,
|
||||
& .articles-count,
|
||||
& .guides-list__item .secondary-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .primary-content {
|
||||
padding-top: $lineHeight;
|
||||
padding-bottom: $lineHeight*2;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Styleguide
|
||||
*
|
||||
**/
|
||||
|
||||
.page--styleguide {
|
||||
|
||||
.styleguide__module-title {
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: $lineHeight*2;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: $lineHeight*3 - 1;
|
||||
|
||||
}
|
||||
|
||||
.styleguide__color-list {
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
border-bottom: $lineHeight*2 solid;
|
||||
margin-bottom: $lineHeight;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide__breadcrumb .breadcrumbs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.styleguide__lists {
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide__inverted-block {
|
||||
background: #e8e8e8;
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
.styleguide__theme-block {
|
||||
background: $colorLayouts;
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin-bottom: $lineHeight;
|
||||
margin-top: $lineHeight;
|
||||
}
|
||||
|
||||
.demo {
|
||||
[class*="g-"] {
|
||||
background-color: $colorGrayLight;
|
||||
position: relative;
|
||||
margin-bottom: $lineHeight;
|
||||
min-height: $lineHeight*6;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@include type--small;
|
||||
display: block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: 'HTML classes: ';
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(class);
|
||||
word-spacing: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
/// _palette.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
/**
|
||||
*
|
||||
* Material design color palettes
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
/**
|
||||
*
|
||||
* Utils
|
||||
*
|
||||
**/
|
||||
/// _utils.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
/*========== VARIABLES ==========*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
////
|
||||
/// SOGo
|
||||
/// Version: #{$Version}
|
||||
/// Module: autoScrollList
|
||||
/// Main definitions for autoScrollList
|
||||
////
|
||||
/// autoScrollList.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// The only selector for vs-repeat lists is this id, we use attributes selector to
|
||||
|
|
@ -96,4 +91,4 @@
|
|||
@extend .md-tile-left;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// backdrop.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
md-backdrop {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
/// bottomSheet-theme.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
md-bottom-sheet.md-THEME_NAME-theme {
|
||||
background-color: '{{background-50}}';
|
||||
border-top-color: '{{background-300}}';
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
///
|
||||
/// @filename _extends.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
/// @module bottombar
|
||||
///
|
||||
/// botttombar extends
|
||||
///
|
||||
|
||||
md-toolbar.sg-bottombar { // overclafied to compensate for the injected css
|
||||
@extends md-toolbar;
|
||||
|
||||
background-color:$bottombar-color;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
// todo : implement a setting map and a getter for every z-index
|
||||
// NiceToHave : implement init map and function
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
sg-bottombar.md-THEME_NAME-theme {
|
||||
background-color: $bottombar-color;
|
||||
color: '{{primary-contrast}}';
|
||||
|
||||
.md-button {
|
||||
color: '{{primary-contrast}}';
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: '{{accent-color}}';
|
||||
color: '{{accent-contrast}}';
|
||||
}
|
||||
&.md-warn {
|
||||
background-color: '{{warn-color}}';
|
||||
color: '{{warn-contrast}}';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
///
|
||||
///
|
||||
/// @filename _bottombar.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
///
|
||||
/// Main botttombar module file define style for component bottombar, manly an extension of bottombar
|
||||
///
|
||||
///
|
||||
|
||||
@import 'components/toolbar/toolbar.scss'; // todo : remove when settings are done
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
@import "bottombar-theme";
|
||||
// -----------------------------------------
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
/*! test - *//**
|
||||
* SOGo
|
||||
* Version: 3.
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
|
@ -1,11 +1,4 @@
|
|||
/*! _button.scss */
|
||||
////
|
||||
/// Project SOGo
|
||||
/// Version 3.alpha
|
||||
/// Component button
|
||||
///
|
||||
/// Definitions for buttons (based on md-buttons)
|
||||
////
|
||||
/// button.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// sometimes fabs get squized
|
||||
|
|
@ -218,4 +211,4 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
|
|||
.sg-button-navicon.iconButton i[class|="md-icon"] {
|
||||
padding: 0;
|
||||
font-size: $iconButton-menu-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
/// card.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
$card-margin: 8px !default;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// checkbox.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// Checkbox for the sidenav folders list
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// content.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// angular-material is mobile first (is it ?) SOGo is not. We're inversing
|
||||
|
|
@ -31,4 +32,4 @@ md-content {
|
|||
md-content.md-padding {
|
||||
padding: $mg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'extends';
|
||||
/// dialog.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// divider.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
md-divider {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
///
|
||||
///
|
||||
/// @filename _icon.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
///
|
||||
/// Main icon module file extends Bower component
|
||||
///
|
||||
///
|
||||
/// icon.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
|
||||
@import 'extends';
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
$input-container-padding: 2px !default;
|
||||
|
||||
$input-label-default-offset: 24px !default;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
////
|
||||
/// SOGo
|
||||
/// Version: #{$Version}
|
||||
/// Module: List
|
||||
/// Main definitions for List
|
||||
////
|
||||
|
||||
/// list.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
// List variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -70,4 +64,4 @@ div.md-tile-left {
|
|||
font-family: 'Material Design Iconic Font';
|
||||
font-size: 40px;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// ng-tags-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
tags-input {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'extends';
|
||||
/// progressCircular.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@import 'extends';
|
||||
/// progressLinear.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/*! pseudo-input.scss */
|
||||
|
||||
/// pseudo-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
/// Component: pseudo-input
|
||||
/// This component mimics the presentation of form fields according to Google's
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// sidenav.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import "extends";
|
||||
$sidenav-default-width: (4 * $pitch);
|
||||
$sidenav-min-space: $pitch;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// subheader.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
.sg-md-subheader {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// toolbar.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
$toolbar-tools-height: 100%;
|
||||
$toolbar-height: $pitch;
|
||||
$toolbar-medium-tall-height: 88px !default;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
// SOGo by Inverse
|
||||
// sogo.nu
|
||||
// version 3.alpha
|
||||
//
|
||||
//
|
||||
// UTILITIES FUNCTIONS
|
||||
//
|
||||
/// _functions.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// Strip Unit - From Foundation
|
||||
// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
/**
|
||||
*
|
||||
* @filename _base_styles.scss
|
||||
* @project SOGo
|
||||
* @version 3.alpha
|
||||
*
|
||||
* Define basic general styles for base elements
|
||||
*
|
||||
*
|
||||
*/
|
||||
/// _base_style.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
|
||||
main {
|
||||
background-color: $background-base-color;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/// _functions.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// _mixins.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
/// layout.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// Import from sources for extends
|
||||
// -------------------------------
|
||||
@import "../../angular-material/src/core/style/layout";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// mixins.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import '../angular-material/src/core/style/mixins.scss';
|
||||
|
||||
@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/// reset.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
/* Welcome to Compass.
|
||||
* In this file you should write your main styles. (or centralize your imports)
|
||||
* Import this file using the following HTML or equivalent:
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
/*! structure.scss - */
|
||||
/// structure.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// ngMaterial source for overrides
|
||||
// ----------------------------------------------------------------------------
|
||||
@import '../../angular-material/src/core/style/structure.scss';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/// typography.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// Import from sources for extends
|
||||
// -------------------------------
|
||||
//@import "../../angular-material/src/core/style/typography";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/// variables.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// Path variables for seamless imports
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Article nav
|
||||
*
|
||||
**/
|
||||
|
||||
.article-nav {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
border-left: 2px solid $colorGrayKeyline;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.article-nav-link {
|
||||
padding: $lineHeight 32px;
|
||||
float: left;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
font-family: $fontHighlight;
|
||||
font-size: $fontMedium;
|
||||
font-weight: 400;
|
||||
|
||||
@include medium {
|
||||
top: 25px;
|
||||
font-size: $fontLarge;
|
||||
display: block;
|
||||
padding: 13px 10px;
|
||||
color: #ffffff;
|
||||
background: $colorBlue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-nav p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article-nav-link--prev {
|
||||
text-align: right;
|
||||
// border-right-width: 1px;
|
||||
|
||||
&::before {
|
||||
font-family: $fontIcon;
|
||||
@extend .icon-chevron-left::before;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include medium {
|
||||
padding-left: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-nav-link--next {
|
||||
// border-left-width: 1px;
|
||||
|
||||
&::before {
|
||||
font-family: $fontIcon;
|
||||
@extend .icon-chevron-right::before;
|
||||
right: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include medium {
|
||||
padding-right: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-nav-count {
|
||||
@include type--large;
|
||||
font-weight: 700;
|
||||
@include medium {font-weight: 400;}
|
||||
}
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Articles section
|
||||
*
|
||||
**/
|
||||
|
||||
.articles-section {
|
||||
background: $colorGrayBackground;
|
||||
text-align: center;
|
||||
padding: $lineHeight 0 $lineHeight*4;
|
||||
}
|
||||
|
||||
.articles-count {
|
||||
color: $colorBlue;
|
||||
font-family: $fontHighlight;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.article-section__icon {
|
||||
top: -($lineHeight);
|
||||
|
||||
@include medium {
|
||||
top: -($lineHeight + $lineHeight/2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Text module
|
||||
*
|
||||
**/
|
||||
|
||||
.did-you-know {
|
||||
|
||||
ol {
|
||||
@include medium {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cta--primary {
|
||||
margin-top: $lineHeight;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&>.g--half {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
@include medium {padding-left: 32px}
|
||||
}
|
||||
}
|
||||
|
||||
.did-you-know__symbol {
|
||||
padding-bottom: $lineHeight*12;
|
||||
@include medium {padding-bottom: $lineHeight}
|
||||
|
||||
&::after {
|
||||
content: $icon-question;
|
||||
color: $colorBlue;
|
||||
font-family: $fontIcon;
|
||||
font-size: 300px;
|
||||
top: 150px;
|
||||
left: 30%;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 0;
|
||||
|
||||
@include medium {
|
||||
position: absolute;
|
||||
font-size: 400px;
|
||||
top: 200px;
|
||||
left: 110%;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
position: absolute;
|
||||
font-size: 400px;
|
||||
top: 200px;
|
||||
left: 124%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Editorial Header
|
||||
*
|
||||
**/
|
||||
|
||||
.editorial-header {
|
||||
overflow: hidden;
|
||||
|
||||
.breadcrumbs {
|
||||
color: $colorBlue;
|
||||
|
||||
a {
|
||||
color: $colorBlue;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@include medium {
|
||||
position: relative;
|
||||
|
||||
// Pseudo elements to add the background characters
|
||||
&::before {
|
||||
content: $icon-chevron-large;
|
||||
font-family: $fontIcon;
|
||||
font-size: 1000px;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
color: $colorGrayBackground;
|
||||
margin: 168px -35px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.editorial-header__excerpt {
|
||||
@include type--medium(true);
|
||||
font-family: $fontHighlight;
|
||||
}
|
||||
|
||||
.editorial-header .tag{
|
||||
padding-top: $lineHeight*2;
|
||||
}
|
||||
|
||||
.editorial-header__subtitle {
|
||||
@include type--xxlarge;
|
||||
padding-top: 0;
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
padding-bottom: $lineHeight;
|
||||
}
|
||||
color: $colorBlue;
|
||||
}
|
||||
|
||||
.editorial-header__toc {
|
||||
margin-top: $lineHeight;
|
||||
|
||||
ol {
|
||||
padding-top: 0;
|
||||
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editorial-header__toc-title {
|
||||
font-family: $fontHighlight;
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
margin-bottom: 13px;
|
||||
padding-bottom: 13px !important;
|
||||
color: $colorBlue;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Editorial Header
|
||||
*
|
||||
**/
|
||||
|
||||
.featured-section {
|
||||
background: $colorGrayBackground;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Editorial Header
|
||||
*
|
||||
**/
|
||||
|
||||
.featured-spotlight {
|
||||
background: $colorGrayDark;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
padding-bottom: $lineHeight * 3 - 1;
|
||||
margin-top: $lineHeight * 2;
|
||||
|
||||
p {
|
||||
padding-bottom: $lineHeight;
|
||||
}
|
||||
|
||||
.cta--primary {
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-spotlight__container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.featured-spotlight__img {
|
||||
@include small-only {
|
||||
padding-top: 58.4%;
|
||||
padding-bottom: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
|
||||
@include medium {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
left: 100% + $mediumGutterWidth * 2;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
left: 100% + $wideGutterWidth * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.guides-section {
|
||||
background: $colorGrayBackground;
|
||||
text-align: center;
|
||||
padding: $lineHeight 0 $lineHeight * 4;
|
||||
}
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Highlight
|
||||
*
|
||||
**/
|
||||
|
||||
.highlight-module {
|
||||
overflow: hidden;
|
||||
margin-top: $lineHeight * 2;
|
||||
margin-bottom: $lineHeight;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background: $colorGrayBackground;
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-module__container {
|
||||
@include container;
|
||||
padding-bottom: $lineHeight * 3;
|
||||
z-index: 1;
|
||||
@include highlight-symbol();
|
||||
|
||||
@include medium {
|
||||
padding-bottom: $lineHeight * 2;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
min-height: $lineHeight * 8;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-module__title {
|
||||
@include type--huge;
|
||||
padding-top: $lineHeight;
|
||||
|
||||
@include wide {
|
||||
@include type--xxlarge;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-module__cta {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*========== LEARNING ==========*/
|
||||
.highlight-module--learning {
|
||||
color: #ffffff;
|
||||
|
||||
&::after {
|
||||
background-color: $colorLearning;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========== REMEMBER ==========*/
|
||||
.highlight-module--remember {
|
||||
color: #ffffff;
|
||||
|
||||
&::after {
|
||||
background-color: $colorRemember;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========== CODE ==========*/
|
||||
.highlight-module--code {
|
||||
overflow: visible;
|
||||
margin-bottom: $lineHeight * 2;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding-top: $lineHeight;
|
||||
font-size: $fontBase - 2;
|
||||
line-height: $lineHeight;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-spacing: -2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.highlight-module__container {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.highlight-module__cta {
|
||||
position: absolute;
|
||||
bottom: -$lineHeight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*========== LEFT ==========*/
|
||||
.highlight-module--left {
|
||||
&::after {
|
||||
@include wide {
|
||||
width: 80%;
|
||||
right: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========== RIGHT ==========*/
|
||||
.highlight-module--right {
|
||||
&::after {
|
||||
@include wide {
|
||||
width: 80%;
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-module--code {
|
||||
&::after {
|
||||
@include wide {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*========== INLINE ==========*/
|
||||
.highlight-module--inline {
|
||||
color: $colorText;
|
||||
overflow: visible;
|
||||
margin: $lineHeight 0 0;
|
||||
|
||||
& .highlight-module__container {
|
||||
padding-bottom: 0;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .highlight-module__content {
|
||||
border-color: $colorGrayKeyline;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
margin-bottom: -2px; // Offsetting 2px to considerate border top/bottom - baseline rules.
|
||||
padding: 0 0 $lineHeight;
|
||||
}
|
||||
|
||||
& .highlight-module__title {
|
||||
@include type--large;
|
||||
}
|
||||
|
||||
&.highlight-module--remember {
|
||||
& .highlight-module__title,
|
||||
& li::before {
|
||||
color: $colorRemember;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-module--learning {
|
||||
& .highlight-module__title,
|
||||
& li::before {
|
||||
color: $colorLearning;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*========== COLORS ==========*/
|
||||
|
||||
div.highlight > pre > code, code .highlight { background: transparent; }
|
||||
div.highlight > pre > code .c, code .highlight .c { color: #999988; font-style: italic } /* Comment */
|
||||
div.highlight > pre > code .err, code .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
||||
div.highlight > pre > code .k, code .highlight .k { } /* Keyword */
|
||||
div.highlight > pre > code .o, code .highlight .o { } /* Operator */
|
||||
div.highlight > pre > code .cm, code .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
||||
div.highlight > pre > code .cp, code .highlight .cp { color: $colorGray; } /* Comment.Preproc */
|
||||
div.highlight > pre > code .c1, code .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
|
||||
div.highlight > pre > code .cs, code .highlight .cs { color: $colorGray; font-style: italic } /* Comment.Special */
|
||||
div.highlight > pre > code .gs, code .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
||||
div.highlight > pre > code .gd .x, code .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
|
||||
div.highlight > pre > code .ge, code .highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
div.highlight > pre > code .gr, code .highlight .gr { color: #aa0000 } /* Generic.Error */
|
||||
div.highlight > pre > code .gh, code .highlight .gh { color: $colorGray } /* Generic.Heading */
|
||||
div.highlight > pre > code .gi, code .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
||||
div.highlight > pre > code .gi .x, code .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
|
||||
div.highlight > pre > code .go, code .highlight .go { color: #888888 } /* Generic.Output */
|
||||
div.highlight > pre > code .gp, code .highlight .gp { color: #555555 } /* Generic.Prompt */
|
||||
div.highlight > pre > code .gs, code .highlight .gs { } /* Generic.Strong */
|
||||
div.highlight > pre > code .gu, code .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
|
||||
div.highlight > pre > code .gt, code .highlight .gt { color: #aa0000 } /* Generic.Traceback */
|
||||
div.highlight > pre > code .kc, code .highlight .kc { } /* Keyword.Constant */
|
||||
div.highlight > pre > code .kd, code .highlight .kd { } /* Keyword.Declaration */
|
||||
div.highlight > pre > code .kp, code .highlight .kp { } /* Keyword.Pseudo */
|
||||
div.highlight > pre > code .kr, code .highlight .kr { } /* Keyword.Reserved */
|
||||
div.highlight > pre > code .kt, code .highlight .kt { color: #445588; } /* Keyword.Type */
|
||||
div.highlight > pre > code .m, code .highlight .m { color: #009999 } /* Literal.Number */
|
||||
div.highlight > pre > code .s, code .highlight .s { color: $colorLearning } /* Literal.String */
|
||||
div.highlight > pre > code .na, code .highlight .na { color: #008080 } /* Name.Attribute */
|
||||
div.highlight > pre > code .nb, code .highlight .nb { color: #0086B3 } /* Name.Builtin */
|
||||
div.highlight > pre > code .nc, code .highlight .nc { color: #445588; } /* Name.Class */
|
||||
div.highlight > pre > code .no, code .highlight .no { color: #008080 } /* Name.Constant */
|
||||
div.highlight > pre > code .ni, code .highlight .ni { color: #800080 } /* Name.Entity */
|
||||
div.highlight > pre > code .ne, code .highlight .ne { color: #990000; } /* Name.Exception */
|
||||
div.highlight > pre > code .nf, code .highlight .nf { color: #990000; } /* Name.Function */
|
||||
div.highlight > pre > code .nn, code .highlight .nn { color: #555555 } /* Name.Namespace */
|
||||
div.highlight > pre > code .nt, code .highlight .nt { color: $colorRemember } /* Name.Tag */
|
||||
div.highlight > pre > code .nv, code .highlight .nv { color: #008080 } /* Name.Variable */
|
||||
div.highlight > pre > code .ow, code .highlight .ow { } /* Operator.Word */
|
||||
div.highlight > pre > code .w, code .highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
div.highlight > pre > code .mf, code .highlight .mf { color: #009999 } /* Literal.Number.Float */
|
||||
div.highlight > pre > code .mh, code .highlight .mh { color: #009999 } /* Literal.Number.Hex */
|
||||
div.highlight > pre > code .mi, code .highlight .mi { color: #009999 } /* Literal.Number.Integer */
|
||||
div.highlight > pre > code .mo, code .highlight .mo { color: #009999 } /* Literal.Number.Oct */
|
||||
div.highlight > pre > code .sb, code .highlight .sb { color: $colorLearning } /* Literal.String.Backtick */
|
||||
div.highlight > pre > code .sc, code .highlight .sc { color: $colorLearning } /* Literal.String.Char */
|
||||
div.highlight > pre > code .sd, code .highlight .sd { color: $colorLearning } /* Literal.String.Doc */
|
||||
div.highlight > pre > code .s2, code .highlight .s2 { color: $colorLearning } /* Literal.String.Double */
|
||||
div.highlight > pre > code .se, code .highlight .se { color: $colorLearning } /* Literal.String.Escape */
|
||||
div.highlight > pre > code .sh, code .highlight .sh { color: $colorLearning } /* Literal.String.Heredoc */
|
||||
div.highlight > pre > code .si, code .highlight .si { color: $colorLearning } /* Literal.String.Interpol */
|
||||
div.highlight > pre > code .sx, code .highlight .sx { color: $colorLearning } /* Literal.String.Other */
|
||||
div.highlight > pre > code .sr, code .highlight .sr { color: #009926 } /* Literal.String.Regex */
|
||||
div.highlight > pre > code .s1, code .highlight .s1 { color: $colorLearning } /* Literal.String.Single */
|
||||
div.highlight > pre > code .ss, code .highlight .ss { color: #990073 } /* Literal.String.Symbol */
|
||||
div.highlight > pre > code .bp, code .highlight .bp { color: $colorGray } /* Name.Builtin.Pseudo */
|
||||
div.highlight > pre > code .vc, code .highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||
div.highlight > pre > code .vg, code .highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||
div.highlight > pre > code .vi, code .highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||
div.highlight > pre > code .il, code .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* In this guide
|
||||
*
|
||||
**/
|
||||
|
||||
.in-this-guide {
|
||||
margin-top: - $lineHeight * 3;
|
||||
}
|
||||
|
||||
.in-this-guide__title {
|
||||
@include type--medium(true);
|
||||
font-family: $fontHighlight;
|
||||
margin-bottom: $lineHeight;
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Next Lessons
|
||||
*
|
||||
**/
|
||||
|
||||
.next-lessons {
|
||||
background: $colorGrayDark;
|
||||
padding: $lineHeight $lineHeight $lineHeight * 2;
|
||||
margin-top: $lineHeight;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
h3 {
|
||||
i {
|
||||
@include medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
||||
@include medium {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
@include medium {
|
||||
content: attr(data-current-lesson);
|
||||
|
||||
font-family: $fontHighlight;
|
||||
font-size: $fontBase;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
||||
background: $colorGrayDark;
|
||||
display: inline-block;
|
||||
padding: 5px 7px;
|
||||
|
||||
right: 127px;
|
||||
top: 143px;
|
||||
|
||||
z-index: 1;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@include wide {
|
||||
font-size: $fontMedium;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 126px;
|
||||
right: 230px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include medium {
|
||||
content: $icon-lessons;
|
||||
font-family: $fontIcon;
|
||||
font-size: 150px;
|
||||
|
||||
right: 40px;
|
||||
top: 185px;
|
||||
}
|
||||
|
||||
@include wide {
|
||||
font-size: 210px;
|
||||
right: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Page header
|
||||
*
|
||||
**/
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
|
||||
.breadcrumbs {
|
||||
text-align: left;
|
||||
color: $colorBlue;
|
||||
|
||||
a {
|
||||
color: $colorBlue;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $colorGrayDark;
|
||||
padding-top: $lineHeight * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__excerpt {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $lineHeight * 3;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Quote
|
||||
*
|
||||
**/
|
||||
|
||||
.quote__content {
|
||||
position: relative;
|
||||
font-family: $fontHighlight;
|
||||
@include type--medium;
|
||||
padding-top: $lineHeight * 4;
|
||||
padding-left: $lineHeight;
|
||||
|
||||
@include medium {
|
||||
padding-top: $lineHeight * 2;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
border-top: 1px solid $colorGrayKeyline;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
margin-top: $lineHeight/2 - 1;
|
||||
padding-top: $lineHeight/2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: open-quote;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-family: $fontHighlight;
|
||||
font-weight: 700;
|
||||
color: $colorGrayBackground;
|
||||
top: 90px;
|
||||
left: $lineHeight;
|
||||
font-size: 260px;
|
||||
|
||||
@include medium {
|
||||
top: 225px;
|
||||
left: -210px;
|
||||
font-size: 540px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Related items
|
||||
*
|
||||
**/
|
||||
|
||||
.related-guides {
|
||||
margin-top: $lineHeight*3;
|
||||
padding-bottom: ($lineHeight*2) - 2;
|
||||
border-top: 2px solid $colorGrayKeyline;
|
||||
padding-top: ($lineHeight*2) - 2;
|
||||
}
|
||||
|
||||
.related-guides__list {
|
||||
.list-links {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.related-guides__title {
|
||||
@include type--xlarge;
|
||||
padding-top: 0;
|
||||
|
||||
@include medium {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.related-guides__main-link {
|
||||
text-transform: uppercase;
|
||||
|
||||
&::before {
|
||||
content: '#';
|
||||
display: inline-block;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Related items
|
||||
*
|
||||
**/
|
||||
|
||||
.related-items {
|
||||
background-color: $colorGrayDark;
|
||||
color: #ffffff;
|
||||
padding-bottom: $lineHeight * 2;
|
||||
margin-top: $lineHeight * 2;
|
||||
|
||||
.list-links {
|
||||
a {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Editorial Header
|
||||
*
|
||||
**/
|
||||
|
||||
.summary-header {
|
||||
background-color: $colorBlue;
|
||||
padding-bottom: $lineHeight * 3;
|
||||
color: #ffffff;
|
||||
margin-bottom: $lineHeight;
|
||||
box-shadow: inset 0 2px 0 0 #fff;
|
||||
|
||||
.breadcrumbs__link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.summary-header__anchor-list {
|
||||
margin-top: $lineHeight * 2;
|
||||
}
|
||||
|
||||
|
||||
.summary-header__anchors-item {
|
||||
& a {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Table of contents
|
||||
*
|
||||
**/
|
||||
|
||||
.toc__title {
|
||||
@include type--medium;
|
||||
font-family: $fontHighlight;
|
||||
padding-bottom: $lineHeight/2;
|
||||
margin-bottom: ($lineHeight/2) - 1;
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
|
||||
@include medium {
|
||||
padding-bottom: $lineHeight/2;
|
||||
margin-bottom: $lineHeight/2;
|
||||
}
|
||||
}
|
||||
|
||||
.toc__list {
|
||||
padding-top: 0;
|
||||
|
||||
border-bottom: 1px solid $colorGrayKeyline;
|
||||
padding-bottom: ($lineHeight/2) - 1;
|
||||
margin-bottom: $lineHeight/2;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc__sublist {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -1,11 +1,4 @@
|
|||
/**
|
||||
*
|
||||
* Main Stylesheet SOGo
|
||||
* Based on Angular Material Design
|
||||
* IMPORTANT : This scss file might interfere with actual Angular-Material grunt-build
|
||||
* and will generate a (too)) long css file because of the overrides
|
||||
*
|
||||
**/
|
||||
/// styles.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
// Compass extension imports - comment-out if needed
|
||||
// ------------------------------------------------------------------------------
|
||||
|
|
@ -41,7 +34,7 @@
|
|||
@import 'components/bottomSheet/bottomSheet';
|
||||
@import 'components/button/button';
|
||||
@import 'components/card/card';
|
||||
@import 'components/checkbox/checkbox';
|
||||
//@import 'components/checkbox/checkbox';
|
||||
@import 'components/content/content';
|
||||
@import 'components/dialog/dialog';
|
||||
@import 'components/divider/divider';
|
||||
|
|
@ -50,18 +43,18 @@
|
|||
@import 'components/input/input';
|
||||
@import 'components/list/list';
|
||||
@import 'components/autoScrollList/autoScrollList';
|
||||
@import 'components/progressCircular/progressCircular';
|
||||
@import 'components/progressLinear/progressLinear';
|
||||
@import 'components/radioButton/radio-button';
|
||||
//@import 'components/progressCircular/progressCircular';
|
||||
//@import 'components/progressLinear/progressLinear';
|
||||
//@import 'components/radioButton/radio-button';
|
||||
@import 'components/select/select';
|
||||
@import 'components/sidenav/sidenav';
|
||||
@import 'components/slider/slider';
|
||||
@import 'components/sticky/sticky';
|
||||
//@import 'components/sticky/sticky';
|
||||
@import 'components/subheader/subheader';
|
||||
@import 'components/switch/switch';
|
||||
//@import 'components/switch/switch';
|
||||
@import 'components/tabs/tabs';
|
||||
@import 'components/textField/textField';
|
||||
@import 'components/toast/toast';
|
||||
//@import 'components/toast/toast';
|
||||
@import 'components/toolbar/toolbar';
|
||||
// @import 'components/bottombar/bottombar';
|
||||
@import 'components/tooltip/tooltip';
|
||||
|
|
@ -109,4 +102,4 @@
|
|||
|
||||
// dev-tools - NOT FOR PRODUCTION
|
||||
// ------------------------------------------------------------------------------
|
||||
@import 'devtools';
|
||||
@import 'devtools';
|
||||
|
|
|
|||
|
|
@ -1,508 +0,0 @@
|
|||
$color-red: (
|
||||
'50': #ffebee,
|
||||
'100': #ffcdd2,
|
||||
'200': #ef9a9a,
|
||||
'300': #e57373,
|
||||
'400': #ef5350,
|
||||
'500': #f44336,
|
||||
'600': #e53935,
|
||||
'700': #d32f2f,
|
||||
'800': #c62828,
|
||||
'900': #b71c1c,
|
||||
'A100': #ff8a80,
|
||||
'A200': #ff5252,
|
||||
'A400': #ff1744,
|
||||
'A700': #d50000,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 300 400 A100
|
||||
);
|
||||
|
||||
// Pink
|
||||
// ----------------------------
|
||||
|
||||
$color-pink: (
|
||||
'50': #fce4ec,
|
||||
'100': #f8bbd0,
|
||||
'200': #f48fb1,
|
||||
'300': #f06292,
|
||||
'400': #ec407a,
|
||||
'500': #e91e63,
|
||||
'600': #d81b60,
|
||||
'700': #c2185b,
|
||||
'800': #ad1457,
|
||||
'900': #880E4F,
|
||||
'A100': #ff80ab,
|
||||
'A200': #ff4081,
|
||||
'A400': #f50057,
|
||||
'A700': #c51162,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 300 400 A100
|
||||
);
|
||||
|
||||
// Purple
|
||||
// ----------------------------
|
||||
|
||||
$color-purple: (
|
||||
'50': #f3e5f5,
|
||||
'100': #e1bee7,
|
||||
'200': #ce93d8,
|
||||
'300': #ba68c8,
|
||||
'400': #ab47bc,
|
||||
'500': #9c27b0,
|
||||
'600': #8e24aa,
|
||||
'700': #7b1fa2,
|
||||
'800': #6a1b9a,
|
||||
'900': #4a148c,
|
||||
'A100': #ea80fc,
|
||||
'A200': #e040fb,
|
||||
'A400': #d500f9,
|
||||
'A700': #aa00ff,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 A100
|
||||
);
|
||||
|
||||
|
||||
// Deep Purple
|
||||
// ----------------------------
|
||||
|
||||
$color-deep-purple: (
|
||||
'50': #ede7f6,
|
||||
'100': #d1c4e9,
|
||||
'200': #b39ddb,
|
||||
'300': #9575cd,
|
||||
'400': #7e57c2,
|
||||
'500': #673ab7,
|
||||
'600': #5e35b1,
|
||||
'700': #512da8,
|
||||
'800': #4527a0,
|
||||
'900': #311b92,
|
||||
'A100': #b388ff,
|
||||
'A200': #7c4dff,
|
||||
'A400': #651fff,
|
||||
'A700': #6200ea,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 A100
|
||||
);
|
||||
|
||||
// Indigo
|
||||
// ----------------------------
|
||||
|
||||
$color-indigo: (
|
||||
'50': #e8eaf6,
|
||||
'100': #c5cae9,
|
||||
'200': #9fa8da,
|
||||
'300': #7986cb,
|
||||
'400': #5c6bc0,
|
||||
'500': #3f51b5,
|
||||
'600': #3949ab,
|
||||
'700': #303f9f,
|
||||
'800': #283593,
|
||||
'900': #1a237e,
|
||||
'A100': #8c9eff,
|
||||
'A200': #536dfe,
|
||||
'A400': #3d5afe,
|
||||
'A700': #304ffe,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 A100
|
||||
);
|
||||
|
||||
|
||||
// Blue
|
||||
// ----------------------------
|
||||
|
||||
$color-blue: (
|
||||
'50': #e3f2fd,
|
||||
'100': #bbdefb,
|
||||
'200': #90caf9,
|
||||
'300': #64b5f6,
|
||||
'400': #42a5f5,
|
||||
'500': #2196f3,
|
||||
'600': #1e88e5,
|
||||
'700': #1976d2,
|
||||
'800': #1565c0,
|
||||
'900': #0d47a1,
|
||||
'A100': #82b1ff,
|
||||
'A200': #448aff,
|
||||
'A400': #2979ff,
|
||||
'A700': #2962ff,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 100 200 300 400 A100
|
||||
);
|
||||
|
||||
|
||||
// Light Blue
|
||||
// ----------------------------
|
||||
|
||||
$color-light-blue: (
|
||||
'50': #e1f5fe,
|
||||
'100': #b3e5fc,
|
||||
'200': #81d4fa,
|
||||
'300': #4fc3f7,
|
||||
'400': #29b6f6,
|
||||
'500': #03a9f4,
|
||||
'600': #039be5,
|
||||
'700': #0288d1,
|
||||
'800': #0277bd,
|
||||
'900': #01579b,
|
||||
'A100': #80d8ff,
|
||||
'A200': #40c4ff,
|
||||
'A400': #00b0ff,
|
||||
'A700': #0091ea,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900 A700
|
||||
);
|
||||
|
||||
|
||||
// Cyan
|
||||
// ----------------------------
|
||||
|
||||
$color-cyan: (
|
||||
'50': #e0f7fa,
|
||||
'100': #b2ebf2,
|
||||
'200': #80deea,
|
||||
'300': #4dd0e1,
|
||||
'400': #26c6da,
|
||||
'500': #00bcd4,
|
||||
'600': #00acc1,
|
||||
'700': #0097a7,
|
||||
'800': #00838f,
|
||||
'900': #006064,
|
||||
'A100': #84ffff,
|
||||
'A200': #18ffff,
|
||||
'A400': #00e5ff,
|
||||
'A700': #00b8d4,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
|
||||
// Teal
|
||||
// ----------------------------
|
||||
|
||||
$color-teal: (
|
||||
'50': #e0f2f1,
|
||||
'100': #b2dfdb,
|
||||
'200': #80cbc4,
|
||||
'300': #4db6ac,
|
||||
'400': #26a69a,
|
||||
'500': #009688,
|
||||
'600': #00897b,
|
||||
'700': #00796b,
|
||||
'800': #00695c,
|
||||
'900': #004d40,
|
||||
'A100': #a7ffeb,
|
||||
'A200': #64ffda,
|
||||
'A400': #1de9b6,
|
||||
'A700': #00bfa5,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
|
||||
// Green
|
||||
// ----------------------------
|
||||
|
||||
$color-green: (
|
||||
'50': #e8f5e9,
|
||||
'100': #c8e6c9,
|
||||
'200': #a5d6a7,
|
||||
'300': #81c784,
|
||||
'400': #66bb6a,
|
||||
'500': #4caf50,
|
||||
'600': #43a047,
|
||||
'700': #388e3c,
|
||||
'800': #2e7d32,
|
||||
'900': #1b5e20,
|
||||
'A100': #b9f6ca,
|
||||
'A200': #69f0ae,
|
||||
'A400': #00e676,
|
||||
'A700': #00c853,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
|
||||
// Light Green
|
||||
// ----------------------------
|
||||
|
||||
$color-light-green: (
|
||||
'50': #f1f8e9,
|
||||
'100': #dcedc8,
|
||||
'200': #c5e1a5,
|
||||
'300': #aed581,
|
||||
'400': #9ccc65,
|
||||
'500': #8bc34a,
|
||||
'600': #7cb342,
|
||||
'700': #689f38,
|
||||
'800': #558b2f,
|
||||
'900': #33691e,
|
||||
'A100': #ccff90,
|
||||
'A200': #b2ff59,
|
||||
'A400': #76ff03,
|
||||
'A700': #64dd17,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 800 900
|
||||
);
|
||||
|
||||
|
||||
// Lime
|
||||
// ----------------------------
|
||||
|
||||
$color-lime: (
|
||||
'50': #f9fbe7,
|
||||
'100': #f0f4c3,
|
||||
'200': #e6ee9c,
|
||||
'300': #dce775,
|
||||
'400': #d4e157,
|
||||
'500': #cddc39,
|
||||
'600': #c0ca33,
|
||||
'700': #afb42b,
|
||||
'800': #9e9d24,
|
||||
'900': #827717,
|
||||
'A100': #f4ff81,
|
||||
'A200': #eeff41,
|
||||
'A400': #c6ff00,
|
||||
'A700': #aeea00,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 900
|
||||
);
|
||||
|
||||
|
||||
// Yellow
|
||||
// ----------------------------
|
||||
$color-yellow: (
|
||||
'50': #fffde7,
|
||||
'100': #fff9c4,
|
||||
'200': #fff59d,
|
||||
'300': #fff176,
|
||||
'400': #ffee58,
|
||||
'500': #ffeb3b,
|
||||
'600': #fdd835,
|
||||
'700': #fbc02d,
|
||||
'800': #f9a825,
|
||||
'900': #f57f17,
|
||||
'A100': #ffff8d,
|
||||
'A200': #ffff00,
|
||||
'A400': #ffea00,
|
||||
'A700': #ffd600,
|
||||
'contrastDefaultColor': dark
|
||||
);
|
||||
|
||||
|
||||
// Amber
|
||||
// ----------------------------
|
||||
|
||||
$color-amber: (
|
||||
'50': #fff8e1,
|
||||
'100': #ffecb3,
|
||||
'200': #ffe082,
|
||||
'300': #ffd54f,
|
||||
'400': #ffca28,
|
||||
'500': #ffc107,
|
||||
'600': #ffb300,
|
||||
'700': #ffa000,
|
||||
'800': #ff8f00,
|
||||
'900': #ff6f00,
|
||||
'A100': #ffe57f,
|
||||
'A200': #ffd740,
|
||||
'A400': #ffc400,
|
||||
'A700': #ffab00,
|
||||
'contrastDefaultColor': dark
|
||||
);
|
||||
|
||||
|
||||
// Orange
|
||||
// ----------------------------
|
||||
|
||||
$color-orange: (
|
||||
'50': #fff3e0,
|
||||
'100': #ffe0b2,
|
||||
'200': #ffcc80,
|
||||
'300': #ffb74d,
|
||||
'400': #ffa726,
|
||||
'500': #ff9800,
|
||||
'600': #fb8c00,
|
||||
'700': #f57c00,
|
||||
'800': #ef6c00,
|
||||
'900': #e65100,
|
||||
'A100': #ffd180,
|
||||
'A200': #ffab40,
|
||||
'A400': #ff9100,
|
||||
'A700': #ff6d00,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 800 900
|
||||
);
|
||||
|
||||
|
||||
// Deep Orange
|
||||
// ----------------------------
|
||||
|
||||
$color-deep-orange: (
|
||||
'50': #fbe9e7,
|
||||
'100': #ffccbc,
|
||||
'200': #ffab91,
|
||||
'300': #ff8a65,
|
||||
'400': #ff7043,
|
||||
'500': #ff5722,
|
||||
'600': #f4511e,
|
||||
'700': #e64a19,
|
||||
'800': #d84315,
|
||||
'900': #bf360c,
|
||||
'A100': #ff9e80,
|
||||
'A200': #ff6e40,
|
||||
'A400': #ff3d00,
|
||||
'A700': #dd2c00,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 300 400 A100 A200
|
||||
);
|
||||
|
||||
|
||||
// Brown
|
||||
// ----------------------------
|
||||
|
||||
$color-brown: (
|
||||
'50': #efebe9,
|
||||
'100': #d7ccc8,
|
||||
'200': #bcaaa4,
|
||||
'300': #a1887f,
|
||||
'400': #8d6e63,
|
||||
'500': #795548,
|
||||
'600': #6d4c41,
|
||||
'700': #5d4037,
|
||||
'800': #4e342e,
|
||||
'900': #3e2723,
|
||||
'A100': #d7ccc8,
|
||||
'A200': #bcaaa4,
|
||||
'A400': #8d6e63,
|
||||
'A700': #5d4037,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200
|
||||
);
|
||||
|
||||
// Grey
|
||||
// ----------------------------
|
||||
$color-grey: (
|
||||
'0': #ffffff,
|
||||
'50': #fafafa,
|
||||
'100': #f5f5f5,
|
||||
'200': #eeeeee,
|
||||
'300': #e0e0e0,
|
||||
'400': #bdbdbd,
|
||||
'500': #9e9e9e,
|
||||
'600': #757575,
|
||||
'700': #616161,
|
||||
'800': #424242,
|
||||
'900': #212121,
|
||||
'1000': #000000,
|
||||
'A100': #ffffff,
|
||||
'A200': #eeeeee,
|
||||
'A400': #bdbdbd,
|
||||
'A700': #616161,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 600 700 800 900
|
||||
);
|
||||
|
||||
// Blue Grey
|
||||
// ----------------------------
|
||||
$color-blue-grey: (
|
||||
'50': #eceff1,
|
||||
'100': #cfd8dc,
|
||||
'200': #b0bec5,
|
||||
'300': #90a4ae,
|
||||
'400': #78909c,
|
||||
'500': #607d8b,
|
||||
'600': #546e7a,
|
||||
'700': #455a64,
|
||||
'800': #37474f,
|
||||
'900': #263238,
|
||||
'A100': #cfd8dc,
|
||||
'A200': #b0bec5,
|
||||
'A400': #78909c,
|
||||
'A700': #455a64,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200 300
|
||||
);
|
||||
|
||||
// SOGo Green
|
||||
// ----------------------------
|
||||
$color-sogo-green: (
|
||||
'50': #eaf5e9,
|
||||
'100': #cbe5c8,
|
||||
'200': #aad6a5,
|
||||
'300': #88c781,
|
||||
'400': #66b86a,
|
||||
'500': #56b04c,
|
||||
'600': #4da143,
|
||||
'700': #388e3c,
|
||||
'800': #367d2e,
|
||||
'900': #225e1b,
|
||||
'A100': #b9f6ca,
|
||||
'A200': #69f0ae,
|
||||
'A400': #00e676,
|
||||
'A700': #00c853,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
$color-vintage-blue: (
|
||||
'50': #f0faf9,
|
||||
'100': #e1f5f3,
|
||||
'200': #ceebe8,
|
||||
'300': #bfe0dd,
|
||||
'400': #b2d6d3,
|
||||
'500': #a1ccc8,
|
||||
'600': #8ebfbb,
|
||||
'700': #7db3b0,
|
||||
'800': #639997,
|
||||
'900': #4d8080,
|
||||
'A100': #d4f7fa,
|
||||
'A200': #c3f5fa,
|
||||
'A400': #53e3f0,
|
||||
'A700': #00b0c0,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200,
|
||||
'contrastLightColors': 300 400 500 600 700 800 900 A100 A200 A400 A700
|
||||
|
||||
);
|
||||
|
||||
$color-paper: (
|
||||
'50': #fcf7f8,
|
||||
'100': #f7f1dc,
|
||||
'200': #ede5ca,
|
||||
'300': #e6d8ba,
|
||||
'400': #e2d2a3,
|
||||
'500': #d6c48d,
|
||||
'600': #baa870,
|
||||
'700': #857545,
|
||||
'800': #524517,
|
||||
'900': #433809,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
$colors: (
|
||||
'red': $color-red,
|
||||
'pink': $color-pink,
|
||||
'purple': $color-purple,
|
||||
'deep-purple': $color-deep-purple,
|
||||
'indigo': $color-indigo,
|
||||
'blue': $color-blue,
|
||||
'light-blue': $color-light-blue,
|
||||
'cyan': $color-cyan,
|
||||
'teal': $color-teal,
|
||||
//'green': $color-green,
|
||||
'light-green': $color-light-green,
|
||||
'lime': $color-lime,
|
||||
'yellow': $color-yellow,
|
||||
'amber': $color-amber,
|
||||
'orange': $color-orange,
|
||||
'deep-orange': $color-deep-orange,
|
||||
'brown': $color-brown,
|
||||
'grey': $color-grey,
|
||||
'blue-grey': $color-blue-grey,
|
||||
'paper': $color-paper,
|
||||
'vintage-blue': $color-vintage-blue,
|
||||
// redefine green with sogo-green
|
||||
'green': $color-sogo-green
|
||||
);
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "compass/utilities";
|
||||
@import "compass/typography";
|
||||
@import "compass/css3";
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
$project-path: null !default;
|
||||
$debug-configuration: false !default;
|
||||
$compass-initialized: false !default;
|
||||
$compass-configured: false !default;
|
||||
|
||||
@mixin debug-compass-configuration {
|
||||
@if $debug-configuration {
|
||||
/* Compass Configuration: */
|
||||
@each $setting, $value in compass-configuration() {
|
||||
/* #{$setting}: #{inspect($value)} */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This mixin resets the compass configuration
|
||||
// and then initializes it with the sass options
|
||||
// set in the environment. It is immediately called during import.
|
||||
// It's unlikely you'll need to call this mixin yourself.
|
||||
@mixin compass-initializer($project-path: $project-path) {
|
||||
@if not $compass-initialized and not using-compass-compiler() {
|
||||
$default-configuration: reset-configuration();
|
||||
$default-configuration: add-sass-configuration($project-path);
|
||||
}
|
||||
$compass-initialized: true !global;
|
||||
@include debug-compass-configuration;
|
||||
}
|
||||
@include compass-initializer;
|
||||
|
||||
// `$options`:
|
||||
// A map of compass configuration options.
|
||||
// E.g. @include compass-configuration((asset-host:
|
||||
// Keywords style ar
|
||||
// `$reconfigure`:
|
||||
// When unset, if compass-configuration is called more than once, a warning will
|
||||
// be issued and all calls after the first will be ignored.
|
||||
// When set to `false`, all subsequent calls will be ignored without a warning.
|
||||
// When set to `true`, the configuration will be added to any existing configuration.
|
||||
@mixin compass-configuration($options: (), $reconfigure: null, $arguments...) {
|
||||
@if not at-stylesheet-root() {
|
||||
// this should be @error once that exists.
|
||||
@warn "include compass-configuration from the root level of your stylesheet."
|
||||
}
|
||||
@if not $compass-configured or $reconfigure {
|
||||
$options: map-merge($options, keywords($arguments));
|
||||
@if length($arguments) > 0 {
|
||||
@warn "compass-configuration accepts keyword arguments or a single map of options. Got: #{inspect($arguments)}."
|
||||
}
|
||||
$invoke: add-configuration($options);
|
||||
@include debug-compass-configuration;
|
||||
$compass-configured: true !global;
|
||||
} @else if $reconfigure == null {
|
||||
@warn "Compass was already configured for this stylesheet."
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
@import "css3/border-radius";
|
||||
@import "css3/inline-block";
|
||||
@import "css3/opacity";
|
||||
@import "css3/box-shadow";
|
||||
@import "css3/text-shadow";
|
||||
@import "css3/columns";
|
||||
@import "css3/box-sizing";
|
||||
@import "css3/flexbox";
|
||||
@import "css3/images";
|
||||
@import "css3/background-clip";
|
||||
@import "css3/background-origin";
|
||||
@import "css3/background-size";
|
||||
@import "css3/font-face";
|
||||
@import "css3/transform";
|
||||
@import "css3/transition";
|
||||
@import "css3/appearance";
|
||||
@import "css3/animation";
|
||||
@import "css3/regions";
|
||||
@import "css3/hyphenation";
|
||||
@import "css3/filter";
|
||||
@import "css3/user-interface";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "layout/grid-background";
|
||||
@import "layout/sticky-footer";
|
||||
@import "layout/stretching";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "reset/utilities-legacy";
|
||||
|
||||
@include global-reset;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "reset/utilities";
|
||||
|
||||
@include global-reset;
|
||||
|
|
@ -1,447 +0,0 @@
|
|||
// Map of compass extensions that are loaded. The value will either be
|
||||
// the version of the extension or `true` if the version is unknown.
|
||||
$compass-extensions: compass-extensions() !default;
|
||||
|
||||
// The list of browsers you want to support.
|
||||
// Defaults to all.
|
||||
$supported-browsers: browsers() !default;
|
||||
|
||||
// The browser usage threshold for features that gracefully degrade
|
||||
// Defaults to 1 user in 1,000.
|
||||
$graceful-usage-threshold: 0.1 !default;
|
||||
|
||||
// The browser usage threshold for features that cannot degrade gracefully
|
||||
// Defaults to 1 user in 10,000.
|
||||
$critical-usage-threshold: 0.01 !default;
|
||||
|
||||
// Set this to true to generate comments that will explain why a prefix was included or omitted.
|
||||
$debug-browser-support: false !default;
|
||||
|
||||
// Minimum browser versions that must be supported.
|
||||
// The keys of this map are any valid browser according to `browsers()`.
|
||||
// The values of this map are the min version that is valid for that browser
|
||||
// according to `browser-versions($browser)`
|
||||
$browser-minimum-versions: (
|
||||
'chrome': null,
|
||||
'firefox': null,
|
||||
'ie': null,
|
||||
'safari': null,
|
||||
'opera': null
|
||||
) !default;
|
||||
|
||||
|
||||
// @private
|
||||
$default-capability-options: (
|
||||
(full-support: true),
|
||||
(partial-support: true)
|
||||
);
|
||||
|
||||
// When a prefix in in context, but there is no current prefix
|
||||
// That context is recorded here so other prefixes can be avoided.
|
||||
$prefix-context: null;
|
||||
|
||||
// When a prefix is in a selector or directive scope, this is set to the
|
||||
// current prefix value. When `null`, either there is no prefix in scope
|
||||
// or the official prefix is being rendered. The `$prefix-context`
|
||||
// variable can be used to make that distinction.
|
||||
$current-prefix: null;
|
||||
|
||||
// When in a context that only exists in a particular version
|
||||
// this variable is set to those versions.
|
||||
$current-browser-versions: ();
|
||||
|
||||
// The legacy support CSS 2.1 Selectors.
|
||||
// Defaults to the $critical-usage-threshold.
|
||||
$css-sel2-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// Check if the browser is in scope given the browser support and current prefix minimums.
|
||||
@function browser-out-of-scope($browser, $version: null) {
|
||||
@if not index($supported-browsers, $browser) {
|
||||
@if $debug-browser-support {
|
||||
@return "#{$browser} is not listed as a supported browser."
|
||||
} @else {
|
||||
@return true;
|
||||
}
|
||||
} @else if not ($current-prefix == null or $current-prefix == browser-prefix($browser)) {
|
||||
@if $debug-browser-support {
|
||||
@return "#{$browser} #{$version} is incompatible with #{$current-prefix}."
|
||||
} @else {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
$current-range: map-get($current-browser-versions, $browser);
|
||||
$current-min: if($current-range, nth($current-range, 1), null);
|
||||
$current-max: if($current-range, nth($current-range, 2), null);
|
||||
@if not ($version and $current-max) {
|
||||
// We don't have any versions to compare
|
||||
@return false;
|
||||
} @else {
|
||||
// If the version is less than the current min, it is not supported
|
||||
$too-old: compare-browser-versions($browser, $version, $current-min) < 0;
|
||||
$too-new: compare-browser-versions($browser, $version, $current-max) > 0;
|
||||
@if $too-old or $too-new {
|
||||
@if $debug-browser-support {
|
||||
@return "The current scope only works with #{display-browser-range($browser, $current-min, $current-max)}.";
|
||||
} @else {
|
||||
@return true;
|
||||
}
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check whether the browser is supported according to the supported browsers,
|
||||
// declared minimum support and usage thresholds.
|
||||
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold) {
|
||||
@if not index($supported-browsers, $browser) {
|
||||
@return false;
|
||||
}
|
||||
// Check agaist usage stats and declared minimums
|
||||
$min-required-version: map-get($browser-minimum-versions, $browser);
|
||||
$usage: if($max-version,
|
||||
omitted-usage($browser, $min-version, $max-version),
|
||||
omitted-usage($browser, $min-version));
|
||||
@return $usage > $threshold or
|
||||
($min-required-version and
|
||||
compare-browser-versions($browser, $max-version or $min-version, $min-required-version) >= 0);
|
||||
}
|
||||
|
||||
// Include content for a legacy browser
|
||||
// Version can be a single version string or a list of versions ordered from oldest to newest.
|
||||
@mixin for-legacy-browser($browser, $min-version, $max-version: $min-version,
|
||||
$threshold: $critical-usage-threshold,
|
||||
$ranges: ($browser: $min-version $max-version)) {
|
||||
@if not browser-out-of-scope($browser, $max-version) and
|
||||
support-legacy-browser($browser, $min-version, $max-version, $threshold)
|
||||
{
|
||||
@if $debug-browser-support {
|
||||
/* Content for #{display-browser-range($browser, $min-version, $max-version)}.
|
||||
Min version: #{map-get($browser-minimum-versions, $browser) or unspecified}.
|
||||
User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
|
||||
}
|
||||
@include with-browser-ranges(intersect-browser-ranges($current-browser-versions, $ranges)) {
|
||||
@content;
|
||||
}
|
||||
} @else if $debug-browser-support and browser-out-of-scope($browser, $max-version) {
|
||||
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
|
||||
Not allowed in the current scope: #{browser-out-of-scope($browser, $max-version)} */
|
||||
} @else if $debug-browser-support and not
|
||||
support-legacy-browser($browser, $min-version, $max-version, $threshold) {
|
||||
@if omitted-usage($browser, $min-version, $max-version) > $threshold {
|
||||
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
|
||||
User threshold to keep: #{$threshold}%. If #{display-browser-range($browser, $min-version, $max-version)} and below are omitted: #{omitted-usage($browser, $min-version, $max-version)}%. */
|
||||
} @else {
|
||||
/* Content for #{display-browser-range($browser, $min-version, $max-version)} omitted.
|
||||
Minimum support is #{map-get($browser-minimum-versions, $browser)}. */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function display-browser-range($browser, $min-version, $max-version: $min-version) {
|
||||
@return "#{unquote($browser)} #{unquote($min-version)}#{if($max-version != $min-version, unquote(' -') unquote($max-version), null)}";
|
||||
}
|
||||
|
||||
|
||||
// Renders the content once if any of the legacy browsers are supported.
|
||||
// $browsers is a map of browser name to version ranges
|
||||
@mixin for-legacy-browsers($browsers, $threshold: $critical-usage-threshold) {
|
||||
$rendered: false;
|
||||
@each $browser, $range in $browsers {
|
||||
@if not $rendered {
|
||||
@include for-legacy-browser($browser, $range..., $threshold: $threshold, $ranges: $browsers) {
|
||||
$rendered: true;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If there's a prefix context in scope, this will only output the content if the prefix matches.
|
||||
// Otherwise, sets the current prefix scope and outputs the content.
|
||||
@mixin with-prefix($prefix) {
|
||||
@if $current-prefix or $prefix-context {
|
||||
@if $current-prefix == $prefix or $prefix-context == $prefix {
|
||||
@if $debug-browser-support {
|
||||
@if $prefix {
|
||||
/* content for #{$prefix} because #{$current-prefix or $prefix-context} is already in scope. */
|
||||
} @else {
|
||||
/* unprefixed content. #{$current-prefix or $prefix-context} is already in scope. */
|
||||
}
|
||||
}
|
||||
$old-prefix-context: $prefix-context;
|
||||
$old-prefix: $current-prefix;
|
||||
$prefix-context: $prefix-context or $current-prefix !global;
|
||||
$current-prefix: $prefix !global;
|
||||
@content;
|
||||
$prefix-context: $old-prefix-context !global;
|
||||
$current-prefix: $old-prefix !global;
|
||||
} @else if $prefix == null {
|
||||
$old-prefix-context: $prefix-context;
|
||||
$prefix-context: $prefix-context or $current-prefix !global;
|
||||
$current-prefix: null !global;
|
||||
@if $debug-browser-support {
|
||||
/* Content for official syntax. Prefix context is still #{$prefix-context}. */
|
||||
}
|
||||
@content;
|
||||
$current-prefix: $prefix-context !global;
|
||||
$prefix-context: $old-prefix-context !global;
|
||||
} @else if $debug-browser-support {
|
||||
/* Omitting content for #{$prefix} because #{$current-prefix} is already in scope. */
|
||||
}
|
||||
} @else {
|
||||
@if $debug-browser-support and $prefix {
|
||||
/* Creating new #{$prefix} context. */
|
||||
}
|
||||
$prefix-context: $prefix !global;
|
||||
$current-prefix: $prefix !global;
|
||||
@content;
|
||||
$current-prefix: null !global;
|
||||
$prefix-context: null !global;
|
||||
}
|
||||
}
|
||||
|
||||
@function prefixes-for-capability($capability, $threshold, $capability-options: $default-capability-options) {
|
||||
$result: ();
|
||||
@each $prefix in browser-prefixes($supported-browsers) {
|
||||
$result: map-merge($result,
|
||||
($prefix: use-prefix($prefix, $capability, $threshold, $capability-options)));
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Yields to the mixin content once for each prefix required.
|
||||
// The current prefix is set to the $current-prefix global for use by the included content.
|
||||
// Also yields to the content once with $current-prefix set to null for the official version
|
||||
// as long as there's not already a prefix in scope.
|
||||
@mixin with-each-prefix($capability, $threshold, $capability-options: $default-capability-options) {
|
||||
@each $prefix, $should-use-prefix in prefixes-for-capability($capability, $threshold, $capability-options) {
|
||||
@if $should-use-prefix {
|
||||
@if $debug-browser-support and type-of($should-use-prefix) == list {
|
||||
/* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix} is required. */
|
||||
} @else if $debug-browser-support and type-of($should-use-prefix) == number {
|
||||
/* Capability #{$capability} is prefixed with #{$prefix} because #{$should-use-prefix}% of users need it which is more than the threshold of #{$threshold}%. */
|
||||
}
|
||||
@include with-prefix($prefix) {
|
||||
@include with-browser-ranges($capability) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else if $debug-browser-support {
|
||||
/* Capability #{$capability} is not prefixed with #{$prefix} because #{prefix-usage($prefix, $capability, $capability-options)}% of users are affected which is less than the threshold of #{$threshold}. */
|
||||
}
|
||||
}
|
||||
@include with-prefix(null) {
|
||||
@include with-browser-ranges($capability) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Returns true if at least one browser-version pair in $subset-ranges
|
||||
// is a higher (or same) version than the browser-version pairs in
|
||||
// $ranges.
|
||||
@function has-browser-subset($ranges, $subset-ranges) {
|
||||
$found-mismatch: false;
|
||||
@each $browser, $subset-range in $subset-ranges {
|
||||
$range: map-get($ranges, $browser);
|
||||
@if $range {
|
||||
$min-1: nth($subset-range, 1);
|
||||
$max-1: nth($subset-range, 2);
|
||||
$min-2: nth($range, 1);
|
||||
$max-2: nth($range, 2);
|
||||
@if (compare-browser-versions($browser, $min-2, $min-1) <= 0 and
|
||||
compare-browser-versions($browser, $min-1, $max-2) <= 0) or
|
||||
(compare-browser-versions($browser, $min-2, $max-1) <= 0 and
|
||||
compare-browser-versions($browser, $max-1, $max-2) <= 0) or
|
||||
(compare-browser-versions($browser, $min-1, $min-2) <= 0 and
|
||||
compare-browser-versions($browser, $max-1, $max-2) >= 0) or
|
||||
(compare-browser-versions($browser, $min-1, $min-2) >= 0 and
|
||||
compare-browser-versions($browser, $max-1, $max-2) <= 0) {
|
||||
@return true;
|
||||
} @else {
|
||||
$found-mismatch: true
|
||||
}
|
||||
}
|
||||
}
|
||||
@return not $found-mismatch;
|
||||
}
|
||||
|
||||
// When the same browser is in both maps, then the minimum will be set
|
||||
// to the maximum of the two minimum versions, and the maximum will be
|
||||
// set to the minmum of the two maximum versions.
|
||||
@function intersect-browser-ranges($ranges, $new-ranges) {
|
||||
@each $browser, $new-range in $new-ranges {
|
||||
$old-range: map-get($ranges, $browser);
|
||||
@if $old-range {
|
||||
$old-min: nth($old-range, 1);
|
||||
$old-max: if(length($old-range) == 1, $old-min, nth($old-range, 2));
|
||||
$new-min: nth($new-range, 1);
|
||||
$new-max: if(length($new-range) == 1, $new-min, nth($new-range, 2));
|
||||
$maximin: if(compare-browser-versions($browser, $old-min, $new-min) > 0,
|
||||
$old-min, $new-min);
|
||||
$minimax: if(compare-browser-versions($browser, $old-max, $new-max) < 0,
|
||||
$old-max, $new-max);
|
||||
$ranges: map-merge($ranges, ($browser: $maximin $minimax));
|
||||
} @else {
|
||||
$ranges: map-merge($ranges, ($browser: $new-range));
|
||||
}
|
||||
}
|
||||
@return $ranges;
|
||||
}
|
||||
|
||||
// If passed a map, that will be the new browser ranges.
|
||||
// Otherwise a range map will be created based on the given capability and prefix
|
||||
// using the `browser-ranges($capability, $prefix)` function.
|
||||
//
|
||||
// If there are current ranges in scope and the new ranges have some overlap
|
||||
// with the current,
|
||||
//
|
||||
// If there is no overlap, then the content will not be rendered.
|
||||
@mixin with-browser-ranges($capability, $prefix: $current-prefix) {
|
||||
$new-ranges: null;
|
||||
@if type-of($capability) == map {
|
||||
$new-ranges: $capability;
|
||||
} @else {
|
||||
$new-ranges: browser-ranges($capability, $prefix);
|
||||
}
|
||||
|
||||
@if has-browser-subset($current-browser-versions, $new-ranges) {
|
||||
$old-ranges: $current-browser-versions;
|
||||
$current-browser-versions: intersect-browser-ranges($old-ranges, $new-ranges) !global;
|
||||
@content;
|
||||
$current-browser-versions: $old-ranges !global;
|
||||
} @else if $debug-browser-support {
|
||||
/* Excluding content because #{inspect($new-ranges)} is not included within
|
||||
#{inspect($current-browser-versions)} */
|
||||
}
|
||||
}
|
||||
|
||||
// Returns true if the prefixed usage stats for the capability exceed the threshold
|
||||
// or if the minimum version for a supported browser would require a prefix for the capability.
|
||||
@function use-prefix($prefix, $capability, $threshold, $capability-options: $default-capability-options) {
|
||||
$usage: prefix-usage($prefix, $capability, $capability-options);
|
||||
@if $usage > $threshold {
|
||||
@return $usage;
|
||||
} @else {
|
||||
@each $browser in browsers($prefix) {
|
||||
@if index($supported-browsers, $browser) {
|
||||
$min-version: map-get($browser-minimum-versions, $browser);
|
||||
@if $min-version {
|
||||
$actual-prefix: browser-requires-prefix($browser, $min-version, $capability, $capability-options);
|
||||
@if $actual-prefix and $prefix == $actual-prefix {
|
||||
@return $browser $min-version;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@function prefix-identifier($ident, $prefix: $current-prefix) {
|
||||
@return unquote("#{$prefix}#{if($prefix, '-', null)}#{$ident}");
|
||||
}
|
||||
|
||||
// Output a property and value using the current prefix.
|
||||
// It will be unprefixed if $current-prefix is null.
|
||||
@mixin prefix-prop($property, $value, $prefix: $current-prefix) {
|
||||
#{prefix-identifier($property, $prefix)}: $value;
|
||||
}
|
||||
|
||||
// Emit a set of properties with the prefix governed by the capability and usage threshold given.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// @include prefixed-properties(css-animation, $animation-support-threshold,
|
||||
// (animation-name: foo, animation-duration: 2s)
|
||||
// );
|
||||
@mixin prefixed-properties($capability, $threshold, $properties, $capability-options: $default-capability-options) {
|
||||
@include with-each-prefix($capability, $threshold, $capability-options) {
|
||||
@each $prop, $value in $properties {
|
||||
@include prefix-prop($prop, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @private
|
||||
@function warn-about-old-variables() {
|
||||
$old-variables-in-use: ();
|
||||
@each $old-variable-name in
|
||||
(legacy-support-for-ie, legacy-support-for-ie6, legacy-support-for-ie7,
|
||||
legacy-support-for-ie8, legacy-support-for-mozilla, legacy-support-for-webkit,
|
||||
experimental-support-for-mozilla, experimental-support-for-webkit,
|
||||
experimental-support-for-opera, experimental-support-for-microsoft,
|
||||
experimental-support-for-khtml, experimental-support-for-svg)
|
||||
{
|
||||
@if global-variable-exists($old-variable-name) {
|
||||
$old-variables-in-use: append($old-variables-in-use,
|
||||
unquote("$#{$old-variable-name}"), comma);
|
||||
}
|
||||
}
|
||||
@if length($old-variables-in-use) > 0 {
|
||||
@warn "Compass has changed how browser support is configured. " +
|
||||
"The following configuration variables " +
|
||||
"are no longer supported: #{$old-variables-in-use}." +
|
||||
"Details: http://compass-style.org/help/documentation/tuning-vendor-prefixes/"
|
||||
}
|
||||
@return $old-variables-in-use;
|
||||
}
|
||||
|
||||
// @private
|
||||
@function warn-about-pie-removal() {
|
||||
@if global-variable-exists(experimental-support-for-pie) {
|
||||
@warn "Compass no longer supports css3pie.";
|
||||
}
|
||||
@return true;
|
||||
}
|
||||
|
||||
// Enable browser support debugging within the content block.
|
||||
// Or you can enable it for the whole stylesheet by setting `$debug-browser-support` to true.
|
||||
@mixin with-browser-support-debugging {
|
||||
$current-status: $debug-browser-support;
|
||||
$debug-browser-support: true !global;
|
||||
@content;
|
||||
$debug-browser-support: $current-status !global;
|
||||
}
|
||||
|
||||
// Set a default value if the given arglist is empty
|
||||
@function set-arglist-default($arglist, $default) {
|
||||
$default-index: index($arglist, default);
|
||||
@if $default-index {
|
||||
$arglist: set-nth($arglist, $default-index, $default)
|
||||
}
|
||||
@return if(length($arglist) > 0, $arglist, $default);
|
||||
}
|
||||
|
||||
|
||||
// @private
|
||||
$old-variable-warnings-issued: warn-about-old-variables() !default;
|
||||
|
||||
// @private
|
||||
$pie-removal-warning-issued: warn-about-pie-removal() !default;
|
||||
|
||||
// @private
|
||||
@function warn-about-useless-prefix-arguments($moz: null, $webkit: null, $o: null, $khtml: null, $official: null) {
|
||||
@if $moz != null or $webkit != null or $o != null or $khtml != null or $official != null {
|
||||
@warn "Browser prefix arguments to this mixin are no longer used and " +
|
||||
"will be removed in the next release.";
|
||||
}
|
||||
@return true;
|
||||
}
|
||||
|
||||
// coerce a list to be comma delimited or make a new, empty comma delimited list.
|
||||
@function comma-list($list: ()) {
|
||||
@return join((), $list, comma);
|
||||
}
|
||||
|
||||
// @private Returns the legacy value for a given box-model
|
||||
// - Used by background-clip and -origin.
|
||||
@function legacy-box($box) {
|
||||
$box: unquote($box);
|
||||
@if $box == padding-box { $box: padding; }
|
||||
@if $box == border-box { $box: border; }
|
||||
@if $box == content-box { $box: content; }
|
||||
@return $box;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "typography/links";
|
||||
@import "typography/lists";
|
||||
@import "typography/text";
|
||||
@import "typography/vertical_rhythm";
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@import "utilities/color";
|
||||
@import "utilities/general";
|
||||
@import "utilities/sprites";
|
||||
@import "utilities/tables";
|
||||
|
||||
// deprecated
|
||||
@import "typography/links";
|
||||
@import "typography/lists";
|
||||
@import "typography/text";
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for animation.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$animation-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Name of any animation as a string.
|
||||
$default-animation-name : null !default;
|
||||
|
||||
// Duration of the entire animation in seconds.
|
||||
$default-animation-duration : null !default;
|
||||
|
||||
// Delay for start of animation in seconds.
|
||||
$default-animation-delay : null !default;
|
||||
|
||||
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
|
||||
$default-animation-timing-function : null !default;
|
||||
|
||||
// The number of times an animation cycle is played. [infinite | $number]
|
||||
$default-animation-iteration-count : null !default;
|
||||
|
||||
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
||||
$default-animation-direction : null !default;
|
||||
|
||||
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
||||
$default-animation-fill-mode : null !default;
|
||||
|
||||
// Whether the animation is running or paused. [running | paused]
|
||||
$default-animation-play-state : null !default;
|
||||
|
||||
|
||||
// Create a named animation sequence that can be applied to elements later.
|
||||
//
|
||||
// $name - The name of your animation.
|
||||
// @content - The keyframes of the animation.
|
||||
@mixin keyframes($name, $deprecated-prefixes...) {
|
||||
$warned: warn-about-useless-prefix-arguments($deprecated-prefixes...);
|
||||
|
||||
@include with-each-prefix(css-animation, $animation-support-threshold) {
|
||||
// It would be nice if we could dynamically construct directive names.
|
||||
@if $current-prefix == -moz { @-moz-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -o { @-o-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -ms { @-ms-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == null { @keyframes #{$name} { @content; } }
|
||||
}
|
||||
}
|
||||
|
||||
// @private
|
||||
@mixin animation-properties($properties) {
|
||||
@include prefixed-properties(css-animation, $animation-support-threshold, $properties);
|
||||
}
|
||||
|
||||
|
||||
// Apply any number of animation names.
|
||||
@mixin animation-name($name...) {
|
||||
$name: set-arglist-default($name, $default-animation-name);
|
||||
@include animation-properties((animation-name: $name));
|
||||
}
|
||||
|
||||
// Apply any number of animation durations.
|
||||
@mixin animation-duration($duration...) {
|
||||
$duration: set-arglist-default($duration, $default-animation-duration);
|
||||
@include animation-properties((animation-duration: $duration));
|
||||
}
|
||||
|
||||
// Apply any number of animation delays.
|
||||
@mixin animation-delay($delay...) {
|
||||
$delay: set-arglist-default($delay, $default-animation-delay);
|
||||
@include animation-properties((animation-delay: $delay));
|
||||
}
|
||||
|
||||
// Apply any number of animation timing functions.
|
||||
@mixin animation-timing-function($function...) {
|
||||
$function: set-arglist-default($function, $default-animation-timing-function);
|
||||
@include animation-properties((animation-timing-function: $function));
|
||||
}
|
||||
|
||||
// Apply any number of animation iteration counts.
|
||||
@mixin animation-iteration-count($count...) {
|
||||
$count: set-arglist-default($count, $default-animation-iteration-count);
|
||||
@include animation-properties((animation-iteration-count: $count));
|
||||
}
|
||||
|
||||
// Apply any number of animation directions.
|
||||
@mixin animation-direction($direction...) {
|
||||
$direction: set-arglist-default($direction, $default-animation-direction);
|
||||
@include animation-properties((animation-direction: $direction));
|
||||
}
|
||||
|
||||
// Apply any number of animation fill modes.
|
||||
@mixin animation-fill-mode($mode...) {
|
||||
$mode: set-arglist-default($mode, $default-animation-fill-mode);
|
||||
@include animation-properties((animation-fill-mode: $mode));
|
||||
}
|
||||
|
||||
// Apply any number of animation play states.
|
||||
@mixin animation-play-state($state...) {
|
||||
$state: set-arglist-default($state, $default-animation-play-state);
|
||||
@include animation-properties((animation-play-state: $state));
|
||||
}
|
||||
|
||||
// @private
|
||||
@function default-animation() {
|
||||
@return compact($default-animation-name
|
||||
$default-animation-duration
|
||||
$default-animation-timing-function
|
||||
$default-animation-delay
|
||||
$default-animation-iteration-count
|
||||
$default-animation-direction
|
||||
$default-animation-fill-mode
|
||||
$default-animation-play-state);
|
||||
}
|
||||
|
||||
// Shortcut to apply any number of animations to an element, with all the settings.
|
||||
//
|
||||
// $animation... : Name and settings. [<values> | default]
|
||||
@mixin animation($animation...) {
|
||||
$animation: if(length($animation) > 0, $animation, default-animation());
|
||||
@include animation-properties((animation: $animation));
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// Appearance
|
||||
@import "compass/support";
|
||||
|
||||
// Change the appearance for Mozilla, Webkit and possibly the future.
|
||||
// The appearance property is currently not present in any newer CSS specification.
|
||||
//
|
||||
// There is no official list of accepted values, but you might check these source:
|
||||
//
|
||||
// * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance)
|
||||
// * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365)
|
||||
// (search for 'appearance' within the page)
|
||||
@mixin appearance($appearance) {
|
||||
// There is no caniuse tracking for appearance.
|
||||
$appearance: unquote($appearance);
|
||||
@include with-prefix(-moz) { -moz-appearance: $appearance; }
|
||||
@include with-prefix(-webkit) { -webkit-appearance: $appearance; }
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// Background Clip
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
|
||||
$background-clip-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// The default border-box model: [border-box | padding-box | content-box]
|
||||
$default-background-clip: padding-box !default;
|
||||
|
||||
|
||||
// Clip the background (image and color) at the edge of the padding, border, or content.
|
||||
// $clip... : [padding-box | border-box | content-box]
|
||||
@mixin background-clip($clip...) {
|
||||
$output: ();
|
||||
$deprecated: ();
|
||||
|
||||
@if (length($clip) > 0) {
|
||||
@each $layer in $clip {
|
||||
$output: append($output, unquote($layer), comma);
|
||||
$deprecated: append($deprecated, legacy-box($layer), comma);
|
||||
}
|
||||
} @else {
|
||||
$output: $default-background-clip;
|
||||
$deprecated: legacy-box($default-background-clip);
|
||||
}
|
||||
|
||||
@include with-each-prefix(background-img-opts, $background-clip-support-threshold) {
|
||||
@if $current-prefix == -moz or $current-prefix == -webkit {
|
||||
// Legacy versions of Mozilla support a different syntax, prefixed.
|
||||
@include prefix-prop(background-clip, $deprecated);
|
||||
} @else {
|
||||
@include prefix-prop(background-clip, $output);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// Background Origin
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-origin support. Defaults to `$critical-usage-threshold`
|
||||
$background-origin-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// The default background-origin: [border-box | padding-box | content-box]
|
||||
$default-background-origin: content-box !default;
|
||||
|
||||
|
||||
// Set the origin of the background (image and color) at the edge of the padding, border, or content.
|
||||
//
|
||||
// $origin... : [padding-box | border-box | content-box]
|
||||
@mixin background-origin($origin...) {
|
||||
$output: ();
|
||||
$deprecated: ();
|
||||
|
||||
@if (length($origin) > 0) {
|
||||
@each $layer in $origin {
|
||||
$output: append($output, unquote($layer), comma);
|
||||
$deprecated: append($deprecated, legacy-box($layer), comma);
|
||||
}
|
||||
} @else {
|
||||
$output: $default-background-origin;
|
||||
$deprecated: legacy-box($default-background-origin);
|
||||
}
|
||||
|
||||
@include with-each-prefix(background-img-opts, $background-origin-threshold) {
|
||||
@if $current-prefix == -moz or $current-prefix == -webkit {
|
||||
// Legacy versions of Mozilla support a different syntax, prefixed.
|
||||
@include prefix-prop(background-origin, $deprecated)
|
||||
} @else {
|
||||
@include prefix-prop(background-origin, $output)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// Background Size
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
|
||||
$background-size-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// override to change the default
|
||||
$default-background-size: 100% auto !default;
|
||||
|
||||
|
||||
// Set the size of background images using px, width and height, or percentages.
|
||||
// Currently supported in: Opera, Gecko, Webkit.
|
||||
//
|
||||
// * percentages are relative to the background-origin (default = padding-box)
|
||||
// * mixin defaults to: `$default-background-size`
|
||||
@mixin background-size($size...) {
|
||||
$size: set-arglist-default($size, $default-background-size);
|
||||
@include prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size));
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
// Border Radius
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
|
||||
// The the user threshold for border-radius support. Defaults to `$graceful-usage-threshold`
|
||||
$border-radius-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// The length of a border-radius to be used by default.
|
||||
$default-border-radius: 5px !default;
|
||||
|
||||
|
||||
// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
|
||||
//
|
||||
// When two values are passed, the first is the horizontal radius
|
||||
// and the second is the vertical radius.
|
||||
//
|
||||
// Note: webkit does not support shorthand syntax for several corners at once.
|
||||
// So in the case where you pass several values only the first will be passed to webkit.
|
||||
//
|
||||
// Examples:
|
||||
//
|
||||
// .simple { @include border-radius(4px, 4px); }
|
||||
// .compound { @include border-radius(2px 5px, 3px 6px); }
|
||||
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// .simple {
|
||||
// -moz-border-radius: 4px / 4px;
|
||||
// -webkit-border-radius: 4px 4px;
|
||||
// border-radius: 4px / 4px; }
|
||||
//
|
||||
// .compound {
|
||||
// -moz-border-radius: 2px 5px / 3px 6px;
|
||||
// -webkit-border-radius: 2px 3px;
|
||||
// border-radius: 2px 5px / 3px 6px; }
|
||||
//
|
||||
// .crazy {
|
||||
// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
||||
// -webkit-border-radius: 1px 2px;
|
||||
// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
|
||||
@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
|
||||
@include with-each-prefix(border-radius, $border-radius-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
// Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
|
||||
$legacy-webkit-radius: first-value-of($radius);
|
||||
@if $vertical-radius { $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius)); }
|
||||
@include prefix-prop(border-radius, $legacy-webkit-radius);
|
||||
} @else {
|
||||
// Official syntax for everyone else
|
||||
@include prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Round radius at position by amount.
|
||||
//
|
||||
// * legal values for `$vert`: `top`, `bottom`
|
||||
// * legal values for `$horz`: `left`, `right`
|
||||
@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
|
||||
@include with-each-prefix(border-radius, $border-radius-threshold) {
|
||||
@if $current-prefix == -moz {
|
||||
// Support for mozilla's syntax for specifying a corner
|
||||
@include prefix-prop("border-radius-#{$vert}#{$horz}", $radius);
|
||||
} @else {
|
||||
// Official syntax for everyone else
|
||||
@include prefix-prop("border-#{$vert}-#{$horz}-radius", $radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Round top-left corner only
|
||||
@mixin border-top-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, left, $radius); }
|
||||
|
||||
// Round top-right corner only
|
||||
@mixin border-top-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, right, $radius); }
|
||||
|
||||
// Round bottom-left corner only
|
||||
@mixin border-bottom-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, left, $radius); }
|
||||
|
||||
// Round bottom-right corner only
|
||||
@mixin border-bottom-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, right, $radius); }
|
||||
|
||||
// Round both top corners by amount
|
||||
@mixin border-top-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-top-right-radius($radius); }
|
||||
|
||||
// Round both right corners by amount
|
||||
@mixin border-right-radius($radius: $default-border-radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round both bottom corners by amount
|
||||
@mixin border-bottom-radius($radius: $default-border-radius) {
|
||||
@include border-bottom-left-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round both left corners by amount
|
||||
@mixin border-left-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius); }
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// Box Shadow
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for box-shadow.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$box-shadow-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// The default color for box shadows
|
||||
$default-box-shadow-color: #333333 !default;
|
||||
|
||||
// The default horizontal offset. Positive is to the right.
|
||||
$default-box-shadow-h-offset: 0px !default;
|
||||
|
||||
// The default vertical offset. Positive is down.
|
||||
$default-box-shadow-v-offset: 0px !default;
|
||||
|
||||
// The default blur length.
|
||||
$default-box-shadow-blur: 5px !default;
|
||||
|
||||
// The default spread length.
|
||||
$default-box-shadow-spread: null !default;
|
||||
|
||||
// The default shadow inset: inset or null (for standard shadow).
|
||||
$default-box-shadow-inset: null !default;
|
||||
|
||||
@function default-box-shadow() {
|
||||
@return compact(if($default-box-shadow-inset, inset, null)
|
||||
$default-box-shadow-h-offset
|
||||
$default-box-shadow-v-offset
|
||||
$default-box-shadow-blur
|
||||
$default-box-shadow-spread
|
||||
$default-box-shadow-color);
|
||||
}
|
||||
|
||||
// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows
|
||||
// when one or more box shadows are needed.
|
||||
// Each shadow argument should adhere to the standard css3 syntax
|
||||
// for the box-shadow property.
|
||||
@mixin box-shadow($shadow...) {
|
||||
$shadow: set-arglist-default($shadow, default-box-shadow());
|
||||
@include prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow));
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
|
||||
// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
||||
@mixin single-box-shadow(
|
||||
$hoff : null,
|
||||
$voff : null,
|
||||
$blur : null,
|
||||
$spread : null,
|
||||
$color : null,
|
||||
$inset : $default-box-shadow-inset
|
||||
) {
|
||||
// Handle legacy argument order
|
||||
@if not ($hoff == none or $hoff == null) and type-of($hoff) != number {
|
||||
@warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st.";
|
||||
$tmp-color: $color;
|
||||
$color: $hoff;
|
||||
$hoff: $voff;
|
||||
$voff: $blur;
|
||||
$blur: $spread;
|
||||
$spread: $tmp-color
|
||||
}
|
||||
|
||||
// Need to set these defaults here instead of the arglist to support the above backwards compat handling
|
||||
@if $hoff == null { $hoff: $default-box-shadow-h-offset; }
|
||||
@if $voff == null { $hoff: $default-box-shadow-v-offset; }
|
||||
@if $blur == null { $blur: $default-box-shadow-blur; }
|
||||
@if $spread == null { $spread: $default-box-shadow-spread; }
|
||||
@if $color == null { $color: $default-box-shadow-color; }
|
||||
|
||||
@if not ($inset == true or $inset == false or $inset == null or $inset == inset) {
|
||||
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
||||
}
|
||||
|
||||
@if $hoff == none {
|
||||
@include box-shadow(none);
|
||||
} @else {
|
||||
$full : $hoff $voff;
|
||||
@if $blur { $full: $full $blur; }
|
||||
@if $spread { $full: $full $spread; }
|
||||
@if $color { $full: $full $color; }
|
||||
@if $inset { $full: inset $full; }
|
||||
@include box-shadow($full);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// Box Sizing
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for box-sizing.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$box-sizing-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ]
|
||||
//
|
||||
// The browser default is content-box, compass defaults to border-box.
|
||||
$default-box-sizing: border-box !default;
|
||||
|
||||
|
||||
// Change the box model for Mozilla, Webkit, IE8 and the future
|
||||
//
|
||||
// $box-model: [ content-box | border-box | padding-box ]
|
||||
@mixin box-sizing($box-model: $default-box-sizing) {
|
||||
$box-model: unquote($box-model);
|
||||
@include prefixed-properties(css3-boxsizing, $box-sizing-support-threshold, (box-sizing: $box-model));
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
// Flexible Box
|
||||
@import "deprecated-support";
|
||||
|
||||
@warn "The compass/css3/box module is DEPRECATED and will be removed in the next release. Please use compass/css3/flexbox instead.";
|
||||
|
||||
// @private css3-feature-support variables must always include a list of five boolean values
|
||||
$legacy-box-support: -moz, -webkit, not -o, -ms, not -khtml;
|
||||
|
||||
// Default box orientation, assuming that the user wants something less block-like
|
||||
$default-box-orient : horizontal !default;
|
||||
|
||||
// Default box-align
|
||||
$default-box-align : stretch !default;
|
||||
|
||||
// Default box flex
|
||||
$default-box-flex : 0 !default;
|
||||
|
||||
// Default flex group
|
||||
$default-box-flex-group : 1 !default;
|
||||
|
||||
// Box direction default value
|
||||
$default-box-direction : normal !default;
|
||||
|
||||
// Default ordinal group
|
||||
$default-box-ordinal-group : 1 !default;
|
||||
|
||||
// Default box lines
|
||||
$default-box-lines : single !default;
|
||||
|
||||
// Default box pack
|
||||
$default-box-pack : start !default;
|
||||
|
||||
|
||||
// Apply 'display:box;' to an element.
|
||||
// - must be used for any of the other flexbox mixins to work properly
|
||||
@mixin display-box {
|
||||
@include experimental-value(display, box, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
|
||||
@mixin box-orient($orientation: $default-box-orient) {
|
||||
$orientation : unquote($orientation);
|
||||
@include experimental(box-orient, $orientation, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box align [ start | end | center | baseline | stretch ]
|
||||
@mixin box-align($alignment: $default-box-align) {
|
||||
$alignment : unquote($alignment);
|
||||
@include experimental(box-align, $alignment, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for box flex. Apply this to the children inside the box.
|
||||
//
|
||||
// For example: "div.display-box > div.child-box" would get the box flex mixin.
|
||||
@mixin box-flex($flex: $default-box-flex) {
|
||||
@include experimental(box-flex, $flex, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for flexible grouping
|
||||
@mixin box-flex-group($group: $default-box-flex-group) {
|
||||
@include experimental(box-flex-group, $group, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for ordinal grouping and rearranging the order
|
||||
@mixin box-ordinal-group($group: $default-box-ordinal-group) {
|
||||
@include experimental(box-ordinal-group, $group, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box direction [ normal | reverse | inherit ]
|
||||
@mixin box-direction($direction: $default-box-direction) {
|
||||
$direction: unquote($direction);
|
||||
@include experimental(box-direction, $direction, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box lines [ single | multiple ]
|
||||
@mixin box-lines($lines: $default-box-lines) {
|
||||
$lines: unquote($lines);
|
||||
@include experimental(box-lines, $lines, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box pack [ start | end | center | justify ]
|
||||
@mixin box-pack($pack: $default-box-pack) {
|
||||
$pack: unquote($pack);
|
||||
@include experimental(box-pack, $pack, $legacy-box-support...);
|
||||
}
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
// Columns
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for columns.
|
||||
// Defaults to the $critical-usage-threshold.
|
||||
$multicolumn-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// Specify the shorthand `columns` property.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// @include columns(20em 2);
|
||||
@mixin columns($width-and-count) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
columns: $width-and-count
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the number of columns
|
||||
@mixin column-count($count) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-count: $count
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the gap between columns e.g. `20px`
|
||||
@mixin column-gap($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-gap: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the width of columns e.g. `100px`
|
||||
@mixin column-width($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-width: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify how many columns an element should span across.
|
||||
//
|
||||
// * legal values are 1, all
|
||||
@mixin column-span($columns) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-span: $columns
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the width of the rule between columns e.g. `1px`
|
||||
@mixin column-rule-width($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-width: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the style of the rule between columns e.g. `dotted`.
|
||||
// This works like border-style.
|
||||
@mixin column-rule-style($style) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-style: $style
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the color of the rule between columns e.g. `blue`.
|
||||
// This works like border-color.
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-color: $color
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin encompassing all column rule properties
|
||||
// For example:
|
||||
//
|
||||
// @include column-rule(1px, solid, #c00)
|
||||
//
|
||||
// Or the values can be space separated:
|
||||
//
|
||||
// @include column-rule(1px solid #c00)
|
||||
@mixin column-rule($width, $style: null, $color: null) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-rule: $width $style $color
|
||||
));
|
||||
}
|
||||
|
||||
// All-purpose mixin for setting column breaks.
|
||||
//
|
||||
// * legal values for $type : before, after, inside
|
||||
// * legal values for '$value' are dependent on $type
|
||||
// * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
// * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
// * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
|
||||
//
|
||||
// Examples:
|
||||
// h2.before {@include column-break(before, always);}
|
||||
// h2.after {@include column-break(after, always); }
|
||||
// h2.inside {@include column-break(inside); }
|
||||
//
|
||||
// Which generates:
|
||||
// h2.before {
|
||||
// -webkit-column-break-before: always;
|
||||
// break-before: always;}
|
||||
//
|
||||
// h2.after {
|
||||
// -webkit-column-break-after: always;
|
||||
// break-after: always; }
|
||||
//
|
||||
// h2.inside {
|
||||
// -webkit-column-break-inside: auto;
|
||||
// break-inside: auto;}
|
||||
|
||||
@mixin column-break($type: before, $value: auto){
|
||||
@include with-each-prefix(multicolumn, $multicolumn-support-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
// Webkit uses non-standard syntax
|
||||
-webkit-column-break-#{$type}: $value;
|
||||
} @else if $current-prefix == -moz {
|
||||
// Moz uses a different non-standard syntax
|
||||
-moz-page-break-#{$type}: $value;
|
||||
} @else {
|
||||
@include prefix-prop(break-#{$type}, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for setting break-before
|
||||
//
|
||||
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.before {@include break-before(always);}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.before {
|
||||
// -webkit-column-break-before: always;
|
||||
// break-before: always;}
|
||||
@mixin break-before($value: auto){
|
||||
@include column-break(before, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-before($value: auto){
|
||||
@include column-break(before, $value);
|
||||
@warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
|
||||
}
|
||||
|
||||
// Mixin for setting break-after
|
||||
//
|
||||
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.after {@include break-after(always); }
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.after {
|
||||
// -webkit-column-break-after: always;
|
||||
// break-after: always; }
|
||||
@mixin break-after($value: auto){
|
||||
@include column-break(after, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-after($value: auto){
|
||||
@include column-break(after, $value);
|
||||
@warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
|
||||
}
|
||||
|
||||
// Mixin for setting break-inside
|
||||
//
|
||||
// * legal values are auto, avoid, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.inside {@include break-inside();}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.inside {
|
||||
// -webkit-column-break-inside: auto;
|
||||
// break-inside: auto;}
|
||||
@mixin break-inside($value: auto){
|
||||
@include column-break(inside, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-inside($value: auto){
|
||||
@include column-break(inside, $value);
|
||||
@warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
|
||||
}
|
||||
|
||||
// Mixin for setting column-span
|
||||
//
|
||||
// * legal values: none, all
|
||||
//
|
||||
// Example:
|
||||
// h2.span {@include column-span();}
|
||||
@mixin column-span($span: all){
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-span: $span
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin for setting column-fill
|
||||
//
|
||||
// * legal values: auto, balance
|
||||
//
|
||||
// Example:
|
||||
// h2.fill {@include column-fill();}
|
||||
@mixin column-fill($fill: balance){
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-fill: $fill
|
||||
));
|
||||
}
|
||||
|
|
@ -1,272 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// XXX Remove these
|
||||
$experimental-support-for-mozilla: true !default;
|
||||
$experimental-support-for-webkit: true !default;
|
||||
$experimental-support-for-opera: true !default;
|
||||
$experimental-support-for-microsoft: true !default;
|
||||
$experimental-support-for-khtml: false !default;
|
||||
$experimental-support-for-svg: false !default;
|
||||
$legacy-support-for-ie6: true !default;
|
||||
$legacy-support-for-ie7: true !default;
|
||||
$legacy-support-for-ie8: true !default;
|
||||
$legacy-support-for-mozilla: true !default;
|
||||
$legacy-support-for-webkit: true !default;
|
||||
|
||||
// This mixin provides basic support for CSS3 properties and
|
||||
// their corresponding experimental CSS2 properties when
|
||||
// the implementations are identical except for the property
|
||||
// prefix.
|
||||
@mixin experimental($property, $value,
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
|
||||
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
|
||||
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
|
||||
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
|
||||
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
|
||||
@if $official { #{$property} : $value; }
|
||||
}
|
||||
|
||||
// This mixin is a shortcut for applying only a single experimental value
|
||||
@mixin experimental-only-for($property, $value,
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$official : false
|
||||
) {
|
||||
@include experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official);
|
||||
}
|
||||
|
||||
// Same as experimental(), but for cases when the property is the same and the value is vendorized
|
||||
@mixin experimental-value($property, $value,
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
|
||||
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
|
||||
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
|
||||
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
|
||||
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
|
||||
@if $official { #{$property} : #{$value}; }
|
||||
}
|
||||
|
||||
// @private
|
||||
// Check a given support list for support of a particular browser
|
||||
@function supported(
|
||||
$prefix,
|
||||
$support-list
|
||||
) {
|
||||
$keys: moz, webkit, o, ms, khtml, official;
|
||||
$index: index($keys, $prefix);
|
||||
|
||||
@if $index {
|
||||
@if $index == 6 and length($support-list) == 5 {
|
||||
@return official;
|
||||
} @else {
|
||||
@return nth($support-list, $index);
|
||||
}
|
||||
} @else {
|
||||
@warn 'Please pass a valid browser for $prefix: moz, webkit, o, ms, khtml, or official.';
|
||||
}
|
||||
}
|
||||
|
||||
// A debug tool for checking browser support
|
||||
@mixin debug-support-matrix($experimental: true, $ie: true) {
|
||||
@debug #{'$moz-'}$experimental-support-for-mozilla
|
||||
#{'$webkit-'}$experimental-support-for-webkit
|
||||
#{'$opera-'}$experimental-support-for-opera
|
||||
#{'$microsoft-'}$experimental-support-for-microsoft
|
||||
#{'$khtml-'}$experimental-support-for-khtml;
|
||||
@debug #{'$ie6-'}$legacy-support-for-ie6
|
||||
#{'$ie7-'}$legacy-support-for-ie7
|
||||
#{'$ie8-'}$legacy-support-for-ie8;
|
||||
}
|
||||
|
||||
// Capture the current exerimental support settings
|
||||
@function capture-experimental-matrix() {
|
||||
@return $experimental-support-for-mozilla
|
||||
$experimental-support-for-webkit
|
||||
$experimental-support-for-opera
|
||||
$experimental-support-for-microsoft
|
||||
$experimental-support-for-khtml;
|
||||
}
|
||||
|
||||
// Capture the current legacy-ie support settings
|
||||
@function capture-legacy-ie-matrix() {
|
||||
@return $legacy-support-for-ie6
|
||||
$legacy-support-for-ie7
|
||||
$legacy-support-for-ie8;
|
||||
}
|
||||
|
||||
// Capture and store support
|
||||
$experimental-matrix: capture-experimental-matrix();
|
||||
$legacy-ie-matrix: capture-legacy-ie-matrix();
|
||||
|
||||
@mixin capture-experimental-matrix {
|
||||
$experimental-matrix: capture-experimental-matrix();
|
||||
}
|
||||
|
||||
@mixin capture-legacy-ie-matrix {
|
||||
$legacy-ie-matrix: capture-legacy-ie-matrix();
|
||||
}
|
||||
|
||||
@mixin capture-support-matrix {
|
||||
@include capture-experimental-matrix;
|
||||
@include capture-legacy-ie-matrix;
|
||||
}
|
||||
|
||||
// Change the experimental-support settings in specific contexts.
|
||||
@mixin set-experimental-support(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false
|
||||
) {
|
||||
$experimental-support-for-mozilla : $moz;
|
||||
$experimental-support-for-webkit : $webkit;
|
||||
$experimental-support-for-opera : $o;
|
||||
$experimental-support-for-microsoft : $ms;
|
||||
$experimental-support-for-khtml : $khtml;
|
||||
}
|
||||
|
||||
@mixin capture-and-set-experimental(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false
|
||||
) {
|
||||
@include capture-experimental-matrix;
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
}
|
||||
|
||||
@mixin capture-and-adjust-experimental(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml
|
||||
) {
|
||||
@include capture-experimental-matrix;
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
}
|
||||
|
||||
// Change the legacy-support-for-ie* settings in specific contexts.
|
||||
@mixin set-legacy-ie-support(
|
||||
$ie6: false,
|
||||
$ie7: false,
|
||||
$ie8: false
|
||||
) {
|
||||
$legacy-support-for-ie6: $ie6;
|
||||
$legacy-support-for-ie7: $ie7;
|
||||
$legacy-support-for-ie8: $ie8;
|
||||
}
|
||||
|
||||
@mixin capture-and-set-legacy-ie(
|
||||
$ie6: false,
|
||||
$ie7: false,
|
||||
$ie8: false
|
||||
) {
|
||||
@include capture-legacy-ie-matrix;
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
@mixin capture-and-adjust-legacy-ie(
|
||||
$ie6: $legacy-support-for-ie6,
|
||||
$ie7: $legacy-support-for-ie7,
|
||||
$ie8: $legacy-support-for-ie8
|
||||
) {
|
||||
@include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
// Capture current browser support matrix, and set a new matrix of support.
|
||||
@mixin capture-and-set-support(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$ie6 : false,
|
||||
$ie7 : false,
|
||||
$ie8 : false
|
||||
) {
|
||||
// Capture the current state
|
||||
@include capture-support-matrix;
|
||||
|
||||
// Change support settings
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
// Capture current browser support matrix, and set a new matrix of support.
|
||||
@mixin capture-and-adjust-support(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$ie6 : $legacy-support-for-ie6,
|
||||
$ie7 : $legacy-support-for-ie7,
|
||||
$ie8 : $legacy-support-for-ie8
|
||||
) {
|
||||
@include capture-and-set-support($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
|
||||
// This mixin allows you to change the experimental support settings for
|
||||
// child (@content) styles.
|
||||
@mixin with-only-support-for(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$ie6 : false,
|
||||
$ie7 : false,
|
||||
$ie8 : false
|
||||
) {
|
||||
// Capture current state
|
||||
$wo-experimental-matrix : capture-experimental-matrix();
|
||||
$wo-legacy-ie-matrix : capture-legacy-ie-matrix();
|
||||
|
||||
// Set new states
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
|
||||
// Apply styles
|
||||
@content;
|
||||
|
||||
// Return to original support settings
|
||||
@include set-experimental-support($wo-experimental-matrix...);
|
||||
@include set-legacy-ie-support($wo-legacy-ie-matrix...);
|
||||
}
|
||||
|
||||
// This mixin is a shortcut for making slight adjustments to browser support
|
||||
// for child (@content) styles
|
||||
@mixin adjust-support-for(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$ie6 : $legacy-support-for-ie6,
|
||||
$ie7 : $legacy-support-for-ie7,
|
||||
$ie8 : $legacy-support-for-ie8
|
||||
) {
|
||||
@include with-only-support-for($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
// Filter
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for css filter effects.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$filter-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Provides cross-browser support for the upcoming (?) css3 filter property.
|
||||
//
|
||||
// The filter argument should adhere to the standard css3 syntax
|
||||
// for the filter property.
|
||||
@mixin filter($filters) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter: $filters
|
||||
));
|
||||
}
|
||||
|
||||
// @private Apply filter-margins
|
||||
@mixin apply-filter-margin($position, $width) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter-margin-#{$position}: $width
|
||||
));
|
||||
}
|
||||
|
||||
// filter-margin-top
|
||||
@mixin filter-margin-top($width) { @include apply-filter-margin(top, $width); }
|
||||
|
||||
// filter-margin-right
|
||||
@mixin filter-margin-right($width) { @include apply-filter-margin(right, $width); }
|
||||
|
||||
// filter-margin-bottom
|
||||
@mixin filter-margin-bottom($width) { @include apply-filter-margin(bottom, $width); }
|
||||
|
||||
// filter-margin-left
|
||||
@mixin filter-margin-left($width) { @include apply-filter-margin(left, $width); }
|
||||
|
||||
// filter-margin
|
||||
@mixin filter-margin($widths) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter-margin: $widths
|
||||
));
|
||||
}
|
||||
|
||||
// color-interpolation-filters (auto | sRGB | linearRGB )
|
||||
@mixin color-interpolation-filters($value) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
color-interpolation-filters: $value
|
||||
));
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
// There are two ways to use the flexbox module.
|
||||
// If you're using the final version of the spec,
|
||||
// you can use the property mixins as elsewhere in
|
||||
// the css3 module.
|
||||
//
|
||||
// You can also use the flexbox prefixing mixin `flexbox`.
|
||||
// This mixin takes an optional `$version` argument which
|
||||
// allows you to specify which spec version the properties
|
||||
// are using so that they will be prefixed correctly.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// .flex-column {
|
||||
// /* For flexbox spec v1 */
|
||||
// @include flexbox((
|
||||
// display: box,
|
||||
// box-orient: vertical,
|
||||
// ), $version: 1);
|
||||
//
|
||||
// /* For flexbox spec v2 */
|
||||
// @include flexbox((
|
||||
// display: flexbox,
|
||||
// flex-direction: column,
|
||||
// ), $version: 2);
|
||||
//
|
||||
// /* Latest Spec */
|
||||
// @include flexbox((
|
||||
// display: flex,
|
||||
// flex-direction: column,
|
||||
// ));
|
||||
// }
|
||||
//
|
||||
// Which compiles to:
|
||||
//
|
||||
// .flex-row {
|
||||
// /* For flexbox spec v1 */
|
||||
// display: -moz-box;
|
||||
// -moz-box-orient: vertical;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
//
|
||||
// /* For flexbox spec v2 */
|
||||
// display: -ms-flexbox;
|
||||
// -ms-flex-direction: column;
|
||||
//
|
||||
// /* Latest Spec */
|
||||
// display: -webkit-flex;
|
||||
// -webkit-flex-direction: column;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
$flexbox-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// @private
|
||||
$flexbox-capability-options: (
|
||||
(full-support: true),
|
||||
(partial-support: true, spec-versions: 3)
|
||||
);
|
||||
|
||||
// This is the underlying implementation for all the other mixins in this module.
|
||||
// It is the only way to access prefix support for older versions of the spec.
|
||||
//
|
||||
// `$properties`: map of property-value pairs that should be prefixed
|
||||
|
||||
// `$version1: the version of the spec to use when considering what prefix
|
||||
// to appply. Defaults to the most recent (spec version 3). Only the most
|
||||
// recent version of the spec outputs an unprefixed version.
|
||||
@mixin flexbox($properties, $version: null) {
|
||||
$capability-options: $flexbox-capability-options;
|
||||
@if $version {
|
||||
$capability-options: (partial-support: true, spec-versions: $version);
|
||||
}
|
||||
|
||||
@include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
|
||||
// Don't output unprefixed versions when the spec version is not the final version
|
||||
@if $version and $current-prefix or not $version or $version == 3 {
|
||||
@each $prop, $value in $properties {
|
||||
@if $prop == display {
|
||||
display: prefix-identifier($value);
|
||||
} @else {
|
||||
@include prefix-prop($prop, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Values for $display are: flex (default), inline-flex
|
||||
@mixin display-flex($display: flex) {
|
||||
@include flexbox((display: $display));
|
||||
}
|
||||
|
||||
// Values: row | row-reverse | column | column-reverse
|
||||
@mixin flex-direction($direction) {
|
||||
@include flexbox((flex-direction: $direction));
|
||||
}
|
||||
|
||||
// Values: nowrap | wrap | wrap-reverse
|
||||
@mixin flex-wrap($wrap) {
|
||||
@include flexbox((flex-wrap: $wrap));
|
||||
}
|
||||
|
||||
// Shorthand for flex-direction and flex-wrap.
|
||||
@mixin flex-flow($flow) {
|
||||
@include flexbox((flex-flow: $flow));
|
||||
}
|
||||
|
||||
// Accepts an integer
|
||||
@mixin order($order) {
|
||||
@include flexbox((order: $order));
|
||||
}
|
||||
|
||||
// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
|
||||
// Space separated, in that order.
|
||||
@mixin flex($flex) {
|
||||
@include flexbox((flex: $flex));
|
||||
}
|
||||
|
||||
// Accepts a number.
|
||||
@mixin flex-grow($flex-grow) {
|
||||
@include flexbox((flex-grow: $flex-grow));
|
||||
}
|
||||
|
||||
// Accepts a number.
|
||||
@mixin flex-shrink($flex-shrink) {
|
||||
@include flexbox((flex-shrink: $flex-shrink));
|
||||
}
|
||||
|
||||
// Accepts any legal value for the width property.
|
||||
@mixin flex-basis($flex-basis) {
|
||||
@include flexbox((flex-basis: $flex-basis));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | space-between | space-around
|
||||
@mixin justify-content($justify-content) {
|
||||
@include flexbox((justify-content: $justify-content));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | baseline | stretch
|
||||
@mixin align-items($align-items) {
|
||||
@include flexbox((align-items: $align-items));
|
||||
}
|
||||
|
||||
// Legal values: auto | flex-start | flex-end | center | baseline | stretch
|
||||
@mixin align-self($align-self) {
|
||||
@include flexbox((align-self: $align-self));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
|
||||
@mixin align-content($align-content) {
|
||||
@include flexbox((align-content: $align-content));
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
|
||||
//
|
||||
// * $name is required, arbitrary, and what you will use in font stacks.
|
||||
// * $font-files is required using font-files('relative/location', 'format').
|
||||
// for best results use this order: woff, opentype/truetype, svg
|
||||
// * $eot is required by IE, and is a relative location of the eot file.
|
||||
// * $weight shows if the font is bold, defaults to normal
|
||||
// * $style defaults to normal, might be also italic
|
||||
// * For android 2.2 Compatiblity, please ensure that your web page has
|
||||
// a meta viewport tag.
|
||||
// * To support iOS < 4.2, an SVG file must be provided
|
||||
//
|
||||
// If you need to generate other formats check out the Font Squirrel
|
||||
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
||||
//
|
||||
|
||||
// In order to refer to a specific style of the font in your stylesheets as
|
||||
// e.g. "font-style: italic;", you may add a couple of @font-face includes
|
||||
// containing the respective font files for each style and specying
|
||||
// respective the $style parameter.
|
||||
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
|
||||
@mixin font-face(
|
||||
$name,
|
||||
$font-files,
|
||||
$eot: false,
|
||||
$weight: false,
|
||||
$style: false
|
||||
) {
|
||||
$iefont: unquote("#{$eot}?#iefix");
|
||||
@font-face {
|
||||
font-family: quote($name);
|
||||
@if $eot {
|
||||
src: font-url($eot);
|
||||
$font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
|
||||
}
|
||||
src: $font-files;
|
||||
@if $weight {
|
||||
font-weight: $weight;
|
||||
}
|
||||
@if $style {
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
// Mixins to support specific CSS Text Level 3 elements
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for hyphens support.
|
||||
// Defaults to `$graceful-usage-threshold`.
|
||||
$hyphens-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Mixin for word-break properties
|
||||
// http://www.w3.org/css3-text/#word-break
|
||||
// * legal values for $type : normal, keep-all, break-all
|
||||
//
|
||||
// Example:
|
||||
// p.wordBreak {@include word-break(break-all);}
|
||||
//
|
||||
// Which generates:
|
||||
// p.wordBreak {
|
||||
// word-break: break-all;
|
||||
// word-break: break-word;}
|
||||
//
|
||||
@mixin word-break($value: normal){
|
||||
word-break: $value;
|
||||
@if $value == break-all {
|
||||
//Webkit handles break-all differently... as break-word
|
||||
@include with-prefix(-webkit) {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for the hyphens property
|
||||
//
|
||||
// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
|
||||
// * legal values for $type : auto, manual, none
|
||||
//
|
||||
// Example:
|
||||
// p {
|
||||
// @include hyphens(auto);}
|
||||
// Which generates:
|
||||
// p {
|
||||
// -moz-hyphens: auto;
|
||||
// -webkit-hyphens: auto;
|
||||
// hyphens: auto;}
|
||||
//
|
||||
@mixin hyphens($value: auto){
|
||||
@include prefixed-properties(css-hyphens, $hyphens-support-threshold, (
|
||||
hyphens: $value
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin for x-browser hyphenation based on @auchenberg's post:
|
||||
// Removes the need for the <wbr/> HTML tag
|
||||
// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
|
||||
//
|
||||
// Example:
|
||||
// div {@include hyphenation;}
|
||||
//
|
||||
// Which generates:
|
||||
// div {
|
||||
// -ms-word-break: break-all;
|
||||
// word-break: break-all;
|
||||
// word-break: break-word;
|
||||
// -moz-hyphens: auto;
|
||||
// -webkit-hyphens: auto;
|
||||
// hyphens: auto;}
|
||||
//
|
||||
@mixin hyphenation {
|
||||
@include word-break(break-all);
|
||||
@include hyphens;
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
@import "compass/support";
|
||||
@import "compass/utilities/general/hacks";
|
||||
|
||||
$gradient-support-threshold: $graceful-usage-threshold !default;
|
||||
$svg-gradient-shim-threshold: $graceful-usage-threshold !default;
|
||||
$border-image-support-threshold: $graceful-usage-threshold !default;
|
||||
$owg-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Compass assumes you will use the official gradient syntax,
|
||||
// unless otherwise instructed.
|
||||
$use-legacy-gradient-syntax: false !default;
|
||||
|
||||
// Create a linear gradient using standard official or legacy syntax.
|
||||
// This function must be included in one of the following
|
||||
// image module mixins to work properly.
|
||||
@function linear-gradient($angle, $details...) {
|
||||
$legacy-syntax: $use-legacy-gradient-syntax;
|
||||
|
||||
@if type-of($angle) != 'number' {
|
||||
$angle: compact($angle);
|
||||
$legacy-syntax: if(index($angle, 'to'), false, true);
|
||||
}
|
||||
|
||||
@if $legacy-syntax {
|
||||
@return _linear-gradient_legacy($angle, $details...);
|
||||
} @else {
|
||||
@return _linear-gradient($angle, $details...);
|
||||
}
|
||||
}
|
||||
|
||||
// These browsers support svg but not gradients
|
||||
// so we can shim the gradient with an inline svg file.
|
||||
$browsers-supporting-svg-but-not-gradients: (ie: "9", opera: "9.5-9.6");
|
||||
|
||||
// These browsers require the old webkit gradient syntax
|
||||
$browsers-supporting-old-webkit-gradients: (android: ("2.1", "3"));
|
||||
|
||||
@mixin each-gradient-prefix($values) {
|
||||
@if prefixed(-svg, $values) {
|
||||
@include for-legacy-browsers($browsers-supporting-svg-but-not-gradients,
|
||||
$svg-gradient-shim-threshold)
|
||||
{
|
||||
@include with-prefix(-svg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if prefixed(-owg, $values) {
|
||||
@include for-legacy-browsers($browsers-supporting-old-webkit-gradients,
|
||||
$owg-threshold)
|
||||
{
|
||||
@include with-prefix(-owg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include with-each-prefix(css-gradients, $gradient-support-threshold) {
|
||||
@if $current-prefix {
|
||||
@if prefixed($current-prefix, $values) {
|
||||
@content;
|
||||
} @else if $debug-browser-support {
|
||||
/* There is not a value that needs to be prefixed with #{$current-prefix} in: #{$values} */
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin image-property($property, $values...) {
|
||||
@include each-gradient-prefix($values) {
|
||||
@if $current-prefix {
|
||||
#{$property}: prefix($current-prefix, $values);
|
||||
} @else {
|
||||
#{$property}: $values;
|
||||
}
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Background property support for vendor prefixing within values.
|
||||
@mixin background($backgrounds...) {
|
||||
@include image-property(background, $backgrounds...);
|
||||
}
|
||||
|
||||
// Set any number of background layers, along with a fallback.
|
||||
// The final argument will be output separately, first, as a css2 fallback.
|
||||
@mixin background-with-css2-fallback($backgrounds...) {
|
||||
@if length($backgrounds) > 1 or prefixed(-css2, $backgrounds) {
|
||||
background: -css2(nth($backgrounds, -1));
|
||||
}
|
||||
@include background($backgrounds...);
|
||||
}
|
||||
|
||||
|
||||
// Background image property support for vendor prefixing within values.
|
||||
@mixin background-image($images...) {
|
||||
@include image-property(background-image, $images...) {
|
||||
@if $current-prefix == -svg {
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Emit a IE-Specific filters that renders a simple linear gradient.
|
||||
// For use in IE 6 - 8. Best practice would have you apply this via a
|
||||
// conditional IE stylesheet, but if you must, you should place this before
|
||||
// any background-image properties that you have specified.
|
||||
//
|
||||
// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
|
||||
@mixin filter-gradient(
|
||||
$start-color,
|
||||
$end-color,
|
||||
$orientation: vertical
|
||||
) {
|
||||
@include for-legacy-browsers((ie: "8"), $gradient-support-threshold) {
|
||||
@include has-layout;
|
||||
$gradient-type: if($orientation == vertical, 0, 1);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border image property support for vendor prefixing properties and values.
|
||||
@mixin border-image($value) {
|
||||
@include with-each-prefix(border-image, $border-image-support-threshold) {
|
||||
$border-prefix: $current-prefix;
|
||||
@include each-gradient-prefix($value) {
|
||||
@if $current-prefix and prefixed($current-prefix, $value) {
|
||||
$legacy-value: reject($value, fill);
|
||||
@include prefix-prop(border-image, prefix($current-prefix, $legacy-value), $prefix: $border-prefix);
|
||||
} @else {
|
||||
@include prefix-prop(border-image, $value, $prefix: $border-prefix);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List style image property support for vendor prefixing within values.
|
||||
@mixin list-style-image($image) {
|
||||
@include image-property(list-style-image, $image);
|
||||
}
|
||||
|
||||
// List style property support for vendor prefixing within values.
|
||||
@mixin list-style($value) {
|
||||
@include image-property(list-style, $value);
|
||||
}
|
||||
|
||||
// content property support for vendor prefixing within values.
|
||||
@mixin content($value) {
|
||||
@include image-property(content, $value);
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// The legacy support for inline-block.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$inline-block-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Set `$inline-block-alignment` to `none` or `false` to disable the output
|
||||
// of a vertical-align property in the inline-block mixin.
|
||||
// Or set it to a legal value for `vertical-align` to change the default.
|
||||
$inline-block-alignment: middle !default;
|
||||
|
||||
// Provides a cross-browser method to implement `display: inline-block;`
|
||||
@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
|
||||
// legacy support for VERY old firefox
|
||||
@if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold) {
|
||||
display: -moz-inline-stack;
|
||||
}
|
||||
// standard
|
||||
display: inline-block;
|
||||
@if $alignment and $alignment != none {
|
||||
vertical-align: $alignment;
|
||||
}
|
||||
// legacy IE support
|
||||
@if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold) {
|
||||
@if $ie-alignment and $ie-alignment != none {
|
||||
*vertical-align: $ie-alignment;
|
||||
}
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// The support usage threshold for opacity. Defaults to the global
|
||||
// threshold for graceful degradation.
|
||||
$opacity-usage-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
|
||||
//
|
||||
// @param $opacity
|
||||
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
@include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) {
|
||||
@if $opacity == 1 {
|
||||
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)");
|
||||
} @else {
|
||||
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
|
||||
}
|
||||
}
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
// Make an element completely transparent.
|
||||
@mixin transparent { @include opacity(0); }
|
||||
|
||||
// Make an element completely opaque.
|
||||
@mixin opaque { @include opacity(1); }
|
||||
|
|
@ -1 +0,0 @@
|
|||
@warn "Support for CSS3Pie has been removed.";
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// Regions
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for css regions.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$regions-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
|
||||
//
|
||||
// $target is a value you use to link two regions of your css.
|
||||
// Give the source of your content the flow-into property,
|
||||
// and give your target container the flow-from property.
|
||||
//
|
||||
// For a visual explanation, see the diagrams at Chris Coyier's
|
||||
// [CSS-Tricks](http://css-tricks.com/content-folding/)
|
||||
|
||||
@mixin flow-into($target) {
|
||||
$target: unquote($target);
|
||||
@include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target));
|
||||
}
|
||||
|
||||
@mixin flow-from($target) {
|
||||
$target: unquote($target);
|
||||
@include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target));
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@import "compass/support";
|
||||
@import "compass/utilities/color";
|
||||
|
||||
// The prefixed support threshold for ::selection.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$selection-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Style selected text.
|
||||
//
|
||||
// At this time, only two CSS properties are supported in most browsers
|
||||
// during selection: color and background-color. Firefox supports the
|
||||
// text-shadow property.
|
||||
//
|
||||
// At the stylesheet root, include the mixin within the * selector.
|
||||
//
|
||||
// * {
|
||||
// @include selection(#fe57a1, #fff)
|
||||
// }
|
||||
//
|
||||
// If a specific element or selector's selection is being styled
|
||||
// you can use that selector instead. For example:
|
||||
//
|
||||
// .hot-pink {
|
||||
// @include selection(#fe57a1, #fff)
|
||||
// }
|
||||
//
|
||||
// These properties can be passed as arguments or you can set them via mixin
|
||||
// content.
|
||||
//
|
||||
// For future-forward compatibility with other properties and aesthetic freedom,
|
||||
// a mixin content block can be passed to this mixin in addition to or in place of
|
||||
// passing arguments.
|
||||
//
|
||||
// .hot-pink {
|
||||
// @include selection {
|
||||
// background: #fe57a1;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// When `$background-color` is specified, but `$color` is not, this mixin
|
||||
// styles the foreground color like the [contrasted
|
||||
// mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted). To
|
||||
// specify only the background-color, you should pass an explicit `null` value
|
||||
// for `$color` or use mixin content.
|
||||
@mixin selection($background-color: null, $color: contrast-color($background-color)) {
|
||||
@include with-each-prefix(css-selection, $selection-support-threshold) {
|
||||
$selector: '';
|
||||
@if $current-prefix != null {
|
||||
$selector: $current-prefix + '-';
|
||||
}
|
||||
$selector: "&::#{$selector}selection";
|
||||
#{$selector} {
|
||||
color: $color;
|
||||
background-color: $background-color;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@warn "The compass/css3/shared module has been deprecated.
|
||||
You can silence this warning by importing compass/css3/deprecated-support instead.
|
||||
Please be aware that module will be removed in the next release.";
|
||||
|
||||
@import "deprecated-support";
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
// Text Shadow
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
|
||||
// These defaults make the arguments optional for this mixin
|
||||
// If you like, set different defaults in your project
|
||||
|
||||
$default-text-shadow-color : #aaaaaa !default;
|
||||
$default-text-shadow-h-offset : 0px !default;
|
||||
$default-text-shadow-v-offset : 0px !default;
|
||||
$default-text-shadow-blur : 1px !default;
|
||||
$default-text-shadow-spread : false !default;
|
||||
|
||||
|
||||
// Provides cross-browser text shadows when one or more shadows are needed.
|
||||
// Each shadow argument should adhere to the standard css3 syntax for the
|
||||
// text-shadow property.
|
||||
//
|
||||
// Note: if any shadow has a spread parameter, this will cause the mixin
|
||||
// to emit the shadow declaration twice, first without the spread,
|
||||
// then with the spread included. This allows you to progressively
|
||||
// enhance the browsers that do support the spread parameter.
|
||||
@mixin text-shadow(
|
||||
$shadow...
|
||||
) {
|
||||
$shadow: if(length($shadow) > 0, $shadow, default);
|
||||
$default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
|
||||
$shadows-without-spread: join((),(),comma);
|
||||
$shadows: join((),(),comma);
|
||||
$has-spread: false;
|
||||
|
||||
@each $layer in $shadow {
|
||||
$layer: if($layer == 'default', $default, $layer);
|
||||
@if length($layer) > 4 {
|
||||
$has-spread: true;
|
||||
$shadows-without-spread: append($shadows-without-spread, nth($layer,1) nth($layer,2) nth($layer,3) nth($layer,5));
|
||||
$shadows: append($shadows, $layer);
|
||||
} @else {
|
||||
$shadows-without-spread: append($shadows-without-spread, $layer);
|
||||
$shadows: append($shadows, $layer);
|
||||
}
|
||||
}
|
||||
@if $has-spread {
|
||||
text-shadow: $shadows-without-spread;
|
||||
}
|
||||
text-shadow: $shadows;
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS text shadow.
|
||||
//
|
||||
// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
|
||||
// according to the configuration defaults above.
|
||||
@mixin single-text-shadow(
|
||||
$hoff: false,
|
||||
$voff: false,
|
||||
$blur: false,
|
||||
$spread: false,
|
||||
$color: false
|
||||
) {
|
||||
// A lot of people think the color comes first. It doesn't.
|
||||
@if type-of($hoff) == color {
|
||||
$temp-color: $hoff;
|
||||
$hoff: $voff;
|
||||
$voff: $blur;
|
||||
$blur: $spread;
|
||||
$spread: $color;
|
||||
$color: $temp-color;
|
||||
}
|
||||
// Can't rely on default assignment with multiple supported argument orders.
|
||||
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset);
|
||||
$voff: if($voff, $voff, $default-text-shadow-v-offset);
|
||||
$blur: if($blur, $blur, $default-text-shadow-blur );
|
||||
$spread: if($spread, $spread, $default-text-shadow-spread );
|
||||
$color: if($color, $color, $default-text-shadow-color );
|
||||
// We don't need experimental support for this property.
|
||||
@if $color == none or $hoff == none {
|
||||
@include text-shadow(none);
|
||||
} @else {
|
||||
@include text-shadow(compact($hoff $voff $blur $spread $color));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,590 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// The the user threshold for transform support. Defaults to `$graceful-usage-threshold`
|
||||
$transform-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// @doc off
|
||||
// Note ----------------------------------------------------------------------
|
||||
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
||||
// only in the most recent builds. You should also provide fallback 2d support for
|
||||
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
||||
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
// and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
// 2D: Mozilla, Webkit, Opera, Official
|
||||
// 3D: Webkit, Firefox.
|
||||
|
||||
// Available Transforms ------------------------------------------------------
|
||||
// - Scale (2d and 3d)
|
||||
// - Rotate (2d and 3d)
|
||||
// - Translate (2d and 3d)
|
||||
// - Skew (2d only)
|
||||
|
||||
// Transform Parameters ------------------------------------------------------
|
||||
// - Transform Origin (2d and 3d)
|
||||
// - Perspective (3d)
|
||||
// - Perspective Origin (3d)
|
||||
// - Transform Style (3d)
|
||||
// - Backface Visibility (3d)
|
||||
|
||||
// Mixins --------------------------------------------------------------------
|
||||
// transform-origin
|
||||
// - shortcuts: transform-origin2d, transform-origin3d
|
||||
// - helpers: apply-origin
|
||||
// transform
|
||||
// - shortcuts: transform2d, transform3d
|
||||
// - helpers: simple-transform, create-transform
|
||||
// perspective
|
||||
// - helpers: perspective-origin
|
||||
// transform-style
|
||||
// backface-visibility
|
||||
// scale
|
||||
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
||||
// rotate
|
||||
// - shortcuts: rotateX, rotateY, rotate3d
|
||||
// translate
|
||||
// - shortcuts: translateX, translateY, translateZ, translate3d
|
||||
// skew
|
||||
// - shortcuts: skewX, skewY
|
||||
|
||||
// Defaults ------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// The default x-origin for transforms
|
||||
$default-origin-x : 50% !default;
|
||||
// The default y-origin for transforms
|
||||
$default-origin-y : 50% !default;
|
||||
// The default z-origin for transforms
|
||||
$default-origin-z : 50% !default;
|
||||
|
||||
|
||||
// The default x-multiplier for scaling
|
||||
$default-scale-x : 1.25 !default;
|
||||
// The default y-multiplier for scaling
|
||||
$default-scale-y : $default-scale-x !default;
|
||||
// The default z-multiplier for scaling
|
||||
$default-scale-z : $default-scale-x !default;
|
||||
|
||||
|
||||
// The default angle for rotations
|
||||
$default-rotate : 45deg !default;
|
||||
|
||||
|
||||
// The default x-vector for the axis of 3d rotations
|
||||
$default-vector-x : 1 !default;
|
||||
// The default y-vector for the axis of 3d rotations
|
||||
$default-vector-y : 1 !default;
|
||||
// The default z-vector for the axis of 3d rotations
|
||||
$default-vector-z : 1 !default;
|
||||
|
||||
|
||||
// The default x-length for translations
|
||||
$default-translate-x : 1em !default;
|
||||
// The default y-length for translations
|
||||
$default-translate-y : $default-translate-x !default;
|
||||
// The default z-length for translations
|
||||
$default-translate-z : $default-translate-x !default;
|
||||
|
||||
|
||||
// The default x-angle for skewing
|
||||
$default-skew-x : 5deg !default;
|
||||
// The default y-angle for skewing
|
||||
$default-skew-y : 5deg !default;
|
||||
|
||||
|
||||
// **Transform-origin**
|
||||
// Transform-origin sent as a complete string
|
||||
//
|
||||
// @include apply-origin( origin [, 3D-only ] )
|
||||
//
|
||||
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
||||
// in percentages, absolute (px, cm, in, em etc..) or relative
|
||||
// (left, top, right, bottom, center) units
|
||||
//
|
||||
// @param only3d Set this to true to only apply this
|
||||
// mixin where browsers have 3D support.
|
||||
@mixin apply-origin($origin, $only3d) {
|
||||
$capability: if($only3d or length($origin) > 2, transforms3d, transforms2d);
|
||||
@include prefixed-properties($capability, $transform-support-threshold, (
|
||||
transform-origin: $origin
|
||||
));
|
||||
}
|
||||
|
||||
// Transform-origin sent as individual arguments:
|
||||
//
|
||||
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
||||
//
|
||||
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
||||
//
|
||||
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
||||
@mixin transform-origin(
|
||||
$origin-x: $default-origin-x,
|
||||
$origin-y: $default-origin-y,
|
||||
$origin-z: false,
|
||||
$only3d: if($origin-z, true, false)
|
||||
) {
|
||||
$origin: unquote('');
|
||||
@if $origin-x or $origin-y or $origin-z {
|
||||
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
||||
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
||||
@if $origin-z { $origin: $origin $origin-z; }
|
||||
@include apply-origin($origin, $only3d);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Transform sent as a complete string:
|
||||
//
|
||||
// @include transform( transforms [, 3D-only ] )
|
||||
//
|
||||
// where 'transforms' is a space separated list of all the transforms to be applied.
|
||||
@mixin transform(
|
||||
$transform,
|
||||
$only3d: false
|
||||
) {
|
||||
$capability: if($only3d, transforms3d, transforms2d);
|
||||
@include prefixed-properties($capability, $transform-support-threshold, (
|
||||
transform: $transform
|
||||
));
|
||||
}
|
||||
|
||||
// Shortcut to target all browsers with 2D transform support
|
||||
@mixin transform2d($trans) {
|
||||
@include transform($trans, false);
|
||||
}
|
||||
|
||||
// Shortcut to target only browsers with 3D transform support
|
||||
@mixin transform3d($trans) {
|
||||
@include transform($trans, true);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// 3D Parameters -------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Set the perspective of 3D transforms on the children of an element:
|
||||
//
|
||||
// @include perspective( perspective )
|
||||
//
|
||||
// where 'perspective' is a unitless number representing the depth of the
|
||||
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
|
||||
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
||||
@mixin perspective($p) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
perspective: $p
|
||||
));
|
||||
}
|
||||
|
||||
// Set the origin position for the perspective
|
||||
//
|
||||
// @include perspective-origin(origin-x [origin-y])
|
||||
//
|
||||
// where the two arguments represent x/y coordinates
|
||||
@mixin perspective-origin($origin: 50%) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
perspective-origin: $origin
|
||||
));
|
||||
}
|
||||
|
||||
// Determine whether a 3D objects children also live in the given 3D space
|
||||
//
|
||||
// @include transform-style( [ style ] )
|
||||
//
|
||||
// where `style` can be either `flat` or `preserve-3d`.
|
||||
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
|
||||
@mixin transform-style($style: preserve-3d) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
transform-style: $style
|
||||
));
|
||||
}
|
||||
|
||||
// Determine the visibility of an element when it's back is turned
|
||||
//
|
||||
// @include backface-visibility( [ visibility ] )
|
||||
//
|
||||
// where `visibility` can be either `visible` or `hidden`.
|
||||
// Browsers default to visible, mixin defaults to hidden
|
||||
@mixin backface-visibility($visibility: hidden) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
backface-visibility: $visibility
|
||||
));
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Transform Partials --------------------------------------------------------
|
||||
// These work well on their own, but they don't add to each other, they override.
|
||||
// Use along with transform parameter mixins to adjust origin, perspective and style
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
// Scale ---------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Scale an object along the x and y axis:
|
||||
//
|
||||
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
||||
// and perspective, which works the same as the stand-alone perspective property/mixin
|
||||
// but applies to the individual element (multiplied with any parent perspective)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scale($scale-x, $scale-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the x axis
|
||||
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleX(
|
||||
$scale: $default-scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleX($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the y axis
|
||||
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleY(
|
||||
$scale: $default-scale-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleY($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the z axis
|
||||
// @include scaleZ( [ scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleZ(
|
||||
$scale: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scaleZ($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Scale and object along all three axis
|
||||
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale3d(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $default-scale-y,
|
||||
$scale-z: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Rotate --------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Rotate an object around the z axis (2D)
|
||||
// @include rotate( [ rotation, perspective, 3D-only ] )
|
||||
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: rotate($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// A longcut for 'rotate' in case you forget that 'z' is implied
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateZ(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
@include rotate($rotate, $perspective, $only3d);
|
||||
}
|
||||
|
||||
// Rotate an object around the x axis (3D)
|
||||
// @include rotateX( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateX(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateX($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around the y axis (3D)
|
||||
// @include rotate( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateY(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateY($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around an arbitrary axis (3D)
|
||||
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
||||
// where the 'vector-' arguments accept unitless numbers.
|
||||
// These numbers are not important on their own, but in relation to one another
|
||||
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate3d(
|
||||
$vector-x: $default-vector-x,
|
||||
$vector-y: $default-vector-y,
|
||||
$vector-z: $default-vector-z,
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Translate -----------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Move an object along the x or y axis (2D)
|
||||
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
||||
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translate($translate-x, $translate-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the x axis (2D)
|
||||
// @include translate( [ translate-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateX(
|
||||
$trans-x: $default-translate-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateX($trans-x);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the y axis (2D)
|
||||
// @include translate( [ translate-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateY(
|
||||
$trans-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateY($trans-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the z axis (3D)
|
||||
// @include translate( [ translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateZ(
|
||||
$trans-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translateZ($trans-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Move an object along the x, y and z axis (3D)
|
||||
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate3d(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$translate-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Skew ----------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Skew an element:
|
||||
//
|
||||
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
||||
//
|
||||
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skew(
|
||||
$skew-x: $default-skew-x,
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skew($skew-x, $skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the x axiz
|
||||
//
|
||||
// @include skew( [ skew-x, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewX(
|
||||
$skew-x: $default-skew-x,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewX($skew-x);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the y axis
|
||||
//
|
||||
// @include skew( [ skew-y, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewY(
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewY($skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// Full transform mixins
|
||||
// For settings any combination of transforms as arguments
|
||||
// These are complex and not highly recommended for daily use. They are mainly
|
||||
// here for backward-compatibility purposes.
|
||||
//
|
||||
// * they include origin adjustments
|
||||
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin create-transform(
|
||||
$perspective: false,
|
||||
$scale-x: false,
|
||||
$scale-y: false,
|
||||
$scale-z: false,
|
||||
$rotate-x: false,
|
||||
$rotate-y: false,
|
||||
$rotate-z: false,
|
||||
$rotate3d: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$trans-z: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false,
|
||||
$origin-z: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: unquote("");
|
||||
|
||||
// perspective
|
||||
@if $perspective { $trans: perspective($perspective) ; }
|
||||
|
||||
// scale
|
||||
@if $scale-x and $scale-y {
|
||||
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
||||
@else { $trans: $trans scale($scale-x, $scale-y); }
|
||||
} @else {
|
||||
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
||||
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
||||
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
||||
}
|
||||
|
||||
// rotate
|
||||
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
||||
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
||||
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
||||
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
||||
|
||||
// translate
|
||||
@if $trans-x and $trans-y {
|
||||
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
||||
@else { $trans: $trans translate($trans-x, $trans-y); }
|
||||
} @else {
|
||||
@if $trans-x { $trans: $trans translateX($trans-x); }
|
||||
@if $trans-y { $trans: $trans translateY($trans-y); }
|
||||
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
||||
}
|
||||
|
||||
// skew
|
||||
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
||||
@else {
|
||||
@if $skew-x { $trans: $trans skewX($skew-x); }
|
||||
@if $skew-y { $trans: $trans skewY($skew-y); }
|
||||
}
|
||||
|
||||
// apply it!
|
||||
@include transform($trans, $only3d);
|
||||
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// A simplified set of options
|
||||
// backwards-compatible with the previous version of the 'transform' mixin
|
||||
@mixin simple-transform(
|
||||
$scale: false,
|
||||
$rotate: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false
|
||||
) {
|
||||
@include create-transform(
|
||||
false,
|
||||
$scale, $scale, false,
|
||||
false, false, $rotate, false,
|
||||
$trans-x, $trans-y, false,
|
||||
$skew-x, $skew-y,
|
||||
$origin-x, $origin-y, false,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
@import "compass/support";
|
||||
|
||||
// The the user threshold for transition support. Defaults to `$graceful-usage-threshold`
|
||||
$transition-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// CSS Transitions
|
||||
// Currently only works in Webkit.
|
||||
//
|
||||
// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
|
||||
// * We'll be prepared.
|
||||
//
|
||||
// Including this submodule sets following defaults for the mixins:
|
||||
//
|
||||
// $default-transition-property : all
|
||||
// $default-transition-duration : 1s
|
||||
// $default-transition-function : false
|
||||
// $default-transition-delay : false
|
||||
//
|
||||
// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
|
||||
|
||||
$default-transition-property: all !default;
|
||||
|
||||
$default-transition-duration: 1s !default;
|
||||
|
||||
$default-transition-function: null !default;
|
||||
|
||||
$default-transition-delay: null !default;
|
||||
|
||||
$transitionable-prefixed-values: transform, transform-origin !default;
|
||||
|
||||
|
||||
|
||||
// Checks if the value given is a unit of time.
|
||||
@function is-time($value) {
|
||||
@return if(type-of($value) == number, not not index(s ms, unit($value)), false);
|
||||
}
|
||||
|
||||
// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
|
||||
@function prefixed-for-transition($prefix, $property) {
|
||||
@if not $prefix {
|
||||
@return $property;
|
||||
}
|
||||
@if type-of($property) == list or type-of($property) == arglist {
|
||||
$new-list: comma-list();
|
||||
@each $v in $property {
|
||||
$new-list: append($new-list, prefixed-for-transition($prefix, $v));
|
||||
}
|
||||
@return $new-list;
|
||||
} @else {
|
||||
@if index($transitionable-prefixed-values, $property) {
|
||||
@return #{$prefix}-#{$property};
|
||||
} @else {
|
||||
@return $property;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Returns $transition-map which includes key and values that map to a transition declaration
|
||||
@function transition-map($transition) {
|
||||
$transition-map: ();
|
||||
|
||||
@each $item in $transition {
|
||||
@if is-time($item) {
|
||||
@if map-has-key($transition-map, duration) {
|
||||
$transition-map: map-merge($transition-map, (delay: $item));
|
||||
} @else {
|
||||
$transition-map: map-merge($transition-map, (duration: $item));
|
||||
}
|
||||
} @else if map-has-key($transition-map, property) {
|
||||
$transition-map: map-merge($transition-map, (timing-function: $item));
|
||||
} @else {
|
||||
$transition-map: map-merge($transition-map, (property: $item));
|
||||
}
|
||||
}
|
||||
|
||||
@return $transition-map;
|
||||
}
|
||||
|
||||
// One or more properties to transition
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * also accepts "all" or "none"
|
||||
|
||||
@mixin transition-property($properties...) {
|
||||
$properties: set-arglist-default($properties, $default-transition-property);
|
||||
@include with-each-prefix(css-transitions, $transition-support-threshold) {
|
||||
$props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
|
||||
@include prefix-prop(transition-property, $props);
|
||||
}
|
||||
}
|
||||
|
||||
// One or more durations in seconds
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * these durations will affect the properties in the same list position
|
||||
|
||||
@mixin transition-duration($durations...) {
|
||||
$durations: set-arglist-default($durations, $default-transition-duration);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-duration: $durations
|
||||
));
|
||||
}
|
||||
|
||||
// One or more timing functions
|
||||
//
|
||||
// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
|
||||
// * For multiple, use a comma-delimited list
|
||||
// * These functions will effect the properties in the same list position
|
||||
|
||||
@mixin transition-timing-function($functions...) {
|
||||
$functions: set-arglist-default($functions, $default-transition-function);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-timing-function: $functions
|
||||
));
|
||||
}
|
||||
|
||||
// One or more transition-delays in seconds
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * these delays will effect the properties in the same list position
|
||||
|
||||
@mixin transition-delay($delays...) {
|
||||
$delays: set-arglist-default($delays, $default-transition-delay);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-delay: $delays
|
||||
));
|
||||
}
|
||||
|
||||
// Transition all-in-one shorthand
|
||||
|
||||
@mixin single-transition(
|
||||
$property: $default-transition-property,
|
||||
$duration: $default-transition-duration,
|
||||
$function: $default-transition-function,
|
||||
$delay: $default-transition-delay
|
||||
) {
|
||||
@include transition(compact($property $duration $function $delay));
|
||||
}
|
||||
|
||||
@mixin transition($transitions...) {
|
||||
$default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
|
||||
$transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
|
||||
$transitions: set-arglist-default($transitions, $default);
|
||||
|
||||
|
||||
@include with-each-prefix(css-transitions, $transition-support-threshold) {
|
||||
$delays: comma-list();
|
||||
$transitions-without-delays: comma-list();
|
||||
$transitions-with-delays: comma-list();
|
||||
$has-delays: false;
|
||||
|
||||
|
||||
// This block can be made considerably simpler at the point in time that
|
||||
// we no longer need to deal with the differences in how delays are treated.
|
||||
@each $transition in $transitions {
|
||||
// Declare initial values for transition
|
||||
$transition: transition-map($transition);
|
||||
|
||||
$property: map-get($transition, property);
|
||||
$duration: map-get($transition, duration);
|
||||
$timing-function: map-get($transition, timing-function);
|
||||
$delay: map-get($transition, delay);
|
||||
|
||||
// Parse transition string to assign values into correct variables
|
||||
$has-delays: $has-delays or $delay;
|
||||
|
||||
@if $current-prefix == -webkit {
|
||||
// Keep a list of delays in case one is specified
|
||||
$delays: append($delays, if($delay, $delay, 0s));
|
||||
$transitions-without-delays: append($transitions-without-delays,
|
||||
prefixed-for-transition($current-prefix, $property) $duration $timing-function);
|
||||
} @else {
|
||||
$transitions-with-delays: append($transitions-with-delays,
|
||||
prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
|
||||
}
|
||||
}
|
||||
|
||||
@if $current-prefix == -webkit {
|
||||
@include prefix-prop(transition, $transitions-without-delays);
|
||||
@if $has-delays {
|
||||
@include prefix-prop(transition-delay, $delays);
|
||||
}
|
||||
} @else if $current-prefix {
|
||||
@include prefix-prop(transition, $transitions-with-delays);
|
||||
} @else {
|
||||
transition: $transitions-with-delays;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
// User Interface
|
||||
// This file can be expanded to handle all the user interface properties as
|
||||
// they become available in browsers:
|
||||
// http://www.w3.org/TR/2000/WD-css3-userint-20000216
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for user-select.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$userselect-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// This property controls the selection model and granularity of an element.
|
||||
//
|
||||
// @param $select
|
||||
// [ none | text | toggle | element | elements | all | inherit ]
|
||||
@mixin user-select($select) {
|
||||
$select: unquote($select);
|
||||
|
||||
@include with-each-prefix(user-select-none, $userselect-support-threshold) {
|
||||
// old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
|
||||
// @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
|
||||
@include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
|
||||
}
|
||||
}
|
||||
|
||||
// The prefixed support threshold for input-placeholder.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$input-placeholder-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Style the html5 input placeholder in browsers that support it.
|
||||
//
|
||||
// The styles for the input placeholder are passed as mixin content
|
||||
// and the selector comes from the mixin's context.
|
||||
//
|
||||
// For example:
|
||||
//
|
||||
// #{elements-of-type(text-input)} {
|
||||
// @include input-placeholder {
|
||||
// color: #bfbfbf;
|
||||
// font-style: italic;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// if you want to apply the placeholder styles to all elements supporting
|
||||
// the `input-placeholder` pseudo class (beware of performance impacts):
|
||||
//
|
||||
// * {
|
||||
// @include input-placeholder {
|
||||
// color: #bfbfbf;
|
||||
// font-style: italic;
|
||||
// }
|
||||
// }
|
||||
@mixin input-placeholder {
|
||||
@include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
&::-webkit-input-placeholder { @content; }
|
||||
}
|
||||
@elseif $current-prefix == -moz {
|
||||
// for Firefox 19 and below
|
||||
@if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
|
||||
&:-moz-placeholder { @content; }
|
||||
}
|
||||
// for Firefox 20 and above
|
||||
&::-moz-placeholder { @content; }
|
||||
}
|
||||
@elseif $current-prefix == -ms {
|
||||
&:-ms-input-placeholder { @content; }
|
||||
}
|
||||
}
|
||||
// This is not standardized yet so no official selector is generated.
|
||||
}
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
@import "compass/css3/images";
|
||||
@import "compass/css3/background-size";
|
||||
|
||||
// Set the color of your columns
|
||||
$grid-background-column-color : rgba(100, 100, 225, 0.25) !default;
|
||||
// Set the color of your gutters
|
||||
$grid-background-gutter-color : rgba(0, 0, 0, 0) !default;
|
||||
|
||||
// Set the total number of columns in your grid
|
||||
$grid-background-total-columns : 24 !default;
|
||||
// Set the width of your columns
|
||||
$grid-background-column-width : 30px !default;
|
||||
// Set the width of your gutters
|
||||
$grid-background-gutter-width : 10px !default;
|
||||
// Set the offset, if your columns are padded in from the container edge
|
||||
$grid-background-offset : 0px !default;
|
||||
|
||||
// Set the color of your baseline
|
||||
$grid-background-baseline-color : rgba(0, 0, 0, 0.5) !default;
|
||||
// Set the height of your baseline grid
|
||||
$grid-background-baseline-height : 1.5em !default;
|
||||
|
||||
// toggle your columns grids on and off
|
||||
$show-column-grid-backgrounds : true !default;
|
||||
// toggle your vertical grids on and off
|
||||
$show-baseline-grid-backgrounds : true !default;
|
||||
// toggle all your grids on and off
|
||||
$show-grid-backgrounds : true !default;
|
||||
|
||||
// optionally force your grid-image to remain fluid
|
||||
// no matter what units you used to declared your grid.
|
||||
$grid-background-force-fluid : false !default;
|
||||
|
||||
|
||||
// Create the gradient needed for baseline grids
|
||||
@function get-baseline-gradient(
|
||||
$color : $grid-background-baseline-color
|
||||
) {
|
||||
$gradient: linear-gradient(to top, $color 5%, rgba($color,0) 5%);
|
||||
@return $gradient;
|
||||
}
|
||||
|
||||
// Create the color-stops needed for horizontal grids
|
||||
@function build-grid-background(
|
||||
$total : $grid-background-total-columns,
|
||||
$column : $grid-background-column-width,
|
||||
$gutter : $grid-background-gutter-width,
|
||||
$offset : $grid-background-offset,
|
||||
$column-color : $grid-background-column-color,
|
||||
$gutter-color : $grid-background-gutter-color
|
||||
) {
|
||||
$grid: compact();
|
||||
$grid: append($grid, $gutter-color $offset, comma);
|
||||
@for $i from 0 to $total {
|
||||
|
||||
// $a represents the start of this column, initially equal to the offset
|
||||
$a: $offset;
|
||||
@if $i > 0 { $a: $a + (($column + $gutter) * $i); }
|
||||
|
||||
// $g represents the start of this gutter, equal to $a plus one column-width
|
||||
$g: $a + $column;
|
||||
|
||||
// $z represents the end of a gutter, equal to $g plus one gutter-width
|
||||
$z: $g + $gutter;
|
||||
|
||||
@if (unit($a) == "%") and ($i == ($total - 1)) {
|
||||
$z: 100%;
|
||||
}
|
||||
|
||||
// and we add this column/gutter pair to our grid
|
||||
$grid: join($grid, (lighten($column-color, 5%) $a, darken($column-color, 5%) $g, $gutter-color $g, $gutter-color $z));
|
||||
}
|
||||
|
||||
@return $grid;
|
||||
}
|
||||
|
||||
// Return the gradient needed for horizontal grids
|
||||
@function get-column-gradient(
|
||||
$total : $grid-background-total-columns,
|
||||
$column : $grid-background-column-width,
|
||||
$gutter : $grid-background-gutter-width,
|
||||
$offset : $grid-background-offset,
|
||||
$column-color : $grid-background-column-color,
|
||||
$gutter-color : $grid-background-gutter-color,
|
||||
$force-fluid : $grid-background-force-fluid
|
||||
) {
|
||||
$grid: unquote("");
|
||||
|
||||
// don't force fluid grids when they are already fluid.
|
||||
@if unit($column) == "%" { $force-fluid: false; }
|
||||
|
||||
@if $force-fluid {
|
||||
$grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);
|
||||
} @else {
|
||||
$grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
|
||||
}
|
||||
|
||||
// return the horizontal grid as a gradient
|
||||
$gradient: linear-gradient(left, $grid);
|
||||
@return $gradient;
|
||||
}
|
||||
|
||||
// Convert a grid from fixed units into percentages.
|
||||
@function get-column-fluid-grid(
|
||||
$total : $grid-background-total-columns,
|
||||
$column : $grid-background-column-width,
|
||||
$gutter : $grid-background-gutter-width,
|
||||
$offset : $grid-background-offset,
|
||||
$column-color : $grid-background-column-color,
|
||||
$gutter-color : $grid-background-gutter-color
|
||||
) {
|
||||
$context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
|
||||
$offset: $offset / $context * 100%;
|
||||
$column: $column / $context * 100%;
|
||||
$gutter: $gutter / $context * 100%;
|
||||
|
||||
// return the horizontal grid as a set of color-stops
|
||||
$grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
|
||||
@return $grid;
|
||||
}
|
||||
|
||||
|
||||
// Add just the baseline grid to an element's background
|
||||
@mixin baseline-grid-background(
|
||||
$baseline : $grid-background-baseline-height,
|
||||
$color : $grid-background-baseline-color
|
||||
) {
|
||||
@if $show-grid-backgrounds and $show-baseline-grid-backgrounds {
|
||||
@include background-image(get-baseline-gradient($color));
|
||||
@include background-size(100% $baseline);
|
||||
background-position: left top;
|
||||
}
|
||||
}
|
||||
|
||||
// Add just the horizontal grid to an element's background
|
||||
@mixin column-grid-background(
|
||||
$total : $grid-background-total-columns,
|
||||
$column : $grid-background-column-width,
|
||||
$gutter : $grid-background-gutter-width,
|
||||
$offset : $grid-background-offset,
|
||||
$column-color : $grid-background-column-color,
|
||||
$gutter-color : $grid-background-gutter-color,
|
||||
$force-fluid : $grid-background-force-fluid
|
||||
) {
|
||||
@if $show-grid-backgrounds and $show-column-grid-backgrounds {
|
||||
@include background-image(
|
||||
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
|
||||
);
|
||||
background-position: left top;
|
||||
}
|
||||
}
|
||||
|
||||
// Add both horizontal and baseline grids to an element's background
|
||||
@mixin grid-background(
|
||||
$total : $grid-background-total-columns,
|
||||
$column : $grid-background-column-width,
|
||||
$gutter : $grid-background-gutter-width,
|
||||
$baseline : $grid-background-baseline-height,
|
||||
$offset : $grid-background-offset,
|
||||
$column-color : $grid-background-column-color,
|
||||
$gutter-color : $grid-background-gutter-color,
|
||||
$baseline-color : $grid-background-baseline-color,
|
||||
$force-fluid : $grid-background-force-fluid
|
||||
) {
|
||||
@if $show-grid-backgrounds {
|
||||
@if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds {
|
||||
@include background-image(
|
||||
get-baseline-gradient($baseline-color),
|
||||
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
|
||||
);
|
||||
@include background-size(100% $baseline, auto);
|
||||
background-position: left top;
|
||||
} @else {
|
||||
@include baseline-grid-background($baseline, $baseline-color);
|
||||
@include column-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
|
||||
//
|
||||
// Must be mixed into the top level of your stylesheet.
|
||||
//
|
||||
// Footer element must be outside of root wrapper element.
|
||||
//
|
||||
// Footer must be a fixed height.
|
||||
|
||||
@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
|
||||
html, body {
|
||||
height: 100%; }
|
||||
#{$root-selector} {
|
||||
clear: both;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin-bottom: -$footer-height;
|
||||
#{$root-footer-selector} {
|
||||
height: $footer-height; } }
|
||||
#{$footer-selector} {
|
||||
clear: both;
|
||||
position: relative;
|
||||
height: $footer-height; } }
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
|
||||
// stretch element height to specified top and bottom position
|
||||
|
||||
@mixin stretch-y($offset-top:0, $offset-bottom:0) {
|
||||
@include stretch($offset-top, false, $offset-bottom, false);
|
||||
}
|
||||
|
||||
|
||||
// stretch element width to specified left and right position
|
||||
|
||||
@mixin stretch-x($offset-left:0, $offset-right:0) {
|
||||
@include stretch(false, $offset-right, false, $offset-left);
|
||||
}
|
||||
|
||||
|
||||
// shorthand to stretch element height and width
|
||||
|
||||
@mixin stretch($offset-top:0, $offset-right:0, $offset-bottom:0, $offset-left:0) {
|
||||
position: absolute;
|
||||
@if $offset-top { top: $offset-top; }
|
||||
@if $offset-bottom { bottom: $offset-bottom; }
|
||||
@if $offset-left { left: $offset-left; }
|
||||
@if $offset-right { right: $offset-right; }
|
||||
}
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
|
||||
// Global reset rules.
|
||||
// For more specific resets, use the reset mixins provided below
|
||||
//
|
||||
// *Please Note*: tables still need `cellspacing="0"` in the markup.
|
||||
@mixin global-reset {
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
@include reset-box-model;
|
||||
@include reset-font; }
|
||||
body {
|
||||
@include reset-body; }
|
||||
ol, ul {
|
||||
@include reset-list-style; }
|
||||
table {
|
||||
@include reset-table; }
|
||||
caption, th, td {
|
||||
@include reset-table-cell; }
|
||||
q, blockquote {
|
||||
@include reset-quotation; }
|
||||
a img {
|
||||
@include reset-image-anchor-border; } }
|
||||
|
||||
// Reset all elements within some selector scope. To reset the selector itself,
|
||||
// mixin the appropriate reset mixin for that element type as well. This could be
|
||||
// useful if you want to style a part of your page in a dramatically different way.
|
||||
//
|
||||
// *Please Note*: tables still need `cellspacing="0"` in the markup.
|
||||
@mixin nested-reset {
|
||||
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
||||
pre, a, abbr, acronym, address, code, del, dfn, em, img,
|
||||
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
|
||||
@include reset-box-model;
|
||||
@include reset-font; }
|
||||
table {
|
||||
@include reset-table; }
|
||||
caption, th, td {
|
||||
@include reset-table-cell; }
|
||||
q, blockquote {
|
||||
@include reset-quotation; }
|
||||
a img {
|
||||
@include reset-image-anchor-border; } }
|
||||
|
||||
// Reset the box model measurements.
|
||||
@mixin reset-box-model {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0; }
|
||||
|
||||
// Reset the font and vertical alignment.
|
||||
@mixin reset-font {
|
||||
font: {
|
||||
weight: inherit;
|
||||
style: inherit;
|
||||
size: 100%;
|
||||
family: inherit; };
|
||||
vertical-align: baseline; }
|
||||
|
||||
// Resets the outline when focus.
|
||||
// For accessibility you need to apply some styling in its place.
|
||||
@mixin reset-focus {
|
||||
outline: 0; }
|
||||
|
||||
// Reset a body element.
|
||||
@mixin reset-body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white; }
|
||||
|
||||
// Reset the list style of an element.
|
||||
@mixin reset-list-style {
|
||||
list-style: none; }
|
||||
|
||||
// Reset a table
|
||||
@mixin reset-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
// Reset a table cell (`th`, `td`)
|
||||
@mixin reset-table-cell {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
// Reset a quotation (`q`, `blockquote`)
|
||||
@mixin reset-quotation {
|
||||
quotes: "" "";
|
||||
&:before, &:after {
|
||||
content: ""; } }
|
||||
|
||||
// Resets the border.
|
||||
@mixin reset-image-anchor-border {
|
||||
border: none; }
|
||||
|
||||
// Unrecognized elements are displayed inline.
|
||||
// This reset provides a basic reset for html5 elements
|
||||
// so they are rendered correctly in browsers that don't recognize them
|
||||
// and reset in browsers that have default styles for them.
|
||||
@mixin reset-html5 {
|
||||
#{elements-of-type(html5-block)} {
|
||||
@include reset-box-model;
|
||||
display: block; } }
|
||||
|
||||
// Resets the display of inline and block elements to their default display
|
||||
// according to their tag type. Elements that have a default display that varies across
|
||||
// versions of html or browser are not handled here, but this covers the 90% use case.
|
||||
// Usage Example:
|
||||
//
|
||||
// // Turn off the display for both of these classes
|
||||
// .unregistered-only, .registered-only
|
||||
// display: none
|
||||
// // Now turn only one of them back on depending on some other context.
|
||||
// body.registered
|
||||
// +reset-display(".registered-only")
|
||||
// body.unregistered
|
||||
// +reset-display(".unregistered-only")
|
||||
@mixin reset-display($selector: "", $important: false) {
|
||||
#{append-selector(elements-of-type("inline"), $selector)} {
|
||||
@if $important {
|
||||
display: inline !important; }
|
||||
@else {
|
||||
display: inline; } }
|
||||
#{append-selector(elements-of-type("block"), $selector)} {
|
||||
@if $important {
|
||||
display: block !important; }
|
||||
@else {
|
||||
display: block; } } }
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
|
||||
// Global reset rules.
|
||||
// For more specific resets, use the reset mixins provided below
|
||||
@mixin global-reset {
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
@include reset-box-model;
|
||||
@include reset-font; }
|
||||
// Unlike Eric's original reset, we reset the html element to be compatible
|
||||
// with the vertical rhythm mixins.
|
||||
html {
|
||||
@include reset-body; }
|
||||
ol, ul {
|
||||
@include reset-list-style; }
|
||||
table {
|
||||
@include reset-table; }
|
||||
caption, th, td {
|
||||
@include reset-table-cell; }
|
||||
q, blockquote {
|
||||
@include reset-quotation; }
|
||||
a img {
|
||||
@include reset-image-anchor-border; }
|
||||
@include reset-html5; }
|
||||
|
||||
// Reset all elements within some selector scope. To reset the selector itself,
|
||||
// mixin the appropriate reset mixin for that element type as well. This could be
|
||||
// useful if you want to style a part of your page in a dramatically different way.
|
||||
@mixin nested-reset {
|
||||
div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
@include reset-box-model;
|
||||
@include reset-font; }
|
||||
table {
|
||||
@include reset-table; }
|
||||
caption, th, td {
|
||||
@include reset-table-cell; }
|
||||
q, blockquote {
|
||||
@include reset-quotation; }
|
||||
a img {
|
||||
@include reset-image-anchor-border; } }
|
||||
|
||||
// Reset the box model measurements.
|
||||
@mixin reset-box-model {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
// Reset the font and vertical alignment.
|
||||
@mixin reset-font {
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
// Resets the outline when focus.
|
||||
// For accessibility you need to apply some styling in its place.
|
||||
@mixin reset-focus {
|
||||
outline: 0; }
|
||||
|
||||
// Reset a body element.
|
||||
@mixin reset-body {
|
||||
line-height: 1; }
|
||||
|
||||
// Reset the list style of an element.
|
||||
@mixin reset-list-style {
|
||||
list-style: none; }
|
||||
|
||||
// Reset a table
|
||||
@mixin reset-table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
// Reset a table cell (`th`, `td`)
|
||||
@mixin reset-table-cell {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
// Reset a quotation (`q`, `blockquote`)
|
||||
@mixin reset-quotation {
|
||||
quotes: none;
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
content: none; } }
|
||||
|
||||
// Resets the border.
|
||||
@mixin reset-image-anchor-border {
|
||||
border: none; }
|
||||
|
||||
// Unrecognized elements are displayed inline.
|
||||
// This reset provides a basic reset for block html5 elements
|
||||
// so they are rendered correctly in browsers that don't recognize them
|
||||
// and reset in browsers that have default styles for them.
|
||||
@mixin reset-html5 {
|
||||
#{elements-of-type(html5-block)} {
|
||||
display: block; } }
|
||||
|
||||
// Resets the display of inline and block elements to their default display
|
||||
// according to their tag type. Elements that have a default display that varies across
|
||||
// versions of html or browser are not handled here, but this covers the 90% use case.
|
||||
// Usage Example:
|
||||
//
|
||||
// // Turn off the display for both of these classes
|
||||
// .unregistered-only, .registered-only
|
||||
// display: none
|
||||
// // Now turn only one of them back on depending on some other context.
|
||||
// body.registered
|
||||
// +reset-display(".registered-only")
|
||||
// body.unregistered
|
||||
// +reset-display(".unregistered-only")
|
||||
@mixin reset-display($selector: "", $important: false) {
|
||||
#{append-selector(elements-of-type("inline"), $selector)} {
|
||||
@if $important {
|
||||
display: inline !important; }
|
||||
@else {
|
||||
display: inline; } }
|
||||
#{append-selector(elements-of-type("block"), $selector)} {
|
||||
@if $important {
|
||||
display: block !important; }
|
||||
@else {
|
||||
display: block; } } }
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "links/hover-link";
|
||||
@import "links/link-colors";
|
||||
@import "links/unstyled-link";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "lists/horizontal-list";
|
||||
@import "lists/inline-list";
|
||||
@import "lists/inline-block-list";
|
||||
@import "lists/bullets";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "text/ellipsis";
|
||||
@import "text/nowrap";
|
||||
@import "text/replacement";
|
||||
@import "text/force-wrap";
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue