rails-uikit-sass 2.27.2

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

@@ -0,0 +1,197 @@
+// Name:            Pagination
+// Description:     Defines styles for a navigation between pages
+//
+// Component:       `uk-pagination`
+//
+// Sub-objects:     `uk-pagination-previous`
+//                  `uk-pagination-next`
+//
+// Modifiers:       `uk-pagination-left`
+//                  `uk-pagination-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// Markup:
+//
+// <!-- uk-pagination -->
+// <ul class="uk-pagination">
+//     <li class="uk-active"><span></span></li>
+//     <li><a href=""></a></li>
+// </ul>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$pagination-font-size:                           1rem !default;
+$pagination-margin-left:                         5px !default;
+$pagination-padding-vertical:                    3px !default;
+$pagination-padding-horizontal:                  5px !default;
+$pagination-line-height:                         20px !default;
+$pagination-background:                          #eee !default;
+$pagination-color:                               #444 !default;
+$pagination-hover-background:                    #f5f5f5 !default;
+$pagination-hover-color:                         #444 !default;
+$pagination-onclick-background:                  #ddd !default;
+$pagination-onclick-color:                       #444 !default;
+
+$pagination-active-background:                   #00a8e6 !default;
+$pagination-active-color:                        #fff !default;
+
+$pagination-disabled-background:                 #f5f5f5 !default;
+$pagination-disabled-color:                      #999 !default;
+
+
+/* ========================================================================
+   Component: Pagination
+ ========================================================================== */
+
+/*
+ * 1. Remove default list style
+ * 2. Center pagination by default
+ * 3. Remove whitespace between child elements when using `inline-block`
+ */
+
+.uk-pagination {
+    /* 1 */
+    padding: 0;
+    list-style: none;
+    /* 2 */
+    text-align: center;
+    /* 3 */
+    font-size: 0.001px;
+}
+
+/*
+ * Micro clearfix
+ * Needed if `uk-pagination-previous` or `uk-pagination-next` sub-objects are used
+ */
+
+.uk-pagination:before,
+.uk-pagination:after {
+    content: "";
+    display: table;
+}
+
+.uk-pagination:after { clear: both; }
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Reset whitespace hack
+ * 2. Remove the gap at the bottom of it container
+ */
+
+.uk-pagination > li {
+    display: inline-block;
+    /* 1 */
+    font-size: $pagination-font-size;
+    /* 2 */
+    vertical-align: top;
+}
+
+.uk-pagination > li:nth-child(n+2) { margin-left: $pagination-margin-left; }
+
+/*
+ * 1. Makes pagination more robust against different box-sizing use
+ * 2. Reset text-align to center if alignment modifier is used
+ */
+
+.uk-pagination > li > a,
+.uk-pagination > li > span {
+    display: inline-block;
+    min-width: $pagination-line-height + (2 * $pagination-padding-vertical) - (2 * $pagination-padding-horizontal);
+    padding: $pagination-padding-vertical $pagination-padding-horizontal;
+    line-height: $pagination-line-height;
+    text-decoration: none;
+    /* 1 */
+    box-sizing: content-box;
+    /* 2 */
+    text-align: center;
+    @include hook-pagination-item();
+}
+
+/*
+ * Links
+ */
+
+.uk-pagination > li > a {
+    background: $pagination-background;
+    color: $pagination-color;
+    @include hook-pagination-link();
+}
+
+/*
+ * Hover
+ * 1. Apply hover style also to focus state
+ * 2. Remove default focus style
+ */
+
+.uk-pagination > li > a:hover,
+.uk-pagination > li > a:focus { // 1
+    background-color: $pagination-hover-background;
+    color: $pagination-hover-color;
+    /* 2 */
+    outline: none;
+    @include hook-pagination-link-hover();
+}
+
+/* OnClick */
+.uk-pagination > li > a:active {
+    background-color: $pagination-onclick-background;
+    color: $pagination-onclick-color;
+    @include hook-pagination-link-active();
+}
+
+/*
+ * Active
+ */
+
+.uk-pagination > .uk-active > span {
+    background: $pagination-active-background;
+    color: $pagination-active-color;
+    @include hook-pagination-active();
+}
+
+/*
+ * Disabled
+ */
+
+.uk-pagination > .uk-disabled > span {
+    background-color: $pagination-disabled-background;
+    color: $pagination-disabled-color;
+    @include hook-pagination-disabled();
+}
+
+
+/* Previous and next navigation
+ ========================================================================== */
+
+.uk-pagination-previous { float: left; }
+.uk-pagination-next { float: right; }
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-pagination-left { text-align: left; }
+.uk-pagination-right { text-align: right; }
+
+
+// Hooks
+// ========================================================================
+
+@include hook-pagination-misc();
+
+// @mixin hook-pagination-item(){}
+// @mixin hook-pagination-link(){}
+// @mixin hook-pagination-link-hover(){}
+// @mixin hook-pagination-link-active(){}
+// @mixin hook-pagination-active(){}
+// @mixin hook-pagination-disabled(){}
+// @mixin hook-pagination-misc(){}

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

