chore: kebab-case less

taiga-family · Jul 16, 2024 · ec6e053 · ec6e053
1 parent a23400e
commit ec6e053
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 60 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.html
@@ -2,11 +2,11 @@
     <h3 class="title">Cleaning schedule</h3>
     <div>
         <div
-            class="wrapper Group tui-space_top-3"
+            class="wrapper group tui-space_top-3"
             [tuiDateFormat]="{mode: 'YMD'}"
         >
             <tui-input-date
-                class="LastDate"
+                class="last-date"
                 [formControl]="control"
                 [tuiDateFormat]="{separator: '-'}"
             >
@@ -16,7 +16,7 @@ <h3 class="title">Cleaning schedule</h3>
             <label
                 *ngIf="value$ | async as value"
                 tuiProgressLabel
-                class="Progress"
+                class="progress"
             >
                 <span class="percent">{{ value }}%</span>
 
@@ -29,7 +29,7 @@ <h3 class="title">Cleaning schedule</h3>
             </label>
         </div>
         <div
-            class="wrapper Group tui-space_top-3"
+            class="wrapper group tui-space_top-3"
             [tuiDateFormat]="{mode: 'YMD'}"
         >
             <tui-input-date
@@ -42,7 +42,7 @@ <h3 class="title">Cleaning schedule</h3>
             <label
                 *ngIf="value$ | async as value"
                 tuiProgressLabel
-                class="Progress hidden"
+                class="progress hidden"
             >
                 <span class="text">COMPLETED</span>
                 <span class="percent">{{ value }}%</span>
@@ -60,7 +60,7 @@ <h3 class="title">Cleaning schedule</h3>
     <button
         appearance="primary"
         tuiButton
-        class="Add"
+        class="add"
     >
         Add
     </button>

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Cleaning/cleaning.component.less
@@ -15,7 +15,7 @@
     margin: 0;
 }
 
