juicelang-theme 0.1.0

data/_sass/uikit/components/comment.scss

@@ -0,0 +1,160 @@
+// Name:            Comment
+// Description:     Component to create nested comments
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-body`
+//                  `uk-comment-header`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-avatar`
+//                  `uk-comment-list`
+//
+// Modifier:        `uk-comment-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$comment-header-margin-bottom:                   $global-margin !default;
+
+$comment-title-font-size:                        $global-medium-font-size !default;
+$comment-title-line-height:                      1.4 !default;
+
+$comment-meta-font-size:                         $global-small-font-size !default;
+$comment-meta-line-height:                       1.4 !default;
+$comment-meta-color:                             $global-muted-color !default;
+
+$comment-list-margin-top:                        $global-large-margin !default;
+$comment-list-padding-left:                      30px !default;
+$comment-list-padding-left-m:                    100px !default;
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    @if(mixin-exists(hook-comment)) {@include hook-comment();}
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-comment-body {
+    display: flow-root;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    @if(mixin-exists(hook-comment-body)) {@include hook-comment-body();}
+}
+
+.uk-comment-header {
+    display: flow-root;
+    margin-bottom: $comment-header-margin-bottom;
+    @if(mixin-exists(hook-comment-header)) {@include hook-comment-header();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-comment-body > :last-child,
+.uk-comment-header > :last-child { margin-bottom: 0; }
+
+
+/* Title
+ ========================================================================== */
+
+.uk-comment-title {
+    font-size: $comment-title-font-size;
+    line-height: $comment-title-line-height;
+    @if(mixin-exists(hook-comment-title)) {@include hook-comment-title();}
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-comment-meta {
+    font-size: $comment-meta-font-size;
+    line-height: $comment-meta-line-height;
+    color: $comment-meta-color;
+    @if(mixin-exists(hook-comment-meta)) {@include hook-comment-meta();}
+}
+
+
+/* Avatar
+ ========================================================================== */
+
+.uk-comment-avatar {
+    @if(mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();}
+}
+
+
+/* List
+ ========================================================================== */
+
+.uk-comment-list {
+    padding: 0;
+    list-style: none;
+}
+
+/* Adjacent siblings */
+.uk-comment-list > :nth-child(n+2) {
+    margin-top: $comment-list-margin-top;
+    @if(mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();}
+}
+
+/*
+ * Sublists
+ * Note: General sibling selector allows reply block between comment and sublist
+ */
+
+.uk-comment-list .uk-comment ~ ul {
+    margin: $comment-list-margin-top 0 0 0;
+    padding-left: $comment-list-padding-left;
+    list-style: none;
+    @if(mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();}
+}
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-comment-list .uk-comment ~ ul { padding-left: $comment-list-padding-left-m; }
+
+}
+
+/* Adjacent siblings */
+.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
+    margin-top: $comment-list-margin-top;
+    @if(mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();}
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-comment-primary {
+    @if(mixin-exists(hook-comment-primary)) {@include hook-comment-primary();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-comment-misc)) {@include hook-comment-misc();}
+
+// @mixin hook-comment(){}
+// @mixin hook-comment-body(){}
+// @mixin hook-comment-header(){}
+// @mixin hook-comment-title(){}
+// @mixin hook-comment-meta(){}
+// @mixin hook-comment-avatar(){}
+// @mixin hook-comment-list-adjacent(){}
+// @mixin hook-comment-list-sub(){}
+// @mixin hook-comment-list-sub-adjacent(){}
+// @mixin hook-comment-primary(){}
+// @mixin hook-comment-misc(){}

data/_sass/uikit/components/container.scss

@@ -0,0 +1,185 @@
+// Name:            Container
+// Description:     Component to align and center your site and grid content
+//
+// Component:       `uk-container`
+//
+// Modifier:        `uk-container-small`
+//                  `uk-container-large`
+//                  `uk-container-expand`
+//                  `uk-container-expand-left`
+//                  `uk-container-expand-right`
+//                  `uk-container-item-padding-remove-left`
+//                  `uk-container-item-padding-remove-right`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$container-max-width:                    1200px !default;
+$container-xsmall-max-width:             750px !default;
+$container-small-max-width:              900px !default;
+$container-large-max-width:              1400px !default;
+$container-xlarge-max-width:             1600px !default;
+
+$container-padding-horizontal:           15px !default;
+$container-padding-horizontal-s:         $global-gutter !default;
+$container-padding-horizontal-m:         $global-medium-gutter !default;
+
+
+/* ========================================================================
+   Component: Container
+ ========================================================================== */
+
+/*
+ * 1. Box sizing has to be `content-box` so the max-width is always the same and
+ *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+ */
+
+.uk-container {
+    display: flow-root;
+    /* 1 */
+    box-sizing: content-box;
+    max-width: $container-max-width;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $container-padding-horizontal;
+    padding-right: $container-padding-horizontal;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-container {
+        padding-left: $container-padding-horizontal-s;
+        padding-right: $container-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-container {
+        padding-left: $container-padding-horizontal-m;
+        padding-right: $container-padding-horizontal-m;
+    }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-container > :last-child { margin-bottom: 0; }
+
+/*
+ * Remove padding from nested containers
+ */
+
+.uk-container .uk-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-container-xsmall { max-width: $container-xsmall-max-width; }
+
+.uk-container-small { max-width: $container-small-max-width; }
+
+.uk-container-large { max-width: $container-large-max-width; }
+
+.uk-container-xlarge { max-width: $container-xlarge-max-width; }
+
+.uk-container-expand { max-width: none; }
+
+
+/* Expand modifier
+ ========================================================================== */
+
+/*
+ * Expand one side only
+ */
+
+.uk-container-expand-left { margin-left: 0; }
+.uk-container-expand-right { margin-right: 0; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-container-expand-left.uk-container-xsmall,
+    .uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-s})'); }
+
+    .uk-container-expand-left.uk-container-small,
+    .uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-s})'); }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-container-expand-left,
+    .uk-container-expand-right { max-width: unquote('calc(50% + (#{$container-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+
+    .uk-container-expand-left.uk-container-xsmall,
+    .uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+
+    .uk-container-expand-left.uk-container-small,
+    .uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+
+    .uk-container-expand-left.uk-container-large,
+    .uk-container-expand-right.uk-container-large { max-width: unquote('calc(50% + (#{$container-large-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+
+    .uk-container-expand-left.uk-container-xlarge,
+    .uk-container-expand-right.uk-container-xlarge { max-width: unquote('calc(50% + (#{$container-xlarge-max-width} / 2) - #{$container-padding-horizontal-m})'); }
+
+}
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * Utility classes to reset container padding on the left or right side
+ * Note: It has to be negative margin on the item, because it's specific to the item.
+ */
+
+.uk-container-item-padding-remove-left,
+.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})') }
+
+.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal); }
+.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal); }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-container-item-padding-remove-left,
+    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})') }
+
+    .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-s); }
+    .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-s); }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-container-item-padding-remove-left,
+    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})') }
+
+    .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-m); }
+    .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-m); }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();}
+
+// @mixin hook-container-misc(){}

