@frankenstyle/uikit 0.0.1

package/src/less/components/comment.less

@@ -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;
+
+@comment-title-font-size:                       @global-medium-font-size;
+@comment-title-line-height:                     1.4;
+
+@comment-meta-font-size:                        @global-small-font-size;
+@comment-meta-line-height:                      1.4;
+@comment-meta-color:                            @global-muted-color;
+
+@comment-list-margin-top:                       @global-large-margin;
+@comment-list-padding-left:                     30px;
+@comment-list-padding-left-m:                   100px;
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    .hook-comment();
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-comment-body {
+    display: flow-root;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    .hook-comment-body();
+}
+
+.uk-comment-header {
+    display: flow-root;
+    margin-bottom: @comment-header-margin-bottom;
+    .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;
+    .hook-comment-title();
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-comment-meta {
+    font-size: @comment-meta-font-size;
+    line-height: @comment-meta-line-height;
+    color: @comment-meta-color;
+    .hook-comment-meta();
+}
+
+
+/* Avatar
+ ========================================================================== */
+
+.uk-comment-avatar {
+    .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;
+    .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;
+    .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;
+    .hook-comment-list-sub-adjacent();
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-comment-primary {
+    .hook-comment-primary();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-comment-misc();
+
+.hook-comment() {}
+.hook-comment-body() {}
+.hook-comment-header() {}
+.hook-comment-title() {}
+.hook-comment-meta() {}
+.hook-comment-avatar() {}
+.hook-comment-list-adjacent() {}
+.hook-comment-list-sub() {}
+.hook-comment-list-sub-adjacent() {}
+.hook-comment-primary() {}
+.hook-comment-misc() {}

package/src/less/components/container.less

@@ -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;
+@container-xsmall-max-width:            750px;
+@container-small-max-width:             900px;
+@container-large-max-width:             1400px;
+@container-xlarge-max-width:            1600px;
+
+@container-padding-horizontal:          15px;
+@container-padding-horizontal-s:        @global-gutter;
+@container-padding-horizontal-m:        @global-medium-gutter;
+
+
+/* ========================================================================
+   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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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
+// ========================================================================
+
+.hook-container-misc();
+
+.hook-container-misc() {}

package/src/less/components/countdown.less

@@ -0,0 +1,112 @@
+// Name:            Countdown
+// Description:     Component to create countdown timers
+//
+// Component:       `uk-countdown`
+//
+// Sub-objects:     `uk-countdown-number`
+//                  `uk-countdown-separator`
+//                  `uk-countdown-label`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@countdown-separator-line-height:               2;
+@countdown-separator-font-size:                 0.5em;
+
+
+/* ========================================================================
+   Component: Countdown
+ ========================================================================== */
+
+.uk-countdown {
+    margin: 0;
+    .hook-countdown();
+}
+
+
+/* Item
+ ========================================================================== */
+
+.uk-countdown-number,
+.uk-countdown-separator {
+    .hook-countdown-item();
+}
+
+
+/* Number
+ ========================================================================== */
+
+/*
+ * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
+ */
+
+.uk-countdown-number {
+    margin: 0;
+    /* 1 */
+    font-variant-numeric: tabular-nums;
+    .hook-countdown-number();
+}
+
+
+/* Separator
+ ========================================================================== */
+
+.uk-countdown-separator {
+    font-size: @countdown-separator-font-size;
+    line-height: @countdown-separator-line-height;
+    .hook-countdown-separator();
+}
+
+
+/* Label
+ ========================================================================== */
+
+.uk-countdown-label {
+    .hook-countdown-label();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-countdown-misc();
+
+.hook-countdown() {}
+.hook-countdown-item() {}
+.hook-countdown-number() {}
+.hook-countdown-separator() {}
+.hook-countdown-label() {}
+.hook-countdown-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-countdown-number,
+    .uk-countdown-separator {
+        .hook-inverse-countdown-item();
+    }
+
+    .uk-countdown-number {
+        .hook-inverse-countdown-number();
+    }
+
+    .uk-countdown-separator {
+        .hook-inverse-countdown-separator();
+    }
+
+    .uk-countdown-label {
+        .hook-inverse-countdown-label();
+    }
+
+}
+
+.hook-inverse-countdown-item() {}
+.hook-inverse-countdown-number() {}
+.hook-inverse-countdown-separator() {}
+.hook-inverse-countdown-label() {}

package/src/less/components/cover.less

@@ -0,0 +1,76 @@
+// 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]:where(canvas, iframe, svg),
+[data-uk-cover]:where(canvas, iframe, svg) {
+    /* 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; }
+
+[uk-cover]:where(img, video),
+[data-uk-cover]:where(img, video) {
+    /* 3 */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    object-fit: cover;
+    object-position: center;
+}
+
+
+/* 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
+// ========================================================================
+
+.hook-cover-misc();
+
+.hook-cover-misc() {}

package/src/less/components/description-list.less

@@ -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;
+@description-list-term-margin-top:              @global-margin;
+
+@description-list-divider-term-margin-top:      @global-margin;
+@description-list-divider-term-border-width:    @global-border-width;
+@description-list-divider-term-border:          @global-border;
+
+
+/* ========================================================================
+   Component: Description list
+ ========================================================================== */
+
+/*
+ * Term
+ */
+
+.uk-description-list > dt {
+    color: @description-list-term-color;
+    .hook-description-list-term();
+}
+
+.uk-description-list > dt:nth-child(n+2) {
+    margin-top: @description-list-term-margin-top;
+}
+
+/*
+ * Description
+ */
+
+.uk-description-list > dd {
+    .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;
+    .hook-description-list-divider-term();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-description-list-misc();
+
+.hook-description-list-term() {}
+.hook-description-list-description() {}
+.hook-description-list-divider-term() {}
+.hook-description-list-misc() {}