zhdk/madek

/**
 * ## Clipboard `.ui-clipboard`
 *
 * Styleguide 7.6

// Toggle

.ui-clipboard

.ui-clipboard-toggle
  +border-top-radius($border-radius-m)
  +dimension(260px, 20px)
  +position-top-right(-30px, 50%)
  +position-left(50%)
  color: $white
  margin-left: -135px
  padding: $space-x $space-x $space-x
  text-align: center
  &:hover
    text-decoration: none
  &:active
    color: $lighten

.ui-clipboard-counter
  +border-radius(100px)
  +background-image(linear-gradient($main-color, $main-color-dark))
  background-color: $red
  font-size: $font-xs
  font-weight: 700
  padding: 2px $space-x

// Content

.ui-clipboard-content
  +box-shadow(0 -1px 2px $darken)
  padding: $space-x 0 0 $space-m
  position: relative

.ui-clipboard.closed .ui-clipboard-content
  display: none

.ui-clipboard-resources-list
  +max-dimension(auto, 125px)
  margin: $space-s 0 !important
  overflow: auto

.ui-clipboard-alert
  +border-radius($border-radius-m)
  border: 1px solid $lighten
  color: $mono-bright
  height: 32px
  margin: $space-s $space-s
  padding: $space-s
  position: relative
  top: $space-s
  text-align: center

// Actions and grid adjustments

.ui-clipboard-actions
  margin: $space-m $space-s

.ui-clipboard-actions .primary-button
  margin-bottom: $space-s

// Action Menu

.ui-clipboard .dropdown-menu-item
  position: relative
  white-space: nowrap

.ui-clipboard-item-counter
  +border-radius(50px)
  +min-dimension(12px, auto)
  color: $mono-mid
  font-size: 10px
  font-weight: 700
  line-height: 1
  padding: $space-x
  text-align: center

// Resource adjustmens for dark background

.ui-clipboard .ui-resources.miniature
  .ui-thumbnail.media-set,
  .ui-thumbnail.filter-set
    .ui-thumbnail-image-wrapper
      +box-shadow(0 1px 2px 0px $darken, 4px 4px 0px 0px $white, 4px 4px 2px 0px $darken-strong)

// Remove Resource

.ui-clipboard .ui-resource
  position: relative
  &:hover .ui-resource-clipboard-remove
    display: inline-block

.ui-clipboard .ui-resource-clipboard-remove
  background: $darken-more
  cursor: pointer
  display: none
  +border-radius(100px)
  +position-top-right(0, 0)

// Select All

#ui-clipboard-select-all
  &.disabled
    cursor: default
    opacity: $opacity-medium
    text-decoration: none
  span.active
    display: none
  span.inactive
    display: inline-block
  &.active
    span.active
      display: inline-block
    span.inactive
      display: none

// MenuCounter

.ui-clipboard .ui-clipboard-actions .ui-count
  color: $mono-mid
  font-size: 10px
  font-weight: 700
  line-height: 1
  padding: $space-x
  text-align: center