X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_popup.scss;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fscss%2Fcomponents%2F_popup.scss;h=03403d687754e558bd04f4a9f4a13734f926cad8;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_popup.scss b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
new file mode 100644
index 0000000..03403d6
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
@@ -0,0 +1,68 @@
+/*
+  POPUP
+  -----
+
+  A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
+*/
+
+/// @Foundation.settings
+// Popup
+$popup-width: rem-calc(300) !default;
+$popup-background: #fff !default;
+$popup-border: 0 !default;
+$popup-radius: 0 !default;
+$popup-shadow: 0 0 10px rgba(#000, 0.25) !default;
+///
+
+%popup {
+  position: absolute;
+  z-index: 1000;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
+
+  &.tether-enabled {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@mixin popup-layout(
+  $width: $popup-width
+) {
+  width: $popup-width;
+}
+@mixin popup-style(
+  $background: $popup-background,
+  $color: #000,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  background: $background;
+  border-radius: $radius;
+  box-shadow: $shadow;
+  border: $border;
+}
+
+@mixin popup(
+  $width: $popup-width,
+  $background: $popup-background,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  @extend %popup;
+  @include popup-layout($width);
+  @include popup-style($background, isitlight($background), $radius, $shadow, $border);
+}
+
+@include exports(popup) {
+  .popup {
+    @include popup;
+
+    &.dark    { @include popup-style($dark-color, #fff); }
+    &.primary { @include popup-style($primary-color, isitlight($primary-color)); }
+  }
+}