Skip to content

Commit 42c071b

Browse files
zhpenkovzhpenkov
committed
feat(otp): add component styles
1 parent 592948b commit 42c071b

36 files changed

Lines changed: 780 additions & 37 deletions

‎packages/bootstrap/scss/button/_variables.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,17 @@ $kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
7171

7272
/// The calculated height of the Button.
7373
/// @group button
74-
$kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
75-
$kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc(#{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
76-
$kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc(#{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
77-
$kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc(#{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
74+
$kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
75+
$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
76+
$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
77+
$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
7878

7979
/// The calculated inner height of the Button excluding the border width.
8080
/// @group button
81-
$kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
82-
$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
83-
$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
84-
$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
81+
$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
82+
$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
83+
$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
84+
$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
8585

8686
/// The sizes map for the Button.
8787
/// @group button

‎packages/bootstrap/scss/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
@forward "./map/_index.scss";
115115
@forward "./orgchart/_index.scss";
116116
@forward "./signature/_index.scss";
117+
@forward "./otp/_index.scss";
117118

118119

119120
// Use component modules
@@ -202,6 +203,7 @@
202203
@use "./switch/_index.scss" as *;
203204
@use "./upload/_index.scss" as *;
204205
@use "./dropzone/_index.scss" as *;
206+
@use "./otp/_index.scss" as *;
205207
// Command interfaces
206208

207209
@use "./action-buttons/_index.scss" as *;
@@ -375,6 +377,7 @@
375377
@include kendo-switch--styles();
376378
@include kendo-upload--styles();
377379
@include kendo-dropzone--styles();
380+
@include kendo-otp--styles();
378381

379382

380383
// Command interfaces

‎packages/bootstrap/scss/input/_variables.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $kendo-input-default-width: 100% !default;
1212

1313
/// The border width of the Input components.
1414
/// @group input
15-
$kendo-input-border-width: k-spacing(1px) !default;
15+
$kendo-input-border-width: 1px !default;
1616
$kendo-input-border-height: calc( #{ $kendo-input-border-width } * 2 ) !default;
1717
/// The border radius of the Input components.
1818
/// @group input
@@ -74,6 +74,13 @@ $kendo-input-md-line-height: var( --kendo-line-height, normal) !default;
7474
/// @group input
7575
$kendo-input-lg-line-height: var( --kendo-line-height, normal) !default;
7676

77+
/// The calculated height of the Input.
78+
/// @group input
79+
$kendo-input-calc-size: calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
80+
$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
81+
$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
82+
$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
83+
7784
/// The sizes map for the Input components.
7885
/// @group input
7986
$kendo-input-sizes: (
@@ -464,6 +471,10 @@ $kendo-picker-flat-hover-focus-border: null !default;
464471
$kendo-input-sm-line-height: $kendo-input-sm-line-height,
465472
$kendo-input-md-line-height: $kendo-input-md-line-height,
466473
$kendo-input-lg-line-height: $kendo-input-lg-line-height,
474+
$kendo-input-calc-size: $kendo-input-calc-size,
475+
$kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
476+
$kendo-input-md-calc-size: $kendo-input-md-calc-size,
477+
$kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
467478
$kendo-input-sizes: $kendo-input-sizes,
468479
$kendo-input-bg: $kendo-input-bg,
469480
$kendo-input-text: $kendo-input-text,

‎packages/bootstrap/scss/otp/_index.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Dependencies
2+
@use "../core/_index.scss" as *;
3+
@use "../input/_index.scss" as *;
4+
5+
// Component
6+
@forward "./_variables.scss";
7+
@use "./_layout.scss" as *;
8+
@use "./_theme.scss" as *;
9+
10+
// Expose
11+
@mixin kendo-otp--styles() {
12+
@include import-once( "otp" ) {
13+
@include core-styles();
14+
@include kendo-input--styles();
15+
@include kendo-otp--layout();
16+
@include kendo-otp--theme();
17+
}
18+
}

‎packages/bootstrap/scss/otp/_layout.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "@progress/kendo-theme-default/scss/otp/_layout.scss" as *;
2+
3+
@mixin kendo-otp--layout() {
4+
@include kendo-otp--layout-base();
5+
}

‎packages/bootstrap/scss/otp/_theme.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "@progress/kendo-theme-default/scss/otp/_theme.scss" as *;
2+
3+
@mixin kendo-otp--theme() {
4+
@include kendo-otp--theme-base();
5+
}

‎packages/bootstrap/scss/otp/_variables.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@use "../core/_index.scss" as *;
2+
@use "../input/_variables.scss" as *;
3+
4+
// OTP
5+
6+
/// The gap between the items in the OTP.
7+
/// @group one-time-password
8+
$kendo-otp-gap: k-spacing(1.5) !default;
9+
/// The gap between the items in the small OTP.
10+
/// @group one-time-password
11+
$kendo-otp-sm-gap: k-spacing(1) !default;
12+
/// The gap between the items in the medium OTP.
13+
/// @group one-time-password
14+
$kendo-otp-md-gap: $kendo-otp-gap !default;
15+
/// The gap between the items in the large OTP.
16+
/// @group one-time-password
17+
$kendo-otp-lg-gap: k-spacing(2) !default;
18+
19+
/// The horizontal padding of the OTP separator.
20+
/// @group one-time-password
21+
$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
22+
/// The horizontal padding of the small OTP separator.
23+
/// @group one-time-password
24+
$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
25+
/// The horizontal padding of the medium OTP separator.
26+
/// @group one-time-password
27+
$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
28+
/// The horizontal padding of the large OTP separator.
29+
/// @group one-time-password
30+
$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
31+
32+
/// The horizontal padding of the OTP separator.
33+
/// @group one-time-password
34+
$kendo-otp-input-width: $kendo-input-calc-size !default;
35+
/// The horizontal padding of the small OTP separator.
36+
/// @group one-time-password
37+
$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
38+
/// The horizontal padding of the medium OTP separator.
39+
/// @group one-time-password
40+
$kendo-otp-md-input-width: $kendo-otp-input-width !default;
41+
/// The horizontal padding of the large OTP separator.
42+
/// @group one-time-password
43+
$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
44+
45+
$kendo-otp-sizes: (
46+
sm: (
47+
gap: $kendo-otp-sm-gap,
48+
separator-padding-x: $kendo-otp-sm-separator-padding-x,
49+
input-width: $kendo-otp-sm-input-width
50+
),
51+
md: (
52+
gap: $kendo-otp-md-gap,
53+
separator-padding-x: $kendo-otp-md-separator-padding-x,
54+
input-width: $kendo-otp-md-input-width
55+
),
56+
lg: (
57+
gap: $kendo-otp-lg-gap,
58+
separator-padding-x: $kendo-otp-lg-separator-padding-x,
59+
input-width: $kendo-otp-lg-input-width
60+
)
61+
) !default;
62+
63+
@forward "@progress/kendo-theme-default/scss/otp/_variables.scss" with (
64+
$kendo-otp-gap: $kendo-otp-gap,
65+
$kendo-otp-sm-gap: $kendo-otp-sm-gap,
66+
$kendo-otp-md-gap: $kendo-otp-md-gap,
67+
$kendo-otp-lg-gap: $kendo-otp-lg-gap,
68+
$kendo-otp-separator-padding-x: $kendo-otp-separator-padding-x,
69+
$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
70+
$kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
71+
$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
72+
$kendo-otp-input-width: $kendo-otp-input-width,
73+
$kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
74+
$kendo-otp-md-input-width: $kendo-otp-md-input-width,
75+
$kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
76+
$kendo-otp-sizes: $kendo-otp-sizes
77+
);

‎packages/classic/scss/button/_variables.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,17 @@ $kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
7070

7171
/// The calculated height of the Button.
7272
/// @group button
73-
$kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
74-
$kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
75-
$kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
76-
$kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
73+
$kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
74+
$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
75+
$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
76+
$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
7777

7878
/// The calculated inner height of the Button excluding the border width.
7979
/// @group button
80-
$kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
81-
$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
82-
$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
83-
$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
80+
$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
81+
$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
82+
$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
83+
$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
8484

8585
/// The sizes map for the Button.
8686
/// @group button

‎packages/classic/scss/index.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
@forward "./map/_index.scss";
115115
@forward "./orgchart/_index.scss";
116116
@forward "./signature/_index.scss";
117+
@forward "./otp/_index.scss";
117118

118119

119120
// Use component modules
@@ -200,8 +201,7 @@
200201
@use "./switch/_index.scss" as *;
201202
@use "./upload/_index.scss" as *;
202203
@use "./dropzone/_index.scss" as *;
203-
204-
204+
@use "./otp/_index.scss" as *;
205205
// Command interfaces
206206
@use "./action-buttons/_index.scss" as *;
207207
@use "./appbar/_index.scss" as *;
@@ -372,6 +372,7 @@
372372
@include kendo-switch--styles();
373373
@include kendo-upload--styles();
374374
@include kendo-dropzone--styles();
375+
@include kendo-otp--styles();
375376

376377

377378
// Command interfaces

‎packages/classic/scss/input/_variables.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ $kendo-input-md-line-height: var( --kendo-line-height, normal ) !default;
7373
/// @group input
7474
$kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
7575

76+
/// The calculated height of the Input.
77+
/// @group input
78+
$kendo-input-calc-size: calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
79+
$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
80+
$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
81+
$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
82+
7683
/// The sizes map for the Input components.
7784
/// @group input
7885
$kendo-input-sizes: (
@@ -469,6 +476,10 @@ $kendo-picker-flat-hover-focus-border: null !default;
469476
$kendo-input-sm-line-height: $kendo-input-sm-line-height,
470477
$kendo-input-md-line-height: $kendo-input-md-line-height,
471478
$kendo-input-lg-line-height: $kendo-input-lg-line-height,
479+
$kendo-input-calc-size: $kendo-input-calc-size,
480+
$kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
481+
$kendo-input-md-calc-size: $kendo-input-md-calc-size,
482+
$kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
472483
$kendo-input-sizes: $kendo-input-sizes,
473484
$kendo-input-bg: $kendo-input-bg,
474485
$kendo-input-text: $kendo-input-text,

0 commit comments

Comments
 (0)