diff --git a/example/index.html b/example/index.html
index 4140ae8d..316cf895 100644
--- a/example/index.html
+++ b/example/index.html
@@ -3,7 +3,7 @@
-
+
Arbeidsforhold - @navikt/arbeidsforhold
diff --git a/example/less-watch-compiler.config.json b/example/less-watch-compiler.config.json
deleted file mode 100644
index 0afca770..00000000
--- a/example/less-watch-compiler.config.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "watchFolder": "src",
- "outputFolder": "public",
- "mainFile": "styles.less",
- "plugins": "npm-import=\"prefix=~\""
-}
diff --git a/example/package.json b/example/package.json
index 5a82c2f1..19a6f2bc 100644
--- 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
deleted file mode 100644
index 54bb8821..00000000
--- a/example/src/styles.less
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '@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;
-}
diff --git a/example/src/styles.scss b/example/src/styles.scss
new file mode 100644
index 00000000..5e95bf68
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3ea96ada..4d97bd8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@navikt/arbeidsforhold",
- "version": "4.0.0",
+ "version": "4.0.1-beta.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@navikt/arbeidsforhold",
- "version": "4.0.0",
+ "version": "4.0.1-beta.0",
"license": "MIT",
"workspaces": [
"example"
@@ -48,6 +48,7 @@
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.36.0",
+ "sass": "1.77.8",
"typescript": "5.5.4",
"vite": "5.3.5",
"vite-tsconfig-paths": "4.3.2",
@@ -101,8 +102,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",
@@ -2591,15 +2591,6 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
- "node_modules/amdefine": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
- "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
- "dev": true,
- "engines": {
- "node": ">=0.4.2"
- }
- },
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2620,6 +2611,19 @@
"node": ">=4"
}
},
+ "node_modules/anymatch": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+ "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+ "dev": true,
+ "dependencies": {
+ "normalize-path": "^3.0.0",
+ "picomatch": "^2.0.4"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/arbeidsforhold-example": {
"resolved": "example",
"link": true
@@ -2915,6 +2919,18 @@
"require-from-string": "^2.0.2"
}
},
+ "node_modules/binary-extensions": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+ "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+ "dev": true,
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -3122,6 +3138,42 @@
"node": ">= 16"
}
},
+ "node_modules/chokidar": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+ "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+ "dev": true,
+ "dependencies": {
+ "anymatch": "~3.1.2",
+ "braces": "~3.0.2",
+ "glob-parent": "~5.1.2",
+ "is-binary-path": "~2.1.0",
+ "is-glob": "~4.0.1",
+ "normalize-path": "~3.0.0",
+ "readdirp": "~3.6.0"
+ },
+ "engines": {
+ "node": ">= 8.10.0"
+ },
+ "funding": {
+ "url": "https://paulmillr.com/funding/"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/chokidar/node_modules/glob-parent": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+ "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+ "dev": true,
+ "dependencies": {
+ "is-glob": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -3725,12 +3777,6 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
- "node_modules/dom-walk": {
- "version": "0.1.2",
- "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
- "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
- "dev": true
- },
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -4525,12 +4571,6 @@
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
},
- "node_modules/extend": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
- "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
- "dev": true
- },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5007,16 +5047,6 @@
"node": "*"
}
},
- "node_modules/global": {
- "version": "4.4.0",
- "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
- "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
- "dev": true,
- "dependencies": {
- "min-document": "^2.19.0",
- "process": "^0.11.10"
- }
- },
"node_modules/globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -5303,6 +5333,12 @@
"node": ">=0.10.0"
}
},
+ "node_modules/immutable": {
+ "version": "4.3.7",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+ "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+ "dev": true
+ },
"node_modules/import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -5400,15 +5436,6 @@
"node": ">= 0.4"
}
},
- "node_modules/interpret": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
- "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
- "dev": true,
- "engines": {
- "node": ">= 0.10"
- }
- },
"node_modules/is-arguments": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -5471,6 +5498,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/is-binary-path": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+ "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+ "dev": true,
+ "dependencies": {
+ "binary-extensions": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/is-boolean-object": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -6047,32 +6086,6 @@
"integrity": "sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==",
"dev": true
},
- "node_modules/less-watch-compiler": {
- "version": "1.16.3",
- "resolved": "https://registry.npmjs.org/less-watch-compiler/-/less-watch-compiler-1.16.3.tgz",
- "integrity": "sha512-cxGUt8YdPpPPB72w1dfzPVXML5JYgfExXbFvDfG5XBU9qvj6uVjwTY2qOgwvf09Au5p2RvmWVcNps/cMTojJNQ==",
- "dev": true,
- "dependencies": {
- "amdefine": ">= 0.1.0",
- "commander": "^8.0.0",
- "extend": ">= 2.0.0",
- "global": "^4.3.1",
- "less": "^4.0.0",
- "shelljs": ">= 0.4.0"
- },
- "bin": {
- "less-watch-compiler": "dist/less-watch-compiler.js"
- }
- },
- "node_modules/less-watch-compiler/node_modules/commander": {
- "version": "8.3.0",
- "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
- "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
- "dev": true,
- "engines": {
- "node": ">= 12"
- }
- },
"node_modules/less/node_modules/make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -6359,15 +6372,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/min-document": {
- "version": "2.19.0",
- "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
- "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
- "dev": true,
- "dependencies": {
- "dom-walk": "^0.1.0"
- }
- },
"node_modules/min-indent": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -6506,6 +6510,15 @@
"semver": "bin/semver"
}
},
+ "node_modules/normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/normalize-svg-path": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
@@ -7731,15 +7744,6 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
- "node_modules/process": {
- "version": "0.11.10",
- "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
- "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
- "dev": true,
- "engines": {
- "node": ">= 0.6.0"
- }
- },
"node_modules/promise": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.0.4.tgz",
@@ -8008,16 +8012,16 @@
"node": ">=4"
}
},
- "node_modules/rechoir": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
- "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+ "node_modules/readdirp": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+ "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"dependencies": {
- "resolve": "^1.1.6"
+ "picomatch": "^2.2.1"
},
"engines": {
- "node": ">= 0.10"
+ "node": ">=8.10.0"
}
},
"node_modules/redent": {
@@ -8483,6 +8487,23 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "node_modules/sass": {
+ "version": "1.77.8",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+ "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/sax": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -8579,23 +8600,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/shelljs": {
- "version": "0.8.5",
- "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
- "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
- "dev": true,
- "dependencies": {
- "glob": "^7.0.0",
- "interpret": "^1.0.0",
- "rechoir": "^0.6.2"
- },
- "bin": {
- "shjs": "bin/shjs"
- },
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/side-channel": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
diff --git a/package.json b/package.json
index dd8207fb..f39aa630 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,11 @@
"name": "@navikt/arbeidsforhold",
"author": "NAVIKT",
"license": "MIT",
- "version": "4.0.0",
+ "version": "4.0.1-beta.0",
"description": "React modul som viser brukerens arbeidsforhold",
"main": "dist/index.cjs.js",
"exports": {
+ "./style.css": "./dist/style.css",
".": {
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs.js",
@@ -18,8 +19,7 @@
"./mockListe": {
"import": "./dist/mockListe.esm.js",
"require": "./dist/mockListe.cjs.js"
- },
- "./style.css": "./dist/style.css"
+ }
},
"types": "dist/types/index.d.ts",
"files": [
@@ -103,6 +103,7 @@
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.36.0",
+ "sass": "1.77.8",
"typescript": "5.5.4",
"vite": "5.3.5",
"vite-tsconfig-paths": "4.3.2",
diff --git a/src/components/error/Error.less b/src/components/error/Error.scss
similarity index 60%
rename from src/components/error/Error.less
rename to src/components/error/Error.scss
index 596ad819..2baaa3c4 100644
--- a/src/components/error/Error.less
+++ b/src/components/error/Error.scss
@@ -1,5 +1,7 @@
+@use "../../media.scss" as mq;
+
.error {
&__container {
padding: 1rem 0;
}
-}
+}
\ No newline at end of file
diff --git a/src/components/spinner/Spinner.less b/src/components/spinner/Spinner.scss
similarity index 78%
rename from src/components/spinner/Spinner.less
rename to src/components/spinner/Spinner.scss
index ce5aec19..51d3c091 100644
--- a/src/components/spinner/Spinner.less
+++ b/src/components/spinner/Spinner.scss
@@ -1,7 +1,9 @@
+@use "/src/media.scss" as mq;
+
.spinner {
&__wrapper {
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
-}
+}
\ No newline at end of file
diff --git a/src/index.less b/src/index.scss
similarity index 50%
rename from src/index.less
rename to src/index.scss
index 73c58e05..cffe508e 100644
--- a/src/index.less
+++ b/src/index.scss
@@ -1,12 +1,8 @@
-@desktop: ~"all and (min-width: 959px)";
-@tablet: ~"all and (max-width: 959px)";
-@mobile: ~"all and (max-width: 420px)";
+@use "./components/spinner/Spinner.scss";
+@use "./components/error/Error.scss";
-@import "./components/spinner/Spinner.less";
-@import "./components/error/Error.less";
-
-@import "modules/af-detaljert/Detaljert.less";
-@import "modules/af-liste/Liste.less";
+@use "modules/af-detaljert/Detaljert.scss";
+@use "modules/af-liste/Liste.scss";
input,
button,
@@ -27,4 +23,4 @@ textarea {
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
-}
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 170a337e..6dcd62bb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import './index.less';
+import './index.scss';
import { setUpMock } from './clients/apiMock';
import { Environment } from './utils/environment';
diff --git a/src/media.scss b/src/media.scss
new file mode 100644
index 00000000..f71a3d03
--- /dev/null
+++ b/src/media.scss
@@ -0,0 +1,3 @@
+$desktop: "all and (min-width: 959px)";
+$tablet: "all and (max-width: 959px)";
+$mobile: "all and (max-width: 420px)";
\ No newline at end of file
diff --git a/src/modules/af-detaljert/Detaljert.less b/src/modules/af-detaljert/Detaljert.less
deleted file mode 100644
index ff995d08..00000000
--- a/src/modules/af-detaljert/Detaljert.less
+++ /dev/null
@@ -1,147 +0,0 @@
-.af-detaljert {
- /** Intro-seksjon */
- &__intro {
- display: flex;
- flex-wrap: wrap;
- @media @desktop {
- padding: 0 0 0.25rem 0;
- }
- @media @tablet {
- padding: 0 0 0.5rem 0;
- }
- }
- &__seksjon {
- @media @desktop {
- width: 50%;
- padding-right: 2rem;
- box-sizing: border-box;
- }
- @media @tablet {
- width: 100%;
- }
- }
-
- &__arbeidsgiver {
- padding: 0.5rem 0;
- }
-
- &__orgnr {
- padding: 0.25rem 0;
- }
- &__periode {
- display: flex;
- flex-direction: row;
- align-items: flex-end;
- }
-
- &__arbeidsavtaleinnhold {
- display: flex;
- flex-wrap: wrap;
- }
-
- &__boks {
- margin: 0.75rem 0;
- width: 50%;
- padding-right: 2rem;
-
- @media @mobile {
- width: 100%;
- }
-
- & dd {
- margin: 0;
- }
- }
-
- /** Tabs */
- /** ---------------------- */
- &__tabs {
- margin: 1rem 0;
- @media @mobile {
- display: none;
- }
- }
-
- /** Tabellen */
- /** ---------------------- */
- &__tableWrapper {
- margin: 2rem 1rem;
- }
- &__table {
- width: 100%;
- border-collapse: collapse;
-
- @media @mobile {
- display: none;
- }
-
- tr {
- border-bottom: 1px solid #979797;
- }
-
- th {
- text-align: left;
- width: 33%;
- padding: 0.5rem 0;
- }
-
- td {
- padding: 0.5rem 0;
- width: 33%;
- }
- }
-
- /** Print-funksjonalitet */
- /** ---------------------- */
- &__print-button-oversikt {
- margin-left: 1rem;
- margin-top: 1.5rem;
-
- svg {
- width: 22px;
- margin-right: 0.5rem;
- }
-
- button {
- display: flex;
- background-color: transparent;
- cursor: pointer;
- align-items: center;
- color: var(--a-surface-action);
- }
- }
- &__print-button {
- display: flex;
- border: 0px;
- text-decoration: underline;
-
- a {
- display: flex;
- }
-
- svg {
- width: 22px;
- margin-right: 0.5rem;
- }
- }
- &__print-button-modal {
- margin: 1rem 0;
- text-decoration: underline;
- cursor: pointer;
-
- a {
- display: flex;
- }
-
- svg {
- width: 22px;
- margin-right: 0.5rem;
- }
- }
- &__checkbox {
- padding: 0.25rem 0;
- }
- &__header {
- margin: 1rem 0 0 0;
- }
-}
diff --git a/src/modules/af-detaljert/Detaljert.scss b/src/modules/af-detaljert/Detaljert.scss
new file mode 100644
index 00000000..3ac15d8c
--- /dev/null
+++ b/src/modules/af-detaljert/Detaljert.scss
@@ -0,0 +1,161 @@
+@use "../../media.scss" as mq;
+
+.af-detaljert {
+
+ /** Intro-seksjon */
+ &__intro {
+ display: flex;
+ flex-wrap: wrap;
+
+ @media #{mq.$desktop} {
+ padding: 0 0 0.25rem 0;
+ }
+
+ @media #{mq.$tablet} {
+ padding: 0 0 0.5rem 0;
+ }
+ }
+
+ &__seksjon {
+ @media #{mq.$desktop} {
+ width: 50%;
+ padding-right: 2rem;
+ box-sizing: border-box;
+ }
+
+ @media #{mq.$tablet} {
+ width: 100%;
+ }
+ }
+
+ &__arbeidsgiver {
+ padding: 0.5rem 0;
+ }
+
+ &__orgnr {
+ padding: 0.25rem 0;
+ }
+
+ &__periode {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ }
+
+ &__arbeidsavtaleinnhold {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &__boks {
+ margin: 0.75rem 0;
+ width: 50%;
+ padding-right: 2rem;
+
+ @media #{mq.$mobile} {
+ width: 100%;
+ }
+
+ & dd {
+ margin: 0;
+ }
+ }
+
+ /** Tabs */
+ /** ---------------------- */
+ &__tabs {
+ margin: 1rem 0;
+
+ @media #{mq.$mobile} {
+ display: none;
+ }
+ }
+
+ /** Tabellen */
+ /** ---------------------- */
+ &__tableWrapper {
+ margin: 2rem 1rem;
+ }
+
+ &__table {
+ width: 100%;
+ border-collapse: collapse;
+
+ @media #{mq.$mobile} {
+ display: none;
+ }
+
+ tr {
+ border-bottom: 1px solid #979797;
+ }
+
+ th {
+ text-align: left;
+ width: 33%;
+ padding: 0.5rem 0;
+ }
+
+ td {
+ padding: 0.5rem 0;
+ width: 33%;
+ }
+ }
+
+ /** Print-funksjonalitet */
+ /** ---------------------- */
+ &__print-button-oversikt {
+ margin-left: 1rem;
+ margin-top: 1.5rem;
+
+ svg {
+ width: 22px;
+ margin-right: 0.5rem;
+ }
+
+ button {
+ display: flex;
+ background-color: transparent;
+ cursor: pointer;
+ align-items: center;
+ color: var(--a-surface-action);
+ }
+ }
+
+ &__print-button {
+ display: flex;
+ border: 0px;
+ text-decoration: underline;
+
+ a {
+ display: flex;
+ }
+
+ svg {
+ width: 22px;
+ margin-right: 0.5rem;
+ }
+ }
+
+ &__print-button-modal {
+ margin: 1rem 0;
+ text-decoration: underline;
+ cursor: pointer;
+
+ a {
+ display: flex;
+ }
+
+ svg {
+ width: 22px;
+ margin-right: 0.5rem;
+ }
+ }
+
+ &__checkbox {
+ padding: 0.25rem 0;
+ }
+
+ &__header {
+ margin: 1rem 0 0 0;
+ }
+}
\ No newline at end of file
diff --git a/src/modules/af-liste/Liste.less b/src/modules/af-liste/Liste.scss
similarity index 96%
rename from src/modules/af-liste/Liste.less
rename to src/modules/af-liste/Liste.scss
index 77b68410..8fd8a26b 100644
--- a/src/modules/af-liste/Liste.less
+++ b/src/modules/af-liste/Liste.scss
@@ -1,20 +1,26 @@
+@use "../../media.scss" as mq;
+
.af-liste {
&__tekst {
margin: 0 0 0.2rem 0;
}
+
&__flex-rad {
padding: 0.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #979797;
+
&:last-child {
border-bottom: 0;
}
}
+
&__flex-innhold {
min-width: 7rem;
}
+
&__vis-flere {
align-items: center;
background: none;
@@ -30,13 +36,16 @@
width: 20px;
}
}
+
&__maskinelt-avsluttet {
display: flex;
align-items: center;
}
+
&__tittel {
flex: 1;
}
+
&__ekspander {
display: flex;
justify-content: flex-start;
@@ -47,12 +56,15 @@
padding: 0;
background-color: transparent;
}
+
&__month {
text-transform: capitalize;
}
+
&__rapporteringsperiode {
width: 15rem;
}
+
&__knapp {
background: none;
border: none;
@@ -64,6 +76,7 @@
text-decoration: none;
}
}
+
&__print-button {
margin-top: 0.5rem;
display: block;
@@ -77,4 +90,4 @@
margin-right: 0.5rem;
}
}
-}
+}
\ No newline at end of file