mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
css cleanup
This commit is contained in:
Adam Bradley
@@ -23,16 +23,16 @@ import * as util from 'ionic/util';
|
||||
'<div class="action-menu-group action-menu-options">' +
|
||||
'<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>' +
|
||||
'<button (^click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option">' +
|
||||
'<icon class="icon" [name]="b.icon" *ng-if="b.icon"></icon> ' +
|
||||
'<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
|
||||
'{{b.text}}' +
|
||||
'</button>' +
|
||||
'<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">' +
|
||||
'<icon class="icon" [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
|
||||
'<icon [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
|
||||
'{{destructiveText}}</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-menu-group action-menu-cancel" *ng-if="cancelText">' +
|
||||
'<button (click)="_cancel()">' +
|
||||
'<icon class="icon" [name]="cancelIcon"></icon> ' +
|
||||
'<icon [name]="cancelIcon"></icon> ' +
|
||||
'{{cancelText}}</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
|
||||
@@ -22,74 +22,74 @@ $action-menu-ios-icon-font-size: 1.4em !default;
|
||||
|
||||
ion-action-menu {
|
||||
text-align: center;
|
||||
|
||||
.action-menu-container {
|
||||
padding: 0 $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: $action-menu-ios-height;
|
||||
padding: $action-menu-ios-padding;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-ios-background-active;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin-bottom: $action-menu-ios-group-margin - 2;
|
||||
border-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-group:last-child {
|
||||
margin-bottom: $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
min-height: $action-menu-ios-height;
|
||||
|
||||
background: $action-menu-ios-background-color;
|
||||
font-weight: 400;
|
||||
|
||||
border-bottom: 1px solid $action-menu-ios-border-color;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: 2rem;
|
||||
font-size: $action-menu-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
color: $action-menu-ios-title-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-option {
|
||||
font-size: $action-menu-ios-button-font-size;
|
||||
color: $action-menu-ios-button-text-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-title:first-child,
|
||||
.action-menu-button:first-child,
|
||||
.action-menu-group button:first-child {
|
||||
border-top-left-radius: $action-menu-ios-border-radius;
|
||||
border-top-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-title:last-child,
|
||||
.action-menu-button:last-child,
|
||||
.action-menu-group button:last-child {
|
||||
border-bottom-left-radius: $action-menu-ios-border-radius;
|
||||
border-bottom-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.action-menu-container {
|
||||
padding: 0 $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
ion-action-menu button {
|
||||
min-height: $action-menu-ios-height;
|
||||
padding: $action-menu-ios-padding;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-ios-background-active;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin-bottom: $action-menu-ios-group-margin - 2;
|
||||
border-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-group:last-child {
|
||||
margin-bottom: $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
min-height: $action-menu-ios-height;
|
||||
|
||||
background: $action-menu-ios-background-color;
|
||||
font-weight: 400;
|
||||
|
||||
border-bottom: 1px solid $action-menu-ios-border-color;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: 2rem;
|
||||
font-size: $action-menu-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
color: $action-menu-ios-title-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-option {
|
||||
font-size: $action-menu-ios-button-font-size;
|
||||
color: $action-menu-ios-button-text-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-title:first-child,
|
||||
.action-menu-button:first-child,
|
||||
.action-menu-group button:first-child {
|
||||
border-top-left-radius: $action-menu-ios-border-radius;
|
||||
border-top-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-title:last-child,
|
||||
.action-menu-button:last-child,
|
||||
.action-menu-group button:last-child {
|
||||
border-bottom-left-radius: $action-menu-ios-border-radius;
|
||||
border-bottom-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
|
||||
&.hairlines .action-menu {
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
|
||||
@@ -20,63 +20,63 @@ $action-menu-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
ion-action-menu {
|
||||
margin: 0;
|
||||
|
||||
.action-menu-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option,
|
||||
.action-menu-destructive,
|
||||
.action-menu-cancel button {
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
font-size: $action-menu-md-button-font-size;
|
||||
color: $action-menu-md-button-text-color;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: $action-menu-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-menu-md-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: $action-menu-md-title-padding;
|
||||
font-size: $action-menu-md-title-font-size;
|
||||
color: $action-menu-md-title-color;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: normal;
|
||||
min-height: $action-menu-md-height;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-md-background-active;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-menu-md-background-color;
|
||||
|
||||
&:last-child button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-cancel {
|
||||
background-color: $action-menu-md-background-color;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.action-menu-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option,
|
||||
.action-menu-destructive,
|
||||
.action-menu-cancel button {
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
font-size: $action-menu-md-button-font-size;
|
||||
color: $action-menu-md-button-text-color;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ion-action-menu icon {
|
||||
display: inline-block;
|
||||
margin: $action-menu-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-menu-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: $action-menu-md-title-padding;
|
||||
font-size: $action-menu-md-title-font-size;
|
||||
color: $action-menu-md-title-color;
|
||||
}
|
||||
|
||||
ion-action-menu button {
|
||||
font-weight: normal;
|
||||
min-height: $action-menu-md-height;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-md-background-active;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-menu-md-background-color;
|
||||
|
||||
&:last-child button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-cancel {
|
||||
background-color: $action-menu-md-background-color;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
9
ionic/components/app/normalize.scss
vendored
9
ionic/components/app/normalize.scss
vendored
@@ -86,6 +86,15 @@ samp {
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
//
|
||||
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
form,
|
||||
input,
|
||||
optgroup,
|
||||
select {
|
||||
|
||||
@@ -85,40 +85,45 @@ button,
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Generate iOS Checkbox Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
}
|
||||
|
||||
@each $color, $value in auxiliary-colors() {
|
||||
|
||||
&[#{$color}] {
|
||||
// Material Design Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-theme-md($color-name, $color-value) {
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[outline] {
|
||||
|
||||
&.activated {
|
||||
|
||||
@if lightness(get-color($color-name, base)) > 90 {
|
||||
$fg-color: get-color($color-name, inverse);
|
||||
} @else {
|
||||
$fg-color: get-color($color-name, base);
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[outline] {
|
||||
@if lightness(get-color($color, base)) >= 80 {
|
||||
.md-ripple {
|
||||
//background-color: black;
|
||||
}
|
||||
} @else {
|
||||
.md-ripple {
|
||||
//background-color: get-color($color, base);
|
||||
}
|
||||
}
|
||||
|
||||
&.activated {
|
||||
|
||||
@if lightness(get-color($color, base)) > 90 {
|
||||
$fg-color: get-color($color, inverse);
|
||||
} @else {
|
||||
$fg-color: get-color($color, base);
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Button Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in auxiliary-colors() {
|
||||
|
||||
@include button-theme-md($color-name, $value);
|
||||
|
||||
}
|
||||
|
||||
@@ -12,15 +12,6 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
|
||||
.checkbox {
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $checkbox-ios-border-color-off;
|
||||
background-color: $checkbox-ios-bg-color-off;
|
||||
}
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $checkbox-ios-bg-color-on;
|
||||
border-color: $checkbox-ios-border-color-on;
|
||||
@@ -41,19 +32,24 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $checkbox-ios-border-color-off;
|
||||
background-color: $checkbox-ios-bg-color-off;
|
||||
}
|
||||
|
||||
|
||||
// iOS Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-ios($color-name, $bg-on) {
|
||||
|
||||
.checkbox[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
}
|
||||
|
||||
.checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -14,15 +14,6 @@ $checkbox-md-checkmark-color-on: $background-color !default;
|
||||
|
||||
.checkbox {
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
width: $checkbox-md-icon-size;
|
||||
height: $checkbox-md-icon-size;
|
||||
border-radius: $checkbox-md-border-radius;
|
||||
border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
|
||||
background-color: $checkbox-md-bg-color-off;
|
||||
}
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $checkbox-md-bg-color-on;
|
||||
border-color: $checkbox-md-border-color-on;
|
||||
@@ -43,19 +34,24 @@ $checkbox-md-checkmark-color-on: $background-color !default;
|
||||
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
width: $checkbox-md-icon-size;
|
||||
height: $checkbox-md-icon-size;
|
||||
border-radius: $checkbox-md-border-radius;
|
||||
border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
|
||||
background-color: $checkbox-md-bg-color-off;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Checkbox Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin checkbox-theme-md($color-name, $bg-on) {
|
||||
|
||||
.checkbox[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
}
|
||||
|
||||
.checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -64,8 +60,8 @@ $checkbox-md-checkmark-color-on: $background-color !default;
|
||||
// Generate Material Design Checkbox Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in auxiliary-colors() {
|
||||
@each $color-name, $color-value in auxiliary-colors() {
|
||||
|
||||
@include checkbox-theme-md($color-name, $value);
|
||||
@include checkbox-theme-md($color-name, $color-value);
|
||||
|
||||
}
|
||||
|
||||
@@ -2,32 +2,6 @@
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.platform-mobile textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
ion-input {
|
||||
|
||||
// text inputs
|
||||
@@ -54,6 +28,20 @@ ion-input {
|
||||
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.platform-mobile textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Placeholder
|
||||
// -------------------------------
|
||||
|
||||
@@ -34,9 +34,11 @@ ion-row {
|
||||
display: flex;
|
||||
padding: ($grid-padding-width / 2);
|
||||
width: 100%;
|
||||
|
||||
&[wrap] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&[flush] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -7,35 +7,31 @@ $popup-ios-bg-color: #f8f8f8 !default;
|
||||
$popup-ios-button-text-color: color(primary) !default;
|
||||
|
||||
|
||||
.popup {
|
||||
popup-wrapper {
|
||||
border-radius: $popup-ios-border-radius;
|
||||
background-color: $popup-ios-bg-color;
|
||||
}
|
||||
|
||||
popup-wrapper {
|
||||
border-radius: $popup-ios-border-radius;
|
||||
background-color: $popup-ios-bg-color;
|
||||
}
|
||||
.popup-head {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.popup-head {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.popup-body:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup-body:empty {
|
||||
padding: 0;
|
||||
}
|
||||
.popup-buttons {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
|
||||
.popup-buttons {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: $popup-ios-button-text-color;
|
||||
font-size: 14px;
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: $popup-ios-button-text-color;
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -6,35 +6,31 @@ $popup-md-border-radius: 13px !default;
|
||||
$popup-md-bg-color: #f8f8f8 !default;
|
||||
|
||||
|
||||
.popup {
|
||||
popup-wrapper {
|
||||
border-radius: $popup-md-border-radius;
|
||||
background-color: $popup-md-bg-color;
|
||||
}
|
||||
|
||||
popup-wrapper {
|
||||
border-radius: $popup-md-border-radius;
|
||||
background-color: $popup-md-bg-color;
|
||||
}
|
||||
.popup-head {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.popup-head {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.popup-body:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup-body:empty {
|
||||
padding: 0;
|
||||
}
|
||||
.popup-buttons {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
|
||||
.popup-buttons {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
.button {
|
||||
min-height: 42px;
|
||||
color: get-color('primary', base);
|
||||
font-size: 14px;
|
||||
|
||||
.button {
|
||||
min-height: 42px;
|
||||
color: get-color('primary', base);
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,13 +5,7 @@
|
||||
$radio-ios-active-color: color(primary) !default;
|
||||
|
||||
|
||||
.radio {
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 21px;
|
||||
}
|
||||
ion-radio {
|
||||
|
||||
&[aria-checked=true] .radio-icon:after {
|
||||
position: absolute;
|
||||
@@ -32,13 +26,19 @@ $radio-ios-active-color: color(primary) !default;
|
||||
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
|
||||
// iOS Radio Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin radio-theme-ios($color-name, $color-value) {
|
||||
|
||||
.radio[#{$color-name}] {
|
||||
ion-radio[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .radio-icon:after {
|
||||
border-color: $color-value;
|
||||
|
||||
@@ -12,7 +12,7 @@ $radio-md-transition-duration: 280ms !default;
|
||||
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
|
||||
.radio {
|
||||
ion-radio {
|
||||
|
||||
.radio-icon {
|
||||
position: relative;
|
||||
@@ -58,7 +58,7 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
@mixin radio-theme-md($color-name, $color-value) {
|
||||
|
||||
.radio[#{$color-name}] {
|
||||
ion-radio[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .radio-icon {
|
||||
border-color: $color-value;
|
||||
|
||||
@@ -3,13 +3,14 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.radio {
|
||||
ion-radio {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
}
|
||||
|
||||
.radio[aria-disabled=true] {
|
||||
pointer-events: none;
|
||||
ion-radio[aria-disabled=true] {
|
||||
opacity: 0.5;
|
||||
color: $subdued-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
|
||||
ion-scroll {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&.scroll-x scroll-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -26,7 +28,6 @@ ion-scroll {
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -14,44 +14,44 @@ $search-bar-ios-background-size: 13px 13px !default;
|
||||
padding: $search-bar-ios-padding;
|
||||
background: $search-bar-ios-background-color;
|
||||
border-bottom: 1px solid $search-bar-ios-border-color;
|
||||
}
|
||||
|
||||
.search-bar-icon {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
|
||||
transform: translateX(calc(50% - 60px));
|
||||
|
||||
@include svg-background-image($search-bar-ios-background-svg);
|
||||
background-size: $search-bar-ios-background-size;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.search-bar-input {
|
||||
height: $search-bar-ios-input-height;
|
||||
padding: 0 28px;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px center;
|
||||
|
||||
@include calc(padding-left, "50% - 28px");
|
||||
}
|
||||
|
||||
.search-bar-input-container.left-align {
|
||||
.search-bar-icon {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
|
||||
transform: translateX(calc(50% - 60px));
|
||||
|
||||
@include svg-background-image($search-bar-ios-background-svg);
|
||||
background-size: $search-bar-ios-background-size;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.search-bar-input {
|
||||
height: $search-bar-ios-input-height;
|
||||
padding: 0 28px;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px center;
|
||||
|
||||
@include calc(padding-left, "50% - 28px");
|
||||
}
|
||||
|
||||
.search-bar-input-container.left-align {
|
||||
.search-bar-icon {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.search-bar-input {
|
||||
padding-left: 28px;
|
||||
}
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,9 +3,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.segment .ion-segment {
|
||||
> button,
|
||||
> [button] {
|
||||
.ion-segment {
|
||||
|
||||
button,
|
||||
[button] {
|
||||
border-width: 1px;
|
||||
|
||||
transition: 100ms all linear;
|
||||
@@ -30,5 +31,7 @@
|
||||
&:last-of-type {
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,39 +1,45 @@
|
||||
ion-segment { display: block; }
|
||||
|
||||
// Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-segment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ion-segment {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
> button,
|
||||
> [button] {
|
||||
button,
|
||||
[button] {
|
||||
|
||||
flex: 1;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0 16px;
|
||||
|
||||
width: 0;
|
||||
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-radius: 0;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
background: none;
|
||||
|
||||
&.active {
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: $button-border-radius 0px 0px $button-border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-right-width: 1px;
|
||||
border-radius: 0px $button-border-radius $button-border-radius 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -22,9 +22,9 @@ $switch-ios-handle-bg-color: $switch-ios-off-bg-color !default;
|
||||
$switch-ios-transition-duration: 300ms !default;
|
||||
|
||||
|
||||
.switch {
|
||||
ion-switch {
|
||||
|
||||
.item-media {
|
||||
.item-media.media-switch {
|
||||
margin: 0;
|
||||
padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
|
||||
}
|
||||
@@ -125,7 +125,7 @@ $switch-ios-transition-duration: 300ms !default;
|
||||
|
||||
@mixin switch-theme-ios($color-name, $bg-on) {
|
||||
|
||||
.switch[#{$color-name}] {
|
||||
ion-switch[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .switch-icon {
|
||||
background-color: $bg-on;
|
||||
|
||||
@@ -18,9 +18,9 @@ $switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p
|
||||
$switch-md-transition-duration: 300ms !default;
|
||||
|
||||
|
||||
.switch {
|
||||
ion-switch {
|
||||
|
||||
.item-media {
|
||||
.item-media.media-switch {
|
||||
margin: 0;
|
||||
padding: 6px ($item-md-padding-right / 2) 6px $item-md-padding-left;
|
||||
}
|
||||
@@ -85,7 +85,7 @@ $switch-md-transition-duration: 300ms !default;
|
||||
|
||||
@mixin switch-theme-md($color-name, $bg-on) {
|
||||
|
||||
.switch[#{$color-name}] {
|
||||
ion-switch[#{$color-name}] {
|
||||
|
||||
&[aria-checked=true] .switch-icon {
|
||||
background-color: lighten($bg-on, 25%);
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.switch {
|
||||
ion-switch {
|
||||
@include user-select-none();
|
||||
}
|
||||
|
||||
.switch .media-switch {
|
||||
cursor: pointer;
|
||||
ion-switch .media-switch {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch[aria-disabled=true] {
|
||||
ion-switch[aria-disabled=true] {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
color: $subdued-text-color;
|
||||
|
||||
@@ -8,42 +8,38 @@ $tab-bar-ios-item-icon-size: 32px !default;
|
||||
$tab-bar-ios-height: 49px !default;
|
||||
|
||||
|
||||
.tabs {
|
||||
.tab-bar {
|
||||
border-top: 1px solid $toolbar-ios-border-color;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
border-top: 1px solid $toolbar-ios-border-color;
|
||||
.tabs[tab-bar-placement="top"] .tab-bar {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid $toolbar-ios-border-color;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: $tab-bar-ios-item-padding;
|
||||
min-height: $tab-bar-ios-height;
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
margin-bottom: 0;
|
||||
min-height: $tab-bar-ios-item-font-size + 1;
|
||||
font-size: $tab-bar-ios-item-font-size;
|
||||
}
|
||||
|
||||
.has-title-only .tab-button-text {
|
||||
font-size: $tab-bar-ios-item-font-size + 2;
|
||||
}
|
||||
|
||||
.tab-button-icon {
|
||||
font-size: $tab-bar-ios-item-icon-size;
|
||||
height: $tab-bar-ios-item-icon-size;
|
||||
min-width: $tab-bar-ios-item-icon-size + 5;
|
||||
|
||||
&:before {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&[tab-bar-placement="top"] .tab-bar {
|
||||
border-top: none;
|
||||
border-bottom: 1px solid $toolbar-ios-border-color;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: $tab-bar-ios-item-padding;
|
||||
min-height: $tab-bar-ios-height;
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
margin-bottom: 0;
|
||||
min-height: $tab-bar-ios-item-font-size + 1;
|
||||
font-size: $tab-bar-ios-item-font-size;
|
||||
}
|
||||
|
||||
.has-title-only .tab-button-text {
|
||||
font-size: $tab-bar-ios-item-font-size + 2;
|
||||
}
|
||||
|
||||
.tab-button-icon {
|
||||
font-size: $tab-bar-ios-item-icon-size;
|
||||
height: $tab-bar-ios-item-icon-size;
|
||||
min-width: $tab-bar-ios-item-icon-size + 5;
|
||||
|
||||
&:before {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[tab-bar-icons=right] .tab-button,
|
||||
|
||||
@@ -9,40 +9,37 @@ $tab-bar-md-item-icon-size: 2.4rem !default;
|
||||
$tab-bar-md-item-height: 4.8rem !default;
|
||||
|
||||
|
||||
.tabs {
|
||||
.tab-button {
|
||||
padding: $tab-bar-md-item-padding;
|
||||
min-height: $tab-bar-md-item-height;
|
||||
font-size: $tab-bar-md-item-font-size;
|
||||
font-weight: $tab-bar-md-item-font-weight;
|
||||
|
||||
.tab-button {
|
||||
padding: $tab-bar-md-item-padding;
|
||||
min-height: $tab-bar-md-item-height;
|
||||
font-size: $tab-bar-md-item-font-size;
|
||||
font-weight: $tab-bar-md-item-font-weight;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.tab-button[aria-selected="true"] {
|
||||
border-bottom-color: $tab-button-text-active;
|
||||
}
|
||||
|
||||
.tab-button[aria-selected="true"] {
|
||||
border-bottom-color: $tab-button-text-active;
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tab-button-icon {
|
||||
font-size: $tab-bar-md-item-icon-size;
|
||||
min-width: $tab-bar-md-item-icon-size + 5;
|
||||
}
|
||||
.tab-button-text {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tab-button-icon {
|
||||
font-size: $tab-bar-md-item-icon-size;
|
||||
min-width: $tab-bar-md-item-icon-size + 5;
|
||||
}
|
||||
|
||||
[tab-bar-icons=bottom] .tab-button {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
[tab-bar-icons=right] .tab-button,
|
||||
[tab-bar-icons=left] .tab-button {
|
||||
padding-bottom: 10px;
|
||||
|
||||
Reference in New Issue
Block a user