Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(56)

Side by Side Diff: elements/viewer-progress-bar/viewer-progress-bar.css

Issue 152913003: Add page indicator and progress bar polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/html-office-public.git@master
Patch Set: Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /* Copyright 2013 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */
4
5 :host {
6 -webkit-transition: opacity 400ms ease-in-out;
7 background: rgb(29, 39, 57);
8 border-radius: 5px;
9 bottom: 26px;
10 box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2);
11 height: auto;
12 left: 26px;
13 position: fixed;
14 width: auto;
15 }
16
17 .scaler {
18 -webkit-transform: scale(0.25);
19 -webkit-transform-origin: 0 0;
20 float: left;
21 height: 44px;
22 margin: 8px;
23 width: 44px;
24 }
25
26 #segments {
27 border-radius: 50%;
28 height: 176px;
29 list-style: none;
30 margin: 0;
31 overflow: hidden;
32 padding: 0;
33 position: absolute;
34 width: 176px;
35 }
36
37 .segment {
38 -webkit-transform-origin: 0 100%;
39 background: rgb(227, 234, 249);
40 box-shadow: 0 0 0 6px rgb(29, 39, 57) inset;
41 height: 50%;
42 overflow: hidden;
43 position: absolute;
44 right: 0;
45 top: 0;
46 width: 50%;
47 }
48
49 .segment:nth-child(1) {
50 -webkit-transform: rotate(0) skewY(-45deg);
51 }
52
53 .segment:nth-child(2) {
54 -webkit-transform: rotate(45deg) skewY(-45deg);
55 }
56
57 .segment:nth-child(3) {
58 -webkit-transform: rotate(90deg) skewY(-45deg);
59 }
60
61 .segment:nth-child(4) {
62 -webkit-transform: rotate(135deg) skewY(-45deg);
63 }
64
65 .segment:nth-child(5) {
66 -webkit-transform: rotate(180deg) skewY(-45deg);
67 }
68
69 .segment:nth-child(6) {
70 -webkit-transform: rotate(225deg) skewY(-45deg);
71 }
72
73 .segment:nth-child(7) {
74 -webkit-transform: rotate(270deg) skewY(-45deg);
75 }
76
77 .segment:nth-child(8) {
78 -webkit-transform: rotate(315deg) skewY(-45deg);
79 }
80
81 .center-circle {
82 background-color: rgb(29, 39, 57);
83 border-radius: 50%;
84 height: 80px;
85 left: 44px;
86 margin: 0;
87 padding: 0;
88 position: absolute;
89 top: 44px;
90 width: 80px;
91 }
92
93 #text {
94 color: rgb(227, 234, 249);
95 float: left;
96 font-family: sans-serif;
97 font-size: 16px;
98 font-weight: bold;
99 line-height: 58px;
100 margin-right: 10px;
101 margin-top: 1px;
102 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698