mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
baa04cde4d
Using the :active pseudo works fine for desktop, but mobile is a completely different beast, especially with the quirks of each platform. By intentionally not using any :active selectors and manually adding/removing a .active class, it gives us a precise control on how the active state works for ALL platforms. Additionally, this places less selectors in the css, and reduces the possibility of unnecessary repaints. Currently this method of using .active instead of :active is being applied to .button and .item elements.
289 lines
6.9 KiB
SCSS
289 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 {
|
|
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,
|
|
.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;
|
|
}
|