luda 0.1.7 → 0.1.8

data/assets/stylesheets/luda/_core/{behaviours → behaviors}/_readonly.sass

@@ -7,7 +7,7 @@
     -ms-user-select: none
     user-select: none
 
-  [data-readonly]
+  [data-readonly]:not([data-readonly=false])
     cursor: default
     pointer-events: none
     -webkit-user-select: none

data/assets/stylesheets/luda/_core/elements/_baseline.sass

@@ -1,12 +1,12 @@
 +install(shared-element-baseline)
 
-  .baseline-overlay
+  .baseline
     position: relative
 
   $_baseline-gradient: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px)
   $_baseline-background: $_baseline-gradient left top / 100% 1rem repeat-y
 
-  .baseline-overlay::after
+  .baseline::after
     display: block
     position: absolute
     top: 0
@@ -16,7 +16,4 @@
     z-index: $z-index-highest
     pointer-events: none
     content: ""
-    background: $_baseline-background
-
-  .baseline-background
     background: $_baseline-background

data/assets/stylesheets/luda/_core/elements/_container.sass

@@ -1,7 +1,7 @@
 +install(shared-element-container)
 
   .container
-    max-width: $container-max-width-px
+    max-width: $container-max-width-rem
     min-width: 0
     padding: $container-padding-rem
     margin-right: auto

data/assets/stylesheets/luda/_core/{collections → elements}/_media.sass

@@ -41,10 +41,6 @@
   .media-content-1by1
     padding-top: 100%
 
-  .media-description
-    text-align: center
-    color: $media-description-color
-
 
 
   .media-contain.media img,

data/assets/stylesheets/luda/_core/elements/form/_form-check-radio.sass

@@ -2,6 +2,7 @@
 
   .fm-check label,
   .fm-radio label
+    flex: 0 1 auto
     padding-left: $form-element-checkfield-height-em + 0.4em
     line-height: typo-line-height($form-element-typography-size-level)
     overflow: hidden

data/assets/stylesheets/luda/_core/patterns/_avatar.sass

@@ -0,0 +1,121 @@
++install(shared-collection-avatar)
+
+  .avatar-x,
+  .avatar-y
+    display: inline-flex
+    align-items: center
+
+  .avatar-x .media,
+  .avatar-y .media
+    flex: 0 0 auto
+    width: $avatar-image-size-rem
+    height: $avatar-image-size-rem
+    background-color: $avatar-background-color
+    background-image: if($avatar-default-image, url($avatar-default-image), null)
+    background-position: center
+    background-size: $avatar-default-image-background-size
+    border-radius: $avatar-image-border-radius
+
+  .avatar-x .media img,
+  .avatar-y .media img
+    width: 100%
+    height: 100%
+    background: none
+    border-radius: $avatar-image-border-radius
+
+  .avatar-info
+    flex: 0 0 auto
+    height: $avatar-info-height-rem
+
+  .avatar-name,
+  .avatar-description
+    padding: 0
+    line-height: $avatar-info-height-rem / 2 - $avatar-info-padding-top-rem / 2
+    white-space: nowrap
+
+  .avatar-name
+    font-size: typo-size($avatar-name-typography-size-level)
+    color: $avatar-name-color
+
+  .avatar-description
+    font-size: typo-size($avatar-description-typography-size-level)
+    color: $avatar-description-color
+
+
+
+  .avatar-x .avatar-info
+    display: flex
+    flex-direction: column
+    justify-content: center
+    padding-left: $avatar-info-padding-left-rem
+
+
+
+  .avatar-y
+    flex-direction: column
+
+  .avatar-y .avatar-info
+    padding-top: $avatar-info-padding-top-rem
+    text-align: center
+
+
+
+  .avatar-large.avatar-x .media,
+  .avatar-large.avatar-y .media
+    width: $avatar-large-image-size-rem
+    height: $avatar-large-image-size-rem
+
+  .avatar-large.avatar-x .avatar-info,
+  .avatar-large.avatar-y .avatar-info
+    height: $avatar-large-info-height-rem
+
+  .avatar-large.avatar-y .avatar-info
+    padding-top: $avatar-large-info-padding-top-rem
+
+  .avatar-large.avatar-x .avatar-info
+    padding-left: $avatar-large-info-padding-left-rem
+
+  .avatar-large .avatar-name,
+  .avatar-large .avatar-description
+    $line-height-changed: $avatar-large-info-height-rem or $avatar-large-info-padding-top-rem
+    $description-height-rem: existing($avatar-large-info-height-rem, $avatar-info-height-rem)
+    $description-padding-top-rem: existing($avatar-large-info-padding-top-rem, $avatar-info-padding-top-rem)
+    $line-height: if($line-height-changed, $description-height-rem / 2 -  $description-padding-top-rem / 2, null)
+    line-height: $line-height
+
+  .avatar-large .avatar-name
+    font-size: typo-size($avatar-large-name-typography-size-level)
+
+  .avatar-large .avatar-description
+    font-size: typo-size($avatar-large-description-typography-size-level)
+
+
+
+  .avatar-small.avatar-x .media,
+  .avatar-small.avatar-y .media
+    width: $avatar-small-image-size-rem
+    height: $avatar-small-image-size-rem
+
+  .avatar-small.avatar-x .avatar-info,
+  .avatar-small.avatar-y .avatar-info
+    height: $avatar-small-info-height-rem
+
+  .avatar-small.avatar-y .avatar-info
+    padding-top: $avatar-small-info-padding-top-rem
+
+  .avatar-small.avatar-x .avatar-info
+    padding-left: $avatar-small-info-padding-left-rem
+
+  .avatar-small .avatar-name,
+  .avatar-small .avatar-description
+    $line-height-changed: $avatar-small-info-height-rem or $avatar-small-info-padding-top-rem
+    $description-height-rem: existing($avatar-small-info-height-rem, $avatar-info-height-rem)
+    $description-padding-top-rem: existing($avatar-small-info-padding-top-rem, $avatar-info-padding-top-rem)
+    $line-height: if($line-height-changed, $description-height-rem / 2 -  $description-padding-top-rem / 2, null)
+    line-height: $line-height
+
+  .avatar-small .avatar-name
+    font-size: typo-size($avatar-small-name-typography-size-level)
+
+  .avatar-small .avatar-description
+    font-size: typo-size($avatar-small-description-typography-size-level)

