@featherk/styles 0.6.3 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,11 @@
1
1
  /* Compatible with @progress/kendo-theme-default v.8.2.0 */
2
+ @font-face {
3
+ font-family: Inter;
4
+ src: url("../fonts/Inter-Regular.woff2") format("woff2");
5
+ font-style: normal;
6
+ font-weight: 400;
7
+ font-display: auto;
8
+ }
2
9
  @font-face {
3
10
  font-family: Inter;
4
11
  src: url("../fonts/Inter-Light.woff2") format("woff2");
@@ -15,30 +22,30 @@
15
22
  }
16
23
  @font-face {
17
24
  font-family: Inter;
18
- src: url("../fonts/Inter-LightItalic.woff2") format("woff2");
25
+ src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
19
26
  font-style: italic;
20
- font-weight: 300;
27
+ font-weight: 700;
21
28
  font-display: auto;
22
29
  }
23
30
  @font-face {
24
31
  font-family: Inter;
25
- src: url("../fonts/Inter-Italic.woff2") format("woff2");
32
+ src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
26
33
  font-style: italic;
27
- font-weight: 400;
34
+ font-weight: 500;
28
35
  font-display: auto;
29
36
  }
30
37
  @font-face {
31
38
  font-family: Inter;
32
- src: url("../fonts/Inter-Regular.woff2") format("woff2");
33
- font-style: normal;
34
- font-weight: 400;
39
+ src: url("../fonts/Inter-LightItalic.woff2") format("woff2");
40
+ font-style: italic;
41
+ font-weight: 300;
35
42
  font-display: auto;
36
43
  }
37
44
  @font-face {
38
45
  font-family: Inter;
39
- src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
46
+ src: url("../fonts/Inter-Italic.woff2") format("woff2");
40
47
  font-style: italic;
41
- font-weight: 500;
48
+ font-weight: 400;
42
49
  font-display: auto;
43
50
  }
44
51
  @font-face {
@@ -48,13 +55,6 @@
48
55
  font-weight: 500;
49
56
  font-display: auto;
50
57
  }
