mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
870dcd6f99
Both .active and .activated classes exist within the css now. When a button/link/item is “active”, the .activated class gets added and removed. This is so Ionic is not removing any user defined .active classes, but also so users can use Ionic’s active classes (but not have to worry about them being removed automatically by Ionic). Styled the same by default, but easily overridden.
291 lines
6.9 KiB
SCSS
291 lines
6.9 KiB
SCSS
|
|
/**
|
|
* Bar (Headers and Footers)
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.bar {
|
|
@include display-flex();
|
|
@include translate3d(0,0,0);
|
|
@include user-select(none);
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: $z-index-bar;
|
|
|
|
box-sizing: border-box;
|
|
padding: $bar-padding-portrait;
|
|
|
|
width: 100%;
|
|
height: $bar-height;
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid $bar-default-border;
|
|
|
|
background-color: $bar-default-bg;
|
|
|
|
/* border-width: 1px will actually create 2 device pixels on retina */
|
|
/* this nifty trick sets an actual 1px border on hi-res displays */
|
|
background-size: 0;
|
|
@media (min--moz-device-pixel-ratio: 1.5),
|
|
(-webkit-min-device-pixel-ratio: 1.5),
|
|
(min-device-pixel-ratio: 1.5),
|
|
(min-resolution: 144dpi),
|
|
(min-resolution: 1.5dppx) {
|
|
border: none;
|
|
background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
|
|
background-position: bottom;
|
|
background-size: 100% 1px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&.bar-clear {
|
|
border: none;
|
|
background: none;
|
|
color: #fff;
|
|
|
|
.button {
|
|
color: #fff;
|
|
}
|
|
.title {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.item-input-inset {
|
|
.item-input-wrapper {
|
|
margin-top: -1px;
|
|
|
|
input {
|
|
padding-left: 8px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bar-light {
|
|
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
|
|
}
|
|
&.bar-stable {
|
|
@include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
|
|
}
|
|
&.bar-positive {
|
|
@include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
|
|
}
|
|
&.bar-calm {
|
|
@include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
|
|
}
|
|
&.bar-assertive {
|
|
@include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
|
|
}
|
|
&.bar-balanced {
|
|
@include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
|
|
}
|
|
&.bar-energized {
|
|
@include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
|
|
}
|
|
&.bar-royal {
|
|
@include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
|
|
}
|
|
&.bar-dark {
|
|
@include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
|
|
}
|
|
|
|
// Title inside of a bar is centered
|
|
.title {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: $z-index-bar-title;
|
|
overflow: hidden;
|
|
|
|
margin: 0 10px;
|
|
|
|
min-width: 30px;
|
|
|
|
text-align: center;
|
|
|
|
// Go into ellipsis if too small
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
font-size: $bar-title-font-size;
|
|
|
|
line-height: $bar-height;
|
|
|
|
&.title-left {
|
|
text-align: left;
|
|
}
|
|
&.title-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.title a {
|
|
color: inherit;
|
|
}
|
|
|
|
.button {
|
|
z-index: $z-index-bar-button;
|
|
padding: 0 $button-bar-button-padding;
|
|
min-width: initial;
|
|
min-height: $button-bar-button-height - 1;
|
|
font-size: $button-bar-button-font-size;
|
|
font-weight: 400;
|
|
line-height: $button-bar-button-height;
|
|
|
|
&.button-icon:before,
|
|
.icon:before,
|
|
&.icon:before,
|
|
&.icon-left:before,
|
|
&.icon-right:before {
|
|
padding-right: 2px;
|
|
padding-left: 2px;
|
|
font-size: $button-bar-button-icon-size;
|
|
line-height: $button-bar-button-height;
|
|
}
|
|
|
|
&.button-icon {
|
|
.icon:before,
|
|
&:before,
|
|
&.icon-left:before,
|
|
&.icon-right:before {
|
|
vertical-align: top;
|
|
font-size: $button-large-icon-size;
|
|
line-height: $button-bar-button-height;
|
|
}
|
|
}
|
|
&.button-clear {
|
|
font-size: $bar-title-font-size;
|
|
font-weight: 300;
|
|
padding-right: 2px;
|
|
padding-left: 2px;
|
|
|
|
.icon:before,
|
|
&.icon:before,
|
|
&.icon-left:before,
|
|
&.icon-right:before {
|
|
font-size: $button-large-icon-size;
|
|
line-height: $button-bar-button-height;
|
|
}
|
|
}
|
|
|
|
&.back-button.active,
|
|
&.back-button.activated {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.button-bar > .button,
|
|
.buttons > .button {
|
|
min-height: $button-bar-button-height - 1;
|
|
line-height: $button-bar-button-height;
|
|
}
|
|
|
|
.button-bar + .button,
|
|
.button + .button-bar {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
// Place the last button in a bar on the right of the bar
|
|
.title + .button:last-child,
|
|
> .button + .button:last-child,
|
|
> .button.pull-right,
|
|
.buttons.pull-right,
|
|
.title + .buttons {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
// Default styles for buttons inside of styled bars
|
|
.bar-light {
|
|
.button {
|
|
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
|
|
@include button-clear($bar-light-text, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-stable {
|
|
.button {
|
|
@include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
|
|
@include button-clear($bar-stable-text, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-positive {
|
|
.button {
|
|
@include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-calm {
|
|
.button {
|
|
@include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-assertive {
|
|
.button {
|
|
@include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-balanced {
|
|
.button {
|
|
@include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-energized {
|
|
.button {
|
|
@include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-royal {
|
|
.button {
|
|
@include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
.bar-dark {
|
|
.button {
|
|
@include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
|
|
@include button-clear(#fff, $bar-title-font-size);
|
|
}
|
|
}
|
|
|
|
// Header at top
|
|
.bar-header {
|
|
top: 0;
|
|
border-top-width: 0;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
// Footer at bottom
|
|
.bar-footer {
|
|
bottom: 0;
|
|
border-top-width: 1px;
|
|
border-bottom-width: 0;
|
|
background-position: top;
|
|
}
|
|
|
|
// Don't render padding if the bar is just for tabs
|
|
.bar-tabs {
|
|
padding: 0;
|
|
}
|
|
|
|
.bar-subheader {
|
|
top: $bar-height;
|
|
display: block;
|
|
}
|
|
.bar-subfooter {
|
|
bottom: $bar-height;
|
|
display: block;
|
|
}
|