data/assets/stylesheets/luda/_core/{collections → patterns}/_button-icon.sass

@@ -8,6 +8,7 @@
   [class*=btn-]:not([class*=btn-text]).btn-ico-right .ico,
   [class*=btn-]:not([class*=btn-text]).btn-ico-top .ico
     font-size: $button-icon-size-em
+    pointer-events: none
 
 
 

data/assets/stylesheets/luda/_core/{collections → patterns}/_form-icon.sass

@@ -40,6 +40,7 @@
   .fm > .ico
     margin-top: _form-icon-margin-top($form-element-textfield-height-rem, $form-element-typography-size-level)
     font-size: $form-element-icon-size-em
+    pointer-events: none
     color: $form-element-icon-color
     fill: $form-element-icon-color
 

data/assets/stylesheets/luda/_core/{collections → patterns}/_modal.sass

@@ -8,5 +8,5 @@
     box-shadow: $modal-box-shadow
 
   .overlay-body > .modal
-    max-width: $modal-in-overlay-max-width-px
-    min-width: $modal-in-overlay-min-width-px
+    max-width: $modal-in-overlay-max-width-rem
+    min-width: $modal-in-overlay-min-width-rem

data/assets/stylesheets/luda/_core/{collections → patterns}/_nav.sass

@@ -83,10 +83,13 @@
 
   +media-width($nav-width-breakpoint)
 
+    // sass-lint:disable no-duplicate-properties
     .nav-header,
     .nav-aside
+      position: -webkit-sticky
       position: sticky
       top: 0
+    // sass-lint:enable no-duplicate-properties
 
     .nav-open,
     .nav-close

data/assets/stylesheets/luda/_core/utilities/_background.sass

@@ -15,6 +15,9 @@
   .bc-light
     background-color: $background-color-light !important
 
+  .bc-muted
+    background-color: $background-color-muted !important
+
   .bc-transparent
     background-color: transparent !important
 

data/assets/stylesheets/luda/_core/utilities/_position.sass

@@ -6,12 +6,15 @@
   .rel
     position: relative !important
 
+  // sass-lint:disable no-duplicate-properties
   .sti,
   .sti-t,
   .sti-l,
   .sti-b,
   .sti-r
+    position: -webkit-sticky !important
     position: sticky !important
+  // sass-lint:enable no-duplicate-properties
 
   .fix,
   .fix-t,

data/assets/stylesheets/luda/_default.sass

@@ -2,15 +2,16 @@
 @import luda/default/variables
 @import luda/default/mixins
 @import luda/default/base
-@import luda/default/behaviours/readonly
-@import luda/default/behaviours/disabled
-@import luda/default/behaviours/focus
-@import luda/default/behaviours/toggle
+@import luda/default/behaviors/readonly
+@import luda/default/behaviors/disabled
+@import luda/default/behaviors/focus
+@import luda/default/behaviors/toggle
 @import luda/default/elements/typography
 @import luda/default/elements/form
 @import luda/default/elements/container
 @import luda/default/elements/grid
 @import luda/default/elements/button
+@import luda/default/elements/media
 @import luda/default/elements/table
 @import luda/default/elements/overlay
 @import luda/default/elements/icon
@@ -19,21 +20,20 @@
 @import luda/default/elements/scrollbar
 @import luda/default/elements/turbolinks-progress-bar
 @import luda/default/elements/baseline
