application/views/css/base-sass/widget.sass

   1 @import "compass/css3/images"
   2 @import "compass/typography/text/force-wrap"
   3
   4 .widget
   5         height: auto
   6         margin: 8px
   7         border: 1px solid $border-color-dark
   8         border-radius: 0 0 8px 8px
   9         box-shadow: 0 0 6px $weak_shadow_color
  10         position: relative
  11
  12 .widget-content
  13         margin-bottom: 10px
  14         overflow: auto
  15
  16 .widget-editbox
  17         display: none
  18         position: absolute
  19         font-size: 0.9em
  20         width: 80%
  21         max-width: 512px
  22         right: 2px
  23         padding: 0
  24         top: 24px
  25         background: $general_background_color
  26         border: 1px solid $border_color_light
  27         box-shadow: 0 2px 3px $weak_shadow_color
  28         z-index: 2
  29
  30         select
  31                 width: auto !important
  32
  33         .refresh_slider
  34                 margin: 0 16px
  35
  36 .widget-editbox-label
  37         width: 28%
  38         display: inline-block
  39
  40         div
  41                 padding: 0 5px 0 16px
  42
  43 .widget-editbox-field
  44         width: 68%
  45         display: inline-block
  46
  47         textarea
  48                 width: 100%
  49
  50         div
  51                 padding: 0 16px 0 5px
  52
  53 .widget-selector
  54         &:hover
  55                 cursor: pointer
  56                 background-color: $gradient-dark-lo
  57
  58 .widget-header
  59         @include background(linear-gradient(top, $gradient-dark-hi, $gradient-dark-lo))
  60         @include filter-gradient($gradient-dark-hi, $gradient-dark-lo, vertical)
  61         padding: 6px 0 2px 6px
  62         overflow: auto
  63         position: relative
  64         font-weight: bold
  65
  66         span
  67                 @include force-wrap
  68                 float: left
  69                 max-width: 50%
  70
  71         .widget-menu
  72
  73                 float: right
  74                 padding-right: 3px
  75                 max-width: 40%
  76
  77                 .widget-copylink, .widget-collapselink, .widget-editlink, .widget-closelink
  78                         border: none !important
  79                         margin: 0 2px
  80
  81                 img
  82                         opacity: $inactive_opacity
  83                         filter: alpha(opacity=#{$inactive_opacity * 100})
  84                         &:hover
  85                                 opacity: 1.0
  86                                 filter: alpha(opacity=100)
  87
  88
  89
  90 .widget-content-error
  91         background: $widget_error_background_color url('./images/stripe.png')
  92         box-shadow: inset 0 0 8px $hard_shadow_color
  93         padding: 24px 4px
  94         text-align: center
  95         text-shadow: 0 0 3px #fff
  96         color: #111
  97         font-size: 1.0
  98
  99 .widget-placeholder
 100         border: 1px dashed $border-color-dark
 101         background: #ddd url('./images/stripe.png')
 102         box-shadow: inset 0 0 8px $hard_shadow_color
 103         height: 25px
 104         margin: 8px
 105         border-radius: 0 0 8px 8px
 106         position: relative
 107
 108 .widget-place
 109         min-height: 25px
 110         margin: 0
 111         padding: 0
 112         float: left
 113
 114
 115 // If widget is in content header handle differently
 116 #content-header
 117
 118
 119         .widget-header
 120                 border: 1px solid #ddd
 121
 122                 // Network Health
 123
 124         .health td
 125                 padding: 0 !important
 126
 127                 div
 128                         text-align: center