@frankenstyle/uikit 0.0.1

package/src/less/components/text.less

@@ -0,0 +1,296 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@text-lead-font-size:                           @global-large-font-size;
+@text-lead-line-height:                         1.5;
+@text-lead-color:                               @global-emphasis-color;
+
+@text-meta-font-size:                           @global-small-font-size;
+@text-meta-line-height:                         1.4;
+@text-meta-color:                               @global-muted-color;
+
+@text-small-font-size:                          @global-small-font-size;
+@text-small-line-height:                        1.5;
+
+@text-large-font-size:                          @global-large-font-size;
+@text-large-line-height:                        1.5;
+
+@text-muted-color:                              @global-muted-color;
+@text-emphasis-color:                           @global-emphasis-color;
+@text-primary-color:                            @global-primary-background;
+@text-secondary-color:                          @global-secondary-background;
+@text-success-color:                            @global-success-background;
+@text-warning-color:                            @global-warning-background;
+@text-danger-color:                             @global-danger-background;
+
+@text-background-color:                         @global-primary-background;
+
+@text-stroke-text-stroke:                       ~'calc(1.4px + 0.002em)';
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-text-lead {
+    font-size: @text-lead-font-size;
+    line-height: @text-lead-line-height;
+    color: @text-lead-color;
+    .hook-text-lead();
+}
+
+.uk-text-meta {
+    font-size: @text-meta-font-size;
+    line-height: @text-meta-line-height;
+    color: @text-meta-color;
+    .hook-text-meta();
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-small {
+    font-size: @text-small-font-size;
+    line-height: @text-small-line-height;
+    .hook-text-small();
+}
+
+.uk-text-large {
+    font-size: @text-large-font-size;
+    line-height: @text-large-line-height;
+    .hook-text-large();
+}
+
+.uk-text-default {
+    font-size: @global-font-size;
+    line-height: @global-line-height;
+}
+
+
+/* Weight modifier
+ ========================================================================== */
+
+.uk-text-light { font-weight: 300; }
+.uk-text-normal { font-weight: 400; }
+.uk-text-bold { font-weight: 700; }
+
+.uk-text-lighter { font-weight: lighter; }
+.uk-text-bolder { font-weight: bolder; }
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-text-italic { font-style: italic; }
+
+
+/* Transform modifier
+ ========================================================================== */
+
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-uppercase { text-transform: uppercase !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+
+
+/* Decoration modifier
+ ========================================================================== */
+
+.uk-text-decoration-none { text-decoration: none !important; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: @text-muted-color !important; }
+.uk-text-emphasis { color: @text-emphasis-color !important; }
+.uk-text-primary { color: @text-primary-color !important; }
+.uk-text-secondary { color: @text-secondary-color !important; }
+.uk-text-success { color: @text-success-color !important; }
+.uk-text-warning { color: @text-warning-color !important; }
+.uk-text-danger { color: @text-danger-color !important; }
+
+
+/* Background modifier
+ ========================================================================== */
+
+/*
+ * 1. The background clips to the foreground text. Works in all browsers.
+ * 2. Default color is set to transparent.
+ * 3. Container fits the text
+ * 4. Style
+ */
+
+.uk-text-background {
+    /* 1 */
+    -webkit-background-clip: text;
+    /* 2 */
+    color: transparent !important;
+    /* 3 */
+    display: inline-block;
+    /* 4 */
+    background-color: @text-background-color;
+    .hook-text-background();
+}
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-text-left { text-align: left !important; }
+.uk-text-right { text-align: right !important; }
+.uk-text-center { text-align: center !important; }
+.uk-text-justify { text-align: justify !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-text-left\@s { text-align: left !important; }
+    .uk-text-right\@s { text-align: right !important; }
+    .uk-text-center\@s { text-align: center !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-text-left\@m { text-align: left !important; }
+    .uk-text-right\@m { text-align: right !important; }
+    .uk-text-center\@m { text-align: center !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-text-left\@l { text-align: left !important; }
+    .uk-text-right\@l { text-align: right !important; }
+    .uk-text-center\@l { text-align: center !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-text-left\@xl { text-align: left !important; }
+    .uk-text-right\@xl { text-align: right !important; }
+    .uk-text-center\@xl { text-align: center !important; }
+
+}
+
+/*
+ * Vertical
+ */
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+.uk-text-baseline { vertical-align: baseline !important; }
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+
+.uk-text-truncate {
+    /* 1 */
+    max-width: 100%;
+    /* 2 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate { max-width: 0; }
+
+/*
+ * Wrap long words onto the next line and break them if they are too long to fit.
+ * 1. Make it work with table cells in all browsers.
+ * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
+ */
+
+ .uk-text-break { overflow-wrap: break-word; }
+
+ /* 1 */
+ th.uk-text-break,
+ td.uk-text-break { word-break: break-word; }
+
+
+/* Stroke modifiers
+ ========================================================================== */
+
+.uk-text-stroke {
+    -webkit-text-stroke: @text-stroke-text-stroke;
+    -webkit-text-fill-color: transparent;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-text-misc();
+
+.hook-text-lead() {}
+.hook-text-meta() {}
+.hook-text-small() {}
+.hook-text-large() {}
+.hook-text-background() {}
+.hook-text-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-text-lead-color:                      @inverse-global-color;
+@inverse-text-meta-color:                      @inverse-global-muted-color;
+@inverse-text-muted-color:                     @inverse-global-muted-color;
+@inverse-text-emphasis-color:                  @inverse-global-emphasis-color;
+@inverse-text-primary-color:                   @inverse-global-primary-background;
+@inverse-text-secondary-color:                 @inverse-global-primary-background;
+
+.hook-inverse() {
+
+    .uk-text-lead {
+        color: @inverse-text-lead-color;
+        .hook-inverse-text-lead();
+    }
+
+    .uk-text-meta {
+        color: @inverse-text-meta-color;
+        .hook-inverse-text-meta();
+    }
+
+    .uk-text-muted { color: @inverse-text-muted-color !important; }
+    .uk-text-emphasis { color: @inverse-text-emphasis-color !important; }
+    .uk-text-primary { color: @inverse-text-primary-color !important; }
+    .uk-text-secondary { color: @inverse-text-secondary-color !important; }
+
+}
+
+.hook-inverse-text-lead() {}
+.hook-inverse-text-meta() {}

package/src/less/components/thumbnav.less

@@ -0,0 +1,133 @@
+// Name:            Thumbnav
+// Description:     Component to create thumbnail navigations
+//
+// Component:       `uk-thumbnav`
+//
+// Modifier:        `uk-thumbnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@thumbnav-margin-horizontal:                    15px;
+@thumbnav-margin-vertical:                      @thumbnav-margin-horizontal;
+
+
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-thumbnav {
+    display: flex;
+    /* 1 */
+    flex-wrap: wrap;
+    /* 2 */
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* 3 */
+    margin-left: -@thumbnav-margin-horizontal;
+    .hook-thumbnav();
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-thumbnav > * {
+    /* 1 */
+    padding-left: @thumbnav-margin-horizontal;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ */
+
+.uk-thumbnav > * > * {
+    display: inline-block;
+    .hook-thumbnav-item();
+}
+
+/* Hover */
+.uk-thumbnav > * > :hover {
+    .hook-thumbnav-item-hover();
+}
+
+/* Active */
+.uk-thumbnav > .uk-active > * {
+    .hook-thumbnav-item-active();
+}
+
+
+/* Modifier: 'uk-thumbnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-thumbnav-vertical {
+    /* 1 */
+    flex-direction: column;
+    /* 2 */
+    margin-left: 0;
+    margin-top: -@thumbnav-margin-vertical;
+}
+
+/* 2 */
+.uk-thumbnav-vertical > * {
+    padding-left: 0;
+    padding-top: @thumbnav-margin-vertical;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-thumbnav-misc();
+
+.hook-thumbnav() {}
+.hook-thumbnav-item() {}
+.hook-thumbnav-item-hover() {}
+.hook-thumbnav-item-active() {}
+.hook-thumbnav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-thumbnav > * > * {
+        .hook-inverse-thumbnav-item();
+    }
+
+    .uk-thumbnav > * > :hover {
+        .hook-inverse-thumbnav-item-hover();
+    }
+
+    .uk-thumbnav > .uk-active > * {
+        .hook-inverse-thumbnav-item-active();
+    }
+
+}
+
+.hook-inverse-thumbnav-item() {}
+.hook-inverse-thumbnav-item-hover() {}
+.hook-inverse-thumbnav-item-active() {}

package/src/less/components/tile.less

@@ -0,0 +1,247 @@
+// Name:            Tile
+// Description:     Component to create tiled boxes
+//
+// Component:       `uk-tile`
+//
+// Modifiers:       `uk-tile-xsmall`
+//                  `uk-tile-small`
+//                  `uk-tile-large`
+//                  `uk-tile-xlarge`
+//                  `uk-tile-default`
+//                  `uk-tile-muted`
+//                  `uk-tile-primary`
+//                  `uk-tile-secondary`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@tile-padding-horizontal:                      15px;
+@tile-padding-horizontal-s:                    @global-gutter;
+@tile-padding-horizontal-m:                    @global-medium-gutter;
+@tile-padding-vertical:                        @global-medium-margin;
+@tile-padding-vertical-m:                      @global-large-margin;
+
+@tile-xsmall-padding-vertical:                 @global-margin;
+
+@tile-small-padding-vertical:                  @global-medium-margin;
+
+@tile-large-padding-vertical:                  @global-large-margin;
+@tile-large-padding-vertical-m:                @global-xlarge-margin;
+
+@tile-xlarge-padding-vertical:                 @global-xlarge-margin;
+@tile-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);
+
+@tile-default-background:                      @global-background;
+@tile-default-color-mode:                      dark;
+
+@tile-muted-background:                        @global-muted-background;
+@tile-muted-color-mode:                        dark;
+
+@tile-primary-background:                      @global-primary-background;
+@tile-primary-color-mode:                      light;
+
+@tile-secondary-background:                    @global-secondary-background;
+@tile-secondary-color-mode:                    light;
+
+
+/* ========================================================================
+   Component: Tile
+ ========================================================================== */
+
+.uk-tile {
+    display: flow-root;
+    position: relative;
+    box-sizing: border-box;
+    padding-left: @tile-padding-horizontal;
+    padding-right: @tile-padding-horizontal;
+    padding-top: @tile-padding-vertical;
+    padding-bottom: @tile-padding-vertical;
+    .hook-tile();
+}
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-tile {
+        padding-left: @tile-padding-horizontal-s;
+        padding-right: @tile-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-tile {
+        padding-left: @tile-padding-horizontal-m;
+        padding-right: @tile-padding-horizontal-m;
+        padding-top: @tile-padding-vertical-m;
+        padding-bottom: @tile-padding-vertical-m;
+    }
+
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-tile > :last-child { margin-bottom: 0; }
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-tile-xsmall {
+    padding-top: @tile-xsmall-padding-vertical;
+    padding-bottom: @tile-xsmall-padding-vertical;
+}
+
+/*
+ * Small
+ */
+
+.uk-tile-small {
+    padding-top: @tile-small-padding-vertical;
+    padding-bottom: @tile-small-padding-vertical;
+}
+
+/*
+ * Large
+ */
+
+.uk-tile-large {
+    padding-top: @tile-large-padding-vertical;
+    padding-bottom: @tile-large-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-tile-large {
+        padding-top: @tile-large-padding-vertical-m;
+        padding-bottom: @tile-large-padding-vertical-m;
+    }
+
+}
+
+
+/*
+ * XLarge
+ */
+
+.uk-tile-xlarge {
+    padding-top: @tile-xlarge-padding-vertical;
+    padding-bottom: @tile-xlarge-padding-vertical;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-tile-xlarge {
+        padding-top: @tile-xlarge-padding-vertical-m;
+        padding-bottom: @tile-xlarge-padding-vertical-m;
+    }
+
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-tile-default {
+    --uk-inverse: @tile-default-color-mode;
+    background-color: @tile-default-background;
+    .hook-tile-default();
+}
+
+.uk-tile-default.uk-tile-hover:hover {
+    .hook-tile-default-hover();
+}
+
+// Color Mode
+.uk-tile-default:not(.uk-preserve-color):extend(.uk-light all) when (@tile-default-color-mode = light) {}
+.uk-tile-default:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-default-color-mode = dark) {}
+
+/*
+ * Muted
+ */
+
+.uk-tile-muted {
+    --uk-inverse: @tile-muted-color-mode;
+    background-color: @tile-muted-background;
+    .hook-tile-muted();
+}
+
+.uk-tile-muted.uk-tile-hover:hover {
+    .hook-tile-muted-hover();
+}
+
+// Color Mode
+.uk-tile-muted:not(.uk-preserve-color):extend(.uk-light all) when (@tile-muted-color-mode = light) {}
+.uk-tile-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-muted-color-mode = dark) {}
+
+/*
+ * Primary
+ */
+
+.uk-tile-primary {
+    --uk-inverse: @tile-primary-color-mode;
+    background-color: @tile-primary-background;
+    .hook-tile-primary();
+}
+
+.uk-tile-primary.uk-tile-hover:hover {
+    .hook-tile-primary-hover();
+}
+
+// Color Mode
+.uk-tile-primary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-primary-color-mode = light) {}
+.uk-tile-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-primary-color-mode = dark) {}
+
+/*
+ * Secondary
+ */
+
+.uk-tile-secondary {
+    --uk-inverse: @tile-secondary-color-mode;
+    background-color: @tile-secondary-background;
+    .hook-tile-secondary();
+}
+
+.uk-tile-secondary.uk-tile-hover:hover {
+    .hook-tile-secondary-hover();
+}
+
+// Color Mode
+.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-secondary-color-mode = light) {}
+.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-secondary-color-mode = dark) {}
+
+
+// Hooks
+// ========================================================================
+
+.hook-tile-misc();
+
+.hook-tile() {}
+.hook-tile-default() {}
+.hook-tile-default-hover() {}
+.hook-tile-muted() {}
+.hook-tile-muted-hover() {}
+.hook-tile-primary() {}
+.hook-tile-primary-hover() {}
+.hook-tile-secondary() {}
+.hook-tile-secondary-hover() {}
+.hook-tile-misc() {}