juicelang-theme 0.1.0

data/_sass/uikit/components/visibility.scss

@@ -0,0 +1,146 @@
+// Name:            Visibility
+// Description:     Utilities to show or hide content on breakpoints, hover or touch
+//
+// Component:       `uk-hidden-*`
+//                  `uk-visible-*`
+//                  `uk-invisible`
+//                  `uk-visible-toggle`
+//                  `uk-hidden-hover`
+//                  `uk-invisible-hover`
+//                  `uk-hidden-touch`
+//                  `uk-hidden-notouch`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Visibility
+ ========================================================================== */
+
+/*
+ * Hidden
+ * `hidden` attribute also set here to make it stronger
+ */
+
+[hidden],
+.uk-hidden { display: none !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-hidden\@s { display: none !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-hidden\@m { display: none !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-hidden\@l { display: none !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-hidden\@xl { display: none !important; }
+
+}
+
+/*
+ * Visible
+ */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-visible\@s { display: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-visible\@m { display: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-visible\@l { display: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+
+    .uk-visible\@xl { display: none !important; }
+
+}
+
+
+/* Visibility
+ ========================================================================== */
+
+.uk-invisible { visibility: hidden !important; }
+
+
+/* Based on the State of the Parent Element
+ ========================================================================== */
+
+/*
+ * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * The target stays visible if any element within receives focus through keyboard.
+ */
+
+/*
+ * Discard space when hidden.
+ */
+
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    position: absolute !important;
+    width: 0 !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+}
+
+/*
+ * Keep space when hidden.
+ */
+
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+
+
+/* Based on Hover Capability of the Pointing Device
+ ========================================================================== */
+
+/*
+ * Hover
+ */
+
+/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
+@media (hover: none) {
+    .uk-hidden-touch { display: none !important; }
+}
+
+/* Hide if primary pointing device supports hover, e.g. mice. */
+@media (hover) {
+    .uk-hidden-notouch { display: none !important; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-visibility-misc)) {@include hook-visibility-misc();}
+
+// @mixin hook-visibility-misc(){}

data/_sass/uikit/components/width.scss

@@ -0,0 +1,386 @@
+// Name:            Width
+// Description:     Utilities for widths
+//
+// Component:       `uk-child-width-*`
+//                  `uk-width-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$width-small-width:                              150px !default;
+$width-medium-width:                             300px !default;
+$width-large-width:                              450px !default;
+$width-xlarge-width:                             600px !default;
+$width-2xlarge-width:                            750px !default;
+
+
+/* ========================================================================
+   Component: Width
+ ========================================================================== */
+
+
+/* Equal child widths
+ ========================================================================== */
+
+[class*='uk-child-width'] > * {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.uk-child-width-1-2 > * { width: 50%; }
+.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
+.uk-child-width-1-4 > * { width: 25%; }
+.uk-child-width-1-5 > * { width: 20%; }
+.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }
+
+.uk-child-width-auto > * { width: auto; }
+
+/*
+ * 1. Reset the `min-width`, which is set to auto by default, because
+ *    flex items won't shrink below their minimum intrinsic content size.
+ *    Using `1px` instead of `0`, so items still wrap into the next line,
+ *    if they have zero width and padding and the predecessor is 100% wide.
+ */
+
+.uk-child-width-expand > :not([class*='uk-width']) {
+    flex: 1;
+    /* 1 */
+    min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-child-width-1-1\@s > * { width: 100%; }
+    .uk-child-width-1-2\@s > * { width: 50%; }
+    .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-4\@s > * { width: 25%; }
+    .uk-child-width-1-5\@s > * { width: 20%; }
+    .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
+
+    .uk-child-width-auto\@s > * { width: auto; }
+    .uk-child-width-expand\@s > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-child-width-1-1\@m > * { width: 100%; }
+    .uk-child-width-1-2\@m > * { width: 50%; }
+    .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-4\@m > * { width: 25%; }
+    .uk-child-width-1-5\@m > * { width: 20%; }
+    .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
+
+    .uk-child-width-auto\@m > * { width: auto; }
+    .uk-child-width-expand\@m > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-child-width-1-1\@l > * { width: 100%; }
+    .uk-child-width-1-2\@l > * { width: 50%; }
+    .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-4\@l > * { width: 25%; }
+    .uk-child-width-1-5\@l > * { width: 20%; }
+    .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
+
+    .uk-child-width-auto\@l > * { width: auto; }
+    .uk-child-width-expand\@l > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-child-width-1-1\@xl > * { width: 100%; }
+    .uk-child-width-1-2\@xl > * { width: 50%; }
+    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-4\@xl > * { width: 25%; }
+    .uk-child-width-1-5\@xl > * { width: 20%; }
+    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
+
+    .uk-child-width-auto\@xl > * { width: auto; }
+    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+
+/* Single Widths
+ ========================================================================== */
+
+/*
+ * 1. `max-width` is needed for the pixel-based classes
+ */
+
+[class*='uk-width'] {
+    box-sizing: border-box;
+    width: 100%;
+    /* 1 */
+    max-width: 100%;
+}
+
+/* Halves */
+.uk-width-1-2 { width: 50%; }
+
+/* Thirds */
+.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
+.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }
+
+/* Quarters */
+.uk-width-1-4 { width: 25%; }
+.uk-width-3-4 { width: 75%; }
+
+/* Fifths */
+.uk-width-1-5 { width: 20%; }
+.uk-width-2-5 { width: 40%; }
+.uk-width-3-5 { width: 60%; }
+.uk-width-4-5 { width: 80%; }
+
+/* Sixths */
+.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
+.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }
+
+/* Pixel */
+.uk-width-small { width: $width-small-width; }
+.uk-width-medium { width: $width-medium-width; }
+.uk-width-large { width: $width-large-width; }
+.uk-width-xlarge { width: $width-xlarge-width; }
+.uk-width-2xlarge { width: $width-2xlarge-width; }
+@if ($deprecated == true) {
+.uk-width-xxlarge { width: $width-2xlarge-width; }
+}
+
+/* Auto */
+.uk-width-auto { width: auto; }
+
+/* Expand */
+.uk-width-expand {
+    flex: 1;
+    min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    /* Whole */
+    .uk-width-1-1\@s { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@s { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }
+
+    /* Quarters */
+    .uk-width-1-4\@s { width: 25%; }
+    .uk-width-3-4\@s { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@s { width: 20%; }
+    .uk-width-2-5\@s { width: 40%; }
+    .uk-width-3-5\@s { width: 60%; }
+    .uk-width-4-5\@s { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }
+
+    /* Pixel */
+    .uk-width-small\@s { width: $width-small-width; }
+    .uk-width-medium\@s { width: $width-medium-width; }
+    .uk-width-large\@s { width: $width-large-width; }
+    .uk-width-xlarge\@s { width: $width-xlarge-width; }
+    .uk-width-2xlarge\@s { width: $width-2xlarge-width; }
+    @if ($deprecated == true) {
+.uk-width-xxlarge\@s { width: $width-2xlarge-width; }
+}
+
+    /* Auto */
+    .uk-width-auto\@s { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@s {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    /* Whole */
+    .uk-width-1-1\@m { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@m { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }
+
+    /* Quarters */
+    .uk-width-1-4\@m { width: 25%; }
+    .uk-width-3-4\@m { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@m { width: 20%; }
+    .uk-width-2-5\@m { width: 40%; }
+    .uk-width-3-5\@m { width: 60%; }
+    .uk-width-4-5\@m { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }
+
+    /* Pixel */
+    .uk-width-small\@m { width: $width-small-width; }
+    .uk-width-medium\@m { width: $width-medium-width; }
+    .uk-width-large\@m { width: $width-large-width; }
+    .uk-width-xlarge\@m { width: $width-xlarge-width; }
+    .uk-width-2xlarge\@m { width: $width-2xlarge-width; }
+    @if ($deprecated == true) {
+.uk-width-xxlarge\@m { width: $width-2xlarge-width; }
+}
+
+     /* Auto */
+    .uk-width-auto\@m { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@m {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    /* Whole */
+    .uk-width-1-1\@l { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@l { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }
+
+    /* Quarters */
+    .uk-width-1-4\@l { width: 25%; }
+    .uk-width-3-4\@l { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@l { width: 20%; }
+    .uk-width-2-5\@l { width: 40%; }
+    .uk-width-3-5\@l { width: 60%; }
+    .uk-width-4-5\@l { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }
+
+    /* Pixel */
+    .uk-width-small\@l { width: $width-small-width; }
+    .uk-width-medium\@l { width: $width-medium-width; }
+    .uk-width-large\@l { width: $width-large-width; }
+    .uk-width-xlarge\@l { width: $width-xlarge-width; }
+    .uk-width-2xlarge\@l { width: $width-2xlarge-width; }
+    @if ($deprecated == true) {
+.uk-width-xxlarge\@l { width: $width-2xlarge-width; }
+}
+
+    /* Auto */
+    .uk-width-auto\@l { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@l {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    /* Whole */
+    .uk-width-1-1\@xl { width: 100%; }
+
+    /* Halves */
+    .uk-width-1-2\@xl { width: 50%; }
+
+    /* Thirds */
+    .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }
+
+    /* Quarters */
+    .uk-width-1-4\@xl { width: 25%; }
+    .uk-width-3-4\@xl { width: 75%; }
+
+    /* Fifths */
+    .uk-width-1-5\@xl { width: 20%; }
+    .uk-width-2-5\@xl { width: 40%; }
+    .uk-width-3-5\@xl { width: 60%; }
+    .uk-width-4-5\@xl { width: 80%; }
+
+    /* Sixths */
+    .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }
+
+    /* Pixel */
+    .uk-width-small\@xl { width: $width-small-width; }
+    .uk-width-medium\@xl { width: $width-medium-width; }
+    .uk-width-large\@xl { width: $width-large-width; }
+    .uk-width-xlarge\@xl { width: $width-xlarge-width; }
+    .uk-width-2xlarge\@xl { width: $width-2xlarge-width; }
+    @if ($deprecated == true) {
+.uk-width-xxlarge\@xl { width: $width-2xlarge-width; }
+}
+
+    /* Auto */
+    .uk-width-auto\@xl { width: auto; }
+
+    /* Expand */
+    .uk-width-expand\@xl {
+        flex: 1;
+        min-width: 1px;
+    }
+
+}
+
+/* Intrinsic Widths
+ ========================================================================== */
+
+.uk-width-max-content { width: max-content; }
+
+.uk-width-min-content { width: min-content; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-width-misc)) {@include hook-width-misc();}
+
+// @mixin hook-width-misc(){}