rails-uikit-sass 2.27.2

data/vendor/assets/stylesheets/core/table.scss

@@ -0,0 +1,147 @@
+// Name:            Table
+// Description:     Defines styles for tables
+//
+// Component:       `uk-table`
+//
+// Modifiers:       `uk-table-middle`
+//                  `uk-table-striped`
+//                  `uk-table-condensed`
+//                  `uk-table-hover`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$table-margin-vertical:                          15px !default;
+$table-padding-vertical:                         8px !default;
+$table-padding-horizontal:                       8px !default;
+
+$table-caption-color:                            #999 !default;
+$table-caption-font-size:                        12px !default;
+
+$table-striped-background:                       #f5f5f5 !default;
+
+$table-condensed-padding-vertical:               4px !default;
+$table-condensed-padding-horizontal:             8px !default;
+
+$table-hover-background:                         #EEE !default;
+
+$table-active-background:                        $table-hover-background !default;
+
+
+/* ========================================================================
+   Component: Table
+ ========================================================================== */
+
+/*
+ * 1. Remove most spacing between table cells.
+ * 2. Block element behavior
+ * 3. Style
+ */
+
+.uk-table {
+    /* 1 */
+    border-collapse: collapse;
+    border-spacing: 0;
+    /* 2 */
+    width: 100%;
+    /* 3 */
+    margin-bottom: $table-margin-vertical;
+}
+
+/*
+ * Add margin if adjacent element
+ */
+
+* + .uk-table { margin-top: $table-margin-vertical; }
+
+.uk-table th,
+.uk-table td {
+    padding: $table-padding-vertical $table-padding-horizontal;
+    @include hook-table();
+}
+
+/*
+ * Set alignment
+ */
+
+.uk-table th { text-align: left; }
+.uk-table td { vertical-align: top; }
+
+.uk-table thead th { vertical-align: bottom; }
+
+/*
+ * Caption and footer
+ */
+
+.uk-table caption,
+.uk-table tfoot {
+    font-size: $table-caption-font-size;
+    font-style: italic;
+}
+
+.uk-table caption {
+    text-align: left;
+    color: $table-caption-color;
+}
+
+/*
+ * Active State
+ */
+
+.uk-table tbody tr.uk-active {
+    background: $table-active-background;
+    @include hook-table-active();
+}
+
+
+/* Sub-modifier: `uk-table-middle`
+ ========================================================================== */
+
+.uk-table-middle,
+.uk-table-middle td { vertical-align: middle !important; }
+
+
+/* Modifier: `uk-table-striped`
+ ========================================================================== */
+
+.uk-table-striped tbody tr:nth-of-type(odd) {
+    background: $table-striped-background;
+    @include hook-table-striped();
+}
+
+
+/* Modifier: `uk-table-condensed`
+ ========================================================================== */
+
+.uk-table-condensed td {
+    padding: $table-condensed-padding-vertical $table-condensed-padding-horizontal;
+    @include hook-table-condensed();
+}
+
+
+/* Modifier: `uk-table-hover`
+ ========================================================================== */
+
+.uk-table-hover tbody tr:hover {
+    background: $table-hover-background;
+    @include hook-table-hover();
+}
+
+
+
+// Hooks
+// ========================================================================
+
+@include hook-table-misc();
+
+// @mixin hook-table(){}
+// @mixin hook-table-active(){}
+// @mixin hook-table-striped(){}
+// @mixin hook-table-condensed(){}
+// @mixin hook-table-hover(){}
+// @mixin hook-table-misc(){}

data/vendor/assets/stylesheets/core/text.scss