-.Add {
+.add {
     padding-left: 30px;
     padding-right: 30px;
     margin-left: auto;
@@ -36,22 +36,22 @@ tui-progress-circle {
     transition: color 2s;
 }
 
-.Group {
+.group {
     display: flex;
     margin-top: 0;
     margin-bottom: -5px;
     gap: 10px;
     align-items: center;
 }
 
-.Progress {
+.progress {
     transform: scale(0.7);
 }
 
 .hidden {
     visibility: hidden;
 }
 
-.LastDate {
+.last-date {
     width: 160px;
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.html
@@ -1,11 +1,11 @@
 <div class="cost">
     <div class="bar-chart">
-        <h1
+        <h3
             TuiTitle
-            class="Spend"
+            class="spend"
         >
             Utility costs
-        </h1>
+        </h3>
         <p class="legend">
             <span class="item">
                 <small class="name">Electricity bills</small>

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Cost/cost.component.less
@@ -61,7 +61,7 @@
     color: var(--tui-text-primary);
 }
 
-.Spend {
+.spend {
     margin-left: auto;
     margin-right: auto;
     text-align: center;

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.html
@@ -10,9 +10,9 @@ <h3 class="title">Lighting</h3>
         @if (testForm.get('testValue1')!.value) {
             <label
                 tuiBlock
-                class="BlockLabel Checked"
+                class="block-label checked"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue1"
                         tuiCheckbox
@@ -30,9 +30,9 @@ <h3 class="title">Lighting</h3>
         } @else {
             <label
                 tuiBlock
-                class="BlockLabel"
+                class="block-label"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue1"
                         tuiCheckbox
@@ -46,9 +46,9 @@ <h3 class="title">Lighting</h3>
         @if (testForm.get('testValue2')!.value) {
             <label
                 tuiBlock
-                class="BlockLabel Checked"
+                class="block-label checked"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue2"
                         tuiCheckbox
@@ -66,9 +66,9 @@ <h3 class="title">Lighting</h3>
         } @else {
             <label
                 tuiBlock
-                class="BlockLabel"
+                class="block-label"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue2"
                         tuiCheckbox
@@ -82,9 +82,9 @@ <h3 class="title">Lighting</h3>
         @if (testForm.get('testValue3')!.value) {
             <label
                 tuiBlock
-                class="BlockLabel Checked"
+                class="block-label checked"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue3"
                         tuiCheckbox
@@ -102,9 +102,9 @@ <h3 class="title">Lighting</h3>
         } @else {
             <label
                 tuiBlock
-                class="BlockLabel"
+                class="block-label"
             >
-                <div class="LeftSize">
+                <div class="left-size">
                     <input
                         formControlName="testValue3"
                         tuiCheckbox

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Lighting/lighting.component.less
@@ -20,17 +20,17 @@
     height: 30px;
 }
 
-.LeftSize {
+.left-size {
     display: flex;
     gap: 1rem;
     align-items: center;
 }
 
-.BlockLabel {
+.block-label {
     justify-content: space-between;
 }
 
-.Checked {
+.checked {
     background-color: #fcba1414;
 }
 

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.html
@@ -1,4 +1,4 @@
-<div class="Safety">
+<div class="safety">
     <h3 class="title">Safety</h3>
     <form
         orientation="vertical"
@@ -9,7 +9,7 @@ <h3 class="title">Safety</h3>
     >
         <label
             tuiBlock
-            class="BlockLabel"
+            class="block-label"
         >
             Alarm system
             <input
@@ -20,7 +20,7 @@ <h3 class="title">Safety</h3>
         </label>
         <label
             tuiBlock
-            class="BlockLabel"
+            class="block-label"
         >
             Close the curtains
             <input
@@ -31,7 +31,7 @@ <h3 class="title">Safety</h3>
         </label>
         <label
             tuiBlock
-            class="BlockLabel"
+            class="block-label"
         >
             Video monitoring
             <input
@@ -42,7 +42,7 @@ <h3 class="title">Safety</h3>
         </label>
         <label
             tuiBlock
-            class="BlockLabel"
+            class="block-label"
         >
             Enable gas sensor notification
             <input

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/Safety/safety.component.less
@@ -1,4 +1,4 @@
-.Safety {
+.safety {
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -20,7 +20,7 @@
     padding-bottom: 20%;
 }
 
-.BlockLabel {
+.block-label {
     display: flex;
     justify-content: space-between;
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/SmallCard/small-card.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/SmallCard/small-card.component.html
@@ -2,7 +2,7 @@
     tuiCardLarge
     tuiHeader
     tuiSurface="elevated"
-    class="Button"
+    class="button"
 >
     <aside tuiAccessories>
         <tui-avatar

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/SmallCard/small-card.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/SmallCard/small-card.component.less
@@ -16,7 +16,7 @@
     margin-bottom: auto;
 }
 
-.Button {
+.button {
     max-width: max-content;
     padding-right: 28px;
     gap: 15px;

diff --git a/...ga-lumbermill/src/dashboards/iot/components/СlimateСontrol/climate-control.component.html b/...ga-lumbermill/src/dashboards/iot/components/СlimateСontrol/climate-control.component.html
@@ -1,6 +1,6 @@
 <div class="climate-control">
     <h3 class="title">Climate control</h3>
-    <div class="Group">
+    <div class="group">
         <tui-input-number [(ngModel)]="value">Room temperature С°</tui-input-number>
         <tui-input-number [(ngModel)]="value2">Water temperature</tui-input-number>
         <tui-input-number [(ngModel)]="value3">Air humidity, %</tui-input-number>

diff --git a/...ga-lumbermill/src/dashboards/iot/components/СlimateСontrol/climate-control.component.less b/...ga-lumbermill/src/dashboards/iot/components/СlimateСontrol/climate-control.component.less
@@ -15,7 +15,7 @@
     margin: 0;
 }
 
-.Group {
+.group {
     display: flex;
     flex-direction: column;
     gap: 10px;

diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html
@@ -2,7 +2,7 @@
     class="tiles"
     [debounce]="500"
 >
-    <div class="Cards">
+    <div class="cards">
         <app-small-card
             img="/door.svg"
             name="Open the door"
@@ -24,16 +24,16 @@
             name="Turn on the kettle"
         />
     </div>
-    <div class="Column">
-        <div class="Row">
-            <div class="Grow"><app-safety /></div>
-            <div class="Grow"><app-line-chart /></div>
-            <div class="Grow"><app-climate-control /></div>
+    <div class="column">
+        <div class="row">
+            <div class="grow"><app-safety /></div>
+            <div class="grow"><app-line-chart /></div>
+            <div class="grow"><app-climate-control /></div>
         </div>
-        <div class="Row">
-            <div class="Grow"><app-lighting /></div>
-            <div class="Grow"><app-bar-chart /></div>
-            <div class="Grow"><app-cleaning /></div>
+        <div class="row">
+            <div class="grow"><app-lighting /></div>
+            <div class="grow"><app-bar-chart /></div>
+            <div class="grow"><app-cleaning /></div>
         </div>
     </div>
 </tui-tiles>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.less b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.less
@@ -5,60 +5,60 @@
     padding-top: 20px;
 }
 
-.TilesBlock {
+.tiles-block {
     max-width: 500px;
 }
 
-.Cards {
+.cards {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
     justify-content: space-around;
 }
 
-.Group2 {
+.group2 {
     display: flex;
     flex-wrap: wrap;
     flex: auto;
     gap: 20px;
 }
 
-.Group3 {
+.group3 {
     display: flex;
     flex: 1;
 }
 
-.Grow {
+.grow {
     width: 100%;
     height: 100%;
 }
 
-.Row {
+.row {
     display: grid;
     grid-template-columns: 4fr 6fr 4fr;
     gap: 15px;
 }
 
 @media (max-width: 900px) {
-    .Row {
+    .row {
         display: flex;
         flex: 1;
         flex-wrap: wrap;
     }
 
-    .Grow {
+    .grow {
         height: max-content;
     }
 }
 
 @media (max-width: 570px) {
-    .Grow {
+    .grow {
         width: 100%;
     }
 }
 
-.Column {
+.column {
     display: flex;
     gap: 10px;
     flex-direction: column;