mirror of
https://github.com/navikt/aksel.git
synced 2026-10-15 18:22:02 +00:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 navikt
|
c250372988 |
No files matched your search
@@ -1 +0,0 @@
|
||||
509e1f2ded31a7d804422d05025454fac5a4c988
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
name: Bug Report
|
||||
about: Meld inn bugs eller feil
|
||||
title: "[BUG]"
|
||||
labels: "bug \U0001F41B"
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
## Hvilken av tjenestene våre gjelder det?
|
||||
|
||||
<!--
|
||||
Sett en x i type pakke det gjelder:
|
||||
- [x] type
|
||||
-->
|
||||
|
||||
- [ ] `Komponenter`
|
||||
- [ ] `Stiler`
|
||||
- [ ] `Ikoner`
|
||||
- [ ] `Annet`
|
||||
|
||||
## Beskriv feilen/problemet
|
||||
|
||||
<!--
|
||||
> Beskriv hva slags problem(er) som oppstår
|
||||
|
||||
> Hva forventet du skulle oppstå?
|
||||
|
||||
> Hva skjedde istedenfor?
|
||||
-->
|
||||
|
||||
(skriv her.)
|
||||
|
||||
## Steg for å reprodusere problemet
|
||||
|
||||
<!--
|
||||
1. Steg en
|
||||
2. Steg to
|
||||
3. ....
|
||||
-->
|
||||
|
||||
(skriv her.)
|
||||
|
||||
## Eksempel/Tilleggsinformasjon
|
||||
|
||||
<!--
|
||||
Screenshots eller kodesnippets
|
||||
Legg gjerne ved ekstrainfo som nettleser, desktop/mobil etc
|
||||
-->
|
||||
|
||||
```
|
||||
Hvis mulig, legg gjerne til kode her, evt lenke til kode i repo
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
name: Feature Request
|
||||
about: Foreslå noe nytt for designsystemet
|
||||
title: "[NEW]"
|
||||
labels: new ✨
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
## Beskriv forespørselen
|
||||
|
||||
(skriv her.)
|
||||
|
||||
## Hvilken funksjon vil dette har for bruker?
|
||||
|
||||
(skriv her.)
|
||||
|
||||
## Eksempler/Tilleggsinformasjon
|
||||
|
||||
<!--
|
||||
Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc.
|
||||
Link gjerne til relaterte issues her også.
|
||||
-->
|
||||
|
||||
(skriv her.)
|
||||
@@ -1,97 +1,68 @@
|
||||
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
|
||||
|
||||
name: Build -> Test -> Publish
|
||||
name: Build, test and maybe publish
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
pull_request:
|
||||
branches: [master]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
test-build:
|
||||
build:
|
||||
if: "!contains(github.event.head_commit.message, '[ci skip]')"
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0 # Required to retrieve git history
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Boot
|
||||
run: yarn boot
|
||||
- name: Eslint and Stylelint
|
||||
run: yarn lint
|
||||
- name: Test
|
||||
run: yarn test
|
||||
node-version: 13
|
||||
- run: yarn install --frozen-lockfile
|
||||
- run: yarn lint
|
||||
|
||||
publish-npm:
|
||||
needs: test-build
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
|
||||
if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: "0"
|
||||
token: ${{secrets.GIT_REPO}}
|
||||
- uses: actions/setup-node@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
registry-url: https://registry.npmjs.org
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Boot
|
||||
run: yarn boot
|
||||
- name: Setup github connection for auth
|
||||
run: |
|
||||
git config --global user.email "github-actions[bot]@users.noreply.github.com"
|
||||
git config --global user.name "github-actions[bot]"
|
||||
git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
|
||||
node-version: 13
|
||||
- run: yarn install --frozen-lockfile
|
||||
- run: yarn gulp:build-nodocs
|
||||
- run: git config --global user.email "ken.aleksander.johansen@nav.no"
|
||||
- run: git config --global user.name "navikt"
|
||||
- run: |
|
||||
git remote set-url origin https://KenAJoh:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
|
||||
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
|
||||
yarn lerna version patch --include-merged-tags --no-private --yes
|
||||
yarn lerna publish from-package --yes
|
||||
env:
|
||||
NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
|
||||
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
|
||||
|
||||
- name: Update changed packages with PATCH
|
||||
if: "contains(github.event.head_commit.message, '[fix]')"
|
||||
run: yarn lerna version patch --include-merged-tags --yes
|
||||
- name: Update changed packages with MINOR
|
||||
if: "contains(github.event.head_commit.message, '[feature]')"
|
||||
run: yarn lerna version minor --include-merged-tags --yes
|
||||
- name: Update changed packages with MAJOR
|
||||
if: "contains(github.event.head_commit.message, '[breaking]')"
|
||||
run: yarn lerna version major --include-merged-tags --yes
|
||||
- name: Publish to NPM registry
|
||||
run: yarn lerna publish --no-verify-access from-package --yes
|
||||
|
||||
- name: Create a .npmrc file for the github package repository
|
||||
uses: FerLuisxd/create-npmrc@3
|
||||
publish-pages:
|
||||
needs: publish-npm
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
org_name: navikt
|
||||
node-version: 13
|
||||
- run: yarn install --frozen-lockfile
|
||||
- run: yarn boot
|
||||
- run: yarn build-guideline-app
|
||||
|
||||
- name: Deploy 🚀
|
||||
uses: JamesIves/github-pages-deploy-action@3.6.2
|
||||
with:
|
||||
GITHUB_TOKEN: ${{secrets.GIT_REPO}}
|
||||
BRANCH: gh-pages
|
||||
FOLDER: website/guideline-app/dist
|
||||
env:
|
||||
AUTH_TOKEN: ${{secrets.GIT_REPO}}
|
||||
- name: Publish to Github registry
|
||||
run: |
|
||||
yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
|
||||
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
|
||||
@@ -1,126 +0,0 @@
|
||||
name: Chromatic
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
pull_request:
|
||||
branches: [master]
|
||||
|
||||
jobs:
|
||||
chromatic-pr:
|
||||
if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Boot
|
||||
run: yarn boot
|
||||
- name: run chromatic
|
||||
uses: chromaui/action@v1
|
||||
id: chromatic_tests
|
||||
continue-on-error: true
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
projectToken: x3xqdfgkujg
|
||||
exitZeroOnChanges: false
|
||||
|
||||
- name: replace storybook url
|
||||
uses: frabert/replace-string-action@v2.0
|
||||
id: storybook_url
|
||||
with:
|
||||
pattern: "(iframe.html)"
|
||||
string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
|
||||
replace-with: ""
|
||||
|
||||
- name: Get commit sha
|
||||
id: vars
|
||||
shell: bash
|
||||
run: |
|
||||
echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
|
||||
|
||||
- name: Find Comment
|
||||
uses: peter-evans/find-comment@v1
|
||||
id: fc
|
||||
with:
|
||||
issue-number: ${{ github.event.pull_request.number }}
|
||||
comment-author: "github-actions[bot]"
|
||||
body-includes: Chromatic build-output
|
||||
|
||||
- name: Create or update comment
|
||||
if: steps.chromatic_tests.outcome == 'success'
|
||||
uses: peter-evans/create-or-update-comment@v1
|
||||
with:
|
||||
comment-id: ${{ steps.fc.outputs.comment-id }}
|
||||
issue-number: ${{ github.event.pull_request.number }}
|
||||
body: |
|
||||
Chromatic build-output:
|
||||
|
||||
- :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
|
||||
- :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
|
||||
- :white_check_mark: SUCCESS :white_check_mark:
|
||||
|
||||
commit: `${{ steps.vars.outputs.sha_short }}`
|
||||
edit-mode: replace
|
||||
|
||||
- name: Create or update failed comment
|
||||
if: steps.chromatic_tests.outcome != 'success'
|
||||
uses: peter-evans/create-or-update-comment@v1
|
||||
with:
|
||||
comment-id: ${{ steps.fc.outputs.comment-id }}
|
||||
issue-number: ${{ github.event.pull_request.number }}
|
||||
body: |
|
||||
**Chromatic build-output**:
|
||||
|
||||
- :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
|
||||
- :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
|
||||
- :no_entry_sign: FAILED :no_entry_sign:, review endringer.
|
||||
|
||||
commit: `${{ steps.vars.outputs.sha_short }}`
|
||||
edit-mode: replace
|
||||
|
||||
chromatic-push:
|
||||
if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Boot
|
||||
run: yarn boot
|
||||
- name: run chromatic
|
||||
uses: chromaui/action@v1
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
projectToken: x3xqdfgkujg
|
||||
autoAcceptChanges: true
|
||||
@@ -1,42 +0,0 @@
|
||||
name: Update Icons
|
||||
|
||||
on:
|
||||
# schedule:
|
||||
# - cron: 0 0 * * *
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Update Icons
|
||||
run: yarn update:icons
|
||||
env:
|
||||
FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
token: ${{ secrets.GIT_REPO }}
|
||||
commit-message: "Ikoner synket fra figma"
|
||||
branch: figma-icons-sync
|
||||
committer: GitHub <noreply@github.com>
|
||||
author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
|
||||
signoff: false
|
||||
delete-branch: true
|
||||
title: "[FIX] Ikonsynk Figma"
|
||||
@@ -1,39 +0,0 @@
|
||||
name: Update tokens
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Update tokens
|
||||
run: yarn update:tokens
|
||||
env:
|
||||
FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
branch: figma-tokens-sync
|
||||
delete-branch: true
|
||||
title: "[FEATURE] Tokens sync Figma"
|
||||
commit-message: "Tokens synket fra figma"
|
||||
committer: GitHub <noreply@github.com>
|
||||
signoff: false
|
||||
+3
-23
@@ -41,7 +41,6 @@ typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
.npmrc
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
@@ -57,7 +56,7 @@ typings/
|
||||
|
||||
# gatsby files
|
||||
.cache/
|
||||
website/**/public
|
||||
public
|
||||
|
||||
# Mac files
|
||||
.DS_Store
|
||||
@@ -72,13 +71,12 @@ yarn-error.log
|
||||
|
||||
# Gatsby build/development autogenerated dirs
|
||||
**/.cache/
|
||||
**/website/public
|
||||
**/public
|
||||
|
||||
# Transpiled package files
|
||||
packages/**/lib
|
||||
packages/**/lib
|
||||
*.d.ts
|
||||
|
||||
.vscode
|
||||
# File created on build in nav-frontend-core
|
||||
*-exports.less
|
||||
|
||||
@@ -100,21 +98,3 @@ examples/webpack/out
|
||||
|
||||
*.d.ts
|
||||
*-exports.less
|
||||
*/figma-api/icons
|
||||
*/ds-icons/png
|
||||
packages/**/css
|
||||
utilities/**/css
|
||||
|
||||
*/static/*.zip
|
||||
*/static/png
|
||||
@navikt/core/icons/NAV-ikonpakke-png.zip
|
||||
@navikt/core/icons/NAV-ikonpakke-svg.zip
|
||||
*/**/NAV-ikonpakke-png.zip
|
||||
*/**/NAV-ikonpakke-svg.zip
|
||||
|
||||
react-docgen.json
|
||||
react-docgen-docs.json
|
||||
cjs
|
||||
esm
|
||||
.vercel
|
||||
_docs.json
|
||||
@@ -1 +0,0 @@
|
||||
_
|
||||
@@ -1,30 +0,0 @@
|
||||
#!/bin/sh
|
||||
if [ -z "$husky_skip_init" ]; then
|
||||
debug () {
|
||||
[ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
|
||||
}
|
||||
|
||||
readonly hook_name="$(basename "$0")"
|
||||
debug "starting $hook_name..."
|
||||
|
||||
if [ "$HUSKY" = "0" ]; then
|
||||
debug "HUSKY env variable is set to 0, skipping hook"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if [ -f ~/.huskyrc ]; then
|
||||
debug "sourcing ~/.huskyrc"
|
||||
. ~/.huskyrc
|
||||
fi
|
||||
|
||||
export readonly husky_skip_init=1
|
||||
sh -e "$0" "$@"
|
||||
exitCode="$?"
|
||||
|
||||
if [ $exitCode != 0 ]; then
|
||||
echo "husky - $hook_name hook exited with code $exitCode (error)"
|
||||
exit $exitCode
|
||||
fi
|
||||
|
||||
exit 0
|
||||
fi
|
||||
@@ -1,4 +0,0 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname $0)/_/husky.sh"
|
||||
|
||||
yarn pretty-quick --staged
|
||||
@@ -1,4 +0,0 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname $0)/_/husky.sh"
|
||||
|
||||
yarn lint
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react(deprecated)/intro" />
|
||||
|
||||
# Utdaterte pakker
|
||||
|
||||
På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
|
||||
|
||||
- PageHeader -> @navikt/ds-react-navno
|
||||
- MicroCard -> @navikt/ds-react-navno
|
||||
|
||||
- StepIndicator -> Horisontal `<Stepper />`
|
||||
@@ -1,17 +0,0 @@
|
||||
.rowgap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.colgap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.colgap[data-theme="dark"],
|
||||
.rowgap[data-theme="dark"] {
|
||||
background-color: #262626;
|
||||
}
|
||||
+2
-55
@@ -1,57 +1,4 @@
|
||||
const getStories = () => {
|
||||
return process.env.stories
|
||||
? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
|
||||
: ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
config.devServer = {
|
||||
stats: "errors-only",
|
||||
};
|
||||
return config;
|
||||
},
|
||||
devServer: {
|
||||
stats: "errors-only",
|
||||
},
|
||||
stories: () => [...getStories(), "./*.stories.mdx"],
|
||||
addons: [
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-a11y",
|
||||
{
|
||||
name: "@storybook/addon-storysource",
|
||||
options: {
|
||||
loaderOptions: {
|
||||
injectStoryParameters: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "@storybook/addon-essentials",
|
||||
options: {
|
||||
actions: false,
|
||||
controls: {
|
||||
hideNoControlsWarning: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
},
|
||||
core: {
|
||||
builder: {
|
||||
name: "webpack5",
|
||||
options: {
|
||||
lazyCompilation: false,
|
||||
fsCache: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
framework: "@storybook/react",
|
||||
typescript: {
|
||||
check: false,
|
||||
checkOptions: {},
|
||||
reactDocgen: false,
|
||||
},
|
||||
stories: ["../packages/**/*.story.@(js|jsx|ts|tsx)"],
|
||||
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { addons } from "@storybook/addons";
|
||||
import NavTheme from "./theme.js";
|
||||
|
||||
addons.setConfig({
|
||||
theme: NavTheme,
|
||||
});
|
||||
+1
-14
@@ -1,16 +1,3 @@
|
||||
import "@navikt/ds-css/index.css";
|
||||
import "@navikt/ds-css-internal/index.css";
|
||||
import "./layout.css";
|
||||
|
||||
export const parameters = {
|
||||
/* actions: { argTypesRegex: "^on[A-Z].*" }, */
|
||||
options: {
|
||||
storySort: {
|
||||
method: "",
|
||||
order: ["ds-icons", "ds-react", ["Default"]],
|
||||
locales: "",
|
||||
},
|
||||
},
|
||||
viewMode: "docs",
|
||||
layout: "centered",
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { create } from "@storybook/theming";
|
||||
|
||||
export default create({
|
||||
base: "light",
|
||||
brandTitle: "NAV Designsystem",
|
||||
});
|
||||
@@ -2,23 +2,10 @@ const path = require("path");
|
||||
|
||||
module.exports = (baseConfig) => {
|
||||
baseConfig.config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
include: [
|
||||
path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
|
||||
],
|
||||
test: /\.less$/,
|
||||
loaders: ["style-loader", "css-loader", "less-loader"],
|
||||
include: path.resolve(__dirname, "../packages/"),
|
||||
});
|
||||
baseConfig.config.resolve.alias = {
|
||||
...baseConfig.config.resolve.alias,
|
||||
"./normalize.css": path.resolve(
|
||||
__dirname,
|
||||
"../node_modules/normalize.css/normalize.css"
|
||||
),
|
||||
"./@navikt/ds-tokens": path.resolve(
|
||||
__dirname,
|
||||
"../node_modules/@navikt/ds-tokens/dist/tokens.css"
|
||||
),
|
||||
};
|
||||
|
||||
return baseConfig.config;
|
||||
};
|
||||
@@ -1,98 +0,0 @@
|
||||
:root {
|
||||
--navds-accordion-color-text: var(--navds-semantic-color-text);
|
||||
--navds-accordion-color-background: var(
|
||||
---navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-accordion-color-text-hover: var(--navds-semantic-color-link);
|
||||
--navds-accordion-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-accordion-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-accordion-color-text-open: var(--navds-semantic-color-text);
|
||||
--navds-accordion-color-text-open-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-accordion-color-background-open: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
}
|
||||
|
||||
.navds-accordion .ReactCollapse--collapse {
|
||||
transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.navds-accordion {
|
||||
background: var(--navds-accordion-color-background);
|
||||
}
|
||||
|
||||
.navds-accordion__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-4);
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--navds-accordion-color-border);
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover {
|
||||
color: var(--navds-accordion-color-text-hover);
|
||||
border-color: var(--navds-accordion-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header {
|
||||
background-color: var(--navds-accordion-color-background-open);
|
||||
color: var(--navds-accordion-color-text-open);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header:hover {
|
||||
border-color: transparent;
|
||||
color: var(--navds-accordion-color-text-open-hover);
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
color: var(--navds-accordion-color-text);
|
||||
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
|
||||
border-bottom: 2px solid var(--navds-accordion-color-border);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open
|
||||
> .navds-accordion__header:hover
|
||||
+ *
|
||||
.navds-accordion__content {
|
||||
border-color: var(--navds-accordion-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--flip {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover
|
||||
> .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
:root {
|
||||
--navds-alert-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-alert-color-error-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
--navds-alert-color-error-background: var(--navds-global-color-red-50);
|
||||
--navds-alert-color-warning-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
--navds-alert-color-warning-background: var(--navds-global-color-orange-50);
|
||||
--navds-alert-color-info-border: var(
|
||||
--navds-semantic-color-feedback-info-border
|
||||
);
|
||||
--navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
|
||||
--navds-alert-color-success-border: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-alert-color-success-background: var(--navds-global-color-green-50);
|
||||
--navds-alert-color-error-icon: var(
|
||||
--navds-semantic-color-feedback-danger-icon
|
||||
);
|
||||
--navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
|
||||
--navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
|
||||
--navds-alert-color-success-icon: var(
|
||||
--navds-semantic-color-feedback-success-icon
|
||||
);
|
||||
--navds-alert-color-icon-background: var(--navds-global-color-white);
|
||||
}
|
||||
|
||||
.navds-alert {
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-alert-color-border);
|
||||
padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-alert__wrapper {
|
||||
max-width: 43.5rem;
|
||||
}
|
||||
|
||||
.navds-alert--small {
|
||||
padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-alert--full-width {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navds-alert > .navds-alert__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
align-self: flex-start;
|
||||
height: var(--navds-font-line-height-xlarge);
|
||||
}
|
||||
|
||||
.navds-alert--small > .navds-alert__icon {
|
||||
font-size: 1.25rem;
|
||||
height: var(--navds-font-line-height-large);
|
||||
}
|
||||
|
||||
.navds-alert--error {
|
||||
border-color: var(--navds-alert-color-error-border);
|
||||
background-color: var(--navds-alert-color-error-background);
|
||||
}
|
||||
|
||||
.navds-alert--error > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-error-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--warning {
|
||||
border-color: var(--navds-alert-color-warning-border);
|
||||
background-color: var(--navds-alert-color-warning-background);
|
||||
}
|
||||
|
||||
.navds-alert--warning > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-warning-icon);
|
||||
background: linear-gradient(
|
||||
var(--navds-alert-color-icon-background),
|
||||
var(--navds-alert-color-icon-background)
|
||||
)
|
||||
center / 16% 60% no-repeat;
|
||||
}
|
||||
|
||||
.navds-alert--info {
|
||||
border-color: var(--navds-alert-color-info-border);
|
||||
background-color: var(--navds-alert-color-info-background);
|
||||
}
|
||||
|
||||
.navds-alert--info > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-info-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--success {
|
||||
border-color: var(--navds-alert-color-success-border);
|
||||
background-color: var(--navds-alert-color-success-background);
|
||||
}
|
||||
|
||||
.navds-alert--success > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-success-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--inline {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
@import "@navikt/ds-tokens";
|
||||
@import "normalize.css";
|
||||
@import "Source-Sans-Pro-regular.css";
|
||||
@import "Source-Sans-Pro-italic.css";
|
||||
@import "Source-Sans-Pro-600.css";
|
||||
@import "print.css";
|
||||
@import "utility.css";
|
||||
|
||||
/* Disabled because of UU concerns */
|
||||
|
||||
/* @import "smooth-scroll.css"; */
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
|
||||
|
||||
color: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--navds-shadow-focus: var(--navds-shadow-focus-inverted);
|
||||
|
||||
color: var(--navds-semantic-color-text-inverted);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--navds-font-family);
|
||||
line-height: 1.333;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--navds-semantic-color-link);
|
||||
}
|
||||
|
||||
/* https://web.dev/prefers-reduced-motion/ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-delay: -1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
background-attachment: initial !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
|
||||
Inlined to avoid the additional HTTP request:
|
||||
https://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
|
||||
/* Black prints faster */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
a[href^="#"]::after,
|
||||
a[href^="javascript:"]::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
/**
|
||||
* Solution copied from blogpost
|
||||
* https://schepp.dev/posts/smooth-scrolling-and-page-search/
|
||||
* Currently disabled
|
||||
*/
|
||||
|
||||
@keyframes smoothscroll1 {
|
||||
from,
|
||||
to {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smoothscroll2 {
|
||||
from,
|
||||
to {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
animation: smoothscroll1 1s;
|
||||
}
|
||||
|
||||
html:focus-within {
|
||||
animation-name: smoothscroll2;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
/*
|
||||
* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
|
||||
*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only,
|
||||
.navds-sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
|
||||
*
|
||||
* Extends the .sr-only class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus,
|
||||
.navds-sr-only.focusable:active,
|
||||
.navds-sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
@@ -1,314 +0,0 @@
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
/* Primary */
|
||||
--navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-button-color-primary-border-focus: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-primary-background: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-primary-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover
|
||||
);
|
||||
--navds-button-color-primary-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Secondary */
|
||||
--navds-button-color-secondary-text: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-secondary-text-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-secondary-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-secondary-border: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-secondary-border-focus-active-hover: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-secondary-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-secondary-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-button-color-secondary-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Tertiary */
|
||||
--navds-button-color-tertiary-text: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-tertiary-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-button-color-tertiary-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-button-color-tertiary-border-focus: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-button-color-tertiary-border-active: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-button-color-tertiary-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
|
||||
/* Danger */
|
||||
--navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-button-color-danger-background: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-button-color-danger-background-hover: var(
|
||||
--navds-semantic-color-interaction-danger-hover
|
||||
);
|
||||
--navds-button-color-danger-background-active: var(
|
||||
--navds-semantic-color-interaction-danger-selected
|
||||
);
|
||||
--navds-button-color-danger-border-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
|
||||
/* Loader */
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-on-button-foreground: currentColor;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Primary */
|
||||
--navds-button-color-primary-text: var(--navds-semantic-color-text);
|
||||
--navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
|
||||
--navds-button-color-primary-background: var(--navds-global-color-blue-200);
|
||||
--navds-button-color-primary-background-hover: var(
|
||||
--navds-global-color-blue-300
|
||||
);
|
||||
--navds-button-color-primary-background-active: var(
|
||||
--navds-global-color-blue-400
|
||||
);
|
||||
|
||||
/* Secondary */
|
||||
--navds-button-color-secondary-text: var(--navds-global-color-blue-200);
|
||||
--navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
|
||||
--navds-button-color-secondary-text-active: var(
|
||||
--navds-global-color-blue-200
|
||||
);
|
||||
--navds-button-color-secondary-border: var(--navds-global-color-blue-200);
|
||||
--navds-button-color-secondary-border-focus-active-hover: var(
|
||||
--navds-semantic-color-text
|
||||
);
|
||||
--navds-button-color-secondary-background: var(
|
||||
--navds-semantic-color-component-background-inverted
|
||||
);
|
||||
--navds-button-color-secondary-background-hover: var(
|
||||
--navds-global-color-blue-900
|
||||
);
|
||||
--navds-button-color-secondary-background-active: var(
|
||||
--navds-global-color-blue-800
|
||||
);
|
||||
}
|
||||
|
||||
.navds-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
min-width: 48px;
|
||||
padding: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-button--small {
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.navds-button--xsmall {
|
||||
padding: 0.125rem 0.375rem;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.navds-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button__inner {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-button svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-button--small svg,
|
||||
.navds-button--xsmall svg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--primary *
|
||||
*************************/
|
||||
|
||||
.navds-button--primary {
|
||||
background-color: var(--navds-button-color-primary-background);
|
||||
color: var(--navds-button-color-primary-text);
|
||||
}
|
||||
|
||||
.navds-button--primary:hover {
|
||||
background-color: var(--navds-button-color-primary-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--primary:active {
|
||||
background-color: var(--navds-button-color-primary-background-active);
|
||||
}
|
||||
|
||||
.navds-button--primary:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--primary:hover:disabled,
|
||||
.navds-button--primary:active:disabled {
|
||||
background-color: var(--navds-button-color-primary-background);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button--secondary *
|
||||
**************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
color: var(--navds-button-color-secondary-text);
|
||||
background-color: var(--navds-button-color-secondary-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
|
||||
}
|
||||
|
||||
.navds-button--secondary:hover {
|
||||
color: var(--navds-button-color-secondary-text-hover);
|
||||
background-color: var(--navds-button-color-secondary-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--secondary:active {
|
||||
color: var(--navds-button-color-secondary-text-active);
|
||||
background-color: var(--navds-button-color-secondary-background-active);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--navds-button-color-secondary-border-focus-active-hover),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--secondary:disabled,
|
||||
.navds-button--secondary:hover:disabled {
|
||||
color: var(--navds-button-color-secondary-text);
|
||||
background-color: var(--navds-button-color-secondary-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
|
||||
}
|
||||
|
||||
/****************************
|
||||
* .navds-button--tertiary *
|
||||
****************************/
|
||||
|
||||
.navds-button--tertiary {
|
||||
color: var(--navds-button-color-tertiary-text);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:hover {
|
||||
background-color: var(--navds-button-color-tertiary-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active {
|
||||
color: var(--navds-button-color-tertiary-text-active);
|
||||
background-color: var(--navds-button-color-tertiary-background-active);
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:hover {
|
||||
background-color: var(--navds-button-color-tertiary-background-active);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:disabled,
|
||||
.navds-button--tertiary:active:disabled,
|
||||
.navds-button--tertiary:active:hover:disabled {
|
||||
color: var(--navds-button-color-tertiary-text);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--danger *
|
||||
*************************/
|
||||
|
||||
.navds-button--danger {
|
||||
background-color: var(--navds-button-color-danger-background);
|
||||
color: var(--navds-button-color-danger-text);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover {
|
||||
background-color: var(--navds-button-color-danger-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--danger:active {
|
||||
background-color: var(--navds-button-color-danger-background-active);
|
||||
}
|
||||
|
||||
.navds-button--danger:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover:disabled,
|
||||
.navds-button--danger:active:disabled {
|
||||
background-color: var(--navds-button-color-danger-background);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button:disabled *
|
||||
**************************/
|
||||
|
||||
.navds-button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-button:disabled:not(.navds-button--loading) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-button .navds-loader .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-on-button-foreground);
|
||||
}
|
||||
|
||||
.navds-button--primary .navds-loader .navds-loader__background,
|
||||
.navds-button--danger .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
:root {
|
||||
--navds-card-micro-color-text: var(--navds-semantic-color-text);
|
||||
--navds-card-micro-color-background: var(--navds-global-color-orange-200);
|
||||
--navds-card-micro-color-border: transparent;
|
||||
--navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
|
||||
--navds-card-micro-color-background-hover: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-card-micro-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
|
||||
--navds-card-micro-color-background-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
|
||||
--navds-card-micro-color-background-active: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-card-micro-color-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
MicroCard
|
||||
*/
|
||||
|
||||
.navds-card__micro {
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
color: var(--navds-card-micro-color-text);
|
||||
display: inline-flex;
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-2);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-card-micro-color-background);
|
||||
border: 1px solid var(--navds-card-micro-color-border);
|
||||
}
|
||||
|
||||
.navds-card__micro:hover {
|
||||
background-color: var(--navds-card-micro-color-background-hover);
|
||||
border-color: var(--navds-card-micro-color-border-hover);
|
||||
color: var(--navds-card-micro-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-card__micro:focus {
|
||||
background-color: var(--navds-card-micro-color-background-focus);
|
||||
color: var(--navds-card-micro-color-text-focus);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-card__micro:active {
|
||||
background-color: var(--navds-card-micro-color-background-active);
|
||||
color: var(--navds-card-micro-color-text-active);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
:root {
|
||||
--navds-content-container-max-width: 79.5rem;
|
||||
}
|
||||
|
||||
.navds-content-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--navds-content-container-max-width);
|
||||
padding: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-content-container {
|
||||
padding: var(--navds-spacing-6);
|
||||
}
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
:root {
|
||||
--navds-confirmation-panel-color-background: var(
|
||||
--navds-global-color-orange-50
|
||||
);
|
||||
--navds-confirmation-panel-color-background-checked: var(
|
||||
--navds-global-color-green-50
|
||||
);
|
||||
--navds-confirmation-panel-color-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
--navds-confirmation-panel-color-border-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-confirmation-panel-color-border-error: var(
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-error: var(
|
||||
--navds-global-color-red-50
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover: var(
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover: var(
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked: var(
|
||||
--navds-global-color-green-500
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-label-checked: var(
|
||||
--navds-semantic-color-text
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-4);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid var(--navds-confirmation-panel-color-border);
|
||||
background-color: var(--navds-confirmation-panel-color-background);
|
||||
transition: background-color linear 100ms;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel__content {
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--small .navds-confirmation-panel__inner {
|
||||
padding: var(--navds-spacing-3);
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
|
||||
background-color: var(--navds-confirmation-panel-color-background-checked);
|
||||
border-color: var(--navds-confirmation-panel-color-border-checked);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--error .navds-confirmation-panel__inner {
|
||||
background-color: var(--navds-confirmation-panel-color-background-error);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
color: var(--navds-confirmation-panel-color-checkbox-label-checked);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input
|
||||
+ .navds-checkbox__label::before {
|
||||
transition: none;
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked
|
||||
);
|
||||
border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover
|
||||
);
|
||||
border-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:focus:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
:root {
|
||||
--navds-error-message-color-text: var(
|
||||
--navds-semantic-color-feedback-danger-text
|
||||
);
|
||||
}
|
||||
|
||||
.navds-error-message {
|
||||
color: var(--navds-error-message-color-text);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-error-message::before {
|
||||
content: "•";
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
:root {
|
||||
--navds-error-summary-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-error-summary-color-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-error-summary {
|
||||
background-color: var(--navds-error-summary-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
border: 4px solid var(--navds-error-summary-color-border);
|
||||
}
|
||||
|
||||
.navds-error-summary--small {
|
||||
padding: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-error-summary:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-error-summary__list {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.navds-error-summary--small > .navds-error-summary__list {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
.navds-fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset > :not(:first-child):not(:empty) {
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset:disabled > .navds-fieldset__legend,
|
||||
.navds-fieldset:disabled > .navds-fieldset__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
.navds-form-field > :not(:first-child):not(:empty),
|
||||
.navds-form-field > input:not(:first-child) {
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Applied when hideLabel is applied to form-element */
|
||||
.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
|
||||
.navds-form-field > .navds-sr-only + input:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
/*
|
||||
Order matters; rearrange with care
|
||||
*/
|
||||
@import "fieldset.css";
|
||||
@import "form.css";
|
||||
@import "error-summary.css";
|
||||
@import "confirmation-panel.css";
|
||||
@import "error-message.css";
|
||||
@import "radio-checkbox.css";
|
||||
@import "select.css";
|
||||
@import "switch.css";
|
||||
@import "text-field.css";
|
||||
@import "textarea.css";
|
||||
@import "search.css";
|
||||
@@ -1,215 +0,0 @@
|
||||
:root {
|
||||
--navds-radio-checkbox-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
|
||||
--navds-radio-checkbox-color-description: var(
|
||||
--navds-semantic-color-text-muted
|
||||
);
|
||||
--navds-radio-checkbox-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-radio-checkbox-color-background-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
|
||||
--navds-radio-checkbox-color-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow-checked: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-radio-checkbox-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-radio-checkbox-color-label-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
}
|
||||
|
||||
.navds-checkbox,
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navds-checkbox__input,
|
||||
.navds-radio__input {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__label,
|
||||
.navds-radio__label {
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before,
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-checkbox-color-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
}
|
||||
|
||||
.navds-checkbox__content,
|
||||
.navds-radio__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-checkbox__description,
|
||||
.navds-radio__description {
|
||||
color: var(--navds-radio-checkbox-color-description);
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label,
|
||||
.navds-radio--small > .navds-radio__label {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before,
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
||||
box-shadow: none;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0.375rem, -50%);
|
||||
background-color: var(--navds-radio-checkbox-color-background);
|
||||
width: 0.75rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 1px; /* Custom value OK */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small
|
||||
.navds-checkbox__input:indeterminate
|
||||
+ .navds-checkbox__label::after {
|
||||
transform: translate(0.25rem, -50%);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
box-shadow: none;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox--small
|
||||
> .navds-checkbox__input:checked
|
||||
+ .navds-checkbox__label::before {
|
||||
background-position: 4px center;
|
||||
}
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
||||
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
||||
color: var(--navds-radio-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled,
|
||||
.navds-radio--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled > .navds-checkbox__input,
|
||||
.navds-checkbox--disabled > .navds-checkbox__label,
|
||||
.navds-radio--disabled > .navds-radio__input,
|
||||
.navds-radio--disabled > .navds-radio__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--navds-search-color-text: var(--navds-semantic-color-text);
|
||||
--navds-search-color-border: var(--navds-semantic-color-border);
|
||||
--navds-search-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-search-color-clear-hover: var(--navds-global-color-blue-500);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--navds-search-color-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-search-color-border: var(--navds-semantic-color-border-inverted);
|
||||
--navds-search-color-border-hover: var(--navds-global-color-blue-200);
|
||||
--navds-search-color-clear-hover: var(--navds-global-color-blue-200);
|
||||
}
|
||||
|
||||
.navds-search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-search__wrapper-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-search__wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-search__input {
|
||||
padding-right: var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__input {
|
||||
padding-right: var(--navds-spacing-8);
|
||||
}
|
||||
|
||||
.navds-search__input--simple {
|
||||
padding-left: var(--navds-spacing-11);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__input--simple {
|
||||
padding-left: var(--navds-spacing-7);
|
||||
}
|
||||
|
||||
.navds-search__input:not(.navds-search__input--simple) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.navds-search__search-icon {
|
||||
position: absolute;
|
||||
left: var(--navds-spacing-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__search-icon {
|
||||
left: var(--navds-spacing-2);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navds-search__button-clear {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
color: var(--navds-search-color-text);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__button-clear {
|
||||
right: 0.5rem;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.navds-search__button-clear:hover {
|
||||
color: var(--navds-search-color-clear-hover);
|
||||
}
|
||||
|
||||
.navds-search__button-clear:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-search__button-search {
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
min-height: 32px;
|
||||
border-radius: 0;
|
||||
border-top-right-radius: var(--navds-border-radius-medium);
|
||||
border-bottom-right-radius: var(--navds-border-radius-medium);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__button-search svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search__button-search {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary {
|
||||
box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
|
||||
0 1px 0 0 var(--navds-search-color-border) inset,
|
||||
0 -1px 0 0 var(--navds-search-color-border) inset;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:hover {
|
||||
box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
|
||||
0 1px 0 0 var(--navds-search-color-border-hover) inset,
|
||||
0 -1px 0 0 var(--navds-search-color-border-hover) inset,
|
||||
-1px 0 0 0 var(--navds-search-color-border-hover);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navds-search__wrapper-inner:focus-within
|
||||
+ .navds-search__button-search.navds-button--secondary:hover {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus {
|
||||
box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:hover {
|
||||
box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
.navds-search__input:focus,
|
||||
.navds-search__button-clear,
|
||||
.navds-search__button-search:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
:root {
|
||||
--navds-select-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-select-color-border: var(--navds-semantic-color-border);
|
||||
--navds-select-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-select-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-select-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-select-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-select-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-select-color-text-disabled: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-select__input {
|
||||
appearance: none;
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid var(--navds-select-color-border);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 48px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-select__input:hover {
|
||||
border-color: var(--navds-select-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-select__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-select__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-select__chevron {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
right: 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-select__input {
|
||||
min-height: 32px;
|
||||
padding: 0.25rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
|
||||
border-color: var(--navds-select-color-border-error);
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-select--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-select__input:disabled {
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-color: var(--navds-select-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,224 +0,0 @@
|
||||
:root {
|
||||
--navds-switch-color-label: var(--navds-semantic-color-text);
|
||||
--navds-switch-color-label-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
|
||||
--navds-switch-color-track-background-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-switch-color-track-background-hover: var(
|
||||
--navds-global-color-gray-800
|
||||
);
|
||||
--navds-switch-color-track-background-hover-checked: var(
|
||||
--navds-semantic-color-feedback-success-icon
|
||||
);
|
||||
--navds-switch-color-track-shadow-inner-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-switch-color-thumb: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
|
||||
--navds-switch-color-thumb-icon-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-switch-color-thumb-loader-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-switch {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navds-switch--right {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navds-switch--small {
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.navds-switch__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-switch--small > .navds-switch__input {
|
||||
height: 32px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.navds-switch__label-wrapper {
|
||||
cursor: pointer;
|
||||
color: var(--navds-switch-color-label);
|
||||
}
|
||||
|
||||
.navds-switch__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-1);
|
||||
padding: 0.75rem 0 0.75rem 3.25rem;
|
||||
}
|
||||
|
||||
.navds-switch__description {
|
||||
color: var(--navds-semantic-color-text-muted);
|
||||
}
|
||||
|
||||
.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
|
||||
padding: 0.75rem 3.25rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
|
||||
padding: calc(var(--navds-spacing-2) - 2px) 0
|
||||
calc(var(--navds-spacing-2) - 2px) 3.25rem;
|
||||
}
|
||||
|
||||
.navds-switch--right.navds-switch--small
|
||||
> .navds-switch__label-wrapper
|
||||
> .navds-switch__content {
|
||||
padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
|
||||
calc(var(--navds-spacing-2) - 2px) 0;
|
||||
}
|
||||
|
||||
.navds-switch--with-description,
|
||||
.navds-switch--small
|
||||
> .navds-switch__label-wrapper
|
||||
> .navds-switch--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-switch__input:hover ~ .navds-switch__label-wrapper,
|
||||
.navds-switch__label-wrapper:hover {
|
||||
color: var(--navds-switch-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.navds-switch__track {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background-color: var(--navds-switch-color-track-background);
|
||||
position: absolute;
|
||||
top: var(--navds-spacing-3);
|
||||
left: 0;
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.navds-switch--small > .navds-switch__track {
|
||||
top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-switch--right > .navds-switch__input,
|
||||
.navds-switch--right > .navds-switch__track {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.navds-switch__input:checked ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-checked);
|
||||
}
|
||||
|
||||
.navds-switch__input:hover ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-hover);
|
||||
}
|
||||
|
||||
.navds-switch__input:hover:checked ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-hover-checked);
|
||||
}
|
||||
|
||||
.navds-switch__input:disabled ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background);
|
||||
}
|
||||
|
||||
.navds-switch__input:checked:disabled ~ .navds-switch__track {
|
||||
background-color: var(--navds-switch-color-track-background-checked);
|
||||
}
|
||||
|
||||
.navds-switch__input:focus ~ .navds-switch__track {
|
||||
box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/* Thumb */
|
||||
.navds-switch__thumb {
|
||||
background-color: var(--navds-switch-color-thumb);
|
||||
color: var(--navds-switch-color-thumb-icon);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
transform: translateX(0);
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
|
||||
transform: translateX(20px);
|
||||
color: var(--navds-switch-color-thumb-icon-checked);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.navds-switch__input:checked:hover
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-switch__input:disabled:hover
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.navds-switch__input:checked:disabled:hover
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
.navds-switch__input:checked
|
||||
~ .navds-switch__track
|
||||
> .navds-switch__thumb
|
||||
.navds-loader__foreground {
|
||||
stroke: var(--navds-switch-color-thumb-loader-checked);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.navds-switch__input:disabled {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.navds-switch--disabled:not(.navds-switch--loading) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-switch__input:disabled,
|
||||
.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--navds-text-field-color-text: var(--navds-semantic-color-text);
|
||||
--navds-text-field-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-text-field-color-border: var(--navds-semantic-color-border);
|
||||
--navds-text-field-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-text-field-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-text-field-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-text-field-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
|
||||
--navds-text-field-color-placeholder-text: var(
|
||||
--navds-semantic-color-text-muted
|
||||
);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
|
||||
--navds-text-field-color-background: var(
|
||||
--navds-semantic-color-component-background-dark
|
||||
);
|
||||
--navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
|
||||
--navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
|
||||
--navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
|
||||
}
|
||||
|
||||
.navds-text-field__input {
|
||||
appearance: none;
|
||||
padding: var(--navds-spacing-2);
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid var(--navds-text-field-color-border);
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
color: var(--navds-text-field-color-text);
|
||||
}
|
||||
|
||||
.navds-text-field__input::placeholder {
|
||||
color: var(--navds-text-field-color-placeholder-text);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-text-field__input {
|
||||
padding: 0 0.25rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--navds-text-field-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-text-field__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--navds-text-field-color-border-error);
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
|
||||
}
|
||||
|
||||
.navds-text-field--error
|
||||
> .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-text-field--disabled > .navds-text-field__label,
|
||||
.navds-text-field--disabled > .navds-text-field__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes default search icon
|
||||
*/
|
||||
.navds-text-field__input[type="search"]::-webkit-search-decoration,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-results-button,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
:root {
|
||||
--navds-textarea-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-textarea-color-border: var(--navds-semantic-color-border);
|
||||
--navds-textarea-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-textarea-color-border-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-shadow-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
|
||||
--navds-textarea-color-counter-text-error: var(
|
||||
--navds-semantic-color-interaction-danger
|
||||
);
|
||||
--navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
|
||||
--navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
|
||||
--navds-textarea-color-background-disabled: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
}
|
||||
|
||||
.navds-textarea__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-textarea__input {
|
||||
appearance: none;
|
||||
padding: var(--navds-spacing-2);
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid var(--navds-textarea-color-border);
|
||||
resize: none;
|
||||
width: 100%;
|
||||
transition: height 0.1s ease-out;
|
||||
display: block;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.navds-textarea--counter {
|
||||
padding-bottom: var(--navds-spacing-8);
|
||||
}
|
||||
|
||||
.navds-textarea__input:hover {
|
||||
border-color: var(--navds-textarea-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-textarea__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea__input {
|
||||
padding: var(--navds-spacing-1);
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
|
||||
padding-bottom: var(--navds-spacing-7);
|
||||
}
|
||||
|
||||
.navds-textarea__counter {
|
||||
pointer-events: none;
|
||||
color: var(--navds-textarea-color-counter-text);
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
left: var(--navds-spacing-3);
|
||||
right: var(--navds-spacing-3);
|
||||
bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-textarea__counter--error {
|
||||
color: var(--navds-textarea-color-counter-text-error);
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-textarea--error
|
||||
.navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
|
||||
border-color: var(--navds-textarea-color-border-error);
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-textarea--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-textarea__input[readonly] {
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
/**************************
|
||||
* .navds-grid *
|
||||
**************************/
|
||||
|
||||
.navds-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-gap: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-grid {
|
||||
grid-gap: var(--navds-spacing-6);
|
||||
}
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-grid__cell *
|
||||
**************************/
|
||||
|
||||
.navds-grid__cell--xs-1 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-4 {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-5 {
|
||||
grid-column: span 5;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-6 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-7 {
|
||||
grid-column: span 7;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-8 {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-9 {
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-10 {
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-11 {
|
||||
grid-column: span 11;
|
||||
}
|
||||
|
||||
.navds-grid__cell--xs-12 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
@media (min-width: 448px) {
|
||||
.navds-grid__cell--sm-1 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-4 {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-5 {
|
||||
grid-column: span 5;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-6 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-7 {
|
||||
grid-column: span 7;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-8 {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-9 {
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-10 {
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-11 {
|
||||
grid-column: span 11;
|
||||
}
|
||||
|
||||
.navds-grid__cell--sm-12 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 648px) {
|
||||
.navds-grid__cell--md-1 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-4 {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-5 {
|
||||
grid-column: span 5;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-6 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-7 {
|
||||
grid-column: span 7;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-8 {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-9 {
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-10 {
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-11 {
|
||||
grid-column: span 11;
|
||||
}
|
||||
|
||||
.navds-grid__cell--md-12 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.navds-grid__cell--lg-1 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-4 {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-5 {
|
||||
grid-column: span 5;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-6 {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-7 {
|
||||
grid-column: span 7;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-8 {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-9 {
|
||||
grid-column: span 9;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-10 {
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-11 {
|
||||
grid-column: span 11;
|
||||
}
|
||||
|
||||
.navds-grid__cell--lg-12 {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
:root {
|
||||
--navds-guide-panel-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-blue-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-global-color-blue-200
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* GuidePanel component
|
||||
*/
|
||||
.navds-guide-panel {
|
||||
position: relative;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel__content {
|
||||
background-color: var(--navds-guide-panel-color-background);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 2px solid var(--navds-guide-panel-color-border);
|
||||
min-height: 7.25rem;
|
||||
padding: 1.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster {
|
||||
padding-left: 0;
|
||||
padding-top: 3.125rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster .navds-guide-panel__content {
|
||||
padding: 2rem;
|
||||
padding-top: 4.25rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel .navds-guide {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster .navds-guide {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Guide component
|
||||
*/
|
||||
.navds-guide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Guide illustration frame */
|
||||
.navds-guide__illustration {
|
||||
background: var(--navds-guide-panel-color-illustration-background);
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navds-guide__illustration svg,
|
||||
.navds-guide__illustration img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Illustration sizes */
|
||||
.navds-guide__illustration--small {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.navds-guide__illustration--medium {
|
||||
height: 6.25rem;
|
||||
width: 6.25rem;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
:root {
|
||||
--navds-help-text-color: var(--navds-semantic-color-interaction-primary);
|
||||
--navds-help-text-color-hover: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-help-text-color-focus: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-help-text-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-background-focus: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-help-text-color-shadow-focus: var(--navds-semantic-color-focus);
|
||||
--navds-help-text-color-popover-background: var(
|
||||
--navds-semantic-color-feedback-info-background
|
||||
);
|
||||
}
|
||||
|
||||
.navds-help-text__button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--navds-help-text-color);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-help-text__button:hover {
|
||||
color: var(--navds-help-text-color-hover);
|
||||
background: var(--navds-help-text-color-background-hover);
|
||||
box-shadow: 0 0 0 2px var(--navds-help-text-color-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
color: var(--navds-help-text-color-focus);
|
||||
background: var(--navds-help-text-color-background-focus);
|
||||
box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-help-text__icon {
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
}
|
||||
|
||||
.navds-help-text__popover > .navds-popover__arrow::before {
|
||||
background-color: var(--navds-help-text-color-popover-background);
|
||||
}
|
||||
|
||||
.navds-help-text__popover.navds-popover {
|
||||
background-color: var(--navds-help-text-color-popover-background);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
@import "baseline/baseline.css";
|
||||
@import "typography.css";
|
||||
@import "grid.css";
|
||||
|
||||
@import "accordion.css";
|
||||
@import "alert.css";
|
||||
@import "button.css";
|
||||
@import "content-container.css";
|
||||
@import "guide-panel.css";
|
||||
@import "form/index.css";
|
||||
@import "help-text.css";
|
||||
@import "link.css";
|
||||
@import "loader.css";
|
||||
@import "menu.css";
|
||||
@import "modal.css";
|
||||
@import "pagination.css";
|
||||
@import "popover.css";
|
||||
@import "tag.css";
|
||||
@import "tooltip.css";
|
||||
@import "toggle-group.css";
|
||||
@import "panel.css";
|
||||
@import "link-panel.css";
|
||||
@import "read-more.css";
|
||||
@import "speech-bubble.css";
|
||||
@import "step-indicator.css";
|
||||
@import "stepper.css";
|
||||
@import "table.css";
|
||||
@import "tabs.css";
|
||||
|
||||
/* Navno spesific packages */
|
||||
@import "page-header.css";
|
||||
@import "card.css";
|
||||
@@ -1,46 +0,0 @@
|
||||
:root {
|
||||
--navds-link-panel-color-text: var(--navds-semantic-color-text);
|
||||
--navds-link-panel-color-border-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
|
||||
}
|
||||
|
||||
.navds-link-panel {
|
||||
text-decoration: none;
|
||||
color: var(--navds-link-panel-color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-link-panel:hover .navds-link-panel__title {
|
||||
text-decoration: underline;
|
||||
color: var(--navds-link-panel-color-title-hover);
|
||||
}
|
||||
|
||||
.navds-link-panel:hover {
|
||||
box-shadow: var(--navds-shadow-card);
|
||||
border-color: var(--navds-link-panel-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-link-panel:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-link-panel__chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.navds-link-panel:hover > .navds-link-panel__chevron,
|
||||
.navds-link-panel:focus-within > .navds-link-panel__chevron {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.navds-link-panel__description {
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
:root {
|
||||
--navds-link-color-text: var(--navds-semantic-color-link);
|
||||
--navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-background-focus: var(--navds-semantic-color-focus);
|
||||
--navds-link-color-background-active: var(--navds-semantic-color-focus);
|
||||
--navds-link-color-icon: var(--navds-semantic-color-link);
|
||||
--navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
|
||||
--navds-link-color-on-info-background: var(--navds-semantic-color-text);
|
||||
--navds-link-color-on-error-background: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-link {
|
||||
color: var(--navds-link-color-text);
|
||||
text-decoration: underline;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-alert--info .navds-link {
|
||||
color: var(--navds-link-color-on-info-background);
|
||||
}
|
||||
|
||||
.navds-alert--error .navds-link,
|
||||
.navds-confirmation-panel--error .navds-link {
|
||||
color: var(--navds-link-color-on-error-background);
|
||||
}
|
||||
|
||||
.navds-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-link:focus {
|
||||
outline: none;
|
||||
color: var(--navds-link-color-text-focus);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-focus);
|
||||
box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-link:active {
|
||||
outline: none;
|
||||
color: var(--navds-link-color-text-active);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-active);
|
||||
box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-link svg {
|
||||
color: var(--navds-link-color-icon);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-link:focus svg {
|
||||
color: var(--navds-link-color-icon-focus);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
:root {
|
||||
--navds-loader-color-foreground: var(--navds-global-color-gray-400);
|
||||
--navds-loader-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
|
||||
--navds-loader-color-interaction-foreground: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-loader-color-inverted-foreground: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
}
|
||||
|
||||
.navds-loader {
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: loader-rotate 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.navds-loader__foreground {
|
||||
animation: loader-dasharray 1.4s ease-in-out infinite;
|
||||
stroke-dasharray: 80px, 200px;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--navds-loader-color-foreground);
|
||||
}
|
||||
|
||||
.navds-loader__background {
|
||||
stroke: var(--navds-loader-color-background);
|
||||
}
|
||||
|
||||
.navds-loader--neutral .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-neutral-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--interaction .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-interaction-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--inverted .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-inverted-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--inverted .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-inverted-background);
|
||||
}
|
||||
|
||||
.navds-loader--transparent .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-transparent-background);
|
||||
}
|
||||
|
||||
.navds-loader--2xlarge {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.navds-loader--xlarge {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-loader--large {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.navds-loader--medium {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-loader--small {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-loader--xsmall {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-dasharray {
|
||||
0% {
|
||||
stroke-dasharray: 1px, 200px;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 100px, 200px;
|
||||
stroke-dashoffset: -15px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 100px, 200px;
|
||||
stroke-dashoffset: -120px;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
:root {
|
||||
--navds-menu-color-text: var(--navds-semantic-color-link);
|
||||
--navds-menu-color-text-hover: var(--navds-semantic-color-text);
|
||||
--navds-menu-color-text-focus: var(--navds-semantic-color-text);
|
||||
--navds-menu-color-background-hover: var(--navds-global-color-blue-50);
|
||||
--navds-menu-color-text-active: var(--navds-semantic-color-text);
|
||||
--navds-menu-outline-focus: var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-menu__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.navds-menu__list--inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font: inherit;
|
||||
text-align: inherit;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
color: var(--navds-menu-color-text);
|
||||
}
|
||||
|
||||
.navds-menu-item,
|
||||
.navds-menu-collapse__button {
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
display: flex;
|
||||
padding: var(--navds-spacing-3) var(--navds-spacing-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-menu-item:focus,
|
||||
.navds-menu-collapse__button:focus {
|
||||
outline: 3px solid var(--navds-menu-outline-focus);
|
||||
outline-offset: -3px;
|
||||
color: var(--navds-menu-color-text-focus);
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
|
||||
color: var(--navds-menu-color-focus);
|
||||
}
|
||||
|
||||
.navds-menu-item:hover,
|
||||
.navds-menu-collapse__button:hover {
|
||||
background-color: var(--navds-menu-color-background-hover);
|
||||
color: var(--navds-menu-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-menu-item--active {
|
||||
box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
|
||||
color: var(--navds-menu-color-text-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Collapse icon */
|
||||
.navds-menu-collapse__expand-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-menu-collapse__expand-icon--filled,
|
||||
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navds-menu-collapse--open
|
||||
> .navds-menu-collapse__button
|
||||
> .navds-menu-collapse__expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Nesting levels */
|
||||
.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="1"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="2"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
|
||||
.navds-menu__list[data-depth="3"] .navds-menu-item {
|
||||
padding-left: var(--navds-spacing-14);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
:root {
|
||||
--navds-modal-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
|
||||
}
|
||||
|
||||
.ReactModal__Body--open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navds-modal {
|
||||
background-color: var(--navds-modal-color-background);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.navds-modal__content {
|
||||
padding: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-modal:focus,
|
||||
.navds-modal--focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-modal__overlay {
|
||||
position: fixed;
|
||||
z-index: var(--navds-z-index-modal);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--navds-modal-color-overlay);
|
||||
padding: var(--navds-spacing-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navds-modal__button--shake {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.navds-modal__overlay:active > .navds-modal:not(:active) > .navds-modal__button--shake {
|
||||
transform: rotate(10deg);
|
||||
transition: transform 100ms cubic-bezier(0.82, -2, 1, 0.3);
|
||||
}
|
||||
|
||||
.navds-modal__button {
|
||||
position: absolute;
|
||||
top: var(--navds-spacing-4);
|
||||
right: var(--navds-spacing-4);
|
||||
display: flex;
|
||||
padding: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-modal__button svg {
|
||||
/* 24x24px */
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.18.1",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
"css"
|
||||
],
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/navikt/nav-frontend-moduler.git"
|
||||
},
|
||||
"main": "./dist/index.css",
|
||||
"scripts": {
|
||||
"build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.9.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-combine-duplicated-selectors": "10.0.3",
|
||||
"postcss-import": "^14.0.2"
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
:root {
|
||||
--navds-page-header-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-page-header-color-shadow-situation: var(
|
||||
--navds-global-color-orange-400
|
||||
);
|
||||
--navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
|
||||
--navds-page-header-color-shadow-guide: var(
|
||||
--navds-global-color-deepblue-400
|
||||
);
|
||||
}
|
||||
|
||||
.navds-page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--navds-page-header-color-background);
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-left: calc((100vw - 100%) / 2);
|
||||
padding-right: calc((100vw - 100%) / 2);
|
||||
margin-left: calc((100vw - 100%) / -2);
|
||||
margin-right: calc((100vw - 100%) / -2);
|
||||
}
|
||||
|
||||
.navds-page-header__wrapper {
|
||||
width: 100%;
|
||||
max-width: 56.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navds-page-header__title {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navds-page-header--left > .navds-page-header__wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navds-page-header--center > .navds-page-header__wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navds-page-header__illustration {
|
||||
margin-right: 1.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-page-header__illustration > svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.navds-page-header--situation {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
|
||||
}
|
||||
.navds-page-header--product {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
|
||||
}
|
||||
.navds-page-header--guide {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
|
||||
}
|
||||
|
||||
@media (max-width: 649px) {
|
||||
.navds-page-header__illustration > svg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.navds-page-header__title {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
}
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
:root {
|
||||
--navds-pagination-color-background-hover: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-pagination-color-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-pagination-color-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-pagination-color-background-selected: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-pagination-color-text-selected: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
.navds-pagination {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-pagination__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-pagination__ellipsis {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--navds-spacing-8);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__ellipsis {
|
||||
width: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-pagination__item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__item {
|
||||
padding: 2px var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-pagination__item:hover {
|
||||
background-color: var(--navds-pagination-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-pagination__item:active {
|
||||
background-color: var(--navds-pagination-color-background-active);
|
||||
color: var(--navds-pagination-color-text-active);
|
||||
}
|
||||
|
||||
.navds-pagination__item:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
|
||||
inset 0 0 0 3px white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-pagination__item[aria-current="true"] {
|
||||
background-color: var(--navds-pagination-color-background-selected);
|
||||
color: var(--navds-pagination-color-text-selected);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
color: var(--navds-semantic-color-link);
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-1);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next-icon {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.navds-pagination--small .navds-pagination__prev-next-icon {
|
||||
margin: var(--navds-spacing-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navds-pagination__next-text {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.navds-pagination__prev-text {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.navds-pagination--invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
:root {
|
||||
--navds-panel-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-panel-color-border: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-panel {
|
||||
background-color: var(--navds-panel-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-panel--border {
|
||||
border-color: var(--navds-panel-color-border);
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
:root {
|
||||
--navds-popover-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-popover-color-border: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-popover {
|
||||
z-index: var(--navds-z-index-popover);
|
||||
background-color: var(--navds-popover-color-background);
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-popover-color-border);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
}
|
||||
|
||||
.navds-popover__content {
|
||||
padding: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-popover--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-popover:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-popover__arrow {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.navds-popover__arrow::before {
|
||||
display: block;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
background-color: var(--navds-popover-color-background);
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-popover-color-border);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {
|
||||
bottom: calc(1rem / -2);
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow::before {
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow {
|
||||
top: calc(1rem / -2);
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow::before {
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow {
|
||||
right: calc(1rem / -2);
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow::before {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow {
|
||||
left: calc(1rem / -2);
|
||||
}
|
||||
|
||||
.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow::before {
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
.navds-read-more {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-2);
|
||||
color: var(--navds-semantic-color-link);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
|
||||
2px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.navds-read-more--small {
|
||||
padding: 2px var(--navds-spacing-1) 2px 2px;
|
||||
}
|
||||
|
||||
.navds-read-more:hover {
|
||||
background-color: rgba(38, 38, 38, 0.06);
|
||||
}
|
||||
|
||||
.navds-read-more:active {
|
||||
background-color: rgba(38, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
.navds-read-more:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-read-more + .ReactCollapse--collapse {
|
||||
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-read-more__content {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 0 var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-read-more__content::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2px;
|
||||
background-color: rgba(38, 38, 38, 0.36);
|
||||
margin: 0 7px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-read-more__expand-icon {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-read-more--open > .navds-read-more__expand-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.navds-read-more__expand-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-read-more:hover
|
||||
> .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.navds-read-more:hover > .navds-read-more__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
:root {
|
||||
--navds-speechbubble-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
|
||||
--navds-speechbubble-color-illustration-background: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-speechbubble-color-detail-text: var(
|
||||
--navds-semantic-color-text-muted
|
||||
);
|
||||
}
|
||||
|
||||
.navds-speechbubble {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-speechbubble--right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.navds-speechbubble__bubble-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-speechbubble--right .navds-speechbubble__bubble-list {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.navds-speechbubble__illustration {
|
||||
align-items: center;
|
||||
background: var(--navds-speechbubble-color-illustration-background);
|
||||
color: var(--navds-speechbubble-color-illustration);
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.navds-speechbubble__illustration svg {
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-speechbubble__bubble {
|
||||
padding: 1rem;
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
width: fit-content;
|
||||
max-width: 37.5rem;
|
||||
background-color: var(--navds-speechbubble-color-background);
|
||||
border-radius: var(--navds-border-radius-xlarge);
|
||||
border-bottom-left-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-speechbubble__bubble:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-speechbubble--right .navds-speechbubble__bubble {
|
||||
border-radius: var(--navds-border-radius-xlarge);
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.navds-speechbubble__top-text {
|
||||
color: var(--navds-speechbubble-color-detail-text);
|
||||
}
|
||||
|
||||
.navds-speechbubble--right .navds-speechbubble__top-text {
|
||||
align-self: flex-end;
|
||||
}
|
||||
@@ -1,202 +0,0 @@
|
||||
:root {
|
||||
--navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
|
||||
--navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
|
||||
--navds-step-indicator-color-step-label: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background: var(
|
||||
--navds-semantic-color-canvas-background-light
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background-finished: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow: var(
|
||||
--navds-semantic-color-border
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-step-indicator-color-step-number-background-active: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-step-indicator-color-step-number-text-active: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
--navds-step-indicator-color-step-number-shadow-inset: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
}
|
||||
|
||||
/* StepIndicator */
|
||||
.navds-step-indicator {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Step */
|
||||
.navds-step-indicator__step-wrapper {
|
||||
padding: 0 var(--navds-spacing-2);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper--hidelabel {
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
flex-shrink: 1;
|
||||
color: var(--navds-step-indicator-color-step-text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-number {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
|
||||
background-color: var(--navds-step-indicator-color-step-number-background);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper:first-child
|
||||
> .navds-step-indicator__step
|
||||
> .navds-step-indicator__step-number {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-wrapper:last-child
|
||||
> .navds-step-indicator__step
|
||||
> .navds-step-indicator__step-number {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-label {
|
||||
width: 100%;
|
||||
margin-top: var(--navds-spacing-4);
|
||||
text-align: center;
|
||||
color: var(--navds-step-indicator-color-step-label);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step-line {
|
||||
flex: 1 1 100%;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: calc(50% + 2rem);
|
||||
left: calc(-50% + 2rem);
|
||||
display: block;
|
||||
border-top: 2px solid var(--navds-step-indicator-color-step-line);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-label {
|
||||
color: var(--navds-step-indicator-color-step-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-number {
|
||||
background-color: var(
|
||||
--navds-step-indicator-color-step-number-background-active
|
||||
);
|
||||
color: var(--navds-step-indicator-color-step-number-text-active);
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active > .navds-step-indicator__step-label,
|
||||
.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-label {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
|
||||
background: var(--navds-step-indicator-color-step-number-background);
|
||||
box-shadow: 0 0 0 2px
|
||||
var(--navds-step-indicator-color-step-number-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
|
||||
background-color: var(
|
||||
--navds-step-indicator-color-step-number-background-active
|
||||
);
|
||||
color: var(--navds-step-indicator-color-step-number-text-active);
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px inset
|
||||
var(--navds-step-indicator-color-step-number-shadow-inset),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled:hover
|
||||
> .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
|
||||
> .navds-step-indicator__step-number {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--navds-step-indicator-color-step-number-shadow-active);
|
||||
}
|
||||
|
||||
/* Finished state */
|
||||
.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
|
||||
.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
|
||||
> .navds-step-indicator__step-number {
|
||||
background: var(--navds-step-indicator-color-step-number-background-finished);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
|
||||
.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-step-indicator__step--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
.navds-stepper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Step */
|
||||
.navds-stepper__step {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: calc(2.25rem / 2) 0;
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
color: var(--navds-semantic-color-text);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-stepper__step-number {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0;
|
||||
margin-right: var(--navds-spacing-3);
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--navds-semantic-color-interaction-primary);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
|
||||
background-color: var(--navds-semantic-color-component-background-light);
|
||||
}
|
||||
|
||||
/* Step-states: focus, active, hover */
|
||||
.navds-stepper__step-wrapper:hover
|
||||
> .navds-stepper__step
|
||||
> .navds-stepper__step-number {
|
||||
background-color: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
}
|
||||
|
||||
.navds-stepper__step--active > .navds-stepper__step-number,
|
||||
.navds-stepper__step-wrapper:hover
|
||||
> .navds-stepper__step--active
|
||||
> .navds-stepper__step-number {
|
||||
color: var(--navds-semantic-color-text-inverted);
|
||||
background-color: var(--navds-semantic-color-interaction-primary-selected);
|
||||
box-shadow: inset 0 0 0 2px
|
||||
var(--navds-semantic-color-interaction-primary-selected);
|
||||
}
|
||||
|
||||
.navds-stepper__step:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-stepper__step--active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Step label */
|
||||
.navds-stepper__step-label {
|
||||
margin-top: 2px;
|
||||
color: var(--navds-semantic-color-interaction-primary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navds-stepper__step:hover > .navds-stepper__step-label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-stepper__step--active > .navds-stepper__step-label {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navds-stepper__step--active:hover > .navds-stepper__step-label {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Step Horizontal Lines */
|
||||
|
||||
.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(28px + 8px + (2.25rem / 2));
|
||||
left: 13px;
|
||||
height: calc(100% - 2.75rem);
|
||||
display: block;
|
||||
border-left: 2px solid var(--navds-semantic-color-border-muted);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1,238 +0,0 @@
|
||||
:root {
|
||||
--navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-table-row-color-background-hover: var(
|
||||
--navds-semantic-color-canvas-background
|
||||
);
|
||||
--navds-table-row-color-background-selected: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-table-row-color-background-selected-hover: var(
|
||||
--navds-global-color-blue-100
|
||||
);
|
||||
--navds-table-row-color-background-zebra: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
|
||||
}
|
||||
|
||||
.navds-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.navds-table__header {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.navds-table__body {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.navds-table__row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.navds-table__body .navds-table__row:hover {
|
||||
background-color: var(--navds-table-row-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-table__row--selected {
|
||||
background-color: var(--navds-table-row-color-background-selected);
|
||||
}
|
||||
|
||||
.navds-table__body .navds-table__row--selected:hover {
|
||||
background-color: var(--navds-table-row-color-background-selected-hover);
|
||||
}
|
||||
|
||||
.navds-table--zebra-stripes
|
||||
.navds-table__body
|
||||
.navds-table__row:nth-child(odd):not(:hover):not(.navds-table__row--selected) {
|
||||
background-color: var(--navds-table-row-color-background-zebra);
|
||||
}
|
||||
|
||||
.navds-table--zebra-stripes
|
||||
.navds-table__body
|
||||
.navds-table__expandable-row:nth-child(4n
|
||||
+ 1):not(:hover):not(.navds-table__row--selected) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navds-table--zebra-stripes
|
||||
.navds-table__body
|
||||
.navds-table__expanded-row:nth-child(4n) {
|
||||
background-color: var(--navds-table-row-color-background-zebra);
|
||||
}
|
||||
|
||||
.navds-table__header-cell,
|
||||
.navds-table__data-cell {
|
||||
display: table-cell;
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
border-bottom: 1px solid var(--navds-table-cell-color-border);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navds-table__header .navds-table__header-cell,
|
||||
.navds-table__header .navds-table__data-cell {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.navds-table__header-cell--align-right,
|
||||
.navds-table__data-cell--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.navds-table__header-cell--align-center,
|
||||
.navds-table__data-cell--align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navds-table__body .navds-table__row:hover .navds-table__header-cell,
|
||||
.navds-table__body .navds-table__row:hover .navds-table__data-cell {
|
||||
border-color: var(--navds-table-cell-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__header-cell,
|
||||
.navds-table--small .navds-table__data-cell {
|
||||
padding: var(--navds-spacing-2) var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-table .navds-checkbox .navds-checkbox__input {
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.navds-table .navds-checkbox--small .navds-checkbox__input {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.navds-table .navds-checkbox .navds-checkbox__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-table__header-cell[aria-sort] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-table__sort-button {
|
||||
appearance: none;
|
||||
background: none;
|
||||
color: var(--navds-semantic-color-link);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
line-height: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__sort-button {
|
||||
padding: var(--navds-spacing-2) var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-table__sort-button:hover {
|
||||
background-color: var(--navds-semantic-color-canvas-background);
|
||||
}
|
||||
|
||||
.navds-table__sort-button:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
|
||||
.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
|
||||
background-color: var(--navds-global-color-blue-50);
|
||||
}
|
||||
|
||||
.navds-table__header-cell--align-right .navds-table__sort-button {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.navds-table__header-cell--align-center .navds-table__sort-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navds-table__sort-button svg {
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-table__expandable-row--open .navds-table__header-cell,
|
||||
.navds-table__expandable-row--open .navds-table__data-cell {
|
||||
border-color: var(--navds-semantic-color-border-muted);
|
||||
}
|
||||
|
||||
.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-cell {
|
||||
padding: 0;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__toggle-expand-cell {
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__toggle-expand-button {
|
||||
padding: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:focus {
|
||||
box-shadow: inset var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-table__expandable-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__expandable-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
|
||||
.navds-table__expandable-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-table__expanded-row-cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navds-table__expanded-row-cell:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-table__expanded-row-collapse {
|
||||
transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid var(--navds-table-cell-color-border);
|
||||
}
|
||||
|
||||
.navds-table__expanded-row-content {
|
||||
padding: var(--navds-spacing-4) 4.25rem;
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__expanded-row-content {
|
||||
padding: var(--navds-spacing-2) var(--navds-spacing-12);
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
.navds-tabs__tablist-wrapper {
|
||||
box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-tabs__tablist {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
scroll-behavior: smooth;
|
||||
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
||||
scrollbar-width: none; /* for Firefox */
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.navds-tabs__tablist::-webkit-scrollbar {
|
||||
display: none; /* for Chrome, Safari, and Opera */
|
||||
}
|
||||
|
||||
.navds-tabs__scroll-button {
|
||||
padding: var(--navds-spacing-3) var(--navds-spacing-4);
|
||||
width: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-tabs__scroll-button--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.navds-tabs__scroll-button svg {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-tabs--small .navds-tabs__scroll-button {
|
||||
padding: 0.375rem var(--navds-spacing-4);
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.navds-tabs__tab {
|
||||
min-height: 48px;
|
||||
padding: var(--navds-spacing-3) var(--navds-spacing-4);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--navds-semantic-color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-tabs__tab:hover {
|
||||
box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
|
||||
}
|
||||
|
||||
.navds-tabs__tab[aria-selected="true"] {
|
||||
box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
|
||||
color: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-tabs__tab:focus {
|
||||
outline: none;
|
||||
box-shadow: inset var(--navds-shadow-focus);
|
||||
color: var(--navds-semantic-color-text);
|
||||
}
|
||||
|
||||
.navds-tabs__tab-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.navds-tabs__tab--small {
|
||||
min-height: 32px;
|
||||
padding: 0.375rem var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-tabs__tab-icon--top,
|
||||
.navds-tabs__tab--small.navds-tabs__tab-icon--top {
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-tabs__tab svg,
|
||||
.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
|
||||
.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-tabs__tab--small svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navds-tabs__tab--icon-only svg,
|
||||
.navds-tabs__tab-icon--top svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-tabs__tabpanel:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
:root {
|
||||
--navds-tag-color-border: var(--navds-semantic-color-border-muted);
|
||||
--navds-tag-color-background: var(
|
||||
--navds-semantic-color-component-background-alternate
|
||||
);
|
||||
--navds-tag-color-info-background: var(
|
||||
--navds-semantic-color-feedback-info-background
|
||||
);
|
||||
--navds-tag-color-info-border: var(
|
||||
--navds-semantic-color-feedback-info-border
|
||||
);
|
||||
--navds-tag-color-warning-background: var(
|
||||
--navds-semantic-color-feedback-warning-background
|
||||
);
|
||||
--navds-tag-color-warning-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
--navds-tag-color-success-background: var(
|
||||
--navds-semantic-color-feedback-success-background
|
||||
);
|
||||
--navds-tag-color-success-border: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-tag-color-error-background: var(
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-tag-color-error-border: var(
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-tag {
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-tag-color-border);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
background-color: var(--navds-tag-color-background);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem var(--navds-spacing-3);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-tag--small {
|
||||
min-height: 24px;
|
||||
padding-right: var(--navds-spacing-1);
|
||||
padding-left: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-tag--error {
|
||||
background-color: var(--navds-tag-color-error-background);
|
||||
border-color: var(--navds-tag-color-error-border);
|
||||
}
|
||||
|
||||
.navds-tag--success {
|
||||
background-color: var(--navds-tag-color-success-background);
|
||||
border-color: var(--navds-tag-color-success-border);
|
||||
}
|
||||
|
||||
.navds-tag--warning {
|
||||
background-color: var(--navds-tag-color-warning-background);
|
||||
border-color: var(--navds-tag-color-warning-border);
|
||||
}
|
||||
|
||||
.navds-tag--info {
|
||||
background-color: var(--navds-tag-color-info-background);
|
||||
border-color: var(--navds-tag-color-info-border);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
:root {
|
||||
--navds-toggle-group-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-toggle-group-color-text: var(--navds-semantic-color-text);
|
||||
--navds-toggle-group-color-border: var(--navds-semantic-color-divider);
|
||||
--navds-toggle-group-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
--navds-toggle-group-color-text-hover: var(
|
||||
--navds-semantic-color-interaction-primary
|
||||
);
|
||||
--navds-toggle-group-color-background-pressed: var(
|
||||
--navds-semantic-color-interaction-primary-selected
|
||||
);
|
||||
--navds-toggle-group-color-text-pressed: var(
|
||||
--navds-semantic-color-text-inverted
|
||||
);
|
||||
}
|
||||
|
||||
.navds-toggle-group {
|
||||
border-radius: 7px; /* Custom value OK */
|
||||
background-color: var(--navds-toggle-group-color-background);
|
||||
box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
|
||||
padding: calc(var(--navds-spacing-1) + 1px);
|
||||
gap: var(--navds-spacing-1);
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--navds-spacing-3);
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--navds-toggle-group-color-background);
|
||||
color: var(--navds-toggle-group-color-text);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:hover {
|
||||
background-color: var(--navds-toggle-group-color-background-hover);
|
||||
color: var(--navds-toggle-group-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background),
|
||||
0 0 0 4px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover),
|
||||
0 0 0 4px var(--navds-semantic-color-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button[aria-pressed="true"],
|
||||
.navds-toggle-group__button[aria-checked="true"] {
|
||||
background-color: var(--navds-toggle-group-color-background-pressed);
|
||||
color: var(--navds-toggle-group-color-text-pressed);
|
||||
}
|
||||
|
||||
.navds-toggle-group--small > .navds-toggle-group__button {
|
||||
padding: 0.375rem;
|
||||
min-height: 32px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-toggle-group--small
|
||||
> .navds-toggle-group__button
|
||||
> .navds-toggle-group__button-inner
|
||||
> svg {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.navds-toggle-group__label {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
@keyframes tooltipFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-tooltip {
|
||||
z-index: var(--navds-z-index-tooltip);
|
||||
}
|
||||
|
||||
.navds-tooltip__inner {
|
||||
background-color: var(--navds-semantic-color-component-background-inverted);
|
||||
color: var(--navds-semantic-color-text-inverted);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
padding: 0 var(--navds-spacing-2);
|
||||
align-items: center;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
|
||||
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltipFadeIn;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navds-tooltip__arrow {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
background-color: var(--navds-semantic-color-component-background-inverted);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navds-tooltip__keys {
|
||||
padding-bottom: var(--navds-spacing-1);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-tooltip__key {
|
||||
font-family: var(--navds-font-family);
|
||||
background-color: var(--navds-global-color-gray-700);
|
||||
color: var(--navds-semantic-color-text-inverted);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
padding: 0 var(--navds-spacing-1);
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
/* Heading */
|
||||
.navds-heading {
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-2xlarge);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: var(--navds-font-line-height-heading-2xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-5);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
/* Mobile scale */
|
||||
@media (max-width: 480px) {
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-heading--medium {
|
||||
font-size: var(--navds-font-size-heading-medium);
|
||||
letter-spacing: -0.002em;
|
||||
line-height: var(--navds-font-line-height-heading-medium);
|
||||
}
|
||||
|
||||
.navds-heading--medium.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-heading--small {
|
||||
font-size: var(--navds-font-size-heading-small);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-heading-small);
|
||||
}
|
||||
|
||||
.navds-heading--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-heading--xsmall {
|
||||
font-size: var(--navds-font-size-heading-xsmall);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-heading-xsmall);
|
||||
}
|
||||
|
||||
.navds-heading--xsmall.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
/* Ingress */
|
||||
.navds-ingress {
|
||||
font-size: var(--navds-font-size-xlarge);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-xlarge);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-ingress.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.navds-body-long {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-xlarge);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-body-long.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-7);
|
||||
}
|
||||
|
||||
.navds-body-long--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
}
|
||||
|
||||
.navds-body-long--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-body-short {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-body-short.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-body-short--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
}
|
||||
|
||||
.navds-body-short--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.navds-label {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-label.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-label--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
}
|
||||
|
||||
.navds-label--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Small text */
|
||||
.navds-detail {
|
||||
font-size: var(--navds-font-size-small);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
letter-spacing: 0.004em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-detail.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-detail--small {
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
}
|
||||
|
||||
.navds-detail--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
/src
|
||||
/png
|
||||
@@ -1,16 +0,0 @@
|
||||
const template = require("./template");
|
||||
|
||||
module.exports = {
|
||||
typescript: true,
|
||||
ref: true,
|
||||
icon: true,
|
||||
titleProp: true,
|
||||
svgProps: {
|
||||
focusable: false,
|
||||
role: "img",
|
||||
},
|
||||
replaceAttrValues: {
|
||||
"#262626": "currentColor",
|
||||
},
|
||||
template,
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
|
||||
|
||||
## Installering
|
||||
|
||||
```sh
|
||||
// yarn
|
||||
yarn add @navikt/ds-icons
|
||||
|
||||
// npm
|
||||
npm install @navikt/ds-icons
|
||||
```
|
||||
|
||||
## Bruk
|
||||
|
||||
```jsx
|
||||
/* ESM (anbefalt for tree-shaking)*/
|
||||
import { Down } from "@navikt/ds-icons";
|
||||
/* CJS */
|
||||
import { Down } from "@navikt/cjs/ds-icons";
|
||||
|
||||
<Down aria-label="Åpne meny" />;
|
||||
```
|
||||
|
||||
## Dokumentasjon
|
||||
|
||||
- [Ikonsøk](https://design.nav.no/resources/icons)
|
||||
@@ -1,52 +0,0 @@
|
||||
import Axios from "axios";
|
||||
const { create, get } = Axios;
|
||||
|
||||
const FILE_KEY = "UmEVH3pZ71uJPsSz9ilP3Y";
|
||||
|
||||
const FigmaAxion = (token?: string) =>
|
||||
create({
|
||||
headers: {
|
||||
"X-FIGMA-TOKEN": token,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Published Figma-components
|
||||
* https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/%F0%9F%92%A0NAV-ikoner-2.5-Figma
|
||||
*/
|
||||
export const getPublishedIcons = async () => {
|
||||
const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
|
||||
.catch((e) => {
|
||||
console.log("Failed getPublishedIcons ");
|
||||
throw e;
|
||||
});
|
||||
|
||||
return data?.meta?.components?.filter((component: any) => {
|
||||
const page = component?.containing_frame?.pageName;
|
||||
return page !== "🔆Pictogram" && page !== "🧩Placeholder";
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Downloadable link to each icon in SVG-format
|
||||
*/
|
||||
export const getIconsDownloadableUrl = async (nodeIds: string) => {
|
||||
const {
|
||||
data: { images },
|
||||
} = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(
|
||||
`https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
|
||||
)
|
||||
.catch((e) => {
|
||||
console.log("Failed getIconsDownloadableUrl ");
|
||||
throw e;
|
||||
});
|
||||
|
||||
return Object.values(images) as string[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Download icon @url
|
||||
*/
|
||||
export const getIconContent = async (url: string) => get(url);
|
||||
@@ -1,85 +0,0 @@
|
||||
import {
|
||||
getPublishedIcons,
|
||||
getIconsDownloadableUrl,
|
||||
getIconContent,
|
||||
} from "./api";
|
||||
import { existsSync, writeFileSync, mkdirSync } from "fs";
|
||||
import { resolve } from "path";
|
||||
import pLimit from "p-limit";
|
||||
import rimraf from "rimraf";
|
||||
import startCase from "lodash.startcase";
|
||||
import { writeMeta } from "./write-meta";
|
||||
import dotenv from "dotenv";
|
||||
dotenv.config();
|
||||
|
||||
export type ComponentT = {
|
||||
key: string;
|
||||
file_key: string;
|
||||
node_id: string;
|
||||
thumbnail_url: string;
|
||||
name: string;
|
||||
description: string;
|
||||
updated_at: string;
|
||||
created_at: string;
|
||||
user: any;
|
||||
containing_frame: any;
|
||||
};
|
||||
|
||||
const main = async () => {
|
||||
if (!process.env.FIGMA_TOKEN) {
|
||||
throw new Error("FIGMA_TOKEN not set in .env");
|
||||
}
|
||||
const iconFolder = "./svg";
|
||||
|
||||
// Limiting to ~20 concurrent downloads seems to lead to less errors
|
||||
const limit = pLimit(20);
|
||||
|
||||
const publishedIconNodes: ComponentT[] = await getPublishedIcons();
|
||||
|
||||
writeMeta(publishedIconNodes);
|
||||
/* Get all urls in one fetch rather than 300+ */
|
||||
const iconUrls: string[] = await getIconsDownloadableUrl(
|
||||
publishedIconNodes.map((node) => node.node_id).join(",")
|
||||
);
|
||||
|
||||
if (existsSync(iconFolder)) {
|
||||
rimraf.sync(iconFolder);
|
||||
}
|
||||
mkdirSync(iconFolder);
|
||||
|
||||
console.log("Total icons: " + publishedIconNodes.length);
|
||||
|
||||
await Promise.all(
|
||||
iconUrls.map((url, x) =>
|
||||
limit(() =>
|
||||
getIconContent(url)
|
||||
.then(({ data }) => {
|
||||
writeFileSync(
|
||||
resolve(
|
||||
iconFolder,
|
||||
`${startCase(publishedIconNodes[x].name).replace(
|
||||
/\s/g,
|
||||
""
|
||||
)}.svg`
|
||||
),
|
||||
data,
|
||||
{
|
||||
encoding: "utf8",
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
console.log("\nDownloaded all icons from Figma!\n");
|
||||
};
|
||||
|
||||
try {
|
||||
main();
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { existsSync, unlinkSync, writeFileSync } from "fs";
|
||||
import startCase from "lodash.startcase";
|
||||
import { ComponentT } from ".";
|
||||
|
||||
const generateMetadata = (publishedIconNodes: ComponentT[]) => {
|
||||
return publishedIconNodes
|
||||
.map(({ name, description, created_at, containing_frame }) => {
|
||||
return {
|
||||
name: startCase(name).replace(/\s/g, ""),
|
||||
description,
|
||||
created_at,
|
||||
// strip emojis
|
||||
pageName: containing_frame.pageName.replace(
|
||||
/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
|
||||
""
|
||||
),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
|
||||
export const writeMeta = (publishedIconNodes: ComponentT[]) => {
|
||||
const metadataFileName = "./meta.json";
|
||||
|
||||
if (existsSync(metadataFileName)) {
|
||||
unlinkSync(metadataFileName);
|
||||
}
|
||||
writeFileSync(
|
||||
metadataFileName,
|
||||
JSON.stringify(generateMetadata(publishedIconNodes)),
|
||||
{
|
||||
encoding: "utf8",
|
||||
}
|
||||
);
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import * as Icons from "./src";
|
||||
export default {
|
||||
title: "ds-icons/Ikoner",
|
||||
argTypes: {
|
||||
Icon: {
|
||||
defaultValue: "System",
|
||||
control: {
|
||||
type: "select",
|
||||
options: Object.entries(Icons).map(([Name, _]) => Name),
|
||||
},
|
||||
},
|
||||
color: { control: "color" },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = ({ Icon, color, size, ...args }) => {
|
||||
const Iconname = Icons[Icon];
|
||||
return <Iconname style={{ fontSize: size, color }} {...args} />;
|
||||
};
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
size: "24px",
|
||||
};
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.8.14",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
|
||||
},
|
||||
"keywords": [
|
||||
"NAV",
|
||||
"designsystem",
|
||||
"react"
|
||||
],
|
||||
"license": "MIT",
|
||||
"author": "NAV",
|
||||
"sideEffects": false,
|
||||
"main": "./cjs/index.js",
|
||||
"module": "./esm/index.js",
|
||||
"typings": "./esm/index.d.ts",
|
||||
"files": [
|
||||
"/cjs",
|
||||
"/esm",
|
||||
"/src",
|
||||
"/svg",
|
||||
"/meta.json"
|
||||
],
|
||||
"scripts": {
|
||||
"create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
|
||||
"create-icons": "svgr --out-dir src svg",
|
||||
"clean": "rimraf src cjs esm",
|
||||
"build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
|
||||
"update": "ts-node figma/index.ts dotenv/config"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/cli": "6.2.1",
|
||||
"@types/lodash.startcase": "^4.4.6",
|
||||
"@types/rimraf": "3.0.2",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"axios": "^0.21.3",
|
||||
"copyfiles": "^2.4.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"lodash.startcase": "4.4.0",
|
||||
"react": "^18.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"sharp": "0.29.1",
|
||||
"ts-node": "^10.4.0"
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13L11 21H13V13H21V11H13V3H11L11 11H3V13H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 218 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 435 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 323 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM11 21L11 13H3V11H11V3H13V11H21V13H13V21H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 231 B |
@@ -1,5 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 24V14H20V24H18Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 735 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 410 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM18 15.6034L20.517 17.7009L18 18.456L15.483 17.7009L18 15.6034ZM18 20.544L22 19.344V22H14V19.344L18 20.544ZM12 18.4684C12 18.1716 12.1318 17.8901 12.3598 17.7002L17.3598 13.5335C17.7307 13.2244 18.2693 13.2244 18.6402 13.5335L23.6402 17.7002C23.8682 17.8901 24 18.1716 24 18.4684V23C24 23.5523 23.5523 24 23 24H13C12.4477 24 12 23.5523 12 23V18.4684ZM12 13C9.23858 13 7 15.2386 7 18H5C5 14.134 8.13401 11 12 11C13.4274 11 14.7549 11.4272 15.8619 12.1608L14.2297 13.5235C13.5584 13.1885 12.8012 13 12 13Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 891 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.185 18.9095L11.185 18.9095L20.2926 9.79323C20.6829 9.40252 21.3161 9.40222 21.7068 9.79255C22.0975 10.1829 22.0978 10.8161 21.7074 11.2068L12.6034 20.3196C10.4053 22.5614 6.83586 22.5601 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM13.377 3.30693C15.0823 1.56435 17.8563 1.56435 19.5616 3.30693C21.2551 5.03744 21.2551 7.83437 19.5616 9.56488L12.6369 16.641C11.424 17.8804 9.4484 17.8804 8.23551 16.641C7.03444 15.4136 7.03444 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.4494 13.5227 7.44256 13.9174 7.82884C14.3121 8.21511 14.319 8.84824 13.9327 9.24297L9.66493 13.604C9.22463 14.0539 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16604C19.0649 7.21294 19.0649 5.65887 18.1322 4.70577C17.2113 3.76473 15.7273 3.76473 14.8064 4.70577L6.06885 13.6344C4.64372 15.0907 4.64372 17.4606 6.06885 18.9168C7.48216 20.361 9.76445 20.361 11.1778 18.9168L11.1845 18.91L11.1845 18.91L13.2429 16.8466C13.2588 16.8283 13.2754 16.8103 13.2929 16.7929L14.792 15.2937L20.2929 9.79289C20.6834 9.40236 21.3166 9.40236 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7062L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5602 4.63943 20.3157C2.45353 18.082 2.45353 14.4692 4.63943 12.2356L13.377 3.30693Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.90861 7.82867C4.49075 4.38664 7.96771 2 12 2C17.5228 2 22 6.47715 22 12H24C24 5.37258 18.6274 0 12 0C8.41494 0 5.19821 1.57211 3 4.06279V2H1V7.41103L2.90861 7.82867ZM13.8873 4H10.1125L9.47678 5.90777L7.67765 5.00864L5.00864 7.67765L5.90777 9.47678L4 10.1125V13.8873L5.90764 14.5235L5.00864 16.3223L7.67765 18.9914L9.47653 18.0924L10.1127 20H13.8872L14.5238 18.0922L16.3222 18.9915L18.9915 16.3222L18.0922 14.5238L20 13.8872V10.1127L18.0924 9.47653L18.9914 7.67765L16.3223 5.00864L14.5235 5.90764L13.8873 4ZM10.9355 7.85663L11.5542 6H12.446L13.0652 7.85683L13.5087 8.02528C13.5879 8.05535 13.6659 8.08773 13.7428 8.12234L14.1757 8.31729L15.9272 7.44195L16.558 8.07277L15.6827 9.82429L15.8777 10.2572C15.9123 10.3341 15.9446 10.4121 15.9747 10.4913L16.1432 10.9348L18 11.554V12.4462L16.143 13.0659L15.9745 13.5092C15.9445 13.5883 15.9121 13.6664 15.8774 13.7433L15.6824 14.1764L16.5579 15.9274L15.9274 16.5579L14.1764 15.6824L13.7433 15.8774C13.6664 15.9121 13.5883 15.9445 13.5092 15.9745L13.0659 16.143L12.4462 18H11.554L10.9348 16.1432L10.4913 15.9747C10.4121 15.9446 10.3341 15.9123 10.2572 15.8777L9.82429 15.6827L8.07277 16.558L7.44195 15.9272L8.31729 14.1757L8.12234 13.7428C8.08773 13.6659 8.05535 13.5879 8.02528 13.5087L7.85683 13.0652L6 12.446V11.5542L7.85663 10.9355L8.0251 10.4918C8.05522 10.4124 8.08766 10.3342 8.12234 10.2572L8.31729 9.82429L7.44195 8.07277L8.07277 7.44195L9.82429 8.31729L10.2572 8.12234C10.3342 8.08766 10.4124 8.05522 10.4918 8.0251L10.9355 7.85663ZM12 22C16.0323 22 19.5093 19.6134 21.0914 16.1713L23 16.589V22H21V19.9372C18.8018 22.4279 15.5851 24 12 24C5.37258 24 0 18.6274 0 12H2C2 17.5228 6.47715 22 12 22ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C7.96771 2 4.49075 4.38664 2.90861 7.82867L1 7.41103V2H3V4.06279C5.19821 1.57211 8.41494 0 12 0C18.6274 0 24 5.37258 24 12H22C22 6.47715 17.5228 2 12 2ZM12 22C16.0323 22 19.5093 19.6134 21.0914 16.1713L23 16.589V22H21V19.9372C18.8018 22.4279 15.5851 24 12 24C5.37258 24 0 18.6274 0 12H2C2 17.5228 6.47715 22 12 22ZM13.8873 4H10.1125L9.47678 5.90777L7.67765 5.00864L5.00864 7.67765L5.90777 9.47678L4 10.1125V13.8873L5.90764 14.5235L5.00864 16.3223L7.67765 18.9914L9.47653 18.0924L10.1127 20H13.8872L14.5238 18.0922L16.3222 18.9915L18.9915 16.3222L18.0922 14.5238L20 13.8872V10.1127L18.0924 9.47653L18.9914 7.67765L16.3223 5.00864L14.5235 5.90764L13.8873 4ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 950 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C10 3.55228 9.55228 4 9 4C8.44772 4 8 3.55228 8 3C8 2.44772 8.44772 2 9 2C9.55228 2 10 2.44772 10 3ZM12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM21.5 16C22.3284 16 23 15.3284 23 14.5C23 13.6716 22.3284 13 21.5 13C20.6716 13 20 13.6716 20 14.5C20 15.3284 20.6716 16 21.5 16ZM3.18079 7.15469C3.36366 6.47353 3.98108 6 4.68636 6C6.78502 6 8.65406 7.19312 9.5682 9H13C13.5523 9 14 9.44771 14 10C14 10.5523 13.5523 11 13 11H10.1893L12.0018 19H9.25773V24H7.25773V17H9.49801L8.07159 10.7041C7.73815 9.23234 6.49779 8.15795 5.02038 8.01598L2.60848 17H5.25773V24H3.25773V19H0.000732422L3.18079 7.15469ZM19 11C19.5523 11 20 11.4477 20 12V14C20 15.1046 19.1046 16 18 16H16.618C15.8605 16 15.168 15.572 14.8292 14.8944L14.382 14H14C13.4477 14 13 13.5523 13 13C13 12.4477 13.4477 12 14 12H14.382C15.1395 12 15.832 12.428 16.1708 13.1056L16.618 14H18V12C18 11.4477 18.4477 11 19 11ZM14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H22C22.5523 19 23 18.5523 23 18C23 17.4477 22.5523 17 22 17H14Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.58578 12L14.2929 4.29289L15.7071 5.70711L9.41421 12L15.7071 18.2929L14.2929 19.7071L6.58578 12Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 269 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87868 12L13.9393 3.93934L16.0607 6.06066L10.1213 12L16.0607 17.9393L13.9393 20.0607L5.87868 12Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 269 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V13C0 13.7403 0.402199 14.3866 1 14.7324V21C1 22.1046 1.89543 23 3 23H21C22.1046 23 23 22.1046 23 21V14.7324C23.5978 14.3866 24 13.7403 24 13V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM7 7H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 7H7ZM11 15H3L3 21H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 670 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 620 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM15 7H9H6L6 20H18V7H15ZM8 10H16V12H8V10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 530 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2H15V5H9V2ZM7 5V2C7 0.895431 7.89543 0 9 0H15C16.1046 0 17 0.895431 17 2V5H18C19.1046 5 20 5.89543 20 7V20C20 21.1046 19.1046 22 18 22H17V23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23V22H9V23C9 23.5523 8.55228 24 8 24C7.44772 24 7 23.5523 7 23V22H6C4.89543 22 4 21.1046 4 20V7C4 5.89543 4.89543 5 6 5H7ZM16 10H8V12H16V10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 508 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.62119 2.62119C5.15085 0.0915334 8.44529 -0.737681 10.0823 0.710268L10.1964 0.817573L23.1824 13.8036C24.7762 15.3974 23.9687 18.7889 21.3788 21.3788C18.8492 23.9085 15.5547 24.7377 13.9177 23.2897L13.8036 23.1824L0.817573 10.1964L0.710268 10.0823C-0.737681 8.44529 0.0915334 5.15085 2.62119 2.62119ZM20.039 13.3398L13.3392 20.0396L15.1018 21.8023L15.1731 21.8705C15.8979 22.5116 18.1367 21.9413 20.039 20.039C21.9229 18.1551 22.4889 15.9664 21.9029 15.2119L21.8426 15.1434L20.039 13.3398ZM12 5.30085L5.30085 12L11.9993 18.6998L18.6992 12L12 5.30085ZM11.3301 14.0097C11.7001 13.6398 12.2999 13.6398 12.6699 14.0097C13.0399 14.3797 13.0399 14.9796 12.6699 15.3496C12.2999 15.7196 11.7001 15.7196 11.3301 15.3496C10.9601 14.9796 10.9601 14.3797 11.3301 14.0097ZM14.0097 11.3301C14.3797 10.9601 14.9796 10.9601 15.3496 11.3301C15.7196 11.7001 15.7196 12.2999 15.3496 12.6699C14.9796 13.0399 14.3797 13.0399 14.0097 12.6699C13.6398 12.2999 13.6398 11.7001 14.0097 11.3301ZM8.65042 11.3301C9.02041 10.9601 9.62027 10.9601 9.99026 11.3301C10.3602 11.7001 10.3602 12.2999 9.99026 12.6699C9.62027 13.0399 9.02041 13.0399 8.65042 12.6699C8.28044 12.2999 8.28044 11.7001 8.65042 11.3301ZM11.3301 8.65042C11.7001 8.28044 12.2999 8.28044 12.6699 8.65042C13.0399 9.02041 13.0399 9.62027 12.6699 9.99026C12.2999 10.3602 11.7001 10.3602 11.3301 9.99026C10.9601 9.62027 10.9601 9.02041 11.3301 8.65042ZM3.96102 3.96102C2.12011 5.80193 1.52657 7.95798 2.03584 8.71327L2.09044 8.78407L2.1574 8.85655L3.96102 10.6602L10.6602 3.96102L8.89815 2.19774L8.82694 2.12955C8.10206 1.48838 5.8633 2.05874 3.96102 3.96102Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0823 0.710268C8.44529 -0.737681 5.15085 0.0915334 2.62119 2.62119C0.0915334 5.15085 -0.737681 8.44529 0.710268 10.0823L0.817573 10.1964L1.6139 10.9927L10.9927 1.6139L10.1964 0.817573L10.0823 0.710268ZM12.4069 3.02811L3.02811 12.4069L11.6139 20.9927L20.9927 11.6139L12.4069 3.02811ZM22.4069 13.0281L13.0281 22.4069L13.8036 23.1824L13.9177 23.2897C15.5547 24.7377 18.8492 23.9085 21.3788 21.3788C23.9687 18.7889 24.7762 15.3974 23.1824 13.8036L22.4069 13.0281ZM12.6699 14.0097C12.2999 13.6398 11.7001 13.6398 11.3301 14.0097C10.9601 14.3797 10.9601 14.9796 11.3301 15.3496C11.7001 15.7196 12.2999 15.7196 12.6699 15.3496C13.0399 14.9796 13.0399 14.3797 12.6699 14.0097ZM15.3496 11.3301C14.9796 10.9601 14.3797 10.9601 14.0097 11.3301C13.6398 11.7001 13.6398 12.2999 14.0097 12.6699C14.3797 13.0399 14.9796 13.0399 15.3496 12.6699C15.7196 12.2999 15.7196 11.7001 15.3496 11.3301ZM9.99026 11.3301C9.62027 10.9601 9.02041 10.9601 8.65042 11.3301C8.28044 11.7001 8.28044 12.2999 8.65042 12.6699C9.02041 13.0399 9.62027 13.0399 9.99026 12.6699C10.3602 12.2999 10.3602 11.7001 9.99026 11.3301ZM12.6699 8.65042C12.2999 8.28044 11.7001 8.28044 11.3301 8.65042C10.9601 9.02041 10.9601 9.62027 11.3301 9.99026C11.7001 10.3602 12.2999 10.3602 12.6699 9.99026C13.0399 9.62027 13.0399 9.02041 12.6699 8.65042Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM2 16H22V12H2V16ZM20 4V10C20 7.79086 18.2091 6 16 6H15C13.8053 6 12.7329 6.52376 12 7.35418C11.2671 6.52376 10.1947 6 9 6H8C5.79086 6 4 7.79086 4 10V4H20ZM16 8C17.1046 8 18 8.89543 18 10H13C13 8.89543 13.8954 8 15 8H16ZM9 8C10.1046 8 11 8.89543 11 10H6C6 8.89543 6.89543 8 8 8H9Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 587 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM17 7C19 7 20 8.89543 20 10H13C13 8.89543 14 7 16 7H17ZM8 7C10 7 11 8.89543 11 10H4C4 8.89543 5 7 7 7H8Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 412 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM12 6C9.23858 6 7 8.23858 7 11V12.3767C7 14.0885 6.47556 15.7593 5.49727 17.164L4.91504 18H19.085L18.5027 17.164C17.5244 15.7593 17 14.0885 17 12.3767V11C17 8.23857 14.7614 6 12 6Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 854 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2V4.07089C16.3923 4.55612 19 7.47353 19 11V12.3767C19 13.6798 19.3992 14.9517 20.1439 16.021L21.8206 18.4285C22.0335 18.7341 22.0588 19.1327 21.8864 19.4629C21.714 19.793 21.3724 20 21 20H15C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20H3C2.62756 20 2.28597 19.793 2.11358 19.4629C1.94118 19.1327 1.96654 18.7341 2.17939 18.4285L3.85606 16.021C4.60077 14.9517 5 13.6798 5 12.3767V11C5 7.47353 7.60771 4.55612 11 4.07089V2H13ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 674 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM4.83437 13.2522L5.5198 11.0001L5.5 11C3.567 11 2 12.567 2 14.5C2 16.433 3.567 18 5.5 18C7.433 18 9 16.433 9 14.5C9 13.2817 8.37753 12.2088 7.43328 11.5819L6.74772 13.8345C6.58692 14.3628 6.02824 14.6608 5.49989 14.5C4.97153 14.3392 4.67357 13.7805 4.83437 13.2522ZM22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.6261 14.2665C17.8066 14.7884 18.3761 15.0653 18.898 14.8848C19.42 14.7043 19.6968 14.1348 19.5163 13.6128L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5ZM17.9312 9.02906C18.1182 9.00985 18.3079 9 18.5 9C21.5376 9 24 11.4624 24 14.5C24 17.5376 21.5376 20 18.5 20C15.4624 20 13 17.5376 13 14.5C13 12.3585 14.2239 10.5028 16.0104 9.59439L15.4591 8H11C10.4477 8 10 7.55228 10 7C10 6.44772 10.4477 6 11 6H16C16.3601 6 16.6757 6.19034 16.8518 6.47589C17.0158 6.59237 17.1462 6.75926 17.217 6.96382L17.9312 9.02906Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04321 2.70884C8.17136 2.28777 8.55975 2 8.99989 2H11.9999C12.5522 2 12.9999 2.44772 12.9999 3C12.9999 3.55228 12.5522 4 11.9999 4H9.74083L8.03161 9.616C9.79525 10.532 11 12.3753 11 14.5C11 17.5376 8.53757 20 5.5 20C2.46243 20 0 17.5376 0 14.5C0 11.4624 2.46243 9 5.5 9C5.70895 9 5.91517 9.01165 6.11806 9.03434L8.04321 2.70884ZM5.5 11L5.5198 11.0001L5.21042 12.0166C3.96612 12.1601 3 13.2172 3 14.5C3 15.8807 4.11929 17 5.5 17C6.88071 17 8 15.8807 8 14.5C8 13.7391 7.66005 13.0576 7.12373 12.599L7.43328 11.5819C8.37753 12.2088 9 13.2817 9 14.5C9 16.433 7.433 18 5.5 18C3.567 18 2 16.433 2 14.5C2 12.567 3.567 11 5.5 11ZM18.5 17C19.8807 17 21 15.8807 21 14.5C21 13.2814 20.1281 12.2664 18.9741 12.0449L18.6134 11.0018C20.4939 11.0616 22 12.6049 22 14.5C22 16.433 20.433 18 18.5 18C16.567 18 15 16.433 15 14.5C15 13.2361 15.6699 12.1287 16.6741 11.5134L17.0121 12.4908C16.398 12.9463 16 13.6767 16 14.5C16 15.8807 17.1193 17 18.5 17ZM16.0104 9.59439C14.2239 10.5028 13 12.3585 13 14.5C13 17.5376 15.4624 20 18.5 20C21.5376 20 24 17.5376 24 14.5C24 11.4624 21.5376 9 18.5 9C18.3079 9 18.1182 9.00985 17.9312 9.02906L17.217 6.96382C17.1462 6.75926 17.0158 6.59237 16.8518 6.47589C16.6757 6.19034 16.3601 6 16 6H11C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8H15.4591L16.0104 9.59439Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Loaded 100 of 1449 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user