kickstart_rails 3.0.20 → 3.0.21

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0b48cdc4f0317a972d9246e6c82a707fc9def4d2
-  data.tar.gz: 7188f82f5cb27fb3458368199869e4917e927107
+  metadata.gz: e64e790f2da776c6a1bec55b992ec9f7b4fe7133
+  data.tar.gz: 42da6c5a09063ab68057ab58d7d541c5a526043e
 SHA512:
-  metadata.gz: 12663f1475e7309ecaf8aa3434ddbf3ae3e535f2b2bd43409b6a4d80c62fa20985e0e874cf9ea78cc6b3d4c051533616f771d699bed6f3f876f5aad72d7e1c2c
-  data.tar.gz: f6589b5c29ce5ee5724bdab9390b8a039cef515326cbabbefe25f023c29e60b01afa293d3c8813fb7241032f808365fc737face2bbfc31b3ac10b2bbbbfdb207
+  metadata.gz: b50fae422df5651763820dbcdf2d1c7f59f1587726976c294b11e709f6741426d7fcc8504c98d6ab4d5c1b7a6d3e9e35e38e25eeafe2e3e0039323699595acc2
+  data.tar.gz: 7a49dca59927f93de427cba7e2b845107ced0528979087e2cef67c43ca79e2d8493daba7579d10d9a6aa432c6bf8bb04ac2d076ac3a9483b882c84630b5218ee

data/app/assets/stylesheets/kickstart_rails/core/_base_components.sass

@@ -3,13 +3,13 @@
 // These are the base components from which dependent components can extend.
 
 // Components
-@import ../components/_alerts
-@import ../components/_buttons
-@import ../components/_hr
-@import ../components/_images
-@import ../components/_labels
-@import ../components/_modals
-@import ../components/_progress
-@import ../components/_tables
-@import ../components/_dropdown_menu
-@import ../components/_navbar
+@import components/_alerts
+@import components/_buttons
+@import components/_hr
+@import components/_images
+@import components/_labels
+@import components/_modals
+@import components/_progress
+@import components/_tables
+@import components/_dropdown_menu
+@import components/_navbar

data/app/assets/stylesheets/kickstart_rails/core/_dependent_components.sass

@@ -3,10 +3,10 @@
 // These components extend the core and base components.
 
 // Components
-@import ../components/_growls
-@import ../components/_modals
-@import ../components/_notifications
-@import ../components/_tabs
-@import ../components/_tooltips
-@import ../components/_forms
-@import ../components/_pagination
+@import components/_growls
+@import components/_modals
+@import components/_notifications
+@import components/_tabs
+@import components/_tooltips
+@import components/_forms
+@import components/_pagination

data/app/assets/stylesheets/kickstart_rails/core/components/_alerts.sass

@@ -0,0 +1,23 @@
+=alert-default
+  +root-element
+  padding: $space/2
+  background: $primary-color
+  color: white
+  margin:
+    bottom: $space
+
+  p
+    +p
+
+  > *:last-child
+    margin-bottom: 0
+
+  h1
+    +heading-xs
+    color: inherit
+
+  a:not([role=button])
+    color: inherit
+    text-decoration: underline
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_buttons.sass

