kickstart_rails 3.0.39 → 3.0.40

data/app/assets/stylesheets/core/_root-element.sass

@@ -0,0 +1,17 @@
+/*
+ *  Root Element
+ *  =========
+ *  The root element is a base for several many elements in the library
+ *  To ensure consistent spacing when mixed into blocks.
+ */
+
+=root-element($size: 1)
+  padding: ($size * $size * map-get($rootElement, paddingV)) ($size * $size * map-get($rootElement, paddingV))
+  border-radius: map-get($rootElement, border-radius)
+  border: 1px solid transparent
+  outline: none
+  margin-bottom: $space
+  @if $size != 1
+    font-size: #{$size}rem
+  line-height: $size * $default-line-height
+  font-family: $body-font-family

data/app/assets/stylesheets/core/_typography.sass

@@ -0,0 +1,180 @@
+=type-default
+  font-family: $default-font
+  font-size: $default-font-size
+  font-size: calc(#{$default-font-size - 2} + #{$scalingFactor})
+  line-height: $default-line-height
+  line-height: calc(#{$default-line-height} + #{$scalingFactor})
+  color: $default-font-color
+
+html
+  color: map-get($black, lightest)
+
+ul
+  margin: 0
+    bottom: $space
+
+h1, h2, h3, h4, h5, h6, p
+  margin: 0
+  line-height: normal
+
+p
+  margin: 0
+    bottom: $space
+  line-height: $default-line-height
+
+a
+  text-decoration: none
+  color: map-get($colors, blue)
+
+  &:hover
+    text-decoration: underline
+
+=pre-default
+  color: darken(map-get($colors, blue), 25%)
+  border-radius: $space/5
+  padding: ($space/5)
+  font-family: $mono-font-family
+  word-break: break-all
+  word-wrap: break-word
+  border: 0px !important
+  margin: 0
+    bottom: $space
+
+=code-default
+  margin-bottom: 0px
+  padding: 0 (($space/5)/3)
+
+=p-default($content-optimized: false)
+  font-size: 1rem
+  margin-bottom: $space
+  line-height: $default-line-height
+
+  @if ($content-optimized)
+    font-size: 1.25rem
+    line-height: 1.85rem
+    margin-bottom: 1.25rem
+
+=hero-default
+  padding:
+    top: $space
+    top: 2vw
+    bottom: $space
+    bottom: 2vw
+  min-height: 450px
+  min-height: 35vw
+  background: $primary-color
+  margin-bottom: $space
+  box-shadow: inset 0px -30px 100px -20px hsla(0, 0%, 0%, 0.15), inset 0px 40px 90px -20px rgba(255, 255, 255, 0.15)
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  color: white
+
+  > h1, > h2, > h3, > h4, > h5, > h6, > p
+    text-align: center
+    font-weight: 300
+
+  h1, h2, h3, h4, h5, h6, p
+    color: inherit
+
+  h1
+    +heading-xxl
+  h2
+    +heading-xl
+  h3
+    +heading-lg
+  h4
+    +heading-md
+  h5
+    +heading-rg
+  h6
+    +heading-sm
+
+  > img
+    margin: 0px auto
+    display: block
+
+=heading-break
+  margin:
+    top: 2rem
+  &:first-child
+    margin-top: 0
+
+=page-heading-default
+  h1, h2, h3, h4, h5, h6
+    border-bottom: 1px solid map-get($white, darker)
+    padding-bottom: $space/2
+
+=heading-xxl-default
+  font-size: 3rem
+  margin:
+    bottom: 1.65rem
+  +heading-break
+
+=heading-xl-default
+  font-size: 2.7rem
+  margin:
+    bottom: 1.5rem
+  +heading-break
+
+=heading-lg-default
+  font-size: 2.4rem
+  margin:
+    bottom: 1.25rem
+  +heading-break
+
+=heading-md-default
+  font-size: 2.1rem
+  margin:
+    bottom: 1.15rem
+  +heading-break
+
+=heading-rg-default
+  font-size: 1.8rem
+  margin:
+    bottom: 1rem
+  +heading-break
+
+=heading-sm-default
+  font-size: 1.5rem
+  margin:
+    bottom: 0.85rem
+  +heading-break
+
+=heading-xs-default
+  font-size: 1.2rem
+  margin:
+    bottom: 0.7rem
+  +heading-break
+
+=heading-xxs-default
+  font-size: 0.9rem
+  margin:
+    bottom: 0.5rem
+  +heading-break
+
+=list-default($style: 'none')
+  margin-bottom: $space
+
+  @if ($style == 'unstyled')
+    +list-unstyled
+
+  @if ($style == 'horizontal')
+    +list-horizontal
+
+  @if ($style == 'unstyled horizontal')
+    +list-unstyled
+    +list-horizontal
+
+=list-unstyled
+  padding: 0
+  list-style: none
+
+  > li
+    margin-bottom: 0.85rem
+
+=list-horizontal
+  > li
+    display: inline-block
+    margin-right: 5px

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: $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: 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