afm-client/bower_components/foundation-apps/scss/components/_action-sheet.scss

   1 /*\r
   2   ACTION SHEET\r
   3   ------------\r
   4 \r
   5   A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.\r
   6 */\r
   7 \r
   8 /// @Foundation.settings\r
   9 // Action Sheet\r
  10 $actionsheet-background: white !default;\r
  11 $actionsheet-border-color: #ccc !default;\r
  12 $actionsheet-animate: transform opacity !default;\r
  13 $actionsheet-animation-speed: 0.25s !default;\r
  14 $actionsheet-width: 300px !default;\r
  15 $actionsheet-radius: 4px !default;\r
  16 $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;\r
  17 $actionsheet-padding: $global-padding !default;\r
  18 $actionsheet-tail-size: 10px !default;\r
  19 \r
  20 $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;\r
  21 \r
  22 $actionsheet-link-color: #000 !default;\r
  23 $actionsheet-link-background-hover: smartscale($actionsheet-background) !default;\r
  24 ///\r
  25 \r
  26 /*\r
  27   Styles for the list inside an action sheet.\r
  28   Don't include this mixin if you want to build custom controls inside the sheet.\r
  29 */\r
  30 @mixin action-sheet-menu(\r
  31   $padding: $actionsheet-padding,\r
  32   $color: $actionsheet-link-color,\r
  33   $border-color: $actionsheet-border-color,\r
  34   $background-hover: $actionsheet-link-background-hover\r
  35 ) {\r
  36   // Menu container\r
  37   ul {\r
  38     margin: -($padding);\r
  39     margin-top: 0;\r
  40     list-style-type: none;\r
  41     user-select: none;\r
  42 \r
  43     // If the menu has no content above it\r
  44     &:first-child {\r
  45       margin-top: -$padding;\r
  46 \r
  47       li:first-child {\r
  48         border-top: 0;\r
  49       }\r
  50     }\r
  51 \r
  52     // Menu links\r
  53     a {\r
  54       display: block;\r
  55       padding: $padding * 0.8;\r
  56       line-height: 1;\r
  57       color: $color;\r
  58       border-top: 1px solid $border-color;\r
  59 \r
  60       &:hover {\r
  61         color: $color;\r
  62         background: $background-hover;\r
  63       }\r
  64     }\r
  65 \r
  66     .alert > a {\r
  67       color: $alert-color;\r
  68     }\r
  69     .disabled > a {\r
  70       pointer-events: none;\r
  71       color: #999;\r
  72     }\r
  73   }\r
  74 }\r
  75 \r
  76 /*\r
  77   Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.\r
  78 */\r
  79 @mixin action-sheet(\r
  80   $position: bottom,\r
  81   $shadow: $actionsheet-shadow,\r
  82   $animate: $actionsheet-animate,\r
  83   $animation-speed: $actionsheet-animation-speed,\r
  84   $padding: $actionsheet-padding,\r
  85   $background: $actionsheet-background\r
  86 ) {\r
  87   position: fixed;\r
  88   left: 0;\r
  89   z-index: 1000;\r
  90   width: 100%;\r
  91   padding: $padding;\r
  92   background: $background;\r
  93   text-align: center;\r
  94   transition-property: $animate;\r
  95   transition-duration: $animation-speed;\r
  96   transition-timing-function: ease-out;\r
  97 \r
  98   @if hasvalue($shadow) {\r
  99     box-shadow: $shadow;\r
 100   }\r
 101 \r
 102   // Positions\r
 103   @if $position == bottom {\r
 104     bottom: 0;\r
 105     transform: translateY(100%);\r
 106 \r
 107     &.is-active {\r
 108       transform: translateY(0%);\r
 109     }\r
 110   }\r
 111   // These two don't quite work as planned yet\r
 112   @else if $position == top {\r
 113     top: 0;\r
 114     transform: translateY(-100%);\r
 115 \r
 116     &.is-active {\r
 117       transform: translateY(0%);\r
 118     }\r
 119   }\r
 120 }\r
 121 \r
 122 @mixin popup-menu(\r
 123   $position: bottom,\r
 124   $background: $actionsheet-background,\r
 125   $width: $actionsheet-width,\r
 126   $radius: $actionsheet-radius,\r
 127   $shadow: $actionsheet-popup-shadow,\r
 128   $tail-size: $actionsheet-tail-size\r
 129 ) {\r
 130   /*\r
 131     Core styles\r
 132   */\r
 133   position: absolute;\r
 134   left: 50%;\r
 135   width: $width;\r
 136   border-radius: $radius;\r
 137   opacity: 0;\r
 138   pointer-events: none;\r
 139 \r
 140   /*\r
 141     Menu shadow\r
 142   */\r
 143   @if hasvalue($shadow) {\r
 144     box-shadow: $shadow;\r
 145   }\r
 146 \r
 147   /*\r
 148     Active state\r
 149   */\r
 150   &.is-active {\r
 151     opacity: 1;\r
 152     pointer-events: auto;\r
 153   }\r
 154 \r
 155   /*\r
 156     Menu tail\r
 157   */\r
 158   &::before, &::after {\r
 159     content: '';\r
 160     position: absolute;\r
 161     left: 50%;\r
 162     display: block;\r
 163     width: 0px;\r
 164     height: 0px;\r
 165     border-left: $tail-size solid transparent;\r
 166     border-right: $tail-size solid transparent;\r
 167     margin-left: -($tail-size);\r
 168   }\r
 169 \r
 170   /*\r
 171     Positioning\r
 172   */\r
 173   @if $position == bottom {\r
 174     top: auto;\r
 175     bottom: 0;\r
 176     transform: translateX(-50%) translateY(110%);\r
 177     &.is-active {\r
 178       transform: translateX(-50%) translateY(100%);\r
 179     }\r
 180 \r
 181     &::before, &::after {\r
 182       top: -($tail-size);\r
 183       bottom: auto;\r
 184       border-top: 0;\r
 185       border-bottom: $tail-size solid $background;\r
 186     }\r
 187     &::before {\r
 188       top: -($tail-size + 2);\r
 189       border-bottom-color: rgba(black, 0.15);\r
 190     }\r
 191 \r
 192   }\r
 193   @else if $position == top {\r
 194     top: 0;\r
 195     bottom: auto;\r
 196     transform: translateX(-50%) translateY(-120%);\r
 197     &.is-active {\r
 198       transform: translateX(-50%) translateY(-110%);\r
 199     }\r
 200 \r
 201     &::before, &::after {\r
 202       top: auto;\r
 203       bottom: -($tail-size);\r
 204       border-top: $tail-size solid $background;\r
 205       border-bottom: 0;\r
 206     }\r
 207     &::before {\r
 208       bottom: -($tail-size + 2);\r
 209       border-top-color: rgba(black, 0.15);\r
 210     }\r
 211   }\r
 212 }\r
 213 \r
 214 @include exports(action-sheet) {\r
 215   .action-sheet-container {\r
 216     position: relative;\r
 217     display: inline-block;\r
 218 \r
 219     .button {\r
 220       margin-left: 0;\r
 221       margin-right: 0;\r
 222     }\r
 223   }\r
 224   .action-sheet {\r
 225     @include action-sheet;\r
 226     @include action-sheet-menu;\r
 227 \r
 228     @include breakpoint(medium) {\r
 229       @include popup-menu;\r
 230 \r
 231       &.top {\r
 232         @include popup-menu(top);\r
 233       }\r
 234     }\r
 235 \r
 236     &.primary {\r
 237       background: $primary-color;\r
 238       color: isitlight($primary-color);\r
 239       border: 0;\r
 240       &::before { display: none; }\r
 241       &::before, &::after { border-top-color: $primary-color; }\r
 242       &.top::before, &.top::after { border-bottom-color: $primary-color; }\r
 243 \r
 244       @include action-sheet-menu(\r
 245         $color: isitlight($primary-color),\r
 246         $border-color: smartscale($primary-color, 10%),\r
 247         $background-hover: smartscale($primary-color)\r
 248       );\r
 249     }\r
 250     &.dark {\r
 251       background: $dark-color;\r
 252       color: isitlight($dark-color);\r
 253       border: 0;\r
 254       &::before { display: none; }\r
 255       &::before, &::after { border-top-color: $dark-color; }\r
 256       &.top::before, &.top::after { border-bottom-color: $dark-color; }\r
 257 \r
 258       @include action-sheet-menu(\r
 259         $color: isitlight($dark-color),\r
 260         $border-color: smartscale($dark-color, 10%),\r
 261         $background-hover: smartscale($dark-color)\r
 262       );\r
 263     }\r
 264   }\r
 265 }\r