aboutsummaryrefslogtreecommitdiffstats
path: root/uikit/static/css/components/dotnav.css
diff options
context:
space:
mode:
Diffstat (limited to 'uikit/static/css/components/dotnav.css')
-rw-r--r--uikit/static/css/components/dotnav.css125
1 files changed, 125 insertions, 0 deletions
diff --git a/uikit/static/css/components/dotnav.css b/uikit/static/css/components/dotnav.css
new file mode 100644
index 0000000..57a1771
--- /dev/null
+++ b/uikit/static/css/components/dotnav.css
@@ -0,0 +1,125 @@
+/*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/* ========================================================================
+ Component: Dotnav
+ ========================================================================== */
+/*
+ * 1. Gutter
+ * 2. Remove default list style
+ */
+.uk-dotnav {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
+ /* 1 */
+ margin-left: -15px;
+ margin-top: -15px;
+ /* 2 */
+ padding: 0;
+ list-style: none;
+}
+/*
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
+ */
+.uk-dotnav > * {
+ /* 1 */
+ -ms-flex: none;
+ -webkit-flex: none;
+ flex: none;
+ /* 2 */
+ padding-left: 15px;
+ margin-top: 15px;
+}
+/*
+ * DEPRECATED IE9 Support
+ */
+.uk-dotnav:before,
+.uk-dotnav:after {
+ content: "";
+ display: block;
+ overflow: hidden;
+}
+.uk-dotnav:after {
+ clear: both;
+}
+.uk-dotnav > * {
+ float: left;
+}
+/* Items
+ ========================================================================== */
+/*
+ * Items
+ * 1. Hide text if present
+ */
+.uk-dotnav > * > * {
+ display: block;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: rgba(50, 50, 50, 0.1);
+ /* 1 */
+ text-indent: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+}
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+.uk-dotnav > * > :hover,
+.uk-dotnav > * > :focus {
+ background: rgba(50, 50, 50, 0.4);
+ /* 2 */
+ outline: none;
+}
+/* OnClick */
+.uk-dotnav > * > :active {
+ background: rgba(50, 50, 50, 0.6);
+}
+/* Active */
+.uk-dotnav > .uk-active > * {
+ background: rgba(50, 50, 50, 0.4);
+}
+/* Modifier: `uk-dotnav-contrast`
+ ========================================================================== */
+.uk-dotnav-contrast > * > * {
+ background: rgba(255, 255, 255, 0.4);
+}
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ */
+.uk-dotnav-contrast > * > :hover,
+.uk-dotnav-contrast > * > :focus {
+ background: rgba(255, 255, 255, 0.7);
+}
+/* OnClick */
+.uk-dotnav-contrast > * > :active {
+ background: rgba(255, 255, 255, 0.9);
+}
+/* Active */
+.uk-dotnav-contrast > .uk-active > * {
+ background: rgba(255, 255, 255, 0.9);
+}
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+/*
+ * DEPRECATED
+ */
+.uk-dotnav-vertical {
+ -ms-flex-direction: column;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+}
+/*
+ * DEPRECATED IE9 Support
+ */
+.uk-dotnav-vertical > * {
+ float: none;
+}