Skip to content

Commit ecfec54

Browse files
TeyaVesTeyaVes
committed
feat(popup): add popup fluent styles
1 parent b44f8eb commit ecfec54

5 files changed

Lines changed: 134 additions & 0 deletions

File tree

‎packages/fluent/scss/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@use "overlay";
1111
@use "button";
1212
@use "calendar";
13+
@use "popup";
1314

1415
// Setup
1516
@mixin config($config: null ) {
@@ -21,4 +22,5 @@
2122
@include overlay.styles();
2223
@include button.styles();
2324
@include calendar.styles();
25+
@include popup.styles();
2426
}

‎packages/fluent/scss/popup/_layout.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@use "../core/mixins" as *;
2+
@use "_variables.scss" as *;
3+
4+
@mixin kendo-popup--layout() {
5+
6+
.k-popup {
7+
margin: 0;
8+
padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
9+
padding-block: var( --kendo-popup-padding-y, #{$kendo-popup-padding-y} );
10+
border-width: var( --kendo-popup-border-width, #{$kendo-popup-border-width} );
11+
border-style: solid;
12+
border-radius: var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} );
13+
box-sizing: border-box;
14+
font-size: var( --kendo-popup-font-size, #{$kendo-popup-font-size} );
15+
line-height: var( --kendo-popup-line-height, #{$kendo-popup-line-height} );
16+
display: flex;
17+
flex-direction: column;
18+
align-items: stretch;
19+
20+
.k-item {
21+
outline: none;
22+
}
23+
}
24+
.k-animation-container {
25+
@include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
26+
}
27+
28+
.k-animation-container-shown {
29+
overflow: visible;
30+
}
31+
32+
.k-popup > .k-colorpalette {
33+
padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
34+
padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );
35+
}
36+
37+
// Transparent popup
38+
.k-popup.k-popup-transparent {
39+
border-width: 0;
40+
background-color: transparent;
41+
}
42+
43+
// Flush popup
44+
.k-popup.k-popup-flush {
45+
padding: 0;
46+
}
47+
48+
// Child components
49+
.k-popup > .k-coloreditor {
50+
border-width: 0;
51+
}
52+
53+
}

‎packages/fluent/scss/popup/_theme.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@use "../core/mixins" as *;
2+
@use "_variables.scss" as *;
3+
4+
@mixin kendo-popup--theme() {
5+
.k-popup {
6+
@include fill(
7+
var( --kendo-popup-text, #{$kendo-popup-text} ),
8+
var( --kendo-popup-bg, #{$kendo-popup-bg} ),
9+
var( --kendo-popup-border, #{$kendo-popup-border} )
10+
);
11+
@include box-shadow( var( --kendo-popup-shadow, #{$kendo-popup-shadow} ) );
12+
}
13+
14+
}

‎packages/fluent/scss/popup/_variables.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@use "../core/color-system" as *;
2+
@use "../core/_variables.scss" as *;
3+
4+
/// Horizontal padding of the popup.
5+
/// @group popup
6+
$kendo-popup-padding-x: 0 !default;
7+
/// Vertical padding of the popup.
8+
/// @group popup
9+
$kendo-popup-padding-y: 0 !default;
10+
/// Width of the border around the popup.
11+
/// @group popup
12+
$kendo-popup-border-width: 0 !default;
13+
/// Border radius of the popup.
14+
/// @group popup
15+
$kendo-popup-border-radius: var( --kendo-border-radius-md, 0 ) !default;
16+
17+
/// Font size of the popup.
18+
/// @group popup
19+
$kendo-popup-font-size: var(--kendo-font-size, inherit) !default;
20+
/// Line height of the popup.
21+
/// @group popup
22+
$kendo-popup-line-height: var(--kendo-line-height, normal) !default;
23+
24+
/// Horizontal padding of the content inside the popup.
25+
/// @group popup
26+
$kendo-popup-content-padding-x: map-get( $kendo-spacing, 2 ) !default;
27+
/// Vertical padding of the content inside the popup.
28+
/// @group popup
29+
$kendo-popup-content-padding-y: map-get( $kendo-spacing, 2 ) !default;
30+
31+
/// Background color of the popup.
32+
/// @group popup
33+
$kendo-popup-bg: var( --kendo-component-bg, initial ) !default;
34+
/// Text color of the popup.
35+
/// @group popup
36+
$kendo-popup-text: var( --kendo-component-text, initial ) !default;
37+
/// Border color of the popup.
38+
/// @group popup
39+
$kendo-popup-border: var( --kendo-component-border, initial ) !default;
40+
/// Box shadow around the popup.
41+
/// @group popup
42+
$kendo-popup-shadow: var( --kendo-box-shadow-depth-4, initial ) !default;

‎packages/fluent/scss/popup/index.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Module meta
2+
$_kendo-module-meta: (
3+
name: "popup",
4+
dependencies: ()
5+
);
6+
7+
8+
// Component
9+
@forward "_variables.scss";
10+
@use "_layout.scss" as *;
11+
@use "_theme.scss" as *;
12+
13+
// Register
14+
@use "../core/module-system" as module;
15+
@include module.register( $_kendo-module-meta... );
16+
17+
// Expose
18+
@mixin styles() {
19+
@include module.render( "popup" ) {
20+
@include kendo-popup--layout();
21+
@include kendo-popup--theme();
22+
}
23+
}

0 commit comments

Comments
 (0)