51
- @font-face {
52
- font-family: Inter;
53
- src: url("../fonts/Inter-BoldItalic.woff2") format("woff2");
54
- font-style: italic;
55
- font-weight: 700;
56
- font-display: auto;
57
- }
58
58
  :root {
59
59
  --kendo-color-app-surface: rgb(252, 252, 255);
60
60
  --kendo-color-on-app-surface: rgba(10, 12, 27, 0.7);
@@ -47195,66 +47195,6 @@ kendo-scrollview.k-scrollview .k-scrollview-nav {
47195
47195
  --breakpoint-md: 600px;
47196
47196
  --breakpoint-lg: 1440px;
47197
47197
  }
47198
- .k-animation-container:has(.k-tooltip) {
47199
- white-space: overflow-wrap;
47200
- background-color: var(--kendo-color-primary-hover);
47201
- border-radius: 0.25rem;
47202
- max-width: 50ch;
47203
- }
47204
- .k-animation-container:has(.k-tooltip) .k-tooltip {
47205
- color: var(--kendo-color-light);
47206
- padding: 0.5rem 1rem;
47207
- font-size: 0.875rem;
47208
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
47209
- }
47210
- .k-animation-container:has(.k-tooltip) .k-callout {
47211
- display: none;
47212
- }
47213
- :is([class*="fk-popup-alert"]).k-animation-container .k-popup {
47214
- box-shadow: none;
47215
- border-radius: 0.25rem;
47216
- }
47217
- :is([class*="fk-popup-alert"]).k-animation-container .k-popup div {
47218
- display: flex;
47219
- flex-direction: row;
47220
- align-items: center;
47221
- gap: 1rem;
47222
- color: var(--kendo-color-secondary-text);
47223
- background-color: var(--kendo-color-surface);
47224
- padding-block: 0.25rem;
47225
- padding-inline: 1rem 0.5rem;
47226
- border-radius: 0.25rem;
47227
- border: 1px solid;
47228
- border-color: var(--kendo-color-border);
47229
- box-shadow: none;
47230
- cursor: pointer;
47231
- }
47232
- :is([class*="fk-popup-alert"]).k-animation-container .k-popup div .k-icon {
47233
- flex-shrink: 0;
47234
- align-self: start;
47235
- }
47236
- .fk-popup-alert-info.k-animation-container .k-popup div {
47237
- border-color: var(--kendo-color-info);
47238
- color: var(--kendo-color-info);
47239
- background-color: var(--kendo-color-info-subtle);
47240
- }
47241
- .fk-popup-alert-warning.k-animation-container .k-popup div {
47242
- border-color: var(--kendo-color-warning);
47243
- background-color: var(--kendo-color-warning-subtle);
47244
- }
47245
- .fk-popup-alert-error.k-animation-container .k-popup div {
47246
- border-color: var(--kendo-color-error);
47247
- color: var(--kendo-color-error);
47248
- background-color: var(--kendo-color-error-subtle);
47249
- }
47250
- .fk-popup-alert-success.k-animation-container .k-popup div {
47251
- border-color: var(--kendo-color-success);
47252
- color: var(--kendo-color-success);
47253
- background-color: var(--kendo-color-success-subtle);
47254
- }
47255
- .k-expander-header:focus-visible {
47256
- box-shadow: inset 0px 0px 0px 2px #195bb5;
47257
- }
47258
47198
  .k-slider .k-tick {
47259
47199
  background-image: none;
47260
47200
  }
@@ -47373,57 +47313,65 @@ kendo-scrollview.k-scrollview .k-scrollview-nav {
47373
47313
  clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
47374
47314
  }
47375
47315
  }
