Skip to content

Commit e49a77c

Browse files
yanmariomenevyanmariomenev
committed
chore: update styles and some minor adjustments
1 parent 6ef0393 commit e49a77c

File tree

7 files changed

+84
-65
lines changed

7 files changed

+84
-65
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/app.component.css

Lines changed: 19 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,42 @@
11
#app,
22
.k-animation-container {
3-
font-family: 'Roboto', sans-serif;
4-
}
5-
6-
.k-radio {
7-
border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
8-
}
9-
10-
.k-grid-table-thead {
11-
background-color: #fff;
12-
}
13-
14-
.k-table-td.price-column {
15-
text-align: end;
16-
}
17-
18-
.price-column-header {
19-
justify-content: end;
20-
}
21-
22-
.k-slider .k-slider-track {
23-
background-color: #EBEBEB;
24-
}
25-
26-
.k-grid-pager {
27-
border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
28-
border-width: 0px 1px 1px 1px;
29-
font-size: 14px;
30-
background-color: #fff;
31-
}
32-
33-
.k-pager-numbers-wrap button {
34-
border-radius: 4px;
35-
}
36-
37-
.k-sort-icon {
38-
color: #5777EA;
3+
font-family: "Roboto", sans-serif;
394
}
405

416
.k-list-item:hover,
427
.k-list-optionlabel:hover,
438
.k-list-item.k-hover,
449
.k-hover.k-list-optionlabel,
4510
.k-columnmenu-item:hover {
46-
background-color: color-mix(in srgb, #5777EA 11%, transparent);
11+
background-color: color-mix(in srgb, #5777ea 11%, transparent);
4712
}
4813

49-
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover,
50-
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover {
51-
background-color: color-mix(in srgb, #5777EA 16%, transparent);
14+
.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
15+
.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
16+
background-color: color-mix(in srgb, #5777ea 16%, transparent);
5217
}
5318

5419
.k-columnmenu-item.k-selected,
5520
.k-list-item.k-selected,
5621
.k-list-item.k-selected:hover,
5722
.k-list-optionlabel.k-selected,
5823
.k-list-optionlabel.k-selected:hover {
59-
background-color: #5777EA;
60-
color: #FFF;
24+
background-color: #5777ea;
25+
color: #fff;
6126
}
6227

6328
.k-grid .k-table-row.k-table-alt-row {
64-
background-color: color-mix(in srgb, #5777EA 10%, transparent);
29+
background-color: color-mix(in srgb, #5777ea 10%, transparent);
6530
}
6631

6732
.k-button-flat-primary {
68-
color: #5777EA;
33+
color: #5777ea;
6934
}
7035

7136
.k-button-solid-primary,
7237
.k-button-solid-primary:hover {
73-
border-color: #5777EA;
74-
background-color: #5777EA;
38+
border-color: #5777ea;
39+
background-color: #5777ea;
7540
}
7641

7742
.k-svg-icon.k-icon-lg {
@@ -80,23 +45,23 @@
8045
}
8146

8247
.k-switch-on .k-switch-track {
83-
background-color: #5777EA !important;
84-
color: #FFF;
48+
background-color: #5777ea !important;
49+
color: #fff;
8550
}
8651

8752
.k-rating-item,
8853
.k-rating-item.k-selected {
89-
color: #90B6FF;
54+
color: #90b6ff;
9055
}
9156

9257
.k-slider .k-slider-selection {
93-
background-color: #90B6FF;
58+
background-color: #90b6ff;
9459
}
9560

9661
.k-slider .k-draghandle {
97-
border-color: #5777EA;
62+
border-color: #5777ea;
9863
color: var(--kendo-color-on-primary, white);
99-
background-color: #5777EA;
64+
background-color: #5777ea;
10065
border-radius: 50%;
10166
}
10267

@@ -107,12 +72,6 @@
10772
font-weight: 400;
10873
}
10974

110-
.k-form-buttons>.k-button-solid-primary {
111-
background-color: #5777EA
75+
.k-form-buttons > .k-button-solid-primary {
76+
background-color: #5777ea;
11277
}
113-
114-
.k-radio:checked,
115-
.k-radio.k-checked {
116-
border-color: #5777EA;
117-
background-color: #5777EA;
118-
}

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-left/bottom-left.component.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
11
.k-switch-on .k-switch-track {
2-
border-color: #5777EA !important;
3-
}
2+
border-color: #5777ea;
3+
}
4+
5+
.k-slider .k-draghandle:focus,
6+
.k-slider .k-draghandle:hover,
7+
.k-draghandle:focus,
8+
.k-slider .k-draghandle:active,
9+
.k-draghandle.k-pressed {
10+
background-color: #5777ea;
11+
box-shadow: 0 0 0 2px rgba(87, 119, 234, 0.5);
12+
border-color: #5777ea;
13+
}
14+
15+
.k-slider .k-slider-track {
16+
background-color: #ebebeb;
17+
}
18+
19+
.k-switch-on:focus .k-switch-track,
20+
.k-switch-on.k-focus .k-switch-track {
21+
outline: 2px solid color-mix(in srgb, #5777ea 20%, transparent);
22+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-left/bottom-left.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
>
1717
<kendo-slider
1818
style="width: 175px; padding: 4px 8px 3px 8px"
19+
[fixedTickWidth]="9.5"
1920
[min]="1"
2021
[max]="10"
2122
[smallStep]="1"

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-right/bottom-right.component.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,18 @@ kendo-formfield {
1818
display: flex;
1919
gap: 1rem;
2020
}
21+
22+
.k-radio:checked,
23+
.k-radio.k-checked {
24+
border-color: #5777ea;
25+
background-color: #5777ea;
26+
box-shadow: 0 0 0 2px rgba(87, 119, 234, 0.5);
27+
}
28+
29+
.k-radio:focus,
30+
.k-radio.k-focus {
31+
box-shadow: 0 0 0 2px rgba(87, 119, 234, 0.5) !important;
32+
}
33+
.k-radio {
34+
border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
35+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-right/bottom-right.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component } from '@angular/core';
2+
import { Component, ViewEncapsulation } from '@angular/core';
33
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
44
import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
55
import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
@@ -8,6 +8,7 @@ import { KENDO_LABELS } from '@progress/kendo-angular-label';
88

99
@Component({
1010
selector: 'app-bottom-right',
11+
encapsulation: ViewEncapsulation.None,
1112
standalone: true,
1213
imports: [
1314
CommonModule,

‎examples-standalone/kendoangular-landing-page/src/app/components/transactions-dashboard/transactions-dashboard.component.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,29 @@
5353
.k-pager-numbers .k-link.k-selected {
5454
color: #fff;
5555
background-color: #5777ea;
56+
}
57+
.k-header {
58+
background-color: #fff;
59+
}
60+
61+
.k-table-td.price-column {
62+
text-align: end;
63+
}
64+
65+
.price-column-header {
66+
justify-content: end;
67+
}
68+
.k-grid-pager {
69+
border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
70+
border-width: 0px 1px 1px 1px;
71+
font-size: 14px;
72+
background-color: #fff;
73+
}
74+
75+
.k-pager-numbers-wrap button {
76+
border-radius: 4px;
77+
}
78+
79+
.k-sort-icon {
80+
color: #5777EA!important;
5681
}

‎examples-standalone/kendoangular-landing-page/src/app/components/transactions-dashboard/transactions-dashboard.component.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
[pageable]="true"
88
[pageSize]="6"
99
[sortable]="true"
10-
[selectable]="true"
1110
[columnMenu]="menuSettings"
1211
[navigable]="true"
1312
[height]="302"
@@ -17,7 +16,7 @@
1716
>
1817
<kendo-grid-column field="time" title="Time" [width]="97"></kendo-grid-column>
1918

20-
<kendo-grid-column field="amount" title="Amount" [width]="110">
19+
<kendo-grid-column field="amount" title="Amount" [width]="110" [columnMenu]="false" [headerStyle]="{ 'justify-content': 'right' }">
2120
<ng-template kendoGridCellTemplate let-dataItem>
2221
<span [ngClass]="getAmountClass(dataItem.positive)">
2322
{{ dataItem.amount }}

0 commit comments

Comments
 (0)