@@ -0,0 +1,159 @@
+=button-default($background-color: $secondary-color, $size: 1)
+  display: inline-block
+  cursor: pointer
+  text-decoration: none
+  color: map-get($black, light)
+  text-align: left
+  transition: box-shadow 0.15s
+  vertical-align: middle
+  user-select: none
+
+  &[disabled], &:disabled
+    color: rgba(0, 0, 0, 0.25)
+    pointer-events: none
+    // TODO: Cursor disabled?
+
+  &.menu-item
+    position: relative
+
+    ul
+      display: none
+
+    &:after
+      content: '+'
+      font-family: 'Kickstart', Kickstart
+      font-size: 0.65rem
+      display: inline-block
+      color: rgba(0, 0, 0, 0.3)
+
+  &:hover
+    box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.1) inset
+    text-decoration: none
+
+  &:active
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1) inset, 0px -2px 0px 0px rgba(255, 255, 255, 0.1) inset
+    text-decoration: none
+
+  // TODO: Done this way, these properties are not mutex
+  //       in the case of missing params.
+
+  +button-color($background-color)
+  +root-element($size: $size)
+  +button-size($size)
+
+  @content
+
+// Separated from main mixin for access by non-semantic library.
+
+=button-color($background-color)
+  background-color: $background-color
+
+  &.open
+    background-color: darken($background-color, 5%)
+
+  @if lightness($background-color) > 75%
+    color: map-get($black, lighter)
+  @else
+    color: white
+
+  @if $background-color == map-get($colors, yellow)
+    color: map-get($black, lighter)
+
+  @if $background-color == transparent
+    color: map-get($black, lighter)
+
+=button-size($size)
+  padding: ($size * $size * map-get($rootElement, paddingV)) ($size * $size * map-get($rootElement, paddingH))
+  line-height: $size * $default-line-height
+  margin-bottom: 0
+  font-size: ($default-font-size - 2) * $size
+  border-color: hsla(0, 0%, 0%, 0.15)
+  padding:
+    left: $size * $size * map-get($rootElement, paddingH)
+    right: $size * $size * map-get($rootElement, paddingH)
+
+  &.menu-item
+    &:after
+      font-size: $size * 0.85rem
+      margin-left: $size * $size * $space/4
+
+    &.open
+      ul
+        display: block
+
+    ul
+      +button-dropdown-menu
+
+      li
+        padding:
+          left: 0
+          right: 0
+        margin:
+          bottom: 0
+
+  + .button-dropdown + ul
+    // Button with dropdown
+    +button-dropdown-menu
+
+  &.button-dropdown
+    padding:
+      left: map-get($rootElement, paddingV) * $size * $size
+      right: map-get($rootElement, paddingV) * $size * $size
+
+=button-dropdown-menu
+  // Most of the styling actually comes from the global dropdown_menu
+  // styling, however this will provide some specifics for working
+  // with buttons.
+  margin-top: 5px
+  right: -$space
+  border: 1px solid map-get($white, darker)
+
+=button-group-default($background-color, $size)
+  list-style: none
+  padding: 0
+  margin:
+    bottom: 0
+    top: 0
+  display: flex
+  align-items: center
+  position: relative
+
+  > li
+    color: inherit
+
+    > a, > button, > input
+      color: inherit
+      +button($background-color, $size)
+      text-decoration: inherit
+      vertical-align: top
+
+    &:not(:first-child):not(:last-child):not(:only-child)
+      > a, > button, > input
+        border-radius: 0
+        border-left: 0
+
+    &:first-child:not(:only-child)
+      > a, > button, > input
+        border-top-right-radius: 0
+        border-bottom-right-radius: 0
+
+    &:last-child:not(:only-child)
+      > a, > button, > input
+        border-top-left-radius: 0
+        border-bottom-left-radius: 0
+        border-left: 0
+
+    .button-dropdown
+
+      &:after
+        content: '+'
+        display: block
+        font-family: "Kickstart", Kickstart
+        color: rgba(0, 0, 0, 0.3)
+        font-size: 90%
+
+  > li > ul
+    +button-dropdown-menu
+    display: none
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_dropdown_menu.sass

@@ -0,0 +1,69 @@
+=dropdown_menu-default
+  .menu-item
+    ul
+      display: none
+      position: absolute
+      padding: 0
+      list-style: none
+      z-index: 10
+      background: white
+      top: 100%
+      margin-top: 1px
+      left: -1px // Compensate for border
+      min-width: 175px
+      border:
+        left: 1px solid map-get($white, darker)
+        right: 1px solid map-get($white, darker)
+        bottom: 1px solid map-get($white, darker)
+      border-radius: map-get($rootElement, border-radius)
+      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25)
+      background: white
+
+      &:before
+        display: block
+        position: absolute
+        content: ' '
+
+      li
+        border: 0px
+
+        a:not([role=button])
+          +button-default
+          display: block
+          margin-bottom: 0
+          border-radius: 0
+          background: white
+          border-color: white
+          font-size: $default-font-size
+
+          &:hover
+            border-color: map-get($white, dark)
+            background: map-get($white, dark)
+            box-shadow: none
+
+          &:active
+            border-color: map-get($white, darker)
+            background: map-get($white, darker)
+            box-shadow: none
+
+        &:first-child
+          border-top-right-radius: map-get($rootElement, border-radius)
+          border-top-left-radius: map-get($rootElement, border-radius)
+
+          a:not([role=button])
+            border-top-right-radius: map-get($rootElement, border-radius)
+            border-top-left-radius: map-get($rootElement, border-radius)
+
+        &:last-child
+          border-bottom-right-radius: map-get($rootElement, border-radius)
+          border-bottom-left-radius: map-get($rootElement, border-radius)
+
+          a:not([role=button])
+            border-bottom-right-radius: map-get($rootElement, border-radius)
+            border-bottom-left-radius: map-get($rootElement, border-radius)
+
+    &.open
+      ul
+        display: block
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_forms.sass

@@ -0,0 +1,106 @@
+label, legend
+  display: block
+  font-weight: 500
+  margin-bottom: $space/4
+
+=form-default($layout: 'none')
+  margin-bottom: $space
+
+  @if ($layout == 'horizontal')
+    +form-horizontal
+  @if ($layout == 'left')
+    +form-left
+
+  @content
+
+=input-styles
+  +root-element
+  margin: 0
+    bottom: 0
+  border: 1px solid #CCC
+  display: block
+  border-radius: 3px
+  max-width: 100%
+
+  label + &
+    margin-top: ($space/5)
+
+  &:focus
+    outline: 0px
+    box-shadow: 0px 0px 0px 2px $primary-color
+
+  @content
+
++text-inputs
+  +input-styles
+
+textarea
+  +input-styles
+  width: 300px
+
+input[type="checkbox"],
+input[type="radio"]
+  display: inline-block
+  width: 14px
+  margin:
+    left: 1px
+    right: 5px
+
+select
+  +button
+  height: calc(#{$default-line-height} + #{2 * map-get($rootElement, paddingV)})
+  background-image: none
+
+=form-horizontal
+  display: inline-block
+
+  label, input
+    display: inline-block
+
+  @content
+
+=form-left
+  label
+    +root-element
+    padding:
+      right: 0
+      left: 0
+    display: inline-block
+    margin: 
+      top: 0
+      bottom: 0
+
+  @media screen and (min-width: $tablet)
+    label:not(.checkbox):not(.radio)
+      text-align: right
+
+  @content
+
+=form_group-default($layout)
+  display: block
+  margin-bottom: $space
+
+  @if $layout == 'horizontal'
+    display: inherit
+    margin:
+      right: $space/5
+
+    > *
+      display: inline-block
+      margin-right: $space/5 
+
+  @content
+
+=field-colors($color)
+  label, p
+    color: $color
+
+  +text-inputs
+    border-color: $color
+
+  select
+    border-color: $color
+    background-color: $color
+
+  textarea
+    border-color: $color

data/app/assets/stylesheets/kickstart_rails/core/components/_growls.sass

@@ -0,0 +1,2 @@
+=growl-default
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_hr.sass

@@ -0,0 +1,5 @@
+=hr-default
+  border: 0
+    top: 2px solid $default-font-color
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_images.sass

@@ -0,0 +1,40 @@
+=thumbnail-content-default
+  display: flex
+  overflow: hidden
+  margin-bottom: $space
+  align-items: flex-start
+
+  img, figure
+    flex-grow: 0
+    flex-shrink: 0
+
+  > :not(img)
+    + img, + figure
+      margin-left: $space/2
+
+  h1
+    +heading-xs
+
+  > img, > figure
+    + :not(img)
+      margin-left: $space/2
+
+  @content
+
+=thumbnail-default
+  +root-element
+  border: 1px solid map-get($white, darker)
+  display: inline-block
+  max-width: 100%
+
+  img
+    max-width: 100%
+
+  figcaption
+    font-size: 0.85rem
+
+  @content
+
+figure
+  margin: 0
+  padding: 0