mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
141 lines
2.1 KiB
SCSS
Executable File
141 lines
2.1 KiB
SCSS
Executable File
@import "../globals.core";
|
|
|
|
.hide,
|
|
[hidden],
|
|
template {
|
|
display: none !important;
|
|
}
|
|
|
|
// Focus Outline
|
|
// --------------------------------------------------
|
|
|
|
$focus-outline-border-color: #51a7e8 !default;
|
|
$focus-outline-box-shadow: 0 0 8px 0 $focus-outline-border-color !default;
|
|
|
|
|
|
:focus,
|
|
:active {
|
|
outline: none;
|
|
}
|
|
|
|
.focus-outline {
|
|
|
|
:focus {
|
|
outline: thin dotted;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
button:focus,
|
|
[button]:focus {
|
|
border-color: $focus-outline-border-color;
|
|
outline: thin solid $focus-outline-border-color;
|
|
box-shadow: $focus-outline-box-shadow;
|
|
}
|
|
|
|
ion-input :focus {
|
|
outline: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Focus Controls
|
|
// -------------------------------
|
|
|
|
focus-ctrl {
|
|
position: fixed;
|
|
|
|
input,
|
|
button {
|
|
position: fixed;
|
|
top: 1px;
|
|
left: -9999px;
|
|
z-index: 9999;
|
|
|
|
width: 9px;
|
|
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
|
|
// Backdrop
|
|
// --------------------------------------------------
|
|
|
|
$backdrop-color: #000 !default;
|
|
|
|
.backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $z-index-backdrop;
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-color: $backdrop-color;
|
|
opacity: .01;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
|
|
// 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;
|
|
z-index: $z-index-click-block;
|
|
display: block;
|
|
|
|
opacity: 0;
|
|
transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, calc(-100% + 1px), 0);
|
|
|
|
// background: red;
|
|
// opacity: .3;
|
|
}
|
|
|
|
.click-block-active {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
|
|
// Loading Icon
|
|
// --------------------------------------------------
|
|
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
ion-loading-icon {
|
|
display: flex;
|
|
|
|
align-self: center;
|
|
|
|
margin: auto;
|
|
|
|
font-family: "Ionicons";
|
|
|
|
font-size: 128px;
|
|
color: #666;
|
|
|
|
animation: rotation 45s infinite linear;
|
|
|
|
&::before {
|
|
content: "\f44e";
|
|
}
|
|
}
|