jce-mobile-app/www/lib/ionic/scss/_util.scss

251 lines
3.9 KiB
SCSS
Raw Normal View History

2015-01-10 22:11:51 +00:00
/**
* Utility Classes
* --------------------------------------------------
*/
.hide {
display: none;
}
.opacity-hide {
opacity: 0;
}
.grade-b .opacity-hide,
.grade-c .opacity-hide {
opacity: 1;
display: none;
}
.show {
display: block;
}
.opacity-show {
opacity: 1;
}
.invisible {
visibility: hidden;
}
.keyboard-open .hide-on-keyboard-open {
display: none;
}
.keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
.keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
bottom: 0;
}
.inline {
display: inline-block;
}
.disable-pointer-events {
pointer-events: none;
}
.enable-pointer-events {
pointer-events: auto;
}
.disable-user-behavior {
// used to prevent the browser from doing its native behavior. this doesnt
// prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
@include user-select(none);
@include touch-callout(none);
@include tap-highlight-transparent();
-webkit-user-drag: none;
-ms-touch-action: none;
-ms-content-zooming: none;
}
// Fill the screen to block clicks (a better pointer-events: none) for the body
// to avoid full-page reflows and paints which can cause flickers
.click-block {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-click-block;
width: 100%;
height: 100%;
opacity: 0;
@include translate3d(0, 0, 0);
}
.click-block-hide {
@include translate3d(-9999px, 0, 0);
}
.no-resize {
resize: none;
}
.block {
display: block;
clear: both;
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}
}
.full-image {
width: 100%;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
/**
* Content Padding
* --------------------------------------------------
*/
.padding {
padding: $content-padding;
}
.padding-top,
.padding-vertical {
padding-top: $content-padding;
}
.padding-right,
.padding-horizontal {
padding-right: $content-padding;
}
.padding-bottom,
.padding-vertical {
padding-bottom: $content-padding;
}
.padding-left,
.padding-horizontal {
padding-left: $content-padding;
}
/**
* Rounded
* --------------------------------------------------
*/
.rounded {
border-radius: $border-radius-base;
}
/**
* Utility Colors
* --------------------------------------------------
* Utility colors are added to help set a naming convention. You'll
* notice we purposely do not use words like "red" or "blue", but
* instead have colors which represent an emotion or generic theme.
*/
.light, a.light {
color: $light;
}
.light-bg {
background-color: $light;
}
.light-border {
border-color: $button-light-border;
}
.stable, a.stable {
color: $stable;
}
.stable-bg {
background-color: $stable;
}
.stable-border {
border-color: $button-stable-border;
}
.positive, a.positive {
color: $positive;
}
.positive-bg {
background-color: $positive;
}
.positive-border {
border-color: $button-positive-border;
}
.calm, a.calm {
color: $calm;
}
.calm-bg {
background-color: $calm;
}
.calm-border {
border-color: $button-calm-border;
}
.assertive, a.assertive {
color: $assertive;
}
.assertive-bg {
background-color: $assertive;
}
.assertive-border {
border-color: $button-assertive-border;
}
.balanced, a.balanced {
color: $balanced;
}
.balanced-bg {
background-color: $balanced;
}
.balanced-border {
border-color: $button-balanced-border;
}
.energized, a.energized {
color: $energized;
}
.energized-bg {
background-color: $energized;
}
.energized-border {
border-color: $button-energized-border;
}
.royal, a.royal {
color: $royal;
}
.royal-bg {
background-color: $royal;
}
.royal-border {
border-color: $button-royal-border;
}
.dark, a.dark {
color: $dark;
}
.dark-bg {
background-color: $dark;
}
.dark-border {
border-color: $button-dark-border;
}