@@ -0,0 +1,136 @@
+// Name:            Text
+// Description:     Collection of useful text utility classes to style your content
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$text-small-font-size:                           11px !default;
+$text-small-line-height:                         16px !default;
+$text-large-font-size:                           18px !default;
+$text-large-line-height:                         24px !default;
+$text-large-font-weight:                         normal !default;
+
+$text-muted-color:                               #999 !default;
+$text-primary-color:                             #2d7091 !default;
+$text-success-color:                             #659f13 !default;
+$text-warning-color:                             #e28327 !default;
+$text-danger-color:                              #d85030 !default;
+$text-contrast-color:                            #fff !default;
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-small {
+    font-size: $text-small-font-size;
+    line-height: $text-small-line-height;
+}
+
+.uk-text-large {
+    font-size: $text-large-font-size;
+    line-height: $text-large-line-height;
+    font-weight: $text-large-font-weight;
+}
+
+
+/* Weight modifiers
+ ========================================================================== */
+
+.uk-text-bold { font-weight: bold; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: $text-muted-color !important; }
+.uk-text-primary { color: $text-primary-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; }
+.uk-text-contrast { color: $text-contrast-color !important; }
+
+
+/* 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; }
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+
+/* Only tablets portrait and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-text-center-medium { text-align: center !important; }
+    .uk-text-left-medium { text-align: left !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-text-center-small { text-align: center !important; }
+    .uk-text-left-small { text-align: left !important; }
+
+}
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ */
+
+.uk-text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/*
+ * Break strings if their length exceeds the width of their container
+ */
+
+.uk-text-break {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
+
+
+/* Transform modifiers
+ ========================================================================== */
+
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+.uk-text-uppercase { text-transform: uppercase !important; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-text-misc();
+
+// @mixin hook-text-misc(){}

data/vendor/assets/stylesheets/core/thumbnail.scss

@@ -0,0 +1,122 @@
+// Name:            Thumbnail
+// Description:     Defines styles for image thumbnails
+//
+// Component:       `uk-thumbnail`
+//
+// Sub-objects:     `uk-thumbnail-caption`
+//
+// Modifiers:       `uk-thumbnail-mini`
+//                  `uk-thumbnail-small`
+//                  `uk-thumbnail-medium`
+//                  `uk-thumbnail-large`
+//                  `uk-thumbnail-expand`
+//
+// Markup:
+//
+// <!-- uk-thumbnail -->
+// <figure class="uk-thumbnail">
+//     <img src="" alt="">
+//     <figcaption class="uk-thumbnail-caption"></figcaption>
+// </figure>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$thumbnail-padding:                              4px !default;
+$thumbnail-border:                               #ddd !default;
+$thumbnail-border-width:                         1px !default;
+$thumbnail-background:                           #fff !default;
+$thumbnail-hover-border:                         #aaa !default;
+$thumbnail-hover-background:                     #fff !default;
+
+$thumbnail-caption-padding:                      $thumbnail-padding !default;
+$thumbnail-caption-color:                        #444 !default;
+
+$thumbnail-mini-width:                           150px !default;
+$thumbnail-small-width:                          200px !default;
+$thumbnail-medium-width:                         300px !default;
+$thumbnail-large-width:                          400px !default;
+
+
+/* ========================================================================
+   Component: Thumbnail
+ ========================================================================== */
+
+/*
+ * 1. Container width fits its content
+ * 2. Responsive behavior
+ * 3. Corrects `max-width` behavior sed
+ * 4. Required for `figure` element
+ * 5. Style
+ */
+
+.uk-thumbnail {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    max-width: 100%;
+    /* 3 */
+    box-sizing: border-box;
+    /* 3 */
+    margin: 0;
+    /* 4 */
+    padding: $thumbnail-padding;
+    border: $thumbnail-border-width solid $thumbnail-border;
+    background: $thumbnail-background;
+    @include hook-thumbnail();
+}
+
+/*
+ * Hover state for `a` elements
+ * 1. Apply hover style also to focus state
+ * 2. Needed for caption
+ * 3. Remove default focus style
+ */
+
+a.uk-thumbnail:hover,
+a.uk-thumbnail:focus { // 1
+    border-color: $thumbnail-hover-border;
+    background-color: $thumbnail-hover-background;
+    /* 2 */
+    text-decoration: none;
+    /* 3 */
+    outline: none;
+    @include hook-thumbnail-hover();
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-thumbnail-caption {
+    padding-top: $thumbnail-caption-padding;
+    text-align: center;
+    color: $thumbnail-caption-color;
+    @include hook-thumbnail-caption();
+}
+
+
+/* Sizes
+ ========================================================================== */
+
+.uk-thumbnail-mini { width: $thumbnail-mini-width; }
+.uk-thumbnail-small { width: $thumbnail-small-width; }
+.uk-thumbnail-medium { width: $thumbnail-medium-width; }
+.uk-thumbnail-large { width: $thumbnail-large-width; }
+
+.uk-thumbnail-expand,
+.uk-thumbnail-expand > img { width: 100%; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-thumbnail-misc();
+
+// @mixin hook-thumbnail(){}
+// @mixin hook-thumbnail-hover(){}
+// @mixin hook-thumbnail-caption(){}
+// @mixin hook-thumbnail-misc(){}

data/vendor/assets/stylesheets/core/thumbnav.scss

@@ -0,0 +1,122 @@
+// Name:            Thumbnav
+// Description:     Defines styles for a thumbnail navigation
+//
+// Component:       `uk-thumbnav`
+//
+// States:          `uk-active`
+//
+// Markup:
+//
+// <!-- uk-thumbnav -->
+// <ul class="uk-thumbnav">
+//     <li class="uk-active"><a href=""></a></li>
+//     <li><a href=""></a></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$thumbnav-margin-horizontal:                     10px !default;
+$thumbnav-margin-vertical:                       $thumbnav-margin-horizontal !default;
+
+$thumbnav-background:                            #fff !default;
+
+$thumbnav-opacity:                               0.7 !default;
+$thumbnav-hover-opacity:                         1 !default;
+$thumbnav-active-opacity:                        1 !default;
+
+
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+
+/*
+ * 1. Gutter
+ * 2. Remove default list style
+ */
+
+.uk-thumbnav {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    /* 1 */
+    margin-left: -$thumbnav-margin-horizontal;
+    margin-top: -$thumbnav-margin-vertical;
+    /* 2 */
+    padding: 0;
+    list-style: none;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions
+ * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
+ */
+
+.uk-thumbnav > * {
+    /* 1 */
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    /* 2 */
+    padding-left: $thumbnav-margin-horizontal;
+    margin-top: $thumbnav-margin-vertical;
+}
+
+/*
+ * DEPRECATED IE9 Support
+ */
+
+.uk-thumbnav:before,
+.uk-thumbnav:after {
+    content: "";
+    display: block;
+    overflow: hidden;
+}
+
+.uk-thumbnav:after { clear: both; }
+
+.uk-thumbnav > * { float: left; }
+
+
+/* Items
+ ========================================================================== */
+
+.uk-thumbnav > * > * {
+    display: block;
+    background: $thumbnav-background;
+    @include hook-thumbnav();
+}
+
+.uk-thumbnav > * > * > img {
+    opacity: $thumbnav-opacity;
+    -webkit-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+}
+
+/*
+ * Hover
+ */
+
+.uk-thumbnav > * > :hover > img,
+.uk-thumbnav > * > :focus > img { opacity: $thumbnav-hover-opacity; }
+
+/*
+ * Active
+ */
+
+.uk-thumbnav > .uk-active > * > img { opacity: $thumbnav-active-opacity; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-thumbnav-misc();
+
+// @mixin hook-thumbnav(){}
+// @mixin hook-thumbnav-misc(){}