From 9e958a7bc29805f09e611d265b971f734c11d370 Mon Sep 17 00:00:00 2001 From: Juveniel Date: Mon, 25 Jul 2022 14:25:56 +0300 Subject: [PATCH] feat(action-buttons): add fluent styles --- .../fluent/scss/action-buttons/_layout.scss | 54 +++++++++++++++++++ .../fluent/scss/action-buttons/_theme.scss | 14 +++++ .../scss/action-buttons/_variables.scss | 24 +++++++++ .../fluent/scss/action-buttons/index.scss | 26 +++++++++ .../scss/core/module-system/_components.scss | 2 +- packages/fluent/scss/dialog/_layout.scss | 2 +- packages/fluent/scss/dialog/_variables.scss | 3 ++ packages/fluent/scss/index.scss | 4 +- packages/fluent/scss/window/_layout.scss | 1 + packages/fluent/scss/window/_variables.scss | 3 ++ 10 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 packages/fluent/scss/action-buttons/_layout.scss create mode 100644 packages/fluent/scss/action-buttons/_theme.scss create mode 100644 packages/fluent/scss/action-buttons/_variables.scss create mode 100644 packages/fluent/scss/action-buttons/index.scss diff --git a/packages/fluent/scss/action-buttons/_layout.scss b/packages/fluent/scss/action-buttons/_layout.scss new file mode 100644 index 00000000000..1ba0a4aa654 --- /dev/null +++ b/packages/fluent/scss/action-buttons/_layout.scss @@ -0,0 +1,54 @@ +@use "_variables.scss" as *; + +@mixin kendo-action-buttons--layout() { + .k-actions { + padding-inline: var( --kendo-actions-padding-x, #{$kendo-actions-padding-x} ); + padding-block: var( --kendo-actions-padding-y, #{$kendo-actions-padding-y} ); + box-sizing: border-box; + border-width: var( --kendo-actions-border-width, #{$kendo-actions-border-width} ) 0 0 0; + border-style: solid; + border-color: inherit; + flex-shrink: 0; + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: var( --kendo-actions-button-spacing, #{$kendo-actions-button-spacing} ); + overflow: hidden; + + *, + *::before, + *::after { + box-sizing: border-box; + } + } + + // Aliases + .k-edit-buttons, + .k-action-buttons, + .k-columnmenu-actions { + @extend .k-actions; + } + + // Actions align + .k-actions-start { + justify-content: flex-start; + } + .k-actions-center { + justify-content: center; + } + .k-actions-end { + justify-content: flex-end; + } + .k-actions-stretched > * { + flex: 1 0 0%; + } + + // Actions orientation + .k-actions-horizontal { + width: 100%; + flex-flow: row nowrap; + } + .k-actions-vertical { + flex-flow: column nowrap; + } +} diff --git a/packages/fluent/scss/action-buttons/_theme.scss b/packages/fluent/scss/action-buttons/_theme.scss new file mode 100644 index 00000000000..5ddb58c8fbc --- /dev/null +++ b/packages/fluent/scss/action-buttons/_theme.scss @@ -0,0 +1,14 @@ +@use "../core/mixins" as *; +@use "_variables.scss" as *; + +@mixin kendo-action-buttons--theme() { + + .k-actions { + @include fill( + var( --kendo-actions-text, #{$kendo-actions-text} ), + var( --kendo-actions-bg, #{$kendo-actions-bg} ), + var( --kendo-actions-border, #{$kendo-actions-border} ) + ); + } + +} diff --git a/packages/fluent/scss/action-buttons/_variables.scss b/packages/fluent/scss/action-buttons/_variables.scss new file mode 100644 index 00000000000..4e65bfcd0a6 --- /dev/null +++ b/packages/fluent/scss/action-buttons/_variables.scss @@ -0,0 +1,24 @@ +@use "../core" as *; + +/// Horizontal padding of the action buttons container. +/// @group action-buttons +$kendo-actions-padding-x: map-get( $kendo-spacing, 3 ) !default; +/// Vertical padding of the action buttons container. +/// @group action-buttons +$kendo-actions-padding-y: map-get( $kendo-spacing, 3 ) !default; +/// Width of the border around the action buttons container. +/// @group action-buttons +$kendo-actions-border-width: 0px !default; +/// The background color of the action buttons container. +/// @group action-buttons +$kendo-actions-bg: null !default; +/// The text color of the action buttons container. +/// @group action-buttons +$kendo-actions-text: null !default; +/// The border color of the action buttons container. +/// @group action-buttons +$kendo-actions-border: null !default; + +/// Spacing between the action buttons. +/// @group button +$kendo-actions-button-spacing: map-get( $kendo-spacing, 2 ) !default; diff --git a/packages/fluent/scss/action-buttons/index.scss b/packages/fluent/scss/action-buttons/index.scss new file mode 100644 index 00000000000..c2477863f13 --- /dev/null +++ b/packages/fluent/scss/action-buttons/index.scss @@ -0,0 +1,26 @@ +// Module meta +$_kendo-module-meta: ( + name: "action-buttons", + dependencies: ( + "button", + "icons" + ) +); + + +// Component +@forward "_variables.scss"; +@use "_layout.scss" as *; +@use "_theme.scss" as *; + +// Register +@use "../core/module-system" as module; +@include module.register( $_kendo-module-meta... ); + +// Expose +@mixin styles() { + @include module.render( "action-buttons" ) { + @include kendo-action-buttons--layout(); + @include kendo-action-buttons--theme(); + } +} diff --git a/packages/fluent/scss/core/module-system/_components.scss b/packages/fluent/scss/core/module-system/_components.scss index e92d21115a0..04fea5a348b 100644 --- a/packages/fluent/scss/core/module-system/_components.scss +++ b/packages/fluent/scss/core/module-system/_components.scss @@ -62,7 +62,7 @@ $components: ( "dropzone", // Command interfaces - "actions", + "action-buttons", "appbar", "fab", "menu", diff --git a/packages/fluent/scss/dialog/_layout.scss b/packages/fluent/scss/dialog/_layout.scss index 85527fec955..b8bcebb34b3 100644 --- a/packages/fluent/scss/dialog/_layout.scss +++ b/packages/fluent/scss/dialog/_layout.scss @@ -61,7 +61,7 @@ display: flex; flex-flow: row wrap; align-items: center; - gap: var( --kendo-dialog-button-spacing, #{$kendo-dialog-button-spacing} ); + gap: var( --kendo-dialog-buttongroup-spacing, #{$kendo-dialog-buttongroup-spacing} ); overflow: hidden; } diff --git a/packages/fluent/scss/dialog/_variables.scss b/packages/fluent/scss/dialog/_variables.scss index d8c6c279dab..66d9bb3b304 100644 --- a/packages/fluent/scss/dialog/_variables.scss +++ b/packages/fluent/scss/dialog/_variables.scss @@ -23,6 +23,9 @@ $kendo-dialog-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $ /// Width of the top border of the dialog action buttons. /// @group dialog $kendo-dialog-buttongroup-border-width: 0 !default; +/// Spacing between the action buttons of the dialog. +/// @group dialog +$kendo-dialog-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default; /// Spacing between the buttons in the header of the dialog. /// @group dialog diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss index f3800928c9e..4aee83f2991 100644 --- a/packages/fluent/scss/index.scss +++ b/packages/fluent/scss/index.scss @@ -90,7 +90,7 @@ // Command interfaces -// @use "action-buttons"; +@use "action-buttons"; // @use "appbar"; // @use "fab"; // @use "menu"; @@ -254,7 +254,7 @@ // Command interfaces - // @include action-buttons.styles(); + @include action-buttons.styles(); // @include appbar.styles(); // @include fab.styles(); // @include menu.styles(); diff --git a/packages/fluent/scss/window/_layout.scss b/packages/fluent/scss/window/_layout.scss index 1d1cb18631c..4295ceded3b 100644 --- a/packages/fluent/scss/window/_layout.scss +++ b/packages/fluent/scss/window/_layout.scss @@ -140,6 +140,7 @@ display: flex; flex-flow: row wrap; align-items: center; + gap: var( --kendo-window-buttongroup-spacing, #{$kendo-window-buttongroup-spacing} ); overflow: hidden; } diff --git a/packages/fluent/scss/window/_variables.scss b/packages/fluent/scss/window/_variables.scss index 3b981140c44..fa45cddaf2e 100644 --- a/packages/fluent/scss/window/_variables.scss +++ b/packages/fluent/scss/window/_variables.scss @@ -67,6 +67,9 @@ $kendo-window-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $ /// Width of the top border of the window action buttons. /// @group window $kendo-window-buttongroup-border-width: 0 !default; +/// Spacing between the action buttons of the window. +/// @group window +$kendo-window-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default; /// Background color of the window. /// @group window