47376
- .fk-daterangepicker .k-input-suffix,
47377
- .fk-daterangepicker .k-input-prefix {
47378
- cursor: pointer;
47379
- }
47380
- .fk-daterangepicker .k-input-suffix:hover,
47381
- .fk-daterangepicker .k-input-prefix:hover {
47382
- background-color: var(--kendo-color-primary-subtle-hover);
47316
+ :is([class*="fk-popup-alert"]).k-animation-container .k-popup {
47317
+ box-shadow: none;
47318
+ border-radius: 0.25rem;
47383
47319
  }
47384
- .k-calendar-view.k-hstack,
47385
- .k-calendar-view.k-hbox {
47320
+ :is([class*="fk-popup-alert"]).k-animation-container .k-popup div {
47386
47321
  display: flex;
47387
47322
  flex-direction: row;
47388
- flex-wrap: wrap;
47389
- max-width: 36rem;
47390
- }
47391
- .k-calendar-table:has(.k-focus) {
47392
- background-color: hsl(from var(--kendo-color-primary) h s 95%);
47323
+ align-items: center;
47324
+ gap: 1rem;
47325
+ color: var(--kendo-color-secondary-text);
47326
+ background-color: var(--kendo-color-surface);
47327
+ padding-block: 0.25rem;
47328
+ padding-inline: 1rem 0.5rem;
47393
47329
  border-radius: 0.25rem;
47330
+ border: 1px solid;
47331
+ border-color: var(--kendo-color-border);
47332
+ box-shadow: none;
47333
+ cursor: pointer;
47394
47334
  }
47395
- .k-calendar-table
47396
- > .k-calendar-tbody
47397
- > .k-calendar-tr:nth-last-child(2):has(
47398
- .k-calendar-td:first-child:is(.k-empty)
47399
- ) {
47400
- display: none;
47335
+ :is([class*="fk-popup-alert"]).k-animation-container .k-popup div .k-icon {
47336
+ flex-shrink: 0;
47337
+ align-self: start;
47401
47338
  }
47402
- .k-calendar-table
47403
- > .k-calendar-tbody
47404
- > .k-calendar-tr:last-child:has(.k-calendar-td:first-child:is(.k-empty)) {
47405
- display: none;
47339
+ .fk-popup-alert-info.k-animation-container .k-popup div {
47340
+ border-color: var(--kendo-color-info);
47341
+ color: var(--kendo-color-info);
47342
+ background-color: var(--kendo-color-info-subtle);
47406
47343
  }
47407
- .k-animation-container
47408
- .k-child-animation-container
47409
- .k-calendar
47410
- .k-calendar-view.k-calendar-monthview
47411
- .k-calendar-tr
47412
- .k-calendar-td {
47413
- width: 2.5rem;
47414
- height: 2.5rem;
47344
+ .fk-popup-alert-warning.k-animation-container .k-popup div {
47345
+ border-color: var(--kendo-color-warning);
47346
+ background-color: var(--kendo-color-warning-subtle);
47415
47347
  }
47416
- .k-animation-container
47417
- .k-child-animation-container
47418
- .k-calendar
47419
- .k-calendar-view.k-calendar-monthview
47420
- .k-calendar-tr
47421
- .k-calendar-th {
47422
- width: 2.5rem;
47423
- height: 2.5rem;
47348
+ .fk-popup-alert-error.k-animation-container .k-popup div {
47349
+ border-color: var(--kendo-color-error);
47350
+ color: var(--kendo-color-error);
47351
+ background-color: var(--kendo-color-error-subtle);
47424
47352
  }
47425
- .k-animation-container:has(.k-calendar-view) {
47426
- margin-top: 0.25rem;
47353
+ .fk-popup-alert-success.k-animation-container .k-popup div {
47354
+ border-color: var(--kendo-color-success);
47355
+ color: var(--kendo-color-success);
47356
+ background-color: var(--kendo-color-success-subtle);
47357
+ }
47358
+ .k-animation-container:has(.k-tooltip) {
47359
+ white-space: overflow-wrap;
47360
+ background-color: var(--kendo-color-primary-hover);
47361
+ border-radius: 0.25rem;
47362
+ max-width: 50ch;
47363
+ }
47364
+ .k-animation-container:has(.k-tooltip) .k-tooltip {
47365
+ color: var(--kendo-color-light);
47366
+ padding: 0.5rem 1rem;
47367
+ font-size: 0.875rem;
47368
+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
47369
+ }
47370
+ .k-animation-container:has(.k-tooltip) .k-callout {
47371
+ display: none;
47372
+ }
47373
+ .k-expander-header:focus-visible {
47374
+ box-shadow: inset 0px 0px 0px 2px #195bb5;
47427
47375
  }
47428
47376
  .fk-menu .k-menu.k-menu-horizontal > .k-item.k-menu-item {
47429
47377
  position: relative;
@@ -47480,6 +47428,80 @@ kendo-scrollview.k-scrollview .k-scrollview-nav {
47480
47428
  .k-gantt-tasks td::after {
47481
47429
  content: "";
47482
47430
  }
47431
+ .fk-daterangepicker .k-input-suffix,
47432
+ .fk-daterangepicker .k-input-prefix {
47433
+ cursor: pointer;
47434
+ }
47435
+ .fk-daterangepicker .k-input-suffix:hover,
47436
+ .fk-daterangepicker .k-input-prefix:hover {
47437
+ background-color: var(--kendo-color-primary-subtle-hover);
47438
+ }
47439
+ .k-calendar-view.k-hstack,
47440
+ .k-calendar-view.k-hbox {
47441
+ display: flex;
47442
+ flex-direction: row;
47443
+ flex-wrap: wrap;
47444
+ max-width: 36rem;
47445
+ }
47446
+ .k-calendar-table:has(.k-focus) {
47447
+ background-color: hsl(from var(--kendo-color-primary) h s 95%);
47448
+ border-radius: 0.25rem;
47449
+ }
47450
+ .k-calendar-table
47451
+ > .k-calendar-tbody
47452
+ > .k-calendar-tr:nth-last-child(2):has(
47453
+ .k-calendar-td:first-child:is(.k-empty)
47454
+ ) {
47455
+ display: none;
47456
+ }
47457
+ .k-calendar-table
47458
+ > .k-calendar-tbody
47459
+ > .k-calendar-tr:last-child:has(.k-calendar-td:first-child:is(.k-empty)) {
47460
+ display: none;
47461
+ }
47462
+ .k-animation-container
47463
+ .k-child-animation-container
47464
+ .k-calendar
47465
+ .k-calendar-view.k-calendar-monthview
47466
+ .k-calendar-tr
47467
+ .k-calendar-td {
47468
+ width: 2.5rem;
47469
+ height: 2.5rem;
47470
+ }
47471
+ .k-animation-container
47472
+ .k-child-animation-container
47473
+ .k-calendar
47474
+ .k-calendar-view.k-calendar-monthview
47475
+ .k-calendar-tr
47476
+ .k-calendar-th {
47477
+ width: 2.5rem;
47478
+ height: 2.5rem;
47479
+ }
47480
+ .k-animation-container:has(.k-calendar-view) {
47481
+ margin-top: 0.25rem;
47482
+ }
47483
+ .fk-timepicker .k-timepicker {
47484
+ width: 10rem;
47485
+ min-width: 10rem;
47486
+ display: flex;
47487
+ justify-content: space-between;
47488
+ }
47489
+ .fk-timepicker .k-timepicker.k-input .k-maskedtextbox.k-input,
47490
+ .fk-timepicker .k-timepicker.k-input.k-focus .k-maskedtextbox.k-input {
47491
+ border: 0;
47492
+ outline: 0;
47493
+ }
47494
+ .fk-datepicker .k-datepicker {
47495
+ width: 10rem;
47496
+ min-width: 10rem;
47497
+ display: flex;
47498
+ justify-content: space-between;
47499
+ }
47500
+ .fk-datepicker .k-datepicker.k-input .k-maskedtextbox.k-input,
47501
+ .fk-datepicker .k-datepicker.k-input.k-focus .k-maskedtextbox.k-input {
47502
+ border: 0;
47503
+ outline: 0;
47504
+ }
47483
47505
  .k-tabstrip .k-tabstrip-content.k-active,
47484
47506
  .k-tabstrip .k-tabstrip-content.k-state-active,
47485
47507
  .k-tabstrip .k-tabstrip-content:active {
@@ -47495,6 +47517,7 @@ h1 {
47495
47517
  line-height: 1.2857142857;
47496
47518
  letter-spacing: unset;
47497
47519
  }
47520
+ h2.fk-heading2,
47498
47521
  .k-popup.k-timepicker-popup .k-timeselector .k-time-header .k-title,
47499
47522
  h2 {
47500
47523
  font-family: Inter;
@@ -47502,21 +47525,22 @@ h2 {
47502
47525
  font-weight: 400;
47503
47526
  line-height: 1.5;
47504
47527
  }
47505
- .k-card .k-card-header .k-card-title,
47506
- h3 {
47528
+ h3.fk-heading3,
47529
+ .k-card .k-card-header .k-card-title {
47507
47530
  font-family: Inter;
47508
47531
  font-size: 1.1875rem;
47509
47532
  font-weight: 700;
47510
47533
  line-height: 1.4736842105;
47511
47534
  letter-spacing: 0em;
47512
47535
  }
47536
+ h4.fk-heading4,
47513
47537
  h4 {
47514
47538
  font-family: Inter;
47515
47539
  font-size: 1rem;
47516
47540
  font-weight: 400;
47517
47541
  line-height: 1.5;
47518
47542
  }
47519
- h5 {
47543
+ h5.fk-heading5 {
47520
47544
  font-family: Inter;
47521
47545
  font-size: 0.875rem;
47522
47546
  font-weight: 700;
@@ -47556,8 +47580,6 @@ h6 {
47556
47580
  .k-dropdownlist .k-input-inner .k-input-value-text,
47557
47581
  .k-pager .k-pager-sizes .k-dropdownlist .k-input-inner .k-input-value-text,
47558
47582
  .k-numerictextbox.k-input.k-input-md,
47559
- div,
47560
- ul,
47561
47583
  .k-window .k-window-content,
47562
47584
  .k-window,
47563
47585
  .k-window.k-dialog .k-window-content.k-dialog-content,
@@ -52040,7 +52062,7 @@ ul,
52040
52062
  transition-duration: 280ms;
52041
52063
  transition-property: all;
52042
52064
  transition-timing-function: ease-out;
52043
- min-width: 208px;
52065
+ min-width: unset;
52044
52066
  }
52045
52067
  .k-timepicker.k-input.k-input-solid {
52046
52068
  border-bottom-color: currentcolor;
@@ -55300,10 +55322,10 @@ div.feather-ks-spacing-s {
55300
55322
  box-shadow: none;
55301
55323
  }
55302
55324
  .k-expander .k-expander-header {
55303
- border-bottom-left-radius: 0.125rem;
55304
- border-bottom-right-radius: 0.125rem;
55305
- border-top-left-radius: 0.125rem;
55306
- border-top-right-radius: 0.125rem;
55325
+ border-bottom-left-radius: 0.25rem;
55326
+ border-bottom-right-radius: 0.25rem;
55327
+ border-top-left-radius: 0.25rem;
55328
+ border-top-right-radius: 0.25rem;
55307
55329
  }
55308
55330
  .k-expander.k-expanded {
55309
55331
  transition-property: all;
@@ -55313,10 +55335,6 @@ div.feather-ks-spacing-s {
55313
55335
  border-left-style: solid;
55314
55336
  border-right-style: solid;
55315
55337
  border-top-style: solid;
55316
- border-bottom-left-radius: 0.25rem;
55317
- border-bottom-right-radius: 0.25rem;
55318
- border-top-left-radius: 0.25rem;
55319
- border-top-right-radius: 0.25rem;
55320
55338
  z-index: 1;
55321
55339
  }
55322
55340
  .k-button.k-focus.k-button-outline.k-button-outline-primary,
@@ -56916,3 +56934,30 @@ div.feather-ks-spacing-s {
56916
56934
  rgba(25, 91, 181, 0.12)
56917
56935
  );
56918
56936
  }
56937
+ div.fk-container {
56938
+ padding-bottom: 1rem;
56939
+ padding-left: 1rem;
56940
+ padding-right: 1rem;
56941
+ padding-top: 1rem;
56942
+ background-color: #fcfcff;
56943
+ background-image: none;
56944
+ border-bottom-left-radius: 0.25rem;
56945
+ border-bottom-right-radius: 0.25rem;
56946
+ border-top-left-radius: 0.25rem;
56947
+ border-top-right-radius: 0.25rem;
56948
+ border-bottom-width: 1px;
56949
+ border-left-width: 1px;
56950
+ border-right-width: 1px;
56951
+ border-top-width: 1px;
56952
+ border-bottom-color: rgba(10, 12, 27, 0.12);
56953
+ border-bottom-style: solid;
56954
+ border-left-color: rgba(10, 12, 27, 0.12);
56955
+ border-left-style: solid;
56956
+ border-right-color: rgba(10, 12, 27, 0.12);
56957
+ border-right-style: solid;
56958
+ border-top-color: rgba(10, 12, 27, 0.12);
56959
+ border-top-style: solid;
56960
+ display: flex;
56961
+ flex-direction: column;
56962
+ row-gap: 0.75rem;
56963
+ }