mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix color inheritance, core components should not contain colors
This commit is contained in:
Adam Bradley
@@ -6,15 +6,10 @@
|
||||
.button-clear {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: color-shade($button-color);
|
||||
|
||||
&.activated {
|
||||
opacity: 0.4;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: 0.6;
|
||||
color: color-shade($button-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
@import "../../globals.core";
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
border: 1px solid $button-color;
|
||||
background: transparent;
|
||||
color: $button-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-color;
|
||||
background-color: $button-color;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
@import "../../globals.core";
|
||||
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-font-size: 1.6rem !default;
|
||||
$button-margin: 0.4rem 0.2rem !default;
|
||||
$button-padding: 0 1em !default;
|
||||
@@ -9,10 +12,6 @@ $button-border-radius: 4px !default;
|
||||
$button-round-padding: 0 2.6rem !default;
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
$button-color: map-get($colors, primary) !default;
|
||||
$button-color-activated: color-shade($button-color) !default;
|
||||
$button-text-color: inverse($button-color) !default;
|
||||
$button-hover-opacity: 0.8 !default;
|
||||
|
||||
.button-disabled {
|
||||
opacity: 0.4;
|
||||
@@ -59,17 +58,6 @@ a.button {
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
@include appearance(none);
|
||||
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
// Button Types
|
||||
@@ -123,31 +111,3 @@ a.button {
|
||||
// button-disabled should stand alone(?)
|
||||
// button-sizes should stand alone (button-small, button-large, etc)
|
||||
// button-fab errrrr
|
||||
|
||||
|
||||
// Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$text-color: inverse($bg-color);
|
||||
@include button-default($bg-color, $bg-color-activated, $text-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
@import "../../globals.core";
|
||||
|
||||
// Button Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-font-size: 1.6rem !default;
|
||||
$button-margin: 0.4rem 0.2rem !default;
|
||||
$button-padding: 0 1em !default;
|
||||
$button-height: 2.8em !default;
|
||||
$button-border-radius: 4px !default;
|
||||
|
||||
$button-round-padding: 0 2.6rem !default;
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
$button-color: color(primary) !default;
|
||||
$button-color-activated: color-shade($button-color) !default;
|
||||
$button-text-color: inverse($button-color) !default;
|
||||
$button-hover-opacity: 0.8 !default;
|
||||
|
||||
|
||||
// Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
button,
|
||||
[button] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: background-color, opacity 100ms linear;
|
||||
|
||||
margin: $button-margin;
|
||||
padding: $button-padding;
|
||||
min-height: $button-height;
|
||||
line-height: 1;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border: transparent;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
font-size: $button-font-size;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
font-style: inherit;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
@include appearance(none);
|
||||
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// Button Types
|
||||
// --------------------------------------------------
|
||||
|
||||
&[block] {
|
||||
display: flex;
|
||||
clear: both;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&[full] {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
&[outline] {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[round] {
|
||||
border-radius: $button-round-border-radius;
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a[button] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[padding] > button[block]:first-child,
|
||||
[padding] > [button][block]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$text-color: inverse($bg-color);
|
||||
@include button-default($bg-color, $bg-color-activated, $text-color);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,23 +3,102 @@
|
||||
@import "../button-clear";
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
@import "../button-outline";
|
||||
@import "../button-size";
|
||||
|
||||
// iOS Button (largely the core button styles)
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-ios-color: map-get($colors-ios, primary) !default;
|
||||
$button-ios-color-activated: color-shade($button-ios-color) !default;
|
||||
$button-ios-text-color: inverse($button-ios-color) !default;
|
||||
$button-ios-hover-opacity: 0.8 !default;
|
||||
|
||||
|
||||
.button {
|
||||
background: $button-ios-color;
|
||||
color: $button-ios-text-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-ios-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-ios-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button-block {
|
||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
color: color-shade($button-ios-color);
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: 0.6;
|
||||
color: color-shade($button-ios-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
border: 1px solid $button-ios-color;
|
||||
background: transparent;
|
||||
color: $button-ios-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-ios-color;
|
||||
background-color: $button-ios-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
|
||||
background-color: $bg-color;
|
||||
color: $fg-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: inverse($bg-color);
|
||||
@include button-default($bg-color, $bg-color-activated, $fg-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Clear Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
// TODO primary activated is wrong
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
|
||||
$fg-color: color-shade($color-value);
|
||||
|
||||
@@ -52,7 +131,7 @@
|
||||
color: $fg-color;
|
||||
|
||||
&.activated {
|
||||
color: $background-color;
|
||||
color: $background-ios-color;
|
||||
background-color: $fg-color;
|
||||
}
|
||||
|
||||
@@ -62,7 +141,7 @@
|
||||
// Outline Clear Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
@import "../button-clear";
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
@import "../button-outline";
|
||||
@import "../button-size";
|
||||
|
||||
// Material Design Button
|
||||
@@ -25,6 +24,11 @@ $button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
|
||||
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
|
||||
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
$button-md-color: map-get($colors-md, primary) !default;
|
||||
$button-md-color-activated: color-shade($button-md-color) !default;
|
||||
$button-md-text-color: inverse($button-md-color) !default;
|
||||
$button-md-hover-opacity: 0.8 !default;
|
||||
|
||||
|
||||
.button {
|
||||
border-radius: $button-md-border-radius;
|
||||
@@ -93,7 +97,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
|
||||
background: rgba( red($button-md-color), green($button-md-color), blue($button-md-color), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,6 +112,22 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
border: 1px solid $button-md-color;
|
||||
background: transparent;
|
||||
color: $button-md-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-md-color;
|
||||
background-color: $button-md-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Material Design Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -138,7 +158,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
|
||||
// Generate Material Design Button Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
|
||||
@include button-theme-md($color-name, $color-value);
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ $card-ios-padding-left: 16px !default;
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
$card-ios-padding-media-bottom: 9px !default;
|
||||
|
||||
$card-ios-background-color: $list-background-color !default;
|
||||
$card-ios-background-color: $list-ios-background-color !default;
|
||||
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
|
||||
$card-ios-border-radius: 2px !default;
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
@@ -20,7 +20,7 @@ $card-md-padding-media-bottom: 10px !default;
|
||||
$card-md-avatar-size: 4rem !default;
|
||||
$card-md-thumbnail-size: 8rem !default;
|
||||
|
||||
$card-md-background-color: $list-background-color !default;
|
||||
$card-md-background-color: $list-md-background-color !default;
|
||||
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$card-md-border-radius: 2px !default;
|
||||
$card-md-font-size: 1.4rem !default;
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-background-color-off: $list-background-color !default;
|
||||
$checkbox-ios-border-color-off: $list-border-color !default;
|
||||
$checkbox-ios-background-color-on: map-get($colors, primary) !default;
|
||||
$checkbox-ios-border-color-on: map-get($colors, primary) !default;
|
||||
$checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
$checkbox-ios-background-color-off: $list-ios-background-color !default;
|
||||
$checkbox-ios-border-color-off: $list-ios-border-color !default;
|
||||
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
$checkbox-ios-border-color-on: map-get($colors-ios, primary) !default;
|
||||
$checkbox-ios-checkmark-color-on: $background-ios-color !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
@@ -33,7 +33,7 @@ ion-checkbox {
|
||||
}
|
||||
|
||||
&.item.activated {
|
||||
background-color: $list-background-color;
|
||||
background-color: $list-ios-background-color;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -70,7 +70,7 @@ checkbox-icon {
|
||||
// Generate iOS Checkbox Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
@each $color-name, $value in $colors-ios {
|
||||
|
||||
@include checkbox-theme-ios($color-name, $value);
|
||||
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
$checkbox-md-background-color-off: $list-background-color !default;
|
||||
$checkbox-md-background-color-off: $list-md-background-color !default;
|
||||
$checkbox-md-border-width: 2px !default;
|
||||
$checkbox-md-border-radius: 2px !default;
|
||||
$checkbox-md-border-color-off: darken($item-md-border-color, 40%) !default;
|
||||
$checkbox-md-background-color-on: color(primary) !default;
|
||||
$checkbox-md-border-color-on: color(primary) !default;
|
||||
$checkbox-md-checkmark-color-on: $background-color !default;
|
||||
$checkbox-md-background-color-on: map-get($colors-md, primary) !default;
|
||||
$checkbox-md-border-color-on: map-get($colors-md, primary) !default;
|
||||
$checkbox-md-checkmark-color-on: $background-md-color !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
@@ -76,10 +76,10 @@ checkbox-icon {
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Checkbox Auxiliary Colors
|
||||
// Generate Material Design Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
|
||||
@include checkbox-theme-md($color-name, $color-value);
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
// iOS Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$outer-content-md-background-color: #efeff4 !default;
|
||||
$outer-content-ios-background-color: #efeff4 !default;
|
||||
|
||||
|
||||
body,
|
||||
@@ -16,7 +16,7 @@ a {
|
||||
}
|
||||
|
||||
.outer-content {
|
||||
background: $outer-content-md-background-color;
|
||||
background: $outer-content-ios-background-color;
|
||||
}
|
||||
|
||||
ion-nav.has-views,
|
||||
@@ -24,7 +24,7 @@ ion-tab.has-views {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p,
|
||||
span,
|
||||
|
||||
@@ -17,9 +17,6 @@
|
||||
text-align: initial;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: $list-background-color;
|
||||
color: $list-text-color;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
&[no-lines] {
|
||||
|
||||
@@ -13,10 +13,16 @@ $item-ios-divider-bg: #f7f7f7 !default;
|
||||
$item-ios-divider-color: #222 !default;
|
||||
$item-ios-divider-padding: 5px 15px !default;
|
||||
|
||||
$item-ios-sliding-content-bg: $background-color !default;
|
||||
$item-ios-sliding-content-bg: $background-ios-color !default;
|
||||
$item-ios-sliding-transition: transform 250ms ease-in-out !default;
|
||||
|
||||
|
||||
.item {
|
||||
background-color: $list-ios-background-color;
|
||||
color: $list-ios-text-color;
|
||||
}
|
||||
|
||||
|
||||
ion-item-group {
|
||||
.item:first-child {
|
||||
.item-inner {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// Material Design Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default;
|
||||
$item-md-border-color: grayscale(lighten($list-md-border-color, 8%)) !default;
|
||||
$item-md-activated-background-color: #f1f1f1 !default;
|
||||
$item-md-font-size: 1.6rem !default;
|
||||
|
||||
@@ -30,7 +30,7 @@ $item-md-divider-bg: #fff !default;
|
||||
$item-md-divider-color: #222 !default;
|
||||
$item-md-divider-padding: 5px 15px !default;
|
||||
|
||||
$item-md-sliding-content-bg: $background-color !default;
|
||||
$item-md-sliding-content-bg: $background-md-color !default;
|
||||
$item-md-sliding-transition: transform 250ms ease-in-out !default;
|
||||
|
||||
|
||||
@@ -53,6 +53,9 @@ ion-note {
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
|
||||
background-color: $list-md-background-color;
|
||||
color: $list-md-text-color;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 2.4rem;
|
||||
|
||||
@@ -20,8 +20,4 @@ ion-list {
|
||||
ion-list[inset] {
|
||||
overflow: hidden;
|
||||
transform: translateZ(0);
|
||||
|
||||
ion-list-header {
|
||||
background-color: $list-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,6 @@ $list-ios-header-font-weight: 500 !default;
|
||||
$list-ios-header-letter-spacing: 0.1rem !default;
|
||||
$list-ios-header-color: #333 !default;
|
||||
|
||||
$list-ios-border-color: $list-border-color !default;
|
||||
|
||||
|
||||
/****************/
|
||||
/* DEFAULT LIST */
|
||||
|
||||
@@ -130,6 +130,10 @@ ion-list[inset] {
|
||||
+ ion-list[inset] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ion-list-header {
|
||||
background-color: $list-md-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ $popup-md-button-min-height: 36px !default;
|
||||
|
||||
$popup-md-prompt-input-border-color: #dedede !default;
|
||||
$popup-md-prompt-input-text-color: #000000 !default;
|
||||
$popup-md-prompt-input-highlight-color: map-get($colors, primary) !default;
|
||||
$popup-md-prompt-input-highlight-color: map-get($colors-md, primary) !default;
|
||||
$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
|
||||
$popup-md-prompt-input-margin-top: 5px !default;
|
||||
$popup-md-prompt-input-margin-bottom: 5px !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// iOS Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
$radio-ios-color-on: color(primary) !default;
|
||||
$radio-ios-color-on: map-get($colors-ios, primary) !default;
|
||||
|
||||
|
||||
ion-radio {
|
||||
@@ -27,7 +27,7 @@ ion-radio {
|
||||
}
|
||||
|
||||
&.item.activated {
|
||||
background-color: $list-background-color;
|
||||
background-color: $list-ios-background-color;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -68,7 +68,7 @@ radio-icon {
|
||||
// Generate iOS Radio Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
|
||||
@include radio-theme-ios($color-name, $color-value);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// Material Design Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
$radio-md-color-on: color(primary) !default;
|
||||
$radio-md-color-on: map-get($colors-md, primary) !default;
|
||||
|
||||
$radio-md-icon-size: 16px !default;
|
||||
$radio-md-border-width: 2px !default;
|
||||
@@ -85,10 +85,10 @@ media-radio {
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Radio Auxiliary Colors
|
||||
// Generate Material Design Radio Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
|
||||
@include radio-theme-md($color-name, $color-value);
|
||||
|
||||
|
||||
@@ -139,7 +139,7 @@ ion-searchbar.left-align {
|
||||
// Generate Default Search Bar Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
|
||||
ion-searchbar[#{$color-name}] {
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ $segment-button-ios-bg-color: transparent !default;
|
||||
$segment-button-ios-font-size: 1.3rem !default;
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
$segment-button-ios-bg-color-activated: map-get($colors, primary) !default;
|
||||
$segment-button-ios-bg-color-activated: map-get($colors-ios, primary) !default;
|
||||
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
|
||||
$segment-button-ios-activated-transition: 100ms all linear !default;
|
||||
$segment-button-ios-hover-opacity: 0.16 !default;
|
||||
@@ -112,7 +112,7 @@ ion-segment {
|
||||
// Loop through all of the colors to change the segment colors
|
||||
// based on the toolbar color or if it isn't in a toolbar then based on
|
||||
// the segment color value
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$inverse-color-value: inverse($color-value);
|
||||
|
||||
.toolbar[#{$color-name}] {
|
||||
@@ -126,7 +126,7 @@ ion-segment {
|
||||
// Loop through all of the colors again to change the segment colors
|
||||
// for each toolbar based on the segment color
|
||||
// this will take priority over the default toolbar colors
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$inverse-color-value: inverse($color-value);
|
||||
|
||||
ion-segment[#{$color-name}] {
|
||||
|
||||
@@ -8,8 +8,8 @@ $segment-button-md-font-size: 1.2rem !default;
|
||||
$segment-button-md-min-height: 4.0rem !default;
|
||||
$segment-button-md-line-height: 4.0rem !default;
|
||||
|
||||
$segment-button-md-text-color-activated: color(primary) !default;
|
||||
$segment-button-md-border-color-activated: color(primary) !default;
|
||||
$segment-button-md-text-color-activated: map-get($colors-md, primary) !default;
|
||||
$segment-button-md-border-color-activated: map-get($colors-md, primary) !default;
|
||||
$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@ ion-segment {
|
||||
// Loop through all of the colors to change the segment colors
|
||||
// based on the toolbar color or if it isn't in a toolbar then based on
|
||||
// the segment color value
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$inverse-color-value: inverse($color-value);
|
||||
|
||||
.toolbar[#{$color-name}] {
|
||||
@@ -86,7 +86,7 @@ ion-segment {
|
||||
// Loop through all of the colors again to change the segment colors
|
||||
// for each toolbar based on the segment color
|
||||
// this will take priority over the default toolbar colors
|
||||
@each $color-name, $color-value in $colors {
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
ion-segment[#{$color-name}] {
|
||||
ion-segment-button[button] {
|
||||
@include segment-button($color-value);
|
||||
|
||||
@@ -9,10 +9,10 @@ $switch-ios-height: 32px !default;
|
||||
$switch-ios-border-width: 2px !default;
|
||||
$switch-ios-border-radius: $switch-ios-height / 2 !default;
|
||||
|
||||
$switch-ios-background-color-off: $list-background-color !default;
|
||||
$switch-ios-border-color-off: grayscale(lighten($list-border-color, 11%)) !default;
|
||||
$switch-ios-background-color-off: $list-ios-background-color !default;
|
||||
$switch-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
|
||||
|
||||
$switch-ios-background-color-on: color(primary) !default;
|
||||
$switch-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
|
||||
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
|
||||
$switch-ios-handle-height: $switch-ios-handle-width !default;
|
||||
@@ -27,7 +27,7 @@ $switch-ios-transition-duration: 300ms !default;
|
||||
ion-switch {
|
||||
|
||||
&.item.activated {
|
||||
background: $list-background-color;
|
||||
background: $list-ios-background-color;
|
||||
}
|
||||
|
||||
media-switch {
|
||||
@@ -145,7 +145,7 @@ ion-switch {
|
||||
// Generate iOS Switch Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
@each $color-name, $value in $colors-ios {
|
||||
|
||||
@include switch-theme-ios($color-name, $value);
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// Material Design Switch
|
||||
// --------------------------------------------------
|
||||
|
||||
$switch-md-active-color: map-get($colors, primary) !default;
|
||||
$switch-md-active-color: map-get($colors-md, primary) !default;
|
||||
|
||||
$switch-md-track-width: 36px !default;
|
||||
$switch-md-track-height: 14px !default;
|
||||
@@ -13,7 +13,7 @@ $switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !
|
||||
|
||||
$switch-md-handle-width: 20px !default;
|
||||
$switch-md-handle-height: 20px !default;
|
||||
$switch-md-handle-background-color-off: $background-color !default;
|
||||
$switch-md-handle-background-color-off: $background-md-color !default;
|
||||
$switch-md-handle-background-color-on: $switch-md-active-color !default;
|
||||
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
|
||||
@@ -105,7 +105,7 @@ ion-switch {
|
||||
// Generate Material Design Switch Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in $colors {
|
||||
@each $color-name, $value in $colors-md {
|
||||
|
||||
@include switch-theme-md($color-name, $value);
|
||||
|
||||
|
||||
@@ -4,14 +4,21 @@
|
||||
// iOS Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
$tabbar-ios-background-color: $toolbar-ios-background-color !default;
|
||||
$tabbar-ios-item-padding: 0px 10px !default;
|
||||
$tabbar-ios-item-font-size: 10px !default;
|
||||
$tabbar-ios-item-icon-size: 32px !default;
|
||||
$tabbar-ios-height: 49px !default;
|
||||
|
||||
$tab-button-ios-min-width: 80px !default;
|
||||
$tab-button-ios-max-width: 240px !default;
|
||||
$tab-button-ios-active-color: $toolbar-ios-active-color !default;
|
||||
$tab-button-ios-inactive-color: $toolbar-ios-inactive-color !default;
|
||||
|
||||
|
||||
tabbar {
|
||||
border-top: 1px solid $toolbar-ios-border-color;
|
||||
background: $tabbar-ios-background-color;
|
||||
}
|
||||
|
||||
ion-tabs[tabbar-placement=top] tabbar {
|
||||
@@ -21,7 +28,16 @@ ion-tabs[tabbar-placement=top] tabbar {
|
||||
|
||||
.tab-button {
|
||||
padding: $tabbar-ios-item-padding;
|
||||
min-width: $tab-button-ios-min-width;
|
||||
max-width: $tab-button-ios-max-width;
|
||||
min-height: $tabbar-ios-height;
|
||||
|
||||
color: $tab-button-ios-inactive-color;
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.disable-hover),
|
||||
.tab-button[aria-selected=true] {
|
||||
color: $tab-button-ios-active-color;
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
@@ -91,10 +107,32 @@ ion-tabs[tabbar-placement=top] tabbar {
|
||||
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
// iOS Tabbar Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin tabbar-ios($color-name, $color-value) {
|
||||
|
||||
tabbar[#{$color-name}] {
|
||||
border-color: darken($color-value, 10%);
|
||||
background-color: $color-value;
|
||||
|
||||
.tab-button {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.disable-hover),
|
||||
.tab-button[aria-selected=true] {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// iOS Tabbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include tabbar-ios($color-name, $color-value);
|
||||
}
|
||||
|
||||
@@ -4,12 +4,21 @@
|
||||
// Material Design Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
$tabbar-md-background-color: $toolbar-md-background-color !default;
|
||||
$tabbar-md-item-padding: 12px 10px 5px 10px !default;
|
||||
$tabbar-md-item-font-size: 1.4rem !default;
|
||||
$tabbar-md-item-font-weight: 500 !default;
|
||||
$tabbar-md-item-icon-size: 2.4rem !default;
|
||||
$tabbar-md-item-height: 4.8rem !default;
|
||||
|
||||
$tab-button-md-active-color: $toolbar-md-active-color !default;
|
||||
$tab-button-md-inactive-color: $toolbar-md-inactive-color !default;
|
||||
|
||||
|
||||
tabbar {
|
||||
background: $tabbar-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
.tab-button {
|
||||
padding: $tabbar-md-item-padding;
|
||||
@@ -21,6 +30,7 @@ $tabbar-md-item-height: 4.8rem !default;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $tab-button-md-inactive-color;
|
||||
|
||||
&[aria-selected=true] {
|
||||
opacity: 1.0;
|
||||
@@ -64,7 +74,7 @@ tab-highlight {
|
||||
width: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $tab-button-active-color;
|
||||
background: $tab-button-md-active-color;
|
||||
transform-origin: 0 0;
|
||||
transform: translateZ(0);
|
||||
|
||||
@@ -78,14 +88,34 @@ tab-highlight {
|
||||
}
|
||||
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
// Material Design Tabbar Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin tabbar-md($color-name, $color-value) {
|
||||
|
||||
tabbar[#{$color-name}] {
|
||||
background-color: $color-value;
|
||||
|
||||
.tab-button {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.disable-hover),
|
||||
.tab-button[aria-selected=true] {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
|
||||
tab-highlight {
|
||||
background: inverse($color-value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Material Design Tabbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include tabbar-md($color-name, $color-value);
|
||||
}
|
||||
|
||||
@@ -3,15 +3,6 @@
|
||||
// Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
$tabbar-background-color: $toolbar-background-color !default;
|
||||
|
||||
$tab-button-text-color: $toolbar-text-color !default;
|
||||
$tab-button-active-color: $toolbar-active-color !default;
|
||||
$tab-button-inactive-color: $toolbar-inactive-color !default;
|
||||
$tab-button-padding: 10px !default;
|
||||
$tab-button-min-width: 80px !default;
|
||||
$tab-button-max-width: 240px !default;
|
||||
|
||||
|
||||
ion-tabs {
|
||||
display: flex;
|
||||
@@ -61,7 +52,6 @@ tabbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: $tabbar-background-color;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
@@ -76,25 +66,16 @@ tabbar {
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
padding: $tab-button-padding;
|
||||
min-width: $tab-button-min-width;
|
||||
max-width: $tab-button-max-width;
|
||||
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
|
||||
color: $tab-button-inactive-color;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.disable-hover),
|
||||
.tab-button[aria-selected=true] {
|
||||
color: $tab-button-active-color;
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 2px;
|
||||
@@ -155,24 +136,3 @@ tab-highlight {
|
||||
[tabbar-icons=hide] .tab-button-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Tabbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
tabbar[#{$color-name}] {
|
||||
background-color: $color-value;
|
||||
|
||||
.tab-button {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
|
||||
.tab-button:hover:not(.disable-hover),
|
||||
.tab-button[aria-selected=true] {
|
||||
color: inverse($color-value);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,12 +5,14 @@
|
||||
// iOS Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
$text-input-ios-background-color: $list-ios-background-color !default;
|
||||
$text-input-ios-label-color: #7f7f7f !default;
|
||||
|
||||
|
||||
[text-input] {
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
|
||||
padding: 0;
|
||||
background-color: $text-input-ios-background-color;
|
||||
}
|
||||
|
||||
ion-input[inset] [text-input] {
|
||||
@@ -50,3 +52,10 @@ ion-label + [text-input] {
|
||||
[floating-label].has-value ion-label {
|
||||
transform: translate3d(0, 0, 0) scale(0.8);
|
||||
}
|
||||
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
ion-label[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,15 +5,17 @@
|
||||
// Material Design Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
$text-input-md-background-color: $list-md-background-color !default;
|
||||
$text-input-md-label-color: #999 !default;
|
||||
$text-input-md-highlight-color: color(primary) !default;
|
||||
$text-input-md-hightlight-color-valid: color(secondary) !default;
|
||||
$text-input-md-hightlight-color-invalid: color(danger) !default;
|
||||
$text-input-md-highlight-color: map-get($colors-md, primary) !default;
|
||||
$text-input-md-hightlight-color-valid: map-get($colors-md, secondary) !default;
|
||||
$text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default;
|
||||
|
||||
|
||||
[text-input] {
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
|
||||
padding: 0;
|
||||
background-color: $text-input-md-background-color;
|
||||
}
|
||||
|
||||
ion-input[inset] [text-input] {
|
||||
@@ -80,3 +82,9 @@ ion-input.ng-invalid.ng-touched:after {
|
||||
[floating-label].has-value ion-label {
|
||||
transform: translate3d(0, 0, 0) scale(0.8);
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
ion-label[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
// Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
$text-input-background-color: $list-background-color !default;
|
||||
|
||||
|
||||
ion-input {
|
||||
|
||||
@@ -33,7 +31,6 @@ ion-input {
|
||||
|
||||
ion-input [text-input] {
|
||||
flex: 1;
|
||||
background-color: $text-input-background-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -71,11 +68,3 @@ input,
|
||||
textarea {
|
||||
@include placeholder();
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
ion-label {
|
||||
&[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,6 @@ $toolbar-order-ios: (
|
||||
);
|
||||
|
||||
$toolbar-ios-height: 4.4rem !default;
|
||||
$toolbar-ios-border-color: $toolbar-border-color !default;
|
||||
$toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
@@ -41,6 +40,7 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
margin-bottom: 0;
|
||||
padding: 0 5px;
|
||||
min-height: 32px;
|
||||
color: $toolbar-ios-active-color;
|
||||
}
|
||||
|
||||
button.icon-only,
|
||||
@@ -72,9 +72,19 @@ $toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
}
|
||||
|
||||
.toolbar button:hover:not(.disable-hover),
|
||||
.toolbar [button]:hover:not(.disable-hover),
|
||||
.toolbar button.activated,
|
||||
.toolbar [button].activated {
|
||||
color: $toolbar-ios-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar toolbar-background {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-color: $toolbar-ios-border-color;
|
||||
background-color: $toolbar-ios-background-color;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
@@ -93,6 +103,7 @@ ion-title {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
pointer-events: auto;
|
||||
color: $toolbar-ios-text-color;
|
||||
}
|
||||
|
||||
ion-nav-items {
|
||||
|
||||
@@ -21,6 +21,7 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
min-height: 32px;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
color: $toolbar-md-active-color;
|
||||
}
|
||||
|
||||
button.icon-only,
|
||||
@@ -53,12 +54,29 @@ $toolbar-md-button-font-size: 1.4rem !default;
|
||||
|
||||
}
|
||||
|
||||
.toolbar button:hover:not(.disable-hover),
|
||||
.toolbar [button]:hover:not(.disable-hover),
|
||||
.toolbar button.activated,
|
||||
.toolbar [button].activated {
|
||||
color: $toolbar-md-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar toolbar-background {
|
||||
border-color: $toolbar-md-border-color;
|
||||
background-color: $toolbar-md-background-color;
|
||||
}
|
||||
|
||||
ion-title {
|
||||
padding: 0 12px;
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
color: $toolbar-md-text-color;
|
||||
}
|
||||
|
||||
ion-nav-items[primary] button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ $toolbar-order: (
|
||||
button,
|
||||
[button] {
|
||||
background-color: transparent;
|
||||
color: $toolbar-active-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -47,8 +46,6 @@ $toolbar-order: (
|
||||
z-index: $z-index-toolbar-background;
|
||||
|
||||
border: 0;
|
||||
border-color: $toolbar-border-color;
|
||||
background-color: $toolbar-background-color;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -59,14 +56,6 @@ toolbar-content {
|
||||
order: map-get($toolbar-order, content);
|
||||
}
|
||||
|
||||
.toolbar button:hover:not(.disable-hover),
|
||||
.toolbar [button]:hover:not(.disable-hover),
|
||||
.toolbar button.activated,
|
||||
.toolbar [button].activated {
|
||||
color: $toolbar-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar[position=bottom] {
|
||||
order: $flex-order-toolbar-bottom;
|
||||
}
|
||||
@@ -83,7 +72,6 @@ ion-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $toolbar-text-color;
|
||||
}
|
||||
|
||||
.toolbar [menu-toggle] {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
// iOS Default Theme
|
||||
// ----------------------------------
|
||||
|
||||
$colors: (
|
||||
$colors-ios: (
|
||||
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
@@ -15,30 +15,29 @@ $colors: (
|
||||
|
||||
|
||||
$text-ios-color: $text-color !default;
|
||||
$link-ios-color: map-get($colors-ios, primary) !default;
|
||||
$background-ios-color: $background-color !default;
|
||||
$subdued-text-ios-color: $subdued-text-color !default;
|
||||
|
||||
$list-ios-text-color: $text-ios-color !default;
|
||||
$list-ios-background-color: $background-color !default;
|
||||
$list-ios-text-color: $list-text-color !default;
|
||||
$list-ios-background-color: $list-background-color !default;
|
||||
$list-ios-border-color: $list-border-color !default;
|
||||
|
||||
$link-ios-color: map-get($colors, primary) !default;
|
||||
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-ios-background-color: $toolbar-background-color !default;
|
||||
$toolbar-ios-border-color: $toolbar-border-color !default;
|
||||
$toolbar-ios-text-color: $text-ios-color !default;
|
||||
$toolbar-ios-active-color: $link-ios-color !default;
|
||||
$toolbar-ios-text-color: $toolbar-text-color !default;
|
||||
$toolbar-ios-active-color: $toolbar-active-color !default;
|
||||
$toolbar-ios-inactive-color: $toolbar-inactive-color !default;
|
||||
|
||||
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-ios-border-color: $list-border-color !default;
|
||||
$item-ios-border-color: $list-ios-border-color !default;
|
||||
$item-ios-activated-background-color: #d9d9d9 !default;
|
||||
$item-ios-font-size: 1.6rem !default;
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
// Material Design Default Theme
|
||||
// ----------------------------------
|
||||
|
||||
$colors: (
|
||||
$colors-md: (
|
||||
|
||||
primary: #387ef5,
|
||||
secondary: #32db64,
|
||||
@@ -15,30 +15,29 @@ $colors: (
|
||||
|
||||
|
||||
$text-md-color: $text-color !default;
|
||||
$link-md-color: map-get($colors-md, primary) !default;
|
||||
$background-md-color: $background-color !default;
|
||||
$subdued-text-md-color: $subdued-text-color !default;
|
||||
|
||||
$list-md-text-color: $text-md-color !default;
|
||||
$list-md-background-color: $background-color !default;
|
||||
$list-md-text-color: $list-text-color !default;
|
||||
$list-md-background-color: $list-background-color !default;
|
||||
$list-md-border-color: $list-border-color !default;
|
||||
|
||||
$link-md-color: map-get($colors, primary) !default;
|
||||
|
||||
|
||||
// iOS Toolbar
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-md-background-color: $toolbar-background-color !default;
|
||||
$toolbar-md-border-color: $toolbar-border-color !default;
|
||||
$toolbar-md-text-color: $text-md-color !default;
|
||||
$toolbar-md-active-color: $link-md-color !default;
|
||||
$toolbar-md-text-color: $toolbar-text-color !default;
|
||||
$toolbar-md-active-color: $toolbar-active-color !default;
|
||||
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
|
||||
|
||||
|
||||
// Material Design Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-md-border-color: $list-border-color !default;
|
||||
$item-md-border-color: $list-md-border-color !default;
|
||||
$item-md-activated-background-color: #d9d9d9 !default;
|
||||
$item-md-font-size: 1.6rem !default;
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ $colors: (
|
||||
|
||||
|
||||
$text-color: #000 !default;
|
||||
$link-color: map-get($colors, primary) !default;
|
||||
$background-color: #fff !default;
|
||||
$subdued-text-color: #666 !default;
|
||||
|
||||
@@ -21,8 +22,6 @@ $list-text-color: $text-color !default;
|
||||
$list-background-color: $background-color !default;
|
||||
$list-border-color: #c8c7cc !default;
|
||||
|
||||
$link-color: map-get($colors, primary) !default;
|
||||
|
||||
$toolbar-background-color: #f8f8f8 !default;
|
||||
$toolbar-border-color: #b2b2b2 !default;
|
||||
$toolbar-text-color: $text-color !default;
|
||||
|
||||
@@ -28,6 +28,14 @@
|
||||
}
|
||||
|
||||
|
||||
// Copy Colors Map
|
||||
// --------------------------------------------------
|
||||
|
||||
@function copy-colors($colors-map) {
|
||||
@return map-merge($colors-map, ());
|
||||
}
|
||||
|
||||
|
||||
// String Replace Function
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user