@@ -0,0 +1,332 @@
+// Name:            Panel
+// Description:     Defines styles for reusable content areas
+//
+// Component:       `uk-panel`
+//
+// Sub-objects:     `uk-panel-title`
+//                  `uk-panel-badge`
+//                  `uk-panel-teaser`
+//                  `uk-panel-body`
+//
+// Modifiers:       `uk-panel-box`
+//                  `uk-panel-box-hover`
+//                  `uk-panel-box-primary`
+//                  `uk-panel-box-primary-hover`
+//                  `uk-panel-box-secondary`
+//                  `uk-panel-box-secondary-hover`
+//                  `uk-panel-hover`
+//                  `uk-panel-header`
+//                  `uk-panel-space`
+//                  `uk-panel-divider`
+//
+// Uses:            Nav: `uk-nav-side`
+//
+// Used by:         Dropdown
+//                  Off-canvas
+//                  Grid
+//
+// Markup:
+//
+// <!-- uk-panel -->
+// <div class="uk-panel">
+//     <div class="uk-panel-badge uk-badge"></div>
+//     <h3 class="uk-panel-title"></h3>
+//     <p></p>
+// </div>
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$panel-title-margin-bottom:                      15px !default;
+$panel-title-font-size:                          18px !default;
+$panel-title-line-height:                        24px !default;
+$panel-title-font-weight:                        normal !default;
+$panel-title-color:                              #444 !default;
+$panel-title-text-transform:                     none !default;
+
+$panel-teaser-margin-bottom:                     $panel-title-margin-bottom !default;
+
+$panel-box-padding:                              15px !default;
+$panel-box-background:                           #f5f5f5 !default;
+$panel-box-color:                                #444 !default;
+$panel-box-hover-color:                          $panel-box-color !default;
+$panel-box-title-color:                          #444 !default;
+$panel-box-badge-top:                            10px !default;
+$panel-box-badge-right:                          $panel-box-badge-top !default;
+$panel-box-teaser-margin:                        -$panel-box-padding !default;
+
+$panel-box-primary-background:                   #ebf7fd !default;
+$panel-box-primary-color:                        #2d7091 !default;
+$panel-box-primary-hover-color:                  $panel-box-primary-color !default;
+$panel-box-primary-title-color:                  #2d7091 !default;
+
+$panel-box-secondary-background:                 #eee !default;
+$panel-box-secondary-color:                      #444 !default;
+$panel-box-secondary-hover-color:                $panel-box-secondary-color !default;
+$panel-box-secondary-title-color:                #444 !default;
+
+$panel-hover-padding:                            15px !default;
+$panel-hover-color:                              #444 !default;
+$panel-hover-hover-background:                   #f5f5f5 !default;
+$panel-hover-hover-color:                        #444 !default;
+$panel-hover-badge-top:                          10px !default;
+$panel-hover-badge-right:                        $panel-hover-badge-top !default;
+$panel-hover-teaser-margin:                      -$panel-hover-padding !default;
+
+$panel-header-title-padding:                     10px !default;
+$panel-header-title-border:                      #ddd !default;
+$panel-header-title-border-width:                1px !default;
+$panel-header-title-color:                       #444 !default;
+
+$panel-space-padding:                            30px !default;
+
+$panel-divider-gutter:                           25px !default;
+$panel-divider-gutter-large:                     35px !default;
+$panel-divider-border:                           #ddd !default;
+$panel-divider-border-width:                     1px !default;
+
+$panel-body-padding:                             $panel-box-padding !default;
+
+
+/* ========================================================================
+   Component: Panel
+ ========================================================================== */
+
+/*
+ * 1. Needed for `a` elements
+ * 2. Create position context for badges
+ */
+
+.uk-panel {
+    /* 1 */
+    display: block;
+    /* 2 */
+    position: relative;
+}
+
+/*
+ * Allow panels to be anchors
+ */
+
+.uk-panel,
+.uk-panel:hover { text-decoration: none; }
+
+/*
+ * Micro clearfix to make panels more robust
+ */
+
+.uk-panel:before,
+.uk-panel:after {
+    content: "";
+    display: table;
+}
+
+.uk-panel:after { clear: both; }
+
+/*
+ * Remove margin from the last-child if not `uk-widget-title`
+ */
+
+.uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; }
+
+
+/* Sub-object: `uk-panel-title`
+ ========================================================================== */
+
+.uk-panel-title {
+    margin-top: 0;
+    margin-bottom: $panel-title-margin-bottom;
+    font-size: $panel-title-font-size;
+    line-height: $panel-title-line-height;
+    font-weight: $panel-title-font-weight;
+    text-transform: $panel-title-text-transform;
+    color: $panel-title-color;
+    @include hook-panel-title();
+}
+
+
+/* Sub-object: `uk-panel-badge`
+ ========================================================================== */
+
+.uk-panel-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    @include hook-panel-badge();
+}
+
+/* Sub-object: `uk-panel-teaser`
+ ========================================================================== */
+
+.uk-panel-teaser { margin-bottom: $panel-teaser-margin-bottom; }
+
+
+/* Sub-object: `uk-panel-body`
+ ========================================================================== */
+
+.uk-panel-body { padding: $panel-body-padding; }
+
+
+/* Modifier: `uk-panel-box`
+ ========================================================================== */
+
+.uk-panel-box {
+    padding: $panel-box-padding;
+    background: $panel-box-background;
+    color: $panel-box-color;
+    @include hook-panel-box();
+}
+
+.uk-panel-box-hover:hover {
+    color: $panel-box-hover-color;
+    @include hook-panel-box-hover();
+}
+
+.uk-panel-box .uk-panel-title { color: $panel-box-title-color; }
+
+.uk-panel-box .uk-panel-badge {
+    top: $panel-box-badge-top;
+    right: $panel-box-badge-right;
+}
+
+.uk-panel-box > .uk-panel-teaser {
+    margin-top: $panel-box-teaser-margin;
+    margin-left: $panel-box-teaser-margin;
+    margin-right: $panel-box-teaser-margin;
+}
+
+/*
+ * Nav in panel
+ */
+
+.uk-panel-box > .uk-nav-side { margin: 0 (-$panel-box-padding); }
+
+/*
+ * Sub-modifier: `uk-panel-box-primary`
+ */
+
+.uk-panel-box-primary {
+    background-color: $panel-box-primary-background;
+    color: $panel-box-primary-color;
+    @include hook-panel-box-primary();
+}
+
+.uk-panel-box-primary-hover:hover {
+    color: $panel-box-primary-hover-color;
+    @include hook-panel-box-primary-hover();
+}
+
+.uk-panel-box-primary .uk-panel-title { color: $panel-box-primary-title-color; }
+
+/*
+ * Sub-modifier: `uk-panel-box-secondary`
+ */
+
+.uk-panel-box-secondary {
+    background-color: $panel-box-secondary-background;
+    color: $panel-box-secondary-color;
+    @include hook-panel-box-secondary();
+}
+
+.uk-panel-box-secondary-hover:hover {
+    color: $panel-box-secondary-hover-color;
+    @include hook-panel-box-secondary-hover();
+}
+
+.uk-panel-box-secondary .uk-panel-title { color: $panel-box-secondary-title-color; }
+
+
+/* Modifier: `uk-panel-hover`
+ ========================================================================== */
+
+.uk-panel-hover {
+    padding: $panel-hover-padding;
+    color: $panel-hover-color;
+    @include hook-panel-hover();
+}
+
+.uk-panel-hover:hover {
+    background: $panel-hover-hover-background;
+    color: $panel-hover-hover-color;
+    @include hook-panel-hover-hover();
+}
+
+.uk-panel-hover .uk-panel-badge {
+    top: $panel-hover-badge-top;
+    right: $panel-hover-badge-right;
+}
+
+.uk-panel-hover > .uk-panel-teaser {
+    margin-top: $panel-hover-teaser-margin;
+    margin-left: $panel-hover-teaser-margin;
+    margin-right: $panel-hover-teaser-margin;
+}
+
+
+/* Modifier: `uk-panel-header`
+ ========================================================================== */
+
+.uk-panel-header .uk-panel-title {
+    padding-bottom: $panel-header-title-padding;
+    border-bottom: $panel-header-title-border-width solid $panel-header-title-border;
+    color: $panel-header-title-color;
+    @include hook-panel-header();
+}
+
+
+/* Modifier: `uk-panel-space`
+ ========================================================================== */
+
+.uk-panel-space { padding: $panel-space-padding; }
+
+.uk-panel-space .uk-panel-badge {
+    top: $panel-space-padding;
+    right: $panel-space-padding;
+}
+
+
+/* Modifier: `uk-panel-divider`
+ ========================================================================== */
+
+.uk-panel + .uk-panel-divider { margin-top: ($panel-divider-gutter * 2) !important; }
+
+.uk-panel + .uk-panel-divider:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -($panel-divider-gutter);
+    left: 0;
+    right: 0;
+    border-top: $panel-divider-border-width solid $panel-divider-border;
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-panel + .uk-panel-divider { margin-top: ($panel-divider-gutter-large * 2) !important; }
+    .uk-panel + .uk-panel-divider:before { top: -($panel-divider-gutter-large); }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@include hook-panel-misc();
+
+// @mixin hook-panel-title(){}
+// @mixin hook-panel-badge(){}
+// @mixin hook-panel-box(){}
+// @mixin hook-panel-box-hover(){}
+// @mixin hook-panel-box-primary(){}
+// @mixin hook-panel-box-primary-hover(){}
+// @mixin hook-panel-box-secondary(){}
+// @mixin hook-panel-box-secondary-hover(){}
+// @mixin hook-panel-hover(){}
+// @mixin hook-panel-hover-hover(){}
+// @mixin hook-panel-header(){}
+// @mixin hook-panel-misc(){}