summaryrefslogtreecommitdiff
path: root/css/components/dotnav.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/components/dotnav.css')
-rwxr-xr-xcss/components/dotnav.css124
1 files changed, 124 insertions, 0 deletions
diff --git a/css/components/dotnav.css b/css/components/dotnav.css
new file mode 100755
index 0000000..f3c2e60
--- /dev/null
+++ b/css/components/dotnav.css
@@ -0,0 +1,124 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2/* ========================================================================
3 Component: Dotnav
4 ========================================================================== */
5/*
6 * 1. Gutter
7 * 2. Remove default list style
8 */
9.uk-dotnav {
10 display: -ms-flexbox;
11 display: -webkit-flex;
12 display: flex;
13 -ms-flex-wrap: wrap;
14 -webkit-flex-wrap: wrap;
15 flex-wrap: wrap;
16 /* 1 */
17 margin-left: -15px;
18 margin-top: -15px;
19 /* 2 */
20 padding: 0;
21 list-style: none;
22}
23/*
24 * 1. Space is allocated solely based on content dimensions
25 * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
26 */
27.uk-dotnav > * {
28 /* 1 */
29 -ms-flex: none;
30 -webkit-flex: none;
31 flex: none;
32 /* 2 */
33 padding-left: 15px;
34 margin-top: 15px;
35}
36/*
37 * DEPRECATED IE9 Support
38 */
39.uk-dotnav:before,
40.uk-dotnav:after {
41 content: "";
42 display: block;
43 overflow: hidden;
44}
45.uk-dotnav:after {
46 clear: both;
47}
48.uk-dotnav > * {
49 float: left;
50}
51/* Items
52 ========================================================================== */
53/*
54 * Items
55 * 1. Hide text if present
56 */
57.uk-dotnav > * > * {
58 display: block;
59 box-sizing: content-box;
60 width: 20px;
61 height: 20px;
62 border-radius: 50%;
63 background: rgba(50, 50, 50, 0.1);
64 /* 1 */
65 text-indent: 100%;
66 overflow: hidden;
67 white-space: nowrap;
68}
69/*
70 * Hover
71 * 1. Apply hover style also to focus state
72 * 2. Remove default focus style
73 */
74.uk-dotnav > * > :hover,
75.uk-dotnav > * > :focus {
76 background: rgba(50, 50, 50, 0.4);
77 /* 2 */
78 outline: none;
79}
80/* OnClick */
81.uk-dotnav > * > :active {
82 background: rgba(50, 50, 50, 0.6);
83}
84/* Active */
85.uk-dotnav > .uk-active > * {
86 background: rgba(50, 50, 50, 0.4);
87}
88/* Modifier: `uk-dotnav-contrast`
89 ========================================================================== */
90.uk-dotnav-contrast > * > * {
91 background: rgba(255, 255, 255, 0.4);
92}
93/*
94 * Hover
95 * 1. Apply hover style also to focus state
96 */
97.uk-dotnav-contrast > * > :hover,
98.uk-dotnav-contrast > * > :focus {
99 background: rgba(255, 255, 255, 0.7);
100}
101/* OnClick */
102.uk-dotnav-contrast > * > :active {
103 background: rgba(255, 255, 255, 0.9);
104}
105/* Active */
106.uk-dotnav-contrast > .uk-active > * {
107 background: rgba(255, 255, 255, 0.9);
108}
109/* Modifier: 'uk-dotnav-vertical'
110 ========================================================================== */
111/*
112 * DEPRECATED
113 */
114.uk-dotnav-vertical {
115 -ms-flex-direction: column;
116 -webkit-flex-direction: column;
117 flex-direction: column;
118}
119/*
120 * DEPRECATED IE9 Support
121 */
122.uk-dotnav-vertical > * {
123 float: none;
124}