mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
f0c6948ef8
* refactor(item): replaced item-left with item-start
replaced item-right with item-end
* style(item): fix spacing
* fix(item): add backwards support for left/right in ng-content
* fix(item): deprecated old variables, not breaking change
* feat(rtl): padding mixin
* feat(rtl): change all padding variables to start/end
add support for old variable names
* feat(rtl): replace all padding-side with start/end
* revert(functions): remove mixins
* feat(scss): add padding-horizontal and rtl functions (thanks brandy)
* feat(padding): use padding horizontal mixin everywhere
* feat(padding): use padding horizontal mixin everywhere
* fix(lint): change properties order. tests passing
* fix(sass-functions): reorder functions to avoid warning
* fix(scss): fix variable name
* perf(rtl): add check if need rtl selector
* feat(scss): add full padding function
* feat(scss): add border-radius mixin
* fix(rtl): change border-radius to use mixin
* perf(scss): only override if has something to override
* feat(scss): add margin scss variables for sides
* feat(scss): add margin mixin
* fix(scss): fix wrong support for 2/3 args
* feat(rtl): spread margins/paddings
* feat(rtl): spread margins/paddings
* feat(position): add rtl support for absolute
* fix(rtl): add missing calls
* fix(item): old attributes deprecated support
* revert(changelog): not intended to be changed
* fix(sass-functions): and not &&
* fix(padding): merge + missing padding
* style(): remove newline
* refactor(mixins): move mixins to mixins file
* style(): fix alignment
* fix(item): right padding should not be set
* fix(): incorrect defaults
* feat(scss-lint): disable some side variables
* fix(scss): lint passes
* feat(lint): disabled text-align
* fix(): correct variable name
* fix(fab): missed a comma
* fix(rtl): rtl method incorrect for multiple selectors
* fix(rtl): toolbar bad merge
* fix(rtl): icon-only is in px not em
* fix(rtl): toggle padding
* feat(rtl): correct notation for rtl custom
* Merge branch 'breaking-item' into start-end
# Conflicts:
# src/components/checkbox/checkbox.ios.scss
# src/components/checkbox/checkbox.md.scss
# src/components/checkbox/checkbox.wp.scss
# src/components/item/item.ios.scss
# src/components/item/item.md.scss
# src/components/item/item.wp.scss
# src/components/radio/radio.ios.scss
# src/components/radio/radio.md.scss
# src/components/radio/radio.wp.scss
# src/components/toggle/toggle.ios.scss
# src/components/toggle/toggle.md.scss
# src/components/toggle/toggle.wp.scss
* feat(rtl): optimize bundle result
* feat(float): use new standard
* feat(platform): gotta have direction on html
* fix(scss): add import + change code order
* fix(lint): passes
* fix(scss): fix for deprecated usages
* fix(scss): property use #{}
* fix(rtl): change css specificity, increase bundle size for multidirectional
* fix(scss): mixin manages priority
* fix(scss): select icon
* fix(scss): correct range variable
* fix(lint): unused import
* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir
* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir
* fix(include-rtl): change to app-direction, to be able to set rtl only apps
* fix(rtl): remove incorrect split-pane rtl behavior
* fix(menu): start needs position on rtl
* fix(float): renamed test file, add float mixin
* fix(scss-lint): lint excluded files
* fix(scss): add missing unit
* refactor(scss): change dir to direction, as the correct property name
* fix(app-direction): replace last usage of include-rtl
Closes: #11805 #11914
177 lines
5.3 KiB
SCSS
177 lines
5.3 KiB
SCSS
@import "../../themes/ionic.globals.wp";
|
|
|
|
// Windows Tabs
|
|
// --------------------------------------------------
|
|
|
|
// deprecated
|
|
$tabs-wp-tab-padding: null !default;
|
|
|
|
/// @prop - Padding top on the tab button
|
|
$tabs-wp-tab-padding-top: 12px !default;
|
|
|
|
/// @prop - Padding end on the tab button
|
|
$tabs-wp-tab-padding-end: 10px !default;
|
|
|
|
/// @prop - Padding bottom on the tab button
|
|
$tabs-wp-tab-padding-bottom: 5px !default;
|
|
|
|
/// @prop - Padding start on the tab button
|
|
$tabs-wp-tab-padding-start: 10px !default;
|
|
|
|
/// @prop - Minimum height of the tab button
|
|
$tabs-wp-tab-min-height: 4.8rem !default;
|
|
|
|
/// @prop - Font size of the tab button text
|
|
$tabs-wp-tab-font-size: 1.2rem !default;
|
|
|
|
/// @prop - Font weight of the tab button text
|
|
$tabs-wp-tab-font-weight: normal !default;
|
|
|
|
/// @prop - Opacity of the inactive tab button
|
|
$tabs-wp-tab-opacity: .7 !default;
|
|
|
|
/// @prop - Text color of the inactive tab button
|
|
$tabs-wp-tab-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default;
|
|
|
|
/// @prop - Text color of the active tab button
|
|
$tabs-wp-tab-color-active: $tabs-wp-tab-color-active !default;
|
|
|
|
/// @prop - Icon color of the inactive tab button
|
|
$tabs-wp-tab-icon-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default;
|
|
|
|
/// @prop - Icon color of the active tab button
|
|
$tabs-wp-tab-icon-color-active: $tabs-wp-tab-color-active !default;
|
|
|
|
/// @prop - Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
|
$tabs-wp-tab-border: 2px solid $tabs-wp-border-color !default;
|
|
|
|
/// @prop - Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
|
$tabs-wp-tab-border-color-active: $tabs-wp-tab-color-active !default;
|
|
|
|
/// @prop - Background of the tab button when pressed
|
|
$tabs-wp-tab-background-activated: rgba(0, 0, 0, .1) !default;
|
|
|
|
/// @prop - Size of the tab button icon
|
|
$tabs-wp-tab-icon-size: 2.4rem !default;
|
|
|
|
|
|
.tabs-wp .tabbar {
|
|
background: $tabs-wp-background;
|
|
}
|
|
|
|
.tabs-wp .tab-button {
|
|
@include border-radius(0);
|
|
|
|
min-height: $tabs-wp-tab-min-height;
|
|
|
|
border-bottom: $tabs-wp-tab-border;
|
|
font-size: $tabs-wp-tab-font-size;
|
|
font-weight: $tabs-wp-tab-font-weight;
|
|
color: $tabs-wp-tab-color;
|
|
box-shadow: none;
|
|
|
|
@include deprecated-variable(padding, $tabs-wp-tab-padding) {
|
|
@include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
|
|
}
|
|
}
|
|
|
|
.tabs-wp .tab-button[aria-selected=true] {
|
|
border-bottom-color: $tabs-wp-tab-border-color-active;
|
|
color: $tabs-wp-tab-color-active;
|
|
}
|
|
|
|
.tabs-wp .tab-button.activated {
|
|
background: $tabs-wp-tab-background-activated;
|
|
}
|
|
|
|
.tabs-wp[tabsPlacement=bottom] .tab-button {
|
|
border-top: $tabs-wp-tab-border;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] {
|
|
border-top-color: $tabs-wp-tab-border-color-active;
|
|
}
|
|
|
|
|
|
// Windows Tab Button Text
|
|
// --------------------------------------------------
|
|
|
|
.tabs-wp .tab-button-text {
|
|
@include margin(5px, null);
|
|
}
|
|
|
|
|
|
// Windows Tab Button Icon
|
|
// --------------------------------------------------
|
|
|
|
.tabs-wp .tab-button-icon {
|
|
min-width: $tabs-wp-tab-icon-size;
|
|
|
|
font-size: $tabs-wp-tab-icon-size;
|
|
|
|
color: $tabs-wp-tab-icon-color;
|
|
}
|
|
|
|
.tabs-wp .tab-button[aria-selected=true] .tab-button-icon {
|
|
color: $tabs-wp-tab-icon-color-active;
|
|
}
|
|
|
|
.tabs-wp[tabsLayout=icon-bottom] .tab-button {
|
|
@include padding(8px, null, 8px, null);
|
|
}
|
|
|
|
.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
|
|
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
|
|
.tabs-wp[tabsLayout=icon-end] .tab-button,
|
|
.tabs-wp[tabsLayout=icon-start] .tab-button {
|
|
@include padding(null, null, 10px, null);
|
|
}
|
|
|
|
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
|
|
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
|
|
.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
|
|
.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
|
|
min-width: 24px;
|
|
}
|
|
|
|
.tabs-wp[tabsLayout=icon-hide] .tab-button,
|
|
.tabs-wp[tabsLayout=title-hide] .tab-button,
|
|
.tabs-wp .tab-button.icon-only,
|
|
.tabs-wp .tab-button.has-title-only {
|
|
@include padding(6px, 10px);
|
|
}
|
|
|
|
|
|
// Windows Tabbar Color Mixin
|
|
// --------------------------------------------------
|
|
|
|
@mixin tabbar-wp($color-name, $color-base, $color-contrast) {
|
|
|
|
.tabs-wp-#{$color-name} .tabbar {
|
|
background-color: $color-base;
|
|
}
|
|
|
|
.tabs-wp-#{$color-name} .tab-button,
|
|
.tabs-wp-#{$color-name} .tab-button-icon {
|
|
color: rgba($color-contrast, $tabs-wp-tab-opacity);
|
|
}
|
|
|
|
.tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover),
|
|
.tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover) .tab-button-icon,
|
|
.tabs-wp-#{$color-name} .tab-button[aria-selected=true],
|
|
.tabs-wp-#{$color-name} .tab-button[aria-selected=true] .tab-button-icon {
|
|
border-color: $color-contrast;
|
|
color: $color-contrast;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Windows Tabbar Color Generation
|
|
// --------------------------------------------------
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
|
@include tabbar-wp($color-name, $color-base, $color-contrast);
|
|
}
|