afm-client/bower_components/tether/sass/helpers/_tether-theme-arrows.sass

   1 @import compass/css3
   2
   3 =tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $backgroundColor: #fff, $color: inherit, $useDropShadow: false)
   4     .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName }
   5         max-width: 100%
   6         max-height: 100%
   7
   8         .#{ $themePrefix }-content
   9             +border-radius(5px)
  10             position: relative
  11             font-family: inherit
  12             background: $backgroundColor
  13             color: $color
  14             padding: 1em
  15             font-size: 1.1em
  16             line-height: 1.5em
  17
  18             @if $useDropShadow
  19                 +transform(translateZ(0))
  20                 +filter(drop-shadow(0 1px 4px rgba(0, 0, 0, .2)))
  21
  22             &:before
  23                 content: ""
  24                 display: block
  25                 position: absolute
  26                 width: 0
  27                 height: 0
  28                 border-color: transparent
  29                 border-width: $arrowSize
  30                 border-style: solid
  31
  32         // Centers and middles
  33
  34         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content
  35             margin-bottom: $arrowSize
  36
  37             &:before
  38                 top: 100%
  39                 left: 50%
  40                 margin-left: - $arrowSize
  41                 border-top-color: $backgroundColor
  42
  43         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content
  44             margin-top: $arrowSize
  45
  46             &:before
  47                 bottom: 100%
  48                 left: 50%
  49                 margin-left: - $arrowSize
  50                 border-bottom-color: $backgroundColor
  51
  52         &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content
  53             margin-right: $arrowSize
  54
  55             &:before
  56                 left: 100%
  57                 top: 50%
  58                 margin-top: - $arrowSize
  59                 border-left-color: $backgroundColor
  60
  61         &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content
  62             margin-left: $arrowSize
  63
  64             &:before
  65                 right: 100%
  66                 top: 50%
  67                 margin-top: - $arrowSize
  68                 border-right-color: $backgroundColor
  69
  70         // Top and bottom corners
  71
  72         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content
  73             margin-top: $arrowSize
  74
  75             &:before
  76                 bottom: 100%
  77                 left: $arrowSize
  78                 border-bottom-color: $backgroundColor
  79
  80         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content
  81             margin-top: $arrowSize
  82
  83             &:before
  84                 bottom: 100%
  85                 right: $arrowSize
  86                 border-bottom-color: $backgroundColor
  87
  88         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content
  89             margin-bottom: $arrowSize
  90
  91             &:before
  92                 top: 100%
  93                 left: $arrowSize
  94                 border-top-color: $backgroundColor
  95
  96         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content
  97             margin-bottom: $arrowSize
  98
  99             &:before
 100                 top: 100%
 101                 right: $arrowSize
 102                 border-top-color: $backgroundColor
 103
 104         // Side corners
 105
 106         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content
 107             margin-right: $arrowSize
 108
 109             &:before
 110                 top: $arrowSize
 111                 left: 100%
 112                 border-left-color: $backgroundColor
 113
 114         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content
 115             margin-left: $arrowSize
 116
 117             &:before
 118                 top: $arrowSize
 119                 right: 100%
 120                 border-right-color: $backgroundColor
 121
 122         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content
 123             margin-right: $arrowSize
 124
 125             &:before
 126                 bottom: $arrowSize
 127                 left: 100%
 128                 border-left-color: $backgroundColor
 129
 130         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content
 131             margin-left: $arrowSize
 132
 133             &:before
 134                 bottom: $arrowSize
 135                 right: 100%
 136                 border-right-color: $backgroundColor