compass_twitter_bootstrap 0.1.8 → 2.0.0

data/stylesheets_sass/compass_twitter_bootstrap/_patterns.sass

@@ -1,923 +0,0 @@
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ----------------------------------------------------------------------------
-
-// TOPBAR
-// ------
-
-// Topbar for Branding and Nav
-.topbar
-  height: 40px
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  z-index: 10000
-  overflow: visible
-  // Links get text shadow
-  a
-    color: $grayLight
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
-  // Hover and active states
-  // h3 for backwards compatibility
-  h3 a:hover,
-  .brand:hover,
-  ul .active > a
-    background-color: #333
-    background-color: rgba(255, 255, 255, 0.05)
-    color: $white
-    text-decoration: none
-  // Website name
-  // h3 left for backwards compatibility
-  h3
-    position: relative
-  h3 a,
-  .brand
-    float: left
-    display: block
-    padding: 8px 20px 12px
-    margin-left: -20px
-    // negative indent to left-align the text down the page
-    color: $white
-    font-size: 20px
-    font-weight: 200
-    line-height: 1
-  // Plain text in topbar
-  p
-    margin: 0
-    line-height: 40px
-    a:hover
-      background-color: transparent
-      color: $white
-  // Search Form
-  form
-    float: left
-    margin: 5px 0 0 0
-    position: relative
-    +opacity(1)
-  // Todo: remove from v2.0 when ready, added for legacy
-  form.pull-right
-    float: right
-  input
-    background-color: #444
-    background-color: rgba(255, 255, 255, 0.3)
-    +sans-serif(13px, normal, 1)
-    padding: 4px 9px
-    color: $white
-    color: rgba(255, 255, 255, 0.75)
-    border: 1px solid #111
-    +border-radius(4px)
-    $shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25)
-    +box-shadow($shadow)
-    +transition(none)
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    &:-moz-placeholder
-      color: $grayLighter
-    &::-webkit-input-placeholder
-      color: $grayLighter
-    // Hover states
-    &:hover
-      background-color: $grayLight
-      background-color: rgba(255, 255, 255, 0.5)
-      color: $white
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
-    &:focus,
-    &.focused
-      outline: 0
-      background-color: $white
-      color: $grayDark
-      text-shadow: 0 1px 0 $white
-      border: 0
-      padding: 5px 10px
-      +box-shadow(0 0 3px rgba(0, 0, 0, 0.15))
-
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-// For backwards compatibility, include .topbar .fill
-
-.topbar-inner,
-.topbar .fill
-  background-color: #222
-  +gradient-vertical(#333333, #222222)
-  $shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)
-  +box-shadow($shadow)
-
-// NAVIGATION
-// ----------
-
-// Topbar Nav
-// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-// For backwards compatibility, leave in .topbar div > ul
-
-.topbar div > ul,
-.nav
-  display: block
-  float: left
-  margin: 0 10px 0 0
-  position: relative
-  left: 0
-  > li
-    display: block
-    float: left
-  a
-    display: block
-    float: none
-    padding: 10px 10px 11px
-    line-height: 19px
-    text-decoration: none
-    &:hover
-      color: $white
-      text-decoration: none
-  .active > a
-    background-color: #222
-    background-color: rgba(0, 0, 0, 0.5)
-  // Secondary (floated right) nav in topbar
-  &.secondary-nav
-    float: right
-    margin-left: 10px
-    margin-right: 0
-    // backwards compatibility
-    .menu-dropdown,
-    .dropdown-menu
-      right: 0
-      border: 0
-  // Dropdowns within the .nav
-  // a.menu:hover and li.open .menu for backwards compatibility
-  a.menu:hover,
-  li.open .menu,
-  .dropdown-toggle:hover,
-  .dropdown.open .dropdown-toggle
-    background: #444
-    background: rgba(255, 255, 255, 0.05)
-  // .menu-dropdown for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu
-    background-color: #333
-    // a.menu for backwards compatibility
-    a.menu,
-    .dropdown-toggle
-      color: $white
-      &.open
-        background: #444
-        background: rgba(255, 255, 255, 0.05)
-    li a
-      color: #999
-      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5)
-      &:hover
-        +gradient-vertical(#292929, #191919)
-        color: $white
-    .active a
-      color: $white
-    .divider
-      background-color: #222
-      border-color: #444
-
-// For backwards compatibility with new dropdowns, redeclare dropdown link padding
-
-.topbar ul .menu-dropdown li a,
-.topbar ul .dropdown-menu li a
-  padding: 4px 15px
-
-// Dropdown Menus
-// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-// li.menu for backwards compatibility
-
-li.menu,
-.dropdown
-  position: relative
-
-// The link that is clicked to toggle the dropdown
-// a.menu for backwards compatibility
-
-a.menu:after,
-.dropdown-toggle:after
-  width: 0
-  height: 0
-  display: inline-block
-  content: "&darr;"
-  text-indent: -99999px
-  vertical-align: top
-  margin-top: 8px
-  margin-left: 4px
-  border-left: 4px solid transparent
-  border-right: 4px solid transparent
-  border-top: 4px solid $white
-  +opacity(0.5)
-
-// The dropdown menu (ul)
-// .menu-dropdown for backwards compatibility
-
-.menu-dropdown,
-.dropdown-menu
-  background-color: $white
-  float: left
-  display: none
-  // None by default, but block on "open" of the menu
-  position: absolute
-  top: 40px
-  z-index: 900
-  min-width: 160px
-  max-width: 220px
-  _width: 160px
-  margin-left: 0
-  // override default ul styles
-  margin-right: 0
-  padding: 6px 0
-  zoom: 1
-  // do we need this?
-  border-color: #999
-  border-color: rgba(0, 0, 0, 0.2)
-  border-style: solid
-  border-width: 0 1px 1px
-  +border-radius(0 0 6px 6px)
-  +box-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
-  +background-clip(padding-box)
-  // Unfloat any li's to make them stack
-  li
-    float: none
-    display: block
-    background-color: none
-  // Dividers (basically an hr) within the dropdown
-  .divider
-    height: 1px
-    margin: 5px 0
-    overflow: hidden
-    background-color: #eee
-    border-bottom: 1px solid $white
-
-.topbar .dropdown-menu,
-.dropdown-menu
-  // Links within the dropdown menu
-  a
-    display: block
-    padding: 4px 15px
-    clear: both
-    font-weight: normal
-    line-height: 18px
-    color: $gray
-    text-shadow: 0 1px 0 $white
-    // Hover state
-    &:hover,
-    &.hover
-      +gradient-vertical(#eeeeee, #dddddd)
-      color: $grayDark
-      text-decoration: none
-      $shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025)
-      +box-shadow($shadow)
-
-// Open state for the dropdown
-// .open for backwards compatibility
-
-.open,
-.dropdown.open
-  // .menu for backwards compatibility
-  .menu,
-  .dropdown-toggle
-    color: $white
-    background: #ccc
-    background: rgba(0, 0, 0, 0.3)
-  // .menu-dropdown for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu
-    display: block
-
-// TABS AND PILLS
-// --------------
-
-// Common styles
-
-.tabs,
-.pills
-  margin: 0 0 $baseline
-  padding: 0
-  list-style: none
-  +clearfix
-  > li
-    float: left
-    > a
-      display: block
-
-// Tabs
-.tabs
-  border-color: #ddd
-  border-style: solid
-  border-width: 0 0 1px
-  > li
-    position: relative
-    // For the dropdowns mostly
-    margin-bottom: -1px
-    > a
-      padding: 0 15px
-      margin-right: 2px
-      line-height: $baseline * 2 - 2
-      border: 1px solid transparent
-      +border-radius(4px 4px 0 0)
-      &:hover
-        text-decoration: none
-        background-color: #eee
-        border-color: #eee #eee #ddd
-  // Active state, and it's :hover to override normal :hover
-  .active > a,
-  .active > a:hover
-    color: $gray
-    background-color: $white
-    border: 1px solid #ddd
-    border-bottom-color: transparent
-    cursor: default
-
-// Dropdowns in tabs
-.tabs
-  // first one for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu
-    top: 35px
-    border-width: 1px
-    +border-radius(0 6px 6px 6px)
-  // first one for backwards compatibility
-  a.menu:after,
-  .dropdown-toggle:after
-    border-top-color: #999
-    margin-top: 15px
-    margin-left: 5px
-  // first one for backwards compatibility
-  li.open.menu .menu,
-  .open.dropdown .dropdown-toggle
-    border-color: #999
-  // first one for backwards compatibility
-  li.open a.menu:after,
-  .dropdown.open .dropdown-toggle:after
-    border-top-color: #555
-
-// Pills
-.pills
-  a
-    margin: 5px 3px 5px 0
-    padding: 0 15px
-    line-height: 30px
-    text-shadow: 0 1px 1px $white
-    +border-radius(15px)
-    &:hover
-      color: $white
-      text-decoration: none
-      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25)
-      background-color: $linkColorHover
-  .active a
-    color: $white
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25)
-    background-color: $linkColor
-
-// Stacked pills
-.pills-vertical > li
-  float: none
-
-// Tabbable areas
-
-.tab-content,
-.pill-content
-
-.tab-content > .tab-pane,
-.pill-content > .pill-pane,
-.tab-content > div,
-.pill-content > div
-  display: none
-
-.tab-content > .active,
-.pill-content > .active
-  display: block
-
-// BREADCRUMBS
-// -----------
-
-.breadcrumb
-  padding: 7px 14px
-  margin: 0 0 $baseline
-  +gradient-vertical(white, #f5f5f5)
-  border: 1px solid #ddd
-  +border-radius(3px)
-  +box-shadow(inset 0 1px 0 $white)
-  li
-    display: inline
-    text-shadow: 0 1px 0 $white
-  .divider
-    padding: 0 5px
-    color: $grayLight
-  .active a
-    color: $grayDark
-
-// PAGE HEADERS
-// ------------
-
-.hero-unit
-  background-color: #f5f5f5
-  margin-bottom: 30px
-  padding: 60px
-  +border-radius(6px)
-  h1
-    margin-bottom: 0
-    font-size: 60px
-    line-height: 1
-    letter-spacing: -1px
-  p
-    font-size: 18px
-    font-weight: 200
-    line-height: $baseline * 1.5
-
-footer
-  margin-top: $baseline - 1
-  padding-top: $baseline - 1
-  border-top: 1px solid #eee
-
-// PAGE HEADERS
-// ------------
-
-.page-header
-  margin-bottom: $baseline - 1
-  border-bottom: 1px solid #ddd
-  +box-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
-  h1
-    margin-bottom: $baseline / 2 - 1px
-
-// BUTTON STYLES
-// -------------
-
-// Shared colors for buttons and alerts
-
-.btn,
-.alert-message
-  // Set text color
-  &.danger,
-  &.danger:hover,
-  &.error,
-  &.error:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover
-    color: $white
-  // Sets the close button to the middle of message
-  .close
-    font-family: Arial, sans-serif
-    line-height: 18px
-  // Danger and error appear as red
-  &.danger,
-  &.error
-    +gradientBar(#ee5f5b, #c43c35)
-  // Success appears as green
-  &.success
-    +gradientBar(#62c462, #57a957)
-  // Info appears as a neutral blue
-  &.info
-    +gradientBar(#5bc0de, #339bb9)
-
-// Base .btn styles
-.btn
-  // Button Base
-  cursor: pointer
-  display: inline-block
-  +gradient-vertical-three-colors(white, white, 25%, darken(white, 10%))
-  // Don't use @include gradientbar(); here since it does a three-color gradient
-  padding: 5px 14px 6px
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75)
-  color: #333
-  font-size: $basefont
-  line-height: normal
-  border: 1px solid #ccc
-  border-bottom-color: #bbb
-  +border-radius(4px)
-  $shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
-  +box-shadow($shadow)
-  &:hover
-    background-position: 0 -15px
-    color: #333
-    text-decoration: none
-  // Focus state for keyboard and accessibility
-  &:focus
-    outline: 1px dotted #666
-  // Primary Button Type
-  &.primary
-    color: $white
-    +gradientBar($blue, $blueDark)
-  // Transitions
-  +transition(0.1s linear all)
-  // Active and Disabled states
-  &.active,
-  &:active
-    $shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05)
-    +box-shadow($shadow)
-  &.disabled
-    cursor: default
-    background-image: none
-    +reset-filter
-    +opacity(0.65)
-    +box-shadow(none)
-  &[disabled]
-    // disabled pseudo can't be included with .disabled
-    // def because IE8 and below will drop it ;_;
-    cursor: default
-    background-image: none
-    +reset-filter
-    +opacity(0.65)
-    +box-shadow(none)
-  // Button Sizes
-  &.large
-    font-size: $basefont + 2px
-    line-height: normal
-    padding: 9px 14px 9px
-    +border-radius(6px)
-  &.small
-    padding: 7px 9px 7px
-    font-size: $basefont - 2px
-
-// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
-
-\:root .alert-message,
-:root .btn
-  border-radius: 0 \0
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-
-button.btn,
-input[type=submit].btn
-  &::-moz-focus-inner
-    padding: 0
-    border: 0
-
-// CLOSE ICONS
-// -----------
-.close
-  float: right
-  color: $black
-  font-size: 20px
-  font-weight: bold
-  line-height: $baseline * 0.75
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 1)
-  +opacity(0.25)
-  &:hover
-    color: $black
-    text-decoration: none
-    +opacity(0.4)
-
-// ERROR STYLES
-// ------------
-
-// Base alert styles
-.alert-message
-  position: relative
-  padding: 7px 15px
-  margin-bottom: $baseline
-  color: $grayDark
-  +gradientBar(#fceec1, #eedc94)
-  // warning by default
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
-  border-width: 1px
-  border-style: solid
-  +border-radius(4px)
-  +box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.25))
-  // Adjust close icon
-  .close
-    margin-top: 1px
-    *margin-top: 0
-    // For IE7
-  // Make links same color as text and stand out more
-  a
-    font-weight: bold
-    color: $grayDark
-  &.danger p a,
-  &.error p a,
-  &.success p a,
-  &.info p a
-    color: $white
-  // Remove extra margin from content
-  h5
-    line-height: $baseline
-  p
-    margin-bottom: 0
-  div
-    margin-top: 5px
-    margin-bottom: 2px
-    line-height: 28px
-  .btn
-    // Provide actions with buttons
-    +box-shadow(0 1px 0 rgba(255, 255, 255, 0.25))
-  &.block-message
-    background-image: none
-    background-color: lighten(#fceec1, 5%)
-    +reset-filter
-    padding: 14px
-    border-color: #fceec1
-    +box-shadow(none)
-    ul, p
-      margin-right: 30px
-    ul
-      margin-bottom: 0
-    li
-      color: $grayDark
-    .alert-actions
-      margin-top: 5px
-    &.error,
-    &.success,
-    &.info
-      color: $grayDark
-      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
-    &.error
-      background-color: lighten(#f56a66, 25%)
-      border-color: lighten(#f56a66, 20%)
-    &.success
-      background-color: lighten(#62c462, 30%)
-      border-color: lighten(#62c462, 25%)
-    &.info
-      background-color: lighten(#6bd0ee, 25%)
-      border-color: lighten(#6bd0ee, 20%)
-    // Change link color back
-    &.danger p a,
-    &.error p a,
-    &.success p a,
-    &.info p a
-      color: $grayDark
-
-// PAGINATION
-// ----------
-
-.pagination
-  height: $baseline * 2
-  margin: $baseline 0
-  ul
-    float: left
-    margin: 0
-    border: 1px solid #ddd
-    border: 1px solid rgba(0, 0, 0, 0.15)
-    +border-radius(3px)
-    +box-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
-  li
-    display: inline
-  a
-    float: left
-    padding: 0 14px
-    line-height: $baseline * 2 - 2
-    border-right: 1px solid
-    border-right-color: #ddd
-    border-right-color: rgba(0, 0, 0, 0.15)
-    *border-right-color: #ddd
-    /* IE6-7
-    text-decoration: none
-  a:hover,
-  .active a
-    background-color: lighten($blue, 45%)
-  .disabled a,
-  .disabled a:hover
-    background-color: transparent
-    color: $grayLight
-  .next a
-    border: 0
-
-// WELLS
-// -----
-
-.well
-  background-color: #f5f5f5
-  margin-bottom: 20px
-  padding: 19px
-  min-height: 20px
-  border: 1px solid #eee
-  border: 1px solid rgba(0, 0, 0, 0.05)
-  +border-radius(4px)
-  +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05))
-  blockquote
-    border-color: #ddd
-    border-color: rgba(0, 0, 0, 0.15)
-
-// MODALS
-// ------
-
-.modal-backdrop
-  background-color: $black
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  bottom: 0
-  z-index: 10000
-  // Fade for backdrop
-  &.fade
-    opacity: 0
-
-.modal-backdrop,
-.modal-backdrop.fade.in
-  +opacity(0.8)
-
-.modal
-  position: fixed
-  top: 50%
-  left: 50%
-  z-index: 11000
-  width: 560px
-  margin: -250px 0 0 -280px
-  background-color: $white
-  border: 1px solid #999
-  border: 1px solid rgba(0, 0, 0, 0.3)
-  *border: 1px solid #999
-  /* IE6-7
-  +border-radius(6px)
-  +box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
-  +background-clip(padding-box)
-  .close
-    margin-top: 7px
-  &.fade
-    +transition(e("opacity .3s linear, top .3s ease-out"))
-    top: -25%
-  &.fade.in
-    top: 50%
-
-.modal-header
-  border-bottom: 1px solid #eee
-  padding: 5px 15px
-
-.modal-body
-  padding: 15px
-
-.modal-body form
-  margin-bottom: 0
-
-.modal-footer
-  background-color: #f5f5f5
-  padding: 14px 15px 15px
-  border-top: 1px solid #ddd
-  +border-radius(0 0 6px 6px)
-  +box-shadow(inset 0 1px 0 $white)
-  +clearfix
-  margin-bottom: 0
-  .btn
-    float: right
-    margin-left: 5px
-
-// Fix the stacking of these components when in modals
-
-.modal .popover,
-.modal .twipsy
-  z-index: 12000
-
-// POPOVER ARROWS
-// --------------
-
-=popover-arrow-above($arrowWidth: 5px)
-  bottom: 0
-  left: 50%
-  margin-left: -$arrowWidth
-  border-left: $arrowWidth solid transparent
-  border-right: $arrowWidth solid transparent
-  border-top: $arrowWidth solid black
-
-=popover-arrow-left($arrowWidth: 5px)
-  top: 50%
-  right: 0
-  margin-top: -$arrowWidth
-  border-top: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid transparent
-  border-left: $arrowWidth solid black
-
-=popover-arrow-below($arrowWidth: 5px)
-  top: 0
-  left: 50%
-  margin-left: -$arrowWidth
-  border-left: $arrowWidth solid transparent
-  border-right: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid black
-
-=popover-arrow-right($arrowWidth: 5px)
-  top: 50%
-  left: 0
-  margin-top: -$arrowWidth
-  border-top: $arrowWidth solid transparent
-  border-bottom: $arrowWidth solid transparent
-  border-right: $arrowWidth solid black
-
-// TWIPSY
-// ------
-
-.twipsy
-  display: block
-  position: absolute
-  visibility: visible
-  padding: 5px
-  font-size: 11px
-  z-index: 1000
-  +opacity(0.8)
-  &.fade.in
-    +opacity(0.8)
-  &.above .twipsy-arrow
-    +popover-arrow-above
-  &.left .twipsy-arrow
-    +popover-arrow-left
-  &.below .twipsy-arrow
-    +popover-arrow-below
-  &.right .twipsy-arrow
-    +popover-arrow-right
-
-.twipsy-inner
-  padding: 3px 8px
-  background-color: $black
-  color: white
-  text-align: center
-  max-width: 200px
-  text-decoration: none
-  +border-radius(4px)
-
-.twipsy-arrow
-  position: absolute
-  width: 0
-  height: 0
-
-// POPOVERS
-// --------
-
-.popover
-  position: absolute
-  top: 0
-  left: 0
-  z-index: 1000
-  padding: 5px
-  display: none
-  &.above .arrow
-    +popover-arrow-above
-  &.right .arrow
-    +popover-arrow-right
-  &.below .arrow
-    +popover-arrow-below
-  &.left .arrow
-    +popover-arrow-left
-  .arrow
-    position: absolute
-    width: 0
-    height: 0
-  .inner
-    background: $black
-    background: rgba(0, 0, 0, 0.8)
-    padding: 3px
-    overflow: hidden
-    width: 280px
-    +border-radius(6px)
-    +box-shadow(0 3px 7px rgba(0, 0, 0, 0.3))
-  .title
-    background-color: #f5f5f5
-    padding: 9px 15px
-    line-height: 1
-    +border-radius(3px 3px 0 0)
-    border-bottom: 1px solid #eee
-  .content
-    background-color: $white
-    padding: 14px
-    +border-radius(0 0 3px 3px)
-    +background-clip(padding-box)
-    p, ul, ol
-      margin-bottom: 0
-
-// PATTERN ANIMATIONS
-// ------------------
-
-.fade
-  +transition(opacity 0.15s linear)
-  opacity: 0
-  &.in
-    opacity: 1
-
-// LABELS
-// ------
-
-.label
-  padding: 1px 3px 2px
-  font-size: $basefont * 0.75
-  font-weight: bold
-  color: $white
-  text-transform: uppercase
-  white-space: nowrap
-  background-color: $grayLight
-  +border-radius(3px)
-  &.important
-    background-color: #c43c35
-  &.warning
-    background-color: $orange
-  &.success
-    background-color: $green
-  &.notice
-    background-color: lighten($blue, 25%)
-
-// MEDIA GRIDS
-// -----------
-
-.media-grid
-  margin-left: -$gridGutterWidth
-  margin-bottom: 0
-  +clearfix
-  li
-    display: inline
-  a
-    float: left
-    padding: 4px
-    margin: 0 0 $baseline $gridGutterWidth
-    border: 1px solid #ddd
-    +border-radius(4px)
-    +box-shadow(0 1px 1px rgba(0, 0, 0, 0.075))
-    img
-      display: block
-    &:hover
-      border-color: $linkColor
-      +box-shadow(0 1px 4px rgba(0, 105, 214, 0.25))