Merge pull request #201 from navikt/less-til-scss

Byttet ut Less med Sass/SCSS
navikt · Aug 9, 2024 · cf5ee24 · cf5ee24
2 parents 42c8a24 + 7ce25f0
commit cf5ee24
Show file tree

Hide file tree

Showing 15 changed files with 352 additions and 325 deletions.
diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        <link rel="stylesheet" href="/src/styles.less" />
+        <link rel="stylesheet" href="/src/styles.scss" />
         <title>Arbeidsforhold - @navikt/arbeidsforhold</title>
     </head>
     <body>

diff --git a/example/less-watch-compiler.config.json b/example/less-watch-compiler.config.json
diff --git a/example/package.json b/example/package.json
@@ -11,7 +11,6 @@
     "type": "module",
     "scripts": {
         "start": "npm-run-all -p start:*",
-        "start:less": "less-watch-compiler",
         "start:vite": "vite"
     },
     "dependencies": {
@@ -40,8 +39,7 @@
         "@vitejs/plugin-react": "4.3.1",
         "classnames": "2.5.1",
         "fetch-mock": "10.1.0",
-        "less": "4.2.0",
-        "less-watch-compiler": "1.16.3",
+        "sass": "^1.77.8",
         "vite": "5.3.5",
         "vite-tsconfig-paths": "4.3.2",
         "vitest": "2.0.5",

diff --git a/example/src/styles.less b/example/src/styles.less
diff --git a/example/src/styles.scss b/example/src/styles.scss
@@ -0,0 +1,41 @@
+@use '@navikt/arbeidsforhold/style.css';
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #efefef;
+}
+
+.example__app {
+  display: flex;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.example__content {
+  width: 100%;
+  max-width: 800px;
+  margin: 2rem 0;
+}
+
+.example__header {
+  text-align: center;
+}
+
+.example__section {
+  padding: 2rem 1rem;
+  margin: 2rem 0;
+  background: white;
+}
+
+.example__sprak {
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.example__velger {
+  display: flex;
+  justify-content: center;
+  margin: 0.5rem 0;
+}