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