--- /dev/null
+/*\r
+ ACTION SHEET\r
+ ------------\r
+\r
+ A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Action Sheet\r
+$actionsheet-background: white !default;\r
+$actionsheet-border-color: #ccc !default;\r
+$actionsheet-animate: transform opacity !default;\r
+$actionsheet-animation-speed: 0.25s !default;\r
+$actionsheet-width: 300px !default;\r
+$actionsheet-radius: 4px !default;\r
+$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;\r
+$actionsheet-padding: $global-padding !default;\r
+$actionsheet-tail-size: 10px !default;\r
+\r
+$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;\r
+\r
+$actionsheet-link-color: #000 !default;\r
+$actionsheet-link-background-hover: smartscale($actionsheet-background) !default;\r
+///\r
+\r
+/*\r
+ Styles for the list inside an action sheet.\r
+ Don't include this mixin if you want to build custom controls inside the sheet.\r
+*/\r
+@mixin action-sheet-menu(\r
+ $padding: $actionsheet-padding,\r
+ $color: $actionsheet-link-color,\r
+ $border-color: $actionsheet-border-color,\r
+ $background-hover: $actionsheet-link-background-hover\r
+) {\r
+ // Menu container\r
+ ul {\r
+ margin: -($padding);\r
+ margin-top: 0;\r
+ list-style-type: none;\r
+ user-select: none;\r
+\r
+ // If the menu has no content above it\r
+ &:first-child {\r
+ margin-top: -$padding;\r
+\r
+ li:first-child {\r
+ border-top: 0;\r
+ }\r
+ }\r
+\r
+ // Menu links\r
+ a {\r
+ display: block;\r
+ padding: $padding * 0.8;\r
+ line-height: 1;\r
+ color: $color;\r
+ border-top: 1px solid $border-color;\r
+\r
+ &:hover {\r
+ color: $color;\r
+ background: $background-hover;\r
+ }\r
+ }\r
+\r
+ .alert > a {\r
+ color: $alert-color;\r
+ }\r
+ .disabled > a {\r
+ pointer-events: none;\r
+ color: #999;\r
+ }\r
+ }\r
+}\r
+\r
+/*\r
+ Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.\r
+*/\r
+@mixin action-sheet(\r
+ $position: bottom,\r
+ $shadow: $actionsheet-shadow,\r
+ $animate: $actionsheet-animate,\r
+ $animation-speed: $actionsheet-animation-speed,\r
+ $padding: $actionsheet-padding,\r
+ $background: $actionsheet-background\r
+) {\r
+ position: fixed;\r
+ left: 0;\r
+ z-index: 1000;\r
+ width: 100%;\r
+ padding: $padding;\r
+ background: $background;\r
+ text-align: center;\r
+ transition-property: $animate;\r
+ transition-duration: $animation-speed;\r
+ transition-timing-function: ease-out;\r
+\r
+ @if hasvalue($shadow) {\r
+ box-shadow: $shadow;\r
+ }\r
+\r
+ // Positions\r
+ @if $position == bottom {\r
+ bottom: 0;\r
+ transform: translateY(100%);\r
+\r
+ &.is-active {\r
+ transform: translateY(0%);\r
+ }\r
+ }\r
+ // These two don't quite work as planned yet\r
+ @else if $position == top {\r
+ top: 0;\r
+ transform: translateY(-100%);\r
+\r
+ &.is-active {\r
+ transform: translateY(0%);\r
+ }\r
+ }\r
+}\r
+\r
+@mixin popup-menu(\r
+ $position: bottom,\r
+ $background: $actionsheet-background,\r
+ $width: $actionsheet-width,\r
+ $radius: $actionsheet-radius,\r
+ $shadow: $actionsheet-popup-shadow,\r
+ $tail-size: $actionsheet-tail-size\r
+) {\r
+ /*\r
+ Core styles\r
+ */\r
+ position: absolute;\r
+ left: 50%;\r
+ width: $width;\r
+ border-radius: $radius;\r
+ opacity: 0;\r
+ pointer-events: none;\r
+\r
+ /*\r
+ Menu shadow\r
+ */\r
+ @if hasvalue($shadow) {\r
+ box-shadow: $shadow;\r
+ }\r
+\r
+ /*\r
+ Active state\r
+ */\r
+ &.is-active {\r
+ opacity: 1;\r
+ pointer-events: auto;\r
+ }\r
+\r
+ /*\r
+ Menu tail\r
+ */\r
+ &::before, &::after {\r
+ content: '';\r
+ position: absolute;\r
+ left: 50%;\r
+ display: block;\r
+ width: 0px;\r
+ height: 0px;\r
+ border-left: $tail-size solid transparent;\r
+ border-right: $tail-size solid transparent;\r
+ margin-left: -($tail-size);\r
+ }\r
+\r
+ /*\r
+ Positioning\r
+ */\r
+ @if $position == bottom {\r
+ top: auto;\r
+ bottom: 0;\r
+ transform: translateX(-50%) translateY(110%);\r
+ &.is-active {\r
+ transform: translateX(-50%) translateY(100%);\r
+ }\r
+\r
+ &::before, &::after {\r
+ top: -($tail-size);\r
+ bottom: auto;\r
+ border-top: 0;\r
+ border-bottom: $tail-size solid $background;\r
+ }\r
+ &::before {\r
+ top: -($tail-size + 2);\r
+ border-bottom-color: rgba(black, 0.15);\r
+ }\r
+\r
+ }\r
+ @else if $position == top {\r
+ top: 0;\r
+ bottom: auto;\r
+ transform: translateX(-50%) translateY(-120%);\r
+ &.is-active {\r
+ transform: translateX(-50%) translateY(-110%);\r
+ }\r
+\r
+ &::before, &::after {\r
+ top: auto;\r
+ bottom: -($tail-size);\r
+ border-top: $tail-size solid $background;\r
+ border-bottom: 0;\r
+ }\r
+ &::before {\r
+ bottom: -($tail-size + 2);\r
+ border-top-color: rgba(black, 0.15);\r
+ }\r
+ }\r
+}\r
+\r
+@include exports(action-sheet) {\r
+ .action-sheet-container {\r
+ position: relative;\r
+ display: inline-block;\r
+\r
+ .button {\r
+ margin-left: 0;\r
+ margin-right: 0;\r
+ }\r
+ }\r
+ .action-sheet {\r
+ @include action-sheet;\r
+ @include action-sheet-menu;\r
+\r
+ @include breakpoint(medium) {\r
+ @include popup-menu;\r
+\r
+ &.top {\r
+ @include popup-menu(top);\r
+ }\r
+ }\r
+\r
+ &.primary {\r
+ background: $primary-color;\r
+ color: isitlight($primary-color);\r
+ border: 0;\r
+ &::before { display: none; }\r
+ &::before, &::after { border-top-color: $primary-color; }\r
+ &.top::before, &.top::after { border-bottom-color: $primary-color; }\r
+\r
+ @include action-sheet-menu(\r
+ $color: isitlight($primary-color),\r
+ $border-color: smartscale($primary-color, 10%),\r
+ $background-hover: smartscale($primary-color)\r
+ );\r
+ }\r
+ &.dark {\r
+ background: $dark-color;\r
+ color: isitlight($dark-color);\r
+ border: 0;\r
+ &::before { display: none; }\r
+ &::before, &::after { border-top-color: $dark-color; }\r
+ &.top::before, &.top::after { border-bottom-color: $dark-color; }\r
+\r
+ @include action-sheet-menu(\r
+ $color: isitlight($dark-color),\r
+ $border-color: smartscale($dark-color, 10%),\r
+ $background-hover: smartscale($dark-color)\r
+ );\r
+ }\r
+ }\r
+}\r
Code Review / src / app-framework-demo.git / blobdiff