mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(segment): cleaned up UI of segments inside of a toolbar
references #356
This commit is contained in:
@ -13,6 +13,7 @@ $segment-button-ios-text-color: inverse($segment-button-ios-bg-col
|
||||
$segment-button-ios-activated-transition: 100ms all linear !default;
|
||||
$segment-button-ios-hover-opacity: 0.16 !default;
|
||||
|
||||
$segment-button-ios-toolbar-button-max-width: 100px !default;
|
||||
|
||||
.ion-segment {
|
||||
|
||||
@ -63,6 +64,17 @@ $segment-button-ios-hover-opacity: 0.16 !default;
|
||||
|
||||
}
|
||||
|
||||
ion-toolbar {
|
||||
.ion-segment {
|
||||
justify-content: center;
|
||||
|
||||
button,
|
||||
[button] {
|
||||
max-width: $segment-button-ios-toolbar-button-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
|
@ -34,6 +34,13 @@ $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !de
|
||||
}
|
||||
}
|
||||
|
||||
ion-toolbar {
|
||||
.ion-segment {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Default Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
|
Reference in New Issue
Block a user