javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

rename variables to use css conventions

Browse Source
This commit is contained in:
Adam Bradley
2013-11-14 08:57:05 -06:00
parent 4f6d794c05
commit 68ae41f115
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
scss/_mixins.scss
View File

@ -2,10 +2,10 @@
// Button Mixins // Button Mixins
// -------------------------------------------------- // --------------------------------------------------
@mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) { @mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
color: $color; color: $color;
background-color: $bgColor; background-color: $bg-color;
border-color: $borderColor; border-color: $border-color;
// Give desktop users something to play with // Give desktop users something to play with
&:hover { &:hover {
@ -13,32 +13,32 @@
text-decoration: none; text-decoration: none;
} }
&.active, &:active { &.active, &:active {
background-color: $activeBgColor; background-color: $active-bg-color;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15); box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: $activeBorderColor; border-color: $active-border-color;
} }
} }
@mixin button-clear($color, $fontSize:"") { @mixin button-clear($color, $font-size:"") {
&.button-clear { &.button-clear {
color: $color; color: $color;
background: none; background: none;
box-shadow: none; box-shadow: none;
@if $fontSize != "" { @if $font-size != "" {
font-size: $fontSize; font-size: $font-size;
} }
} }
} }
@mixin button-outline($color, $textColor:"") { @mixin button-outline($color, $text-color:"") {
&.button-outline { &.button-outline {
background: transparent; background: transparent;
border-color: $color; border-color: $color;
@if $textColor == "" { @if $text-color == "" {
$textColor: $color; $text-color: $color;
} }
color: $textColor; color: $text-color;
&.active, &:active { &.active, &:active {
background-color: $color; background-color: $color;
color: #fff; color: #fff;
@ -51,10 +51,10 @@
// Bar Mixins // Bar Mixins
// -------------------------------------------------- // --------------------------------------------------
@mixin bar-style($bgColor, $borderColor, $color) { @mixin bar-style($bg-color, $border-color, $color) {
background-color: $bgColor; background-color: $bg-color;
border-color: $borderColor; border-color: $border-color;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%); background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
color: $color; color: $color;
@ -67,10 +67,10 @@
// Tab Mixins // Tab Mixins
// -------------------------------------------------- // --------------------------------------------------
@mixin tab-style($bgColor, $borderColor, $color) { @mixin tab-style($bg-color, $border-color, $color) {
background-color: $bgColor; background-color: $bg-color;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%); background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
border-color: $borderColor; border-color: $border-color;
color: $color; color: $color;
} }
@ -78,15 +78,15 @@
// Item Mixins // Item Mixins
// -------------------------------------------------- // --------------------------------------------------
@mixin item-style($bgColor, $borderColor, $color, $activeBgColor, $activeBorderColor) { @mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
color: $color; color: $color;
background-color: $bgColor; background-color: $bg-color;
border-color: $borderColor; border-color: $border-color;
&.active, &.active,
&:active { &:active {
background-color: activeBgColor; background-color: activeBgColor;
border-color: $activeBorderColor; border-color: $active-border-color;
} }
} }
@ -166,22 +166,22 @@
@mixin font-family-monospace() { @mixin font-family-monospace() {
font-family: $mono-font-family; font-family: $mono-font-family;
} }
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-size: $size; font-size: $size;
font-weight: $weight; font-weight: $weight;
line-height: $lineHeight; line-height: $line-height;
} }
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-serif(); @include font-family-serif();
@include font-shorthand($size, $weight, $lineHeight); @include font-shorthand($size, $weight, $line-height);
} }
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-sans-serif(); @include font-family-sans-serif();
@include font-shorthand($size, $weight, $lineHeight); @include font-shorthand($size, $weight, $line-height);
} }
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-monospace(); @include font-family-monospace();
@include font-shorthand($size, $weight, $lineHeight); @include font-shorthand($size, $weight, $line-height);
} }
@ -332,7 +332,7 @@
} }
// CSS3 Content Columns // CSS3 Content Columns
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { @mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
-webkit-column-count: $columnCount; -webkit-column-count: $columnCount;
-moz-column-count: $columnCount; -moz-column-count: $columnCount;
column-count: $columnCount; column-count: $columnCount;