mirror of
https://github.com/google/pebble.git
synced 2025-03-18 10:01:22 +00:00
105 lines
2.6 KiB
SCSS
105 lines
2.6 KiB
SCSS
|
/**
|
|||
|
|
* Copyright 2025 Google LLC
|
|||
|
|
*
|
|||
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|||
|
|
* you may not use this file except in compliance with the License.
|
|||
|
|
* You may obtain a copy of the License at
|
|||
|
|
*
|
|||
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
|
|
*
|
|||
|
|
* Unless required by applicable law or agreed to in writing, software
|
|||
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|||
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
|
|
* See the License for the specific language governing permissions and
|
|||
|
|
* limitations under the License.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@charset "UTF-8";
|
|||
|
|
|
|||
|
|
// Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/
|
|||
|
|
|
|||
|
|
// A simple, semantic, usable-anywhere spinner. It takes its coloring from its
|
|||
|
|
// parent element, meaning it can be dropped anywhere without modification.
|
|||
|
|
|
|||
|
|
// 1. Positioning context.
|
|||
|
|
// 2. Define dimensions in ems so that we can…
|
|||
|
|
// 3. …adjust spinner size by just changing its `font-size`.
|
|||
|
|
// 4. Do not explicitly define a color (allow border to inherit current text
|
|||
|
|
// color). This makes the spinner usable on any color background. We’re also
|
|||
|
|
// only defining a bottom border here; this is what actually gives the
|
|||
|
|
// illusion of something spinning.
|
|||
|
|
// 5. Kellum method hidden text:
|
|||
|
|
// zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
|||
|
|
|
|||
|
|
.spinner {
|
|||
|
|
@include animation(0.5s spinner linear infinite);
|
|||
|
|
border-bottom: 1px solid; // 4
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 32px; // 3
|
|||
|
|
height: 1em; // 2
|
|||
|
|
overflow: hidden; // 5
|
|||
|
|
position: relative; // 1
|
|||
|
|
text-indent: 100%; // 5
|
|||
|
|
vertical-align: middle;
|
|||
|
|
width: 1em; // 2
|
|||
|
|
|
|||
|
|
// 1. Make the spinner a circle.
|
|||
|
|
&,
|
|||
|
|
&:after {
|
|||
|
|
border-radius: 100%; // 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// The (optically) non-spinning part of the spinner.
|
|||
|
|
// 1. Border around entire element fills in the rest of the ring.
|
|||
|
|
// 2. Paler than the part that appears to spin.
|
|||
|
|
&:after {
|
|||
|
|
border: 1px solid; // 1
|
|||
|
|
bottom: 0;
|
|||
|
|
content: '';
|
|||
|
|
left: 0;
|
|||
|
|
opacity: 0.5; // 2
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Size variants (built by adjusting `font-size`).
|
|||
|
|
.spinner--small { font-size: 16px; }
|
|||
|
|
.spinner--large { font-size: 64px; }
|
|||
|
|
|
|||
|
|
// Color overrides.
|
|||
|
|
.spinner--light { color: $white; }
|
|||
|
|
.spinner--dark { color: #333; }
|
|||
|
|
|
|||
|
|
.spinner--center {
|
|||
|
|
display: block;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spinner--padded {
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@-webkit-keyframes spinner {
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
-webkit-transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@-moz-keyframes spinner {
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
-moz-transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spinner {
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|