blazer-rails 0.1.0

data/vendor/assets/components/uikit/less/core/overlay.less

@@ -0,0 +1,534 @@
+// Name:            Overlay
+// Description:     Defines styles for image overlays
+//
+// Component:       `uk-overlay`
+//
+// Sub-objects:     `uk-overlay-panel`
+//                  `uk-overlay-hover`
+//                  `uk-overlay-active`
+//                  `uk-overlay-icon`
+//
+// Modifier:        `uk-overlay-background`
+//                  `uk-overlay-image`
+//                  `uk-overlay-top`
+//                  `uk-overlay-bottom`
+//                  `uk-overlay-left`
+//                  `uk-overlay-right`
+//                  `uk-overlay-fade`
+//                  `uk-overlay-scale`
+//                  `uk-overlay-spin`
+//                  `uk-overlay-grayscale`
+//                  `uk-overlay-slide-top`
+//                  `uk-overlay-slide-bottom`
+//                  `uk-overlay-slide-left`
+//                  `uk-overlay-slide-right`
+//
+// DEPRECATED:      `uk-overlay-area`
+//                  `uk-overlay-area-content`
+//                  `uk-overlay-caption`
+//                  `uk-overlay-toggle`
+//
+// States:          `uk-hover`
+//                  `uk-active`
+//                  `uk-ignore`
+//
+// Uses:            Icon: `[class*='uk-icon-']`
+//                  `uk-border-circle`
+//
+// Markup:
+//
+// <!-- uk-overlay -->
+// <figure class="uk-overlay" href="">
+//     <img src="" alt="">
+//     <figcaption class="uk-overlay-panel"></figcaption>
+// </figure>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@overlay-panel-padding:                         20px;
+@overlay-panel-color:                           #fff;
+
+@overlay-panel-background:                      rgba(0,0,0,0.5);
+
+@overlay-icon:                                  "\f002";
+@overlay-icon-size:                             50px;
+@overlay-icon-color:                            #fff;
+
+@overlay-fade-in-opacity:                       1;
+@overlay-fade-out-opacity:                      0.7;
+
+@overlay-scale-in-scale:                        1.1;
+@overlay-scale-out-scale:                       1;
+
+@overlay-spin-in-scale:                         1.1;
+@overlay-spin-out-scale:                        1;
+@overlay-spin-in-rotate:                        3deg;
+@overlay-spin-out-rotate:                       0deg;
+
+@overlay-panel-link-color:                      inherit;
+@overlay-panel-link-text-decoration:            underline;
+
+// DEPRECATED
+@overlay-area-background:                       rgba(0,0,0,0.3);
+
+@overlay-area-icon:                             "\f002";
+@overlay-area-icon-size:                        50px;
+@overlay-area-icon-color:                       #fff;
+
+@overlay-area-content-font-size:                1rem;
+@overlay-area-content-padding-horizontal:       15px;
+@overlay-area-content-color:                    #fff;
+@overlay-area-content-link-color:               inherit;
+
+@overlay-caption-background:                    rgba(0,0,0,0.5);
+@overlay-caption-padding:                       15px;
+@overlay-caption-color:                         #fff;
+
+
+/* ========================================================================
+   Component: Overlay
+ ========================================================================== */
+
+/*
+ * 1. Container width fits its content
+ * 2. Create position context
+ * 3. Set max-width for responsive images to prevent `inline-block` consequences
+ * 4. Remove the gap between the container and its child element
+ * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome
+ * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
+ * 7. Reset margin
+ */
+
+.uk-overlay {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    position: relative;
+    /* 3 */
+    max-width: 100%;
+    /* 4 */
+    vertical-align: middle;
+    /* 5 */
+    overflow: hidden;
+    /* 6 */
+    -webkit-transform: translateZ(0);
+    /* 7 */
+    margin: 0;
+}
+
+/* 6 for Safari */
+.uk-overlay.uk-border-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }
+
+/*
+ * Remove margin from content
+ */
+
+.uk-overlay > :first-child { margin-bottom: 0; }
+
+
+/* Sub-object `uk-overlay-panel`
+ ========================================================================== */
+
+/*
+ * 1. Position cover
+ * 2. Style
+ */
+
+.uk-overlay-panel {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    /* 2 */
+    padding: @overlay-panel-padding;
+    color: @overlay-panel-color;
+    .hook-overlay-panel;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-overlay-panel > :last-child,
+.uk-overlay-panel.uk-flex > * > :last-child { margin-bottom: 0; }
+
+/*
+ * Keep color for headings if the default heading color is changed
+ */
+
+.uk-overlay-panel h1,
+.uk-overlay-panel h2,
+.uk-overlay-panel h3,
+.uk-overlay-panel h4,
+.uk-overlay-panel h5,
+.uk-overlay-panel h6 { color: inherit; }
+
+.uk-overlay-panel a:not([class]) {
+    color: @overlay-panel-link-color;
+    text-decoration: @overlay-panel-link-text-decoration;
+}
+
+.uk-overlay-panel a[class*='uk-icon-']:not(.uk-icon-button) { color: @overlay-panel-link-color; }
+
+
+/* Sub-object `uk-overlay-hover` and `uk-overlay-active`
+ ========================================================================== */
+
+.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }
+
+.uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }
+
+
+/* Modifier `uk-overlay-background`
+ ========================================================================== */
+
+.uk-overlay-background {
+    background: @overlay-panel-background;
+    .hook-overlay-background;
+}
+
+
+/* Modifier `uk-overlay-image`
+ ========================================================================== */
+
+/*
+ * Reset panel
+ */
+
+.uk-overlay-image {
+    padding: 0;
+    .hook-overlay-image;
+}
+
+
+/* Position modifiers
+ ========================================================================== */
+
+.uk-overlay-top { bottom: auto; }
+
+.uk-overlay-bottom { top: auto; }
+
+.uk-overlay-left { right: auto; }
+
+.uk-overlay-right { left: auto; }
+
+
+/* Sub-object `uk-overlay-icon`
+ ========================================================================== */
+
+.uk-overlay-icon:before {
+    content: @overlay-icon;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: @overlay-icon-size;
+    height: @overlay-icon-size;
+    margin-top: -(@overlay-icon-size / 2);
+    margin-left: -(@overlay-icon-size / 2);
+    font-size: @overlay-icon-size;
+    line-height: 1;
+    font-family: FontAwesome;
+    text-align: center;
+    color: @overlay-icon-color;
+    .hook-overlay-icon;
+}
+
+
+/* Transitions
+ ========================================================================== */
+
+.uk-overlay-fade,
+.uk-overlay-scale,
+.uk-overlay-spin,
+.uk-overlay-grayscale,
+.uk-overlay-blur,
+[class*='uk-overlay-slide'] {
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+    transition-property: opacity, transform, filter;
+}
+
+.uk-overlay-active .uk-overlay-fade,
+.uk-overlay-active .uk-overlay-scale,
+.uk-overlay-active .uk-overlay-spin,
+.uk-overlay-active [class*='uk-overlay-slide'] { transition-duration: 0.8s; }
+
+/*
+ * Fade
+ */
+
+.uk-overlay-fade { opacity: @overlay-fade-out-opacity; }
+
+.uk-overlay-hover:hover .uk-overlay-fade,
+.uk-overlay-hover.uk-hover .uk-overlay-fade,
+.uk-overlay-active .uk-active > .uk-overlay-fade { opacity: @overlay-fade-in-opacity; }
+
+/*
+ * Scale
+ */
+
+.uk-overlay-scale {
+    -webkit-transform: scale(@overlay-scale-out-scale);
+    transform: scale(@overlay-scale-out-scale);
+}
+
+.uk-overlay-hover:hover .uk-overlay-scale,
+.uk-overlay-hover.uk-hover .uk-overlay-scale,
+.uk-overlay-active .uk-active > .uk-overlay-scale {
+    -webkit-transform: scale(@overlay-scale-in-scale);
+    transform: scale(@overlay-scale-in-scale);
+}
+
+/*
+ * Spin
+ */
+
+.uk-overlay-spin {
+    -webkit-transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
+    transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
+}
+
+.uk-overlay-hover:hover .uk-overlay-spin,
+.uk-overlay-hover.uk-hover .uk-overlay-spin,
+.uk-overlay-active .uk-active > .uk-overlay-spin {
+    -webkit-transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
+    transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
+}
+
+/*
+ * Grayscale
+ */
+
+.uk-overlay-grayscale {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+.uk-overlay-hover:hover .uk-overlay-grayscale,
+.uk-overlay-hover.uk-hover .uk-overlay-grayscale,
+.uk-overlay-active .uk-active > .uk-overlay-grayscale {
+    -webkit-filter: grayscale(0%);
+    filter: grayscale(0%);
+}
+
+/*
+ * Slide
+ */
+
+[class*='uk-overlay-slide'] { opacity: 0; }
+
+/* Top */
+.uk-overlay-slide-top {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+}
+
+/* Bottom */
+.uk-overlay-slide-bottom {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+}
+
+/* Left */
+.uk-overlay-slide-left {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+}
+
+/* Right */
+.uk-overlay-slide-right {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+}
+
+/* Hover */
+.uk-overlay-hover:hover [class*='uk-overlay-slide'],
+.uk-overlay-hover.uk-hover [class*='uk-overlay-slide'],
+.uk-overlay-active .uk-active > [class*='uk-overlay-slide'] {
+    opacity: 1;
+    -webkit-transform: translateX(0) translateY(0);
+    transform: translateX(0) translateY(0);
+}
+
+
+/* DEPRECATED
+ * Sub-object `uk-overlay-area`
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Set style
+ * 3. Fade-in transition
+ */
+
+.uk-overlay-area {
+    /* 1 */
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    /* 2 */
+    background: @overlay-area-background;
+    /* 3 */
+    opacity: 0;
+    -webkit-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+    -webkit-transform: translate3d(0,0,0);
+    .hook-overlay-area;
+}
+
+/*
+ * Hover
+ * 1. `uk-hover` to support touch devices
+ * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
+ */
+
+.uk-overlay:hover .uk-overlay-area,
+.uk-overlay.uk-hover .uk-overlay-area, // 1
+.uk-overlay-toggle:hover .uk-overlay-area, // 2
+.uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; }
+
+/*
+ * Icon
+ */
+
+.uk-overlay-area:empty:before {
+    content: @overlay-area-icon;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: @overlay-area-icon-size;
+    height: @overlay-area-icon-size;
+    margin-top: -(@overlay-area-icon-size / 2);
+    margin-left: -(@overlay-area-icon-size / 2);
+    font-size: @overlay-area-icon-size;
+    line-height: 1;
+    font-family: FontAwesome;
+    text-align: center;
+    color: @overlay-area-icon-color;
+    .hook-overlay-area-icon;
+}
+
+
+/* DEPRECATED
+ * Sub-object `uk-overlay-area-content`
+ ========================================================================== */
+
+/*
+ * Remove whitespace between child elements when using `inline-block`
+ * Needed for Firefox
+ */
+
+.uk-overlay-area:not(:empty) { font-size: 0.001px; }
+
+/*
+ * 1. Needed for vertical alignment
+ */
+
+.uk-overlay-area:not(:empty):before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+/*
+ * 1. Set vertical alignment
+ * 2. Reset whitespace hack
+ * 3. Set horizontal alignment
+ * 4. Set style
+ */
+
+.uk-overlay-area-content {
+    /* 1 */
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+    vertical-align: middle;
+    /* 2 */
+    font-size: @overlay-area-content-font-size;
+    /* 3 */
+    text-align: center;
+    /* 4 */
+    padding: 0 @overlay-area-content-padding-horizontal;
+    color: @overlay-area-content-color;
+    .hook-overlay-area-content;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-overlay-area-content > :last-child { margin-bottom: 0; }
+
+/*
+ * Links in overlay area
+ */
+
+.uk-overlay-area-content a:not([class]),
+.uk-overlay-area-content a:not([class]):hover { color: @overlay-area-content-link-color; }
+
+
+/* DEPRECATED
+ * Sub-object `uk-overlay-caption`
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Set style
+ * 3. Fade-in transition
+ */
+
+.uk-overlay-caption {
+    /* 1 */
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    /* 2 */
+    padding: @overlay-caption-padding;
+    background: @overlay-caption-background;
+    color: @overlay-caption-color;
+    /* 3 */
+    opacity: 0;
+    -webkit-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+    -webkit-transform: translate3d(0,0,0);
+    .hook-overlay-caption;
+}
+
+/*
+ * Hover
+ * 1. `uk-hover` to support touch devices
+ * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
+ */
+
+.uk-overlay:hover .uk-overlay-caption,
+.uk-overlay.uk-hover .uk-overlay-caption, // 1
+.uk-overlay-toggle:hover .uk-overlay-caption, // 2
+.uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; }
+
+
+// Hooks
+// ========================================================================
+
+.hook-overlay-misc;
+
+.hook-overlay-panel() {}
+.hook-overlay-background() {}
+.hook-overlay-image() {}
+.hook-overlay-icon() {}
+.hook-overlay-misc() {}
+
+// DEPRECATED
+.hook-overlay-area() {}
+.hook-overlay-area-icon() {}
+.hook-overlay-area-content() {}
+.hook-overlay-caption() {}