chore: revamp the styles customization and update to Dart Sass syntax

silviyaboteva · silviyaboteva · commit df59f99443ac · 2024-11-28T11:54:11.000+02:00
diff --git a/examples/kendo-react-homepage-demo/public/index.html b/examples/kendo-react-homepage-demo/public/index.html
@@ -22,22 +22,9 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <title>React App</title>
-  <style>
-    html {
-      height: 100%;
-      overflow: hidden;
-      border: 1px solid rgba(0, 0, 0, .8);
-    }
-
-    body {
-      overflow: hidden;
-      font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-        "Segoe UI Symbol", "Noto Color Emoji";
-    }
-  </style>
 </head>
 
-<body>
+<body className="k-body">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <!--
diff --git a/examples/kendo-react-homepage-demo/src/App.jsx b/examples/kendo-react-homepage-demo/src/App.jsx
@@ -27,7 +27,7 @@ class App extends Component {
     return (
       <ApolloProvider client={client}>
         <h1 className="demo-heading">GitHub Issues Demo</h1>
-        <TabStrip selected={this.state.selected} onSelect={this.handleSelect} tabPosition={"top"}>
+        <TabStrip selected={this.state.selected} onSelect={this.handleSelect} tabPosition={"top"} tabAlignment={'end'}>
           <TabStripTab title="React Repo">
             <KendoGridContainer repo="react" />
           </TabStripTab>
diff --git a/examples/kendo-react-homepage-demo/src/components/DetailComponent.jsx b/examples/kendo-react-homepage-demo/src/components/DetailComponent.jsx
@@ -28,7 +28,7 @@ export class DetailComponent extends React.Component {
             <div style={{ padding: 0 }}>
                 <div className="row" style={{ height: 300 }}>
                     <div className="col-2" >
-                        <h4><strong>Author:</strong> {dataItem.node.author.login}</h4>
+                        <strong>Author: {dataItem.node.author.login}</strong>
                         <Chart style={{ width: '100%', height: 250 }} transitions={false}>
                             <ChartTitle text="Issue labels" color="black" position='bottom' font="19pt sans-serif" />
                             <ChartTooltip render={defaultTooltipRender} />
@@ -41,7 +41,7 @@ export class DetailComponent extends React.Component {
                         </Chart>
                     </div>
                     <div className="col-10 issue-description" style={{ overflowY: 'scroll', height: '100%' }}>
-                        <h4>Description</h4>
+                        <strong>Description</strong>
                         <ReactMarkDown children={dataItem.node.body} />
                     </div>
                 </div>
diff --git a/examples/kendo-react-homepage-demo/src/components/KendoGridContainer.jsx b/examples/kendo-react-homepage-demo/src/components/KendoGridContainer.jsx
@@ -113,7 +113,7 @@ export class KendoGridContainer extends React.Component {
                                     onDataStateChange={(e) => { this.setState(e.dataState); }}
                                     expandField="expanded"
                                     onExpandChange={this.expandChange}
-                                    style={{ height: '100%', overflow: 'auto', paddingBottom: 57 }}
+                                    style={{ height: '100%', overflow: 'auto', borderInline: 0 }}
                                     detail={(props) => <DetailComponent {...props} makeChartData={this.makeChartData} />}
                                 >
                                     <GridColumn field="node.number" title="ID" width={100} />
diff --git a/examples/kendo-react-homepage-demo/src/styles/main.scss b/examples/kendo-react-homepage-demo/src/styles/main.scss
@@ -1,15 +1,23 @@
+@use "@progress/kendo-theme-material/scss/all.scss" as * with(
+  $kendo-font-family: (-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji),
+  $kendo-colors: (
+    "primary": #007bff,
+    "primary-on-surface": #007bff,
+  ),
+  $kendo-tabstrip-content-padding-x: 0,
+  $kendo-tabstrip-content-padding-y: 0,
+);
+
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/grid";
 
-
-@import "~@progress/kendo-theme-material/dist/all.scss";
-
 @import "./fonts.scss";
 
+
 html,
 body {
   height: 100vh;
@@ -51,34 +59,22 @@ body {
     background-attachment: local, local, scroll, scroll;
   }
 
-  .k-grid-container {
-    // max-height: 490px;
-  }
-
   .k-grid-pager {
     width: 100%;
     position: fixed;
     bottom: 0;
   }
 }
 
-.k-tabstrip .k-animation-container,
-.k-tabstrip .k-child-animation-container,
-div[role="tabpanel"],
-div[role="tabpanel"] > div {
-  height: 100%;
-}
-
 .demo-heading {
-  // position: absolute;
   font-family: "Metric";
   color: $primary;
   display: flex;
   position: absolute;
   left: 1rem;
   justify-content: flex-end;
   font-size: 1.75rem;
-  margin-top: 7px;
+  margin-top: 12px;
   margin-bottom: auto;
 }
 
@@ -87,21 +83,3 @@ div[role="tabpanel"] > div {
   width: 100%;
 }
 
-.k-tabstrip {
-  height: 100%;
-  position: relative;
-
-  .k-tabstrip-items {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .k-content {
-    padding: 0;
-  }
-
-  .k-animation-container {
-    display: block;
-    widows: 100%;
-  }
-}

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ export class KendoGridContainer extends React.Component {`
`113`	`113`	`onDataStateChange={(e) => { this.setState(e.dataState); }}`
`114`	`114`	`expandField="expanded"`
`115`	`115`	`onExpandChange={this.expandChange}`
`116`		`- style={{ height: '100%', overflow: 'auto', paddingBottom: 57 }}`
	`116`	`+ style={{ height: '100%', overflow: 'auto', borderInline: 0 }}`
`117`	`117`	`detail={(props) => <DetailComponent {...props} makeChartData={this.makeChartData} />}`
`118`	`118`	`>`
`119`	`119`	`<GridColumn field="node.number" title="ID" width={100} />`