data/_sass/uikit/components/countdown.scss

@@ -0,0 +1,131 @@
+// Name:            Countdown
+// Description:     Component to create countdown timers
+//
+// Component:       `uk-countdown`
+//
+// Sub-objects:     `uk-countdown-number`
+//                  `uk-countdown-separator`
+//                  `uk-countdown-label`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$countdown-number-line-height:                   0.8 !default;
+$countdown-number-font-size:                     2rem !default; // 32px
+$countdown-number-font-size-s:                   4rem !default; // 64px
+$countdown-number-font-size-m:                   6rem !default; // 96px
+
+$countdown-separator-line-height:                1.6 !default;
+$countdown-separator-font-size:                  1rem !default; // 16px
+$countdown-separator-font-size-s:                2rem !default; // 32px
+$countdown-separator-font-size-m:                3rem !default; // 48px
+
+
+/* ========================================================================
+   Component: Countdown
+ ========================================================================== */
+
+.uk-countdown {
+    @if(mixin-exists(hook-countdown)) {@include hook-countdown();}
+}
+
+
+/* Item
+ ========================================================================== */
+
+.uk-countdown-number,
+.uk-countdown-separator {
+    @if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
+}
+
+
+/* Number
+ ========================================================================== */
+
+
+/*
+ * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
+ * 2. Style
+ */
+
+.uk-countdown-number {
+    /* 1 */
+    font-variant-numeric: tabular-nums;
+    /* 2 */
+    font-size: $countdown-number-font-size;
+    line-height: $countdown-number-line-height;
+    @if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-countdown-number { font-size: $countdown-number-font-size-s; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-countdown-number { font-size: $countdown-number-font-size-m; }
+
+}
+
+
+/* Separator
+ ========================================================================== */
+
+.uk-countdown-separator {
+    font-size: $countdown-separator-font-size;
+    line-height: $countdown-separator-line-height;
+    @if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-countdown-separator { font-size: $countdown-separator-font-size-s; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-countdown-separator { font-size: $countdown-separator-font-size-m; }
+
+}
+
+
+/* Label
+ ========================================================================== */
+
+.uk-countdown-label {
+    @if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
+
+// @mixin hook-countdown(){}
+// @mixin hook-countdown-item(){}
+// @mixin hook-countdown-number(){}
+// @mixin hook-countdown-separator(){}
+// @mixin hook-countdown-label(){}
+// @mixin hook-countdown-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-countdown-item(){}
+// @mixin hook-inverse-countdown-number(){}
+// @mixin hook-inverse-countdown-separator(){}
+// @mixin hook-inverse-countdown-label(){}

data/_sass/uikit/components/cover.scss

@@ -0,0 +1,63 @@
+// Name:            Cover
+// Description:     Utilities to let embedded content cover their container in a centered position
+//
+// Component:       `uk-cover`
+//
+// Sub-object:      `uk-cover-container`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+
+/*
+ * Works with iframes and embedded content
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
+ * 2. Reset responsiveness for embedded content
+ * 3. Center object
+ * Note: Percent values on the `top` property only works if this element
+ *       is absolute positioned or if the container has a height
+ */
+
+/* 1 */
+[uk-cover],
+[data-uk-cover] {
+    /* 2 */
+    max-width: none;
+    /* 3 */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    --uk-position-translate-x: -50%;
+    --uk-position-translate-y: -50%;
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+}
+
+iframe[uk-cover],
+iframe[data-uk-cover] { pointer-events: none; }
+
+
+/* Container
+ ========================================================================== */
+
+/*
+ * 1. Parent container which clips resized object
+ * 2. Needed if the child is positioned absolute. See note above
+ */
+
+.uk-cover-container {
+    /* 1 */
+    overflow: hidden;
+    /* 2 */
+    position: relative;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-cover-misc)) {@include hook-cover-misc();}
+
+// @mixin hook-cover-misc(){}

data/_sass/uikit/components/description-list.scss

@@ -0,0 +1,71 @@
+// Name:            Description list
+// Description:     Styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$description-list-term-color:                    $global-emphasis-color !default;
+$description-list-term-margin-top:               $global-margin !default;
+
+$description-list-divider-term-margin-top:       $global-margin !default;
+$description-list-divider-term-border-width:     $global-border-width !default;
+$description-list-divider-term-border:           $global-border !default;
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+/*
+ * Term
+ */
+
+.uk-description-list > dt {
+    color: $description-list-term-color;
+    @if(mixin-exists(hook-description-list-term)) {@include hook-description-list-term();}
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+    margin-top: $description-list-term-margin-top;
+}
+
+/*
+ * Description
+ */
+
+.uk-description-list > dd {
+    @if(mixin-exists(hook-description-list-description)) {@include hook-description-list-description();}
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Line
+ */
+
+.uk-description-list-divider > dt:nth-child(n+2) {
+    margin-top: $description-list-divider-term-margin-top;
+    padding-top: $description-list-divider-term-margin-top;
+    border-top: $description-list-divider-term-border-width solid $description-list-divider-term-border;
+    @if(mixin-exists(hook-description-list-divider-term)) {@include hook-description-list-divider-term();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-description-list-misc)) {@include hook-description-list-misc();}
+
+// @mixin hook-description-list-term(){}
+// @mixin hook-description-list-description(){}
+// @mixin hook-description-list-divider-term(){}
+// @mixin hook-description-list-misc(){}