chore: update styles

telerik · Sep 19, 2024 · 784c950 · 784c950
1 parent 58980ff
commit 784c950
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 43 deletions.
diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -1,54 +1,51 @@
 <kendo-combobox
     [data]="disabilitiesData"
     textField="text"
-    valueField="text"></kendo-combobox>
+    valueField="text" class="k-mb-4 !k-w-full"></kendo-combobox>
 
 <kendo-expansionpanel title="Accessibility settings" [(expanded)]="settingsExpanded">
     <form class="k-form k-form-md">
-        <fieldset>
-            <legend>Accessibility Settings</legend>
-            <kendo-formfield>
-                <kendo-label text="Text size:"></kendo-label>
-                <kendo-numeric-textbox-buttons (valueChange)="settingChange('textSize', $event)" [value]="textSize"></kendo-numeric-textbox-buttons>
-            </kendo-formfield>
-            <kendo-formfield>
-                <kendo-label text="Color theme:"></kendo-label>
-                <kendo-buttongroup selection="single">
-                    <kendo-button size="large" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</kendo-button>
-                    <kendo-button size="large" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</kendo-button>
-                </kendo-buttongroup>
-            </kendo-formfield>
+        <kendo-formfield>
+            <kendo-label text="Text size:"></kendo-label>
+            <kendo-numeric-textbox-buttons (valueChange)="settingChange('textSize', $event)" [value]="textSize"></kendo-numeric-textbox-buttons>
+        </kendo-formfield>
+        <kendo-formfield>
+            <kendo-label text="Color theme:"></kendo-label>
+            <kendo-buttongroup selection="single">
+                <kendo-button size="large" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</kendo-button>
+                <kendo-button size="large" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</kendo-button>
+            </kendo-buttongroup>
+        </kendo-formfield>
 
-            <kendo-formfield>
-                <kendo-label text="Font:"></kendo-label>
-                <kendo-buttongroup selection="single">
-                    <kendo-button size="large" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</kendo-button>
-                    <kendo-button size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</kendo-button>
-                </kendo-buttongroup>
-            </kendo-formfield>
+        <kendo-formfield>
+            <kendo-label text="Font:"></kendo-label>
+            <kendo-buttongroup selection="single">
+                <kendo-button size="large" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</kendo-button>
+                <kendo-button size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</kendo-button>
+            </kendo-buttongroup>
+        </kendo-formfield>
 
-            <kendo-formfield>
-                <kendo-label text="Common:"></kendo-label>
-                <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('underlineLinks', $event)" [selected]="underlineLinks">Underiline Links</kendo-button>
-            </kendo-formfield>
-
-            <kendo-formfield>
-                <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('pauseAnimations', $event)" [selected]="pauseAnimations">Pause Animation</kendo-button>
-            </kendo-formfield>
-
-            <kendo-formfield>
-                <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('lgSizeWidgets', $event)" [selected]="lgSizeWidgets">Large Size Widgets</kendo-button>
-            </kendo-formfield>
+        <kendo-formfield>
+            <kendo-label text="Common:"></kendo-label>
+            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('underlineLinks', $event)" [selected]="underlineLinks">Underiline Links</kendo-button>
+        </kendo-formfield>
 
-            <kendo-formfield>
-                <kendo-label text="Line Height:"></kendo-label>
-                <kendo-numeric-textbox-buttons (valueChange)="settingChange('lineHeight', $event)" [value]="lineHeight"></kendo-numeric-textbox-buttons>
-            </kendo-formfield>
-
-            <kendo-formfield>
-                <kendo-label text="Letter Spacing:"></kendo-label>
-                <kendo-numeric-textbox-buttons (valueChange)="settingChange('letterSpacing', $event)" [value]="letterSpacing"></kendo-numeric-textbox-buttons>
-            </kendo-formfield>
-        </fieldset>
+        <kendo-formfield>
+            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('pauseAnimations', $event)" [selected]="pauseAnimations">Pause Animation</kendo-button>
+        </kendo-formfield>
+
+        <kendo-formfield>
+            <kendo-button size="large" [toggleable]="true" (selectedChange)="settingChange('lgSizeWidgets', $event)" [selected]="lgSizeWidgets">Large Size Widgets</kendo-button>
+        </kendo-formfield>
+
+        <kendo-formfield>
+            <kendo-label text="Line Height:"></kendo-label>
+            <kendo-numeric-textbox-buttons (valueChange)="settingChange('lineHeight', $event)" [value]="lineHeight"></kendo-numeric-textbox-buttons>
+        </kendo-formfield>
+
+        <kendo-formfield>
+            <kendo-label text="Letter Spacing:"></kendo-label>
+            <kendo-numeric-textbox-buttons (valueChange)="settingChange('letterSpacing', $event)" [value]="letterSpacing"></kendo-numeric-textbox-buttons>
+        </kendo-formfield>
     </form>
 </kendo-expansionpanel>
diff --git a/examples-standalone/coffee-warehouse/src/styles/main.scss b/examples-standalone/coffee-warehouse/src/styles/main.scss
@@ -136,3 +136,15 @@ kendo-recurrence-frequency-editor .k-edit-field {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 }
+
+.appbar-button-group .k-button.k-selected {
+    color: var(--kendo-color-base-on-surface);
+}
+
+.k-window {
+    --kendo-border-radius-md: var(--kendo-border-radius-lg);
+}
+
+.k-window .k-expander {
+    border-radius: var(--kendo-border-radius-lg);
+}