-@import luda/default/collections/media
-@import luda/default/collections/avatar
-@import luda/default/collections/breadcrumb
-@import luda/default/collections/alert
-@import luda/default/collections/modal
-@import luda/default/collections/dropdown
-@import luda/default/collections/button-icon
-@import luda/default/collections/button-group
-@import luda/default/collections/form-icon
-@import luda/default/collections/form-button
-@import luda/default/collections/form-group
-@import luda/default/collections/form-dropdown
-@import luda/default/collections/carousel
-@import luda/default/collections/tab
-@import luda/default/collections/nav
+@import luda/default/patterns/avatar
+@import luda/default/patterns/breadcrumb
+@import luda/default/patterns/alert
+@import luda/default/patterns/modal
+@import luda/default/patterns/dropdown
+@import luda/default/patterns/button-icon
+@import luda/default/patterns/button-group
+@import luda/default/patterns/form-icon
+@import luda/default/patterns/form-button
+@import luda/default/patterns/form-group
+@import luda/default/patterns/form-dropdown
+@import luda/default/patterns/carousel
+@import luda/default/patterns/tab
+@import luda/default/patterns/nav
 @import luda/default/utilities/display
 @import luda/default/utilities/flex
 @import luda/default/utilities/float

data/assets/stylesheets/luda/default/_banner.sass

@@ -1,7 +1,7 @@
 // sass-lint:disable no-empty-rulesets
 +install(banner)
   /*! 
-   * Luda 0.1.7 | Theme default | https://luda.dev
+   * Luda 0.1.8 | Theme default | https://luda.dev
    * Copyright 2018 oatw | https://oatw.blog
    * MIT license | http://opensource.org/licenses/MIT
    */

data/assets/stylesheets/luda/default/behaviors/_disabled.sass

@@ -0,0 +1,5 @@
+@import '../../_core/behaviors/disabled'
+
+
+
++install(behaviour-disabled)

data/assets/stylesheets/luda/default/behaviors/_focus.sass

@@ -0,0 +1,5 @@
+@import '../../_core/behaviors/focus'
+
+
+
++install(behaviour-focus)

data/assets/stylesheets/luda/default/behaviors/_readonly.sass

@@ -0,0 +1,5 @@
+@import '../../_core/behaviors/readonly'
+
+
+
++install(behaviour-readonly)

data/assets/stylesheets/luda/default/behaviors/_toggle.sass

@@ -0,0 +1,5 @@
+@import '../../_core/behaviors/toggle'
+
+
+
++install(behaviour-toggle)

data/assets/stylesheets/luda/default/elements/_button.sass

@@ -1,5 +1,5 @@
 @import '../base'
-@import '../behaviours/disabled'
+@import '../behaviors/disabled'
 @import '../../_core/elements/button'
 
 

data/assets/stylesheets/luda/default/elements/_form.sass

@@ -1,6 +1,6 @@
 @import '../base'
-@import '../behaviours/readonly'
-@import '../behaviours/disabled'
+@import '../behaviors/readonly'
+@import '../behaviors/disabled'
 @import form/form-label
 @import form/form-helper
 @import form/form-element

data/assets/stylesheets/luda/default/elements/_media.sass

@@ -0,0 +1,6 @@
+@import '../base'
+@import '../../_core/elements/media'
+
+
+
++install(collection-media)

data/assets/stylesheets/luda/default/index.sass

@@ -4,16 +4,17 @@
 
 @import base
 
-@import behaviours/readonly
-@import behaviours/disabled
-@import behaviours/focus
-@import behaviours/toggle
+@import behaviors/readonly
+@import behaviors/disabled
+@import behaviors/focus
+@import behaviors/toggle
 
 @import elements/typography
 @import elements/form
 @import elements/container
 @import elements/grid
 @import elements/button
+@import elements/media
 @import elements/table
 @import elements/overlay
 @import elements/icon
@@ -23,21 +24,20 @@
 @import elements/turbolinks-progress-bar
 @import elements/baseline
 
-@import collections/media
-@import collections/avatar
-@import collections/breadcrumb
-@import collections/alert
-@import collections/modal
-@import collections/dropdown
-@import collections/button-icon
-@import collections/button-group
-@import collections/form-icon
-@import collections/form-button
-@import collections/form-group
-@import collections/form-dropdown
-@import collections/carousel
-@import collections/tab
-@import collections/nav
+@import patterns/avatar
+@import patterns/breadcrumb
+@import patterns/alert
+@import patterns/modal
+@import patterns/dropdown
+@import patterns/button-icon
+@import patterns/button-group
+@import patterns/form-icon
+@import patterns/form-button
+@import patterns/form-group
+@import patterns/form-dropdown
+@import patterns/carousel
+@import patterns/tab
+@import patterns/nav
 
 @import utilities/display
 @import utilities/flex