kickstart_rails 3.0.55 → 3.0.56

data/app/assets/stylesheets/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/core/components/_buttons.sass

@@ -0,0 +1,159 @@
+=button-default($background-color: map-get($white, darker), $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.
+
+  +root-element($size: $size)
+  +button-size($size)
+  +button-color($background-color)
+
+  @content
+
+// Separated from main mixin for access by non-semantic library.
+
+=button-color($background-color)
+  background-color: $background-color
+  border-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
+  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: map-get($white, darker), $size: 1)
+  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/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/core/components/_forms.sass

@@ -0,0 +1,107 @@
+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: 'none')
+  display: block
+  margin-bottom: $space
+
+  @if $layout == 'horizontal'
+    display: inherit
+    margin:
+      right: $space/5
+
+    > *
+      display: inline-block
+      vertical-align: middle
+      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/core/components/_growls.sass

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

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

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

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

@@ -0,0 +1,43 @@
+=thumbnail-content-default
+  display: flex
+  overflow: hidden
+  margin-bottom: $space
+  align-items: flex-start
+
+  img, figure
+    flex-grow: 0
+    flex-shrink: 0
+
+  > :not(img)
+    width: 100%
+
+    + img, + figure
+      margin-left: $space/2
+
+  h1
+    +heading-xs
+
+  > img, > figure
+    + :not(img)
+      margin-left: $space/2
+      width: 100%
+
+  @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

data/app/assets/stylesheets/core/components/_labels.sass

@@ -0,0 +1,15 @@
+=label-default($background-color: $primary-color)
+  +root-element
+  background: $background-color
+  font-size: 0.8rem
+  color: white
+  line-height: normal
+  font-weight: bold
+
+  @if $background-color == map-get($colors, yellow)
+    color: $default-font-color
+
+  &:after
+    border-top-color: $background-color
+
+  @content

data/app/assets/stylesheets/core/components/_modals.sass

@@ -0,0 +1,73 @@
+=modal-default()
+  +root-element
+  border-width: 0
+  padding: $space
+  position: fixed
+  box-shadow: 0px 0px 99999px 99999px rgba(0, 0, 0, 0.35), 0px 0px 25px rgba(0, 0, 0, 0.5)
+  top: 15px
+  top: 5vh
+  left: 2%
+  right: 2%
+  margin: 0px auto
+  display: none
+  background: white
+  border-color: map-get($white, dark)
+  animation-duration: 0.2s
+  animation-timing-function: ease
+  animation-fill-mode: both
+  z-index: 1500
+
+  &[style="display: block;"]
+    animation-name: fadeInDown
+
+  @media screen and (min-width: $tablet)
+    top: 75px
+    top: 10vh
+    width: 650px
+    left: 50%
+    margin-left: -325px
+
+  > header, > footer
+    +alert
+
+    > h1, > h2, > h3, > h4, > h5, > h6
+      margin-bottom: 0
+
+    background: map-get($white, dark)
+    color: $default-font-color
+    margin: -$space
+      bottom: $space
+
+  > header
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+    position: relative
+
+    a[data-modal-close]
+      position: absolute
+      top: $space/2
+      right: $space/2
+      line-height: 1.3rem
+      text-decoration: none
+      font-size: 1.3rem
+
+  > footer
+    margin:
+      top: $space
+      bottom: -$space
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+
+    ul
+      +list($style: 'unstyled horizontal')
+      text-align: right
+
+      li
+        margin:
+          bottom: 0
+          right: 0
+
+    [role="button"]
+      text-decoration: none
+
+  @content