feat(flyout): initial release of flyout module

The following PR implements a new module called Flyout. It's based on my own ES6 fomantic code, which is derived from sidebar, and CSS code is based from @jamessampford #1885 tryout.
fomantic · Sep 15, 2022 · 9a105a8 · 9a105a8
1 parent 0963809
commit 9a105a8
Show file tree

Hide file tree

Showing 10 changed files with 2,013 additions and 0 deletions.
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
diff --git a/src/semantic.less b/src/semantic.less
@@ -57,6 +57,7 @@
 & { @import "definitions/modules/dimmer"; }
 & { @import "definitions/modules/dropdown"; }
 & { @import "definitions/modules/embed"; }
+& { @import "definitions/modules/flyout"; }
 & { @import "definitions/modules/modal"; }
 & { @import "definitions/modules/nag"; }
 & { @import "definitions/modules/popup"; }

diff --git a/src/theme.config.example b/src/theme.config.example
@@ -56,6 +56,7 @@
 @dimmer     : 'default';
 @dropdown   : 'default';
 @embed      : 'default';
+@flyout     : 'default';
 @modal      : 'default';
 @nag        : 'default';
 @popup      : 'default';

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -550,6 +550,16 @@
 /* Embed */
 @variationEmbedRatio: true;
 
+/* Flyout */
+@variationFlyoutColumnWidth: true;
+@variationFlyoutThin: true;
+@variationFlyoutWide: true;
+@variationFlyoutTop: true;
+@variationFlyoutBottom: true;
+@variationFlyoutLeft: true;
+@variationFlyoutRight: true;
+@variationFlyoutOverlay: true;
+
 /* Modal */
 @variationModalInverted: true;
 @variationModalBasic: true;

diff --git a/src/themes/default/modules/flyout.overrides b/src/themes/default/modules/flyout.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
@@ -0,0 +1,45 @@
+/*******************************
+             Flyout
+*******************************/
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Animation */
+@perspective: 1500px;
+@duration: 500ms;
+@easing: @defaultEasing;
+
+/* Dimmer */
+@dimmerColor: rgba(0, 0, 0, 0.4);
+@dimmerTransition: opacity @duration;
+
+/* Color below page */
+@canvasBackground: @lightBlack;
+
+/* Shadow */
+@boxShadow: 0 0 20px @borderColor;
+@horizontalBoxShadow: @boxShadow;
+@verticalBoxShadow: @boxShadow;
+
+/* Layering */
+@bottomLayer: 1;
+@middleLayer: 2;
+@fixedLayer: 101;
+@topLayer: 102;
+@dimmerLayer: 1000;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Width */
+@veryThinWidth: 120px;
+@thinWidth: 200px;
+@width: 400px;
+@wideWidth: 600px;
+@veryWideWidth: 800px;
+
+/* Height */
+@height: 36px;
diff --git a/tasks/config/admin/release.js b/tasks/config/admin/release.js
@@ -77,6 +77,7 @@ module.exports = {
     'emoji',
     'feed',
     'flag',
+    'flyout',
     'form',
     'grid',
     'header',

diff --git a/tasks/config/defaults.js b/tasks/config/defaults.js
@@ -90,6 +90,7 @@ module.exports = {
     'dimmer',
     'dropdown',
     'embed',
+    'flyout',
     'modal',
     'nag',
     'popup',

diff --git a/tasks/config/project/install.js b/tasks/config/project/install.js
@@ -390,6 +390,7 @@ module.exports = {
           { name: "dimmer", checked: true },
           { name: "dropdown", checked: true },
           { name: "embed", checked: true },
+          { name: "flyout", checked: true },
           { name: "modal", checked: true },
           { name: "nag", checked: true },
           { name: "placeholder", checked: true },