mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
65 lines
2.1 KiB
SCSS
65 lines
2.1 KiB
SCSS
@import "../../themes/native/native.globals.md";
|
|
|
|
// Material Design Segment Button
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Opacity of the segment button
|
|
$segment-button-md-opacity: 0.6;
|
|
|
|
/// @prop - Text color of the segment button
|
|
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity);
|
|
|
|
/// @prop - Text color of the checked segment button
|
|
$segment-button-md-text-color-checked: ion-color(primary, base);
|
|
|
|
/// @prop - Background of the segment button
|
|
$segment-button-md-background: none;
|
|
|
|
/// @prop - Background of the checked segment button
|
|
$segment-button-md-background-checked: $segment-button-md-background;
|
|
|
|
/// @prop - Opacity of the disabled segment button
|
|
$segment-button-md-opacity-disabled: 0.3;
|
|
|
|
/// @prop - Padding top of the segment button
|
|
$segment-button-md-padding-top: 0;
|
|
|
|
/// @prop - Padding end of the segment button
|
|
$segment-button-md-padding-end: 16px;
|
|
|
|
/// @prop - Padding bottom of the segment button
|
|
$segment-button-md-padding-bottom: $segment-button-md-padding-top;
|
|
|
|
/// @prop - Padding start of the segment button
|
|
$segment-button-md-padding-start: $segment-button-md-padding-end;
|
|
|
|
/// @prop - Minimum height of the segment button
|
|
$segment-button-md-min-height: 48px;
|
|
|
|
/// @prop - Minimum width of the segment button
|
|
$segment-button-md-min-width: 90px;
|
|
|
|
/// @prop - Maximum width of the segment button
|
|
$segment-button-md-max-width: 360px;
|
|
|
|
/// @prop - Line height of the segment button
|
|
$segment-button-md-line-height: 40px;
|
|
|
|
/// @prop - Font size of the segment button
|
|
$segment-button-md-font-size: 14px;
|
|
|
|
/// @prop - Letter spacing of the segment button
|
|
$segment-button-md-letter-spacing: 0.06em;
|
|
|
|
/// @prop - Font weight of the segment button
|
|
$segment-button-md-font-weight: 500;
|
|
|
|
/// @prop - Transition of the segment button
|
|
$segment-button-md-transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
|
|
|
|
/// @prop - Transition of the animated segment button
|
|
$segment-button-md-transition-animated: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/// @prop - Size of an icon in the segment button
|
|
$segment-button-md-icon-size: 24px;
|