mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
101 lines
1.8 KiB
SCSS
101 lines
1.8 KiB
SCSS
|
|
.no-transition {
|
|
transition: none !important;
|
|
}
|
|
|
|
.hide.hide.hide {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Content Padding
|
|
// --------------------------------------------------
|
|
|
|
$content-padding: 10px !default;
|
|
|
|
|
|
.padding,
|
|
.padding > .scroll-content {
|
|
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;
|
|
}
|
|
|
|
|
|
// Focus Outline
|
|
// --------------------------------------------------
|
|
// When a keydown event happens, from a tab key, then the
|
|
// 'key-input' class is added to the body element so focusable
|
|
// elements have an outline. On a mousedown or touchstart
|
|
// event then the 'key-input' class is removed.
|
|
|
|
:focus,
|
|
:active {
|
|
outline: none;
|
|
}
|
|
|
|
.key-input {
|
|
|
|
:focus {
|
|
outline-offset: -1px;
|
|
outline: thin dotted;
|
|
}
|
|
|
|
.button:focus {
|
|
outline-offset: -2px;
|
|
outline: 2px solid red;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Click Block
|
|
// --------------------------------------------------
|
|
// Fill the screen to block clicks (a better pointer-events: none)
|
|
// to avoid full-page reflows and paints which can cause flickers
|
|
|
|
.click-block {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
z-index: $z-index-click-block;
|
|
transform: translate3d(-9999px, 0px, 0px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.click-block-active {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
|
|
// Node Inserted Animation
|
|
// --------------------------------------------------
|
|
// Used by the toolbar to know when the title has been rendered
|
|
// http://davidwalsh.name/detect-node-insertion
|
|
|
|
@keyframes nodeInserted {
|
|
from { transform: scale(0.999); }
|
|
to { transform: scale(1); }
|
|
}
|