juicelang-theme 0.1.0

data/_sass/uikit/components/flex.scss

@@ -0,0 +1,200 @@
+// Name:            Flex
+// Description:     Utilities for layouts based on flexbox
+//
+// Component:       `uk-flex-*`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+.uk-flex { display: flex; }
+.uk-flex-inline { display: inline-flex; }
+
+
+/* Alignment
+ ========================================================================== */
+
+/*
+ * Align items along the main axis of the current line of the flex container
+ * Row: Horizontal
+ */
+
+// Default
+.uk-flex-left { justify-content: flex-start; }
+.uk-flex-center { justify-content: center; }
+.uk-flex-right { justify-content: flex-end; }
+.uk-flex-between { justify-content: space-between; }
+.uk-flex-around { justify-content: space-around; }
+
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-left\@s { justify-content: flex-start; }
+    .uk-flex-center\@s { justify-content: center; }
+    .uk-flex-right\@s { justify-content: flex-end; }
+    .uk-flex-between\@s { justify-content: space-between; }
+    .uk-flex-around\@s { justify-content: space-around; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-left\@m { justify-content: flex-start; }
+    .uk-flex-center\@m { justify-content: center; }
+    .uk-flex-right\@m { justify-content: flex-end; }
+    .uk-flex-between\@m { justify-content: space-between; }
+    .uk-flex-around\@m { justify-content: space-around; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-left\@l { justify-content: flex-start; }
+    .uk-flex-center\@l { justify-content: center; }
+    .uk-flex-right\@l { justify-content: flex-end; }
+    .uk-flex-between\@l { justify-content: space-between; }
+    .uk-flex-around\@l { justify-content: space-around; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-left\@xl { justify-content: flex-start; }
+    .uk-flex-center\@xl { justify-content: center; }
+    .uk-flex-right\@xl { justify-content: flex-end; }
+    .uk-flex-between\@xl { justify-content: space-between; }
+    .uk-flex-around\@xl { justify-content: space-around; }
+
+}
+
+/*
+ * Align items in the cross axis of the current line of the flex container
+ * Row: Vertical
+ */
+
+// Default
+.uk-flex-stretch { align-items: stretch; }
+.uk-flex-top { align-items: flex-start; }
+.uk-flex-middle { align-items: center; }
+.uk-flex-bottom { align-items: flex-end; }
+
+
+/* Direction
+ ========================================================================== */
+
+// Default
+.uk-flex-row { flex-direction: row; }
+.uk-flex-row-reverse { flex-direction: row-reverse; }
+.uk-flex-column { flex-direction: column; }
+.uk-flex-column-reverse { flex-direction: column-reverse; }
+
+
+/* Wrap
+ ========================================================================== */
+
+// Default
+.uk-flex-nowrap { flex-wrap: nowrap; }
+.uk-flex-wrap { flex-wrap: wrap; }
+.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+/*
+ * Aligns items within the flex container when there is extra space in the cross-axis
+ * Only works if there is more than one line of flex items
+ */
+
+// Default
+.uk-flex-wrap-stretch { align-content: stretch; }
+.uk-flex-wrap-top { align-content: flex-start; }
+.uk-flex-wrap-middle { align-content: center; }
+.uk-flex-wrap-bottom { align-content: flex-end; }
+.uk-flex-wrap-between { align-content: space-between; }
+.uk-flex-wrap-around { align-content: space-around; }
+
+
+/* Item ordering
+ ========================================================================== */
+
+/*
+ * Default is 0
+ */
+
+.uk-flex-first { order: -1;}
+.uk-flex-last { order: 99;}
+
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-first\@s { order: -1; }
+    .uk-flex-last\@s { order: 99; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-first\@m { order: -1; }
+    .uk-flex-last\@m { order: 99; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-first\@l { order: -1; }
+    .uk-flex-last\@l { order: 99; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-first\@xl { order: -1; }
+    .uk-flex-last\@xl { order: 99; }
+
+}
+
+
+/* Item dimensions
+ ========================================================================== */
+
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+
+.uk-flex-none { flex: none; }
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ */
+
+.uk-flex-auto { flex: auto; }
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+
+.uk-flex-1 { flex: 1; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-flex-misc)) {@include hook-flex-misc();}
+
+// @mixin hook-flex-misc(){}

data/_sass/uikit/components/form-range.scss

@@ -0,0 +1,139 @@
+// Name:            Form Range
+// Description:     Styles for the range input type
+//
+// Component:       `uk-range`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$form-range-track-height:                        3px !default;
+$form-range-track-background:                    darken($global-muted-background, 5%) !default;
+$form-range-track-focus-background:              darken($form-range-track-background, 5%) !default;
+
+$form-range-thumb-height:                        15px !default;
+$form-range-thumb-width:                         $form-range-thumb-height !default;
+$form-range-thumb-border-radius:                 500px !default;
+$form-range-thumb-background:                    $global-color !default;
+
+
+/* ========================================================================
+   Component: Form Range
+ ========================================================================== */
+
+/*
+ * 1. Remove default style.
+ * 2. Define consistent box sizing.
+ * 3. Remove `margin` in all browsers.
+ * 4. Align to the center of the line box.
+ * 5. Prevent content overflow if a fixed width is used.
+ * 6. Take the full width.
+ * 7. Remove white background in Chrome.
+ */
+
+.uk-range {
+    /* 1 */
+    -webkit-appearance: none;
+    /* 2 */
+    box-sizing: border-box;
+    /* 3 */
+    margin: 0;
+    /* 4 */
+    vertical-align: middle;
+    /* 5 */
+    max-width: 100%;
+    /* 6 */
+    width: 100%;
+    /* 7 */
+    background: transparent;
+    @if(mixin-exists(hook-form-range)) {@include hook-form-range();}
+}
+
+/* Focus */
+.uk-range:focus { outline: none; }
+.uk-range::-moz-focus-outer { border: none; }
+
+/*
+ * Improves consistency of cursor style for clickable elements
+ */
+
+.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
+.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
+
+
+/*
+ * Track
+ * 1. Safari doesn't have a focus state. Using active instead.
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-runnable-track {
+    height: $form-range-track-height;
+    background: $form-range-track-background;
+    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+}
+
+.uk-range:focus::-webkit-slider-runnable-track,
+/* 1 */
+.uk-range:active::-webkit-slider-runnable-track {
+    background: $form-range-track-focus-background;
+    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+}
+
+/* Firefox */
+.uk-range::-moz-range-track {
+    height: $form-range-track-height;
+    background: $form-range-track-background;
+    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+}
+
+.uk-range:focus::-moz-range-track {
+    background: $form-range-track-focus-background;
+    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+}
+
+/*
+ * Thumb
+ * 1. Reset
+ * 2. Style
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-thumb {
+    /* 1 */
+    -webkit-appearance: none;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-width;
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+}
+
+/* Firefox */
+.uk-range::-moz-range-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-width;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();}
+
+// @mixin hook-form-range(){}
+// @mixin hook-form-range-track(){}
+// @mixin hook-form-range-track-focus(){}
+// @mixin hook-form-range-thumb(){}
+// @mixin hook-form-range-misc(){}