Compare commits

..
Author SHA1 Message Date
Ken 692acc8aba Lerna versionbump [ci skip]
- nav-frontend-ikonknapper@2.1.0
 - nav-frontend-knapper-style@2.1.0
 - nav-frontend-knapper@3.1.0
 - nav-frontend-tabell-style@2.1.0
 - nav-frontend-toggle-style@2.1.0
 - nav-frontend-toggle@2.1.0
2021-08-26 14:24:31 +02:00
Ken 6d7dbca89e oppdatert mixin 2021-08-26 14:23:06 +02:00
Ken 54e1b07a73 oppdatert docs 2021-08-26 14:19:30 +02:00
Ken 1db2ebad72 oppdatert story2 2021-08-26 14:18:07 +02:00
Ken 2c843e51d7 fjernet uppercase 2021-08-26 14:14:26 +02:00
1593 changed files with 61285 additions and 24229 deletions

No files matched your search

-1
View File
@@ -1 +0,0 @@
509e1f2ded31a7d804422d05025454fac5a4c988
+79 -22
View File
@@ -1,7 +1,7 @@
# 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:
@@ -30,30 +30,35 @@ jobs:
- 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
- name: add access token to .env
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
- name: add branch token to .env
run: echo "BRANCH=HEAD" >> website/.env
- name: Test gatsby-build (design.nav.no)
run: yarn build:gatsby
- name: Test chromatic
uses: chromaui/action@v1
with:
token: ${{ secrets.GIT_REPO }}
projectToken: ${{ secrets.CHROMATIC }}
exitZeroOnChanges: true
publish-npm:
needs: test-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
registry-url: http://registry.npmjs.org
node-version: 14
- name: Node-modules cache
uses: actions/cache@v2
@@ -73,19 +78,19 @@ jobs:
git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
env:
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
- name: Update changed packages with PATCH
if: "contains(github.event.head_commit.message, '[fix]')"
- name: Update all package-versions with patch
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 NPM
run: |
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
npm whoami
env:
NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
- name: Publish to NPM registry
run: |
yarn lerna publish from-package --yes
rm .npmrc
- name: Create a .npmrc file for the github package repository
uses: FerLuisxd/create-npmrc@3
with:
@@ -94,4 +99,56 @@ jobs:
AUTH_TOKEN: ${{secrets.GIT_REPO}}
- name: Publish to Github registry
run: |
rm lerna.json && cp utilities/lerna.json lerna.json
git add . && git commit -m "tmp"
yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
publish-pages:
needs: publish-npm
runs-on: ubuntu-latest
if: github.event_name == 'push'
steps:
- uses: actions/checkout@v2
with:
fetch-depth: "0"
token: ${{secrets.GIT_REPO}}
- 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 deps
if: steps.node-cache.outputs.cache-hit != 'true'
run: yarn install
- name: Gulp-build
run: yarn boot
- name: add access token to .env
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
- name: add branch token to .env
run: echo "BRANCH=HEAD" >> website/.env
- name: Building Gatsby
run: yarn build:gatsby
- name: Building Storybook
run: yarn build-storybook
- name: Deploy to Design.nav.no 🚀
uses: JamesIves/github-pages-deploy-action@3.6.2
with:
GITHUB_TOKEN: $NAV_DS_TOKEN
BRANCH: gh-pages
FOLDER: website/public
env:
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
- name: Deploy storybook to designsystem-repo
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{secrets.GIT_REPO}}
external_repository: navikt/designsystemet
publish_dir: ./storybook-static
user_name: "github-actions[bot]"
user_email: "github-actions[bot]@users.noreply.github.com"
-126
View File
@@ -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
+39
View File
@@ -0,0 +1,39 @@
# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
name: Publish Storybook
on:
workflow_dispatch
jobs:
publish-storybook:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: "0"
token: ${{secrets.GIT_REPO}}
- 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 deps
if: steps.node-cache.outputs.cache-hit != 'true'
run: yarn install --frozen-lockfile
- name: Gulp-build
run: yarn boot
- name: Building Storybook
run: yarn build-storybook
- name: Deploy storybook
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{secrets.GIT_REPO}}
external_repository: navikt/designsystemet
publish_dir: ./storybook-static
user_name: "github-actions[bot]"
user_email: "github-actions[bot]@users.noreply.github.com"
-42
View File
@@ -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"
-39
View File
@@ -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
+47
View File
@@ -0,0 +1,47 @@
name: Publish verktøykasse-innhold to dev
on:
push:
branches: verktoykasse-prototype
repository_dispatch:
types: [new-content]
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
ref: verktoykasse-prototype
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 deps
if: steps.node-cache.outputs.cache-hit != 'true'
run: yarn install
- name: Gulp-build
run: yarn boot
- name: Eslint and Stylelint
run: yarn lint
- name: add access token to .env
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
- name: add branch token to .env
run: echo "BRANCH=dev" >> website/.env
- name: Gatsby-build
run: yarn build:gatsby
- name: Deploy to dev gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{secrets.GIT_REPO}}
external_repository: navikt/verktoykasse-innhold
publish_dir: website/public
user_name: "github-actions[bot]"
user_email: "github-actions[bot]@users.noreply.github.com"
+4 -4
View File
@@ -100,6 +100,7 @@ examples/webpack/out
*.d.ts
*-exports.less
**/css/
*/figma-api/icons
*/ds-icons/png
packages/**/css
@@ -107,13 +108,12 @@ utilities/**/css
*/static/*.zip
*/static/png
@navikt/core/icons/NAV-ikonpakke-png.zip
@navikt/core/icons/NAV-ikonpakke-svg.zip
@navikt/ds-icons/NAV-ikonpakke-png.zip
@navikt/ds-icons/NAV-ikonpakke-svg.zip
*/**/NAV-ikonpakke-png.zip
*/**/NAV-ikonpakke-svg.zip
react-docgen.json
react-docgen-docs.json
cjs
esm
.vercel
esm
+57
View File
@@ -0,0 +1,57 @@
{
"repository": "@nav/designsystem",
"head": "updated-specify-tokens",
"base": "master",
"rules": [
{
"name": "Specify / Icons",
"path": "@navikt/ds-icons/svg",
"filter": {
"types": ["vector"]
},
"parsers": [
{
"name": "pascalcasify",
"options": {
"keys": ["name"]
}
},
{
"name": "name-assets-files-by-pattern",
"options": {
"pattern": "{{name}}.{{format}}"
}
}
]
},
{
"name": "Specify / Icons - metadata",
"path": "@navikt/ds-icons/figma-api/metadata-specify.json",
"filter": {
"types": ["vector"]
},
"parsers": [
{
"name": "pascalcasify",
"options": {
"keys": ["name"]
}
},
{
"name": "pick",
"options": {
"keys": [
"name",
"createdAt",
"updatedAt",
"meta.description",
"meta.parentFrame",
"meta.frame",
"page"
]
}
}
]
}
]
}
-12
View File
@@ -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 />`
-17
View File
@@ -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;
}
+5 -12
View File
@@ -1,19 +1,16 @@
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"],
stories: [
"../.storybook/**/*.stories.@(mdx)",
"../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
"../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
],
addons: [
"@storybook/addon-docs",
"@storybook/addon-a11y",
{
name: "@storybook/addon-storysource",
options: {
@@ -30,8 +27,4 @@ module.exports = {
},
},
],
core: {
builder: "webpack5",
},
staticDirs: ["./public"],
};
+3 -11
View File
@@ -1,21 +1,13 @@
import "nav-frontend-core";
import "@navikt/ds-css/index.css";
import "@navikt/ds-css-internal/index.css";
import "./layout.css";
import { initialize, mswDecorator } from "msw-storybook-addon";
initialize();
export const decorators = [mswDecorator];
export const parameters = {
/* actions: { argTypesRegex: "^on[A-Z].*" }, */
actions: { argTypesRegex: "^on[A-Z].*" },
options: {
storySort: {
method: "",
order: ["ds-icons", "ds-react", ["Default"]],
order: [],
locales: "",
},
},
viewMode: "docs",
layout: "centered",
};
-338
View File
@@ -1,338 +0,0 @@
/* eslint-disable */
/* tslint:disable */
/**
* Mock Service Worker (0.36.5).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.
*/
const INTEGRITY_CHECKSUM = "02f4ad4a2797f85668baf196e553d929";
const bypassHeaderName = "x-msw-bypass";
const activeClientIds = new Set();
self.addEventListener("install", function () {
return self.skipWaiting();
});
self.addEventListener("activate", async function (event) {
return self.clients.claim();
});
self.addEventListener("message", async function (event) {
const clientId = event.source.id;
if (!clientId || !self.clients) {
return;
}
const client = await self.clients.get(clientId);
if (!client) {
return;
}
const allClients = await self.clients.matchAll();
switch (event.data) {
case "KEEPALIVE_REQUEST": {
sendToClient(client, {
type: "KEEPALIVE_RESPONSE",
});
break;
}
case "INTEGRITY_CHECK_REQUEST": {
sendToClient(client, {
type: "INTEGRITY_CHECK_RESPONSE",
payload: INTEGRITY_CHECKSUM,
});
break;
}
case "MOCK_ACTIVATE": {
activeClientIds.add(clientId);
sendToClient(client, {
type: "MOCKING_ENABLED",
payload: true,
});
break;
}
case "MOCK_DEACTIVATE": {
activeClientIds.delete(clientId);
break;
}
case "CLIENT_CLOSED": {
activeClientIds.delete(clientId);
const remainingClients = allClients.filter((client) => {
return client.id !== clientId;
});
// Unregister itself when there are no more clients
if (remainingClients.length === 0) {
self.registration.unregister();
}
break;
}
}
});
// Resolve the "main" client for the given event.
// Client that issues a request doesn't necessarily equal the client
// that registered the worker. It's with the latter the worker should
// communicate with during the response resolving phase.
async function resolveMainClient(event) {
const client = await self.clients.get(event.clientId);
if (client.frameType === "top-level") {
return client;
}
const allClients = await self.clients.matchAll();
return allClients
.filter((client) => {
// Get only those clients that are currently visible.
return client.visibilityState === "visible";
})
.find((client) => {
// Find the client ID that's recorded in the
// set of clients that have registered the worker.
return activeClientIds.has(client.id);
});
}
async function handleRequest(event, requestId) {
const client = await resolveMainClient(event);
const response = await getResponse(event, client, requestId);
// Send back the response clone for the "response:*" life-cycle events.
// Ensure MSW is active and ready to handle the message, otherwise
// this message will pend indefinitely.
if (client && activeClientIds.has(client.id)) {
(async function () {
const clonedResponse = response.clone();
sendToClient(client, {
type: "RESPONSE",
payload: {
requestId,
type: clonedResponse.type,
ok: clonedResponse.ok,
status: clonedResponse.status,
statusText: clonedResponse.statusText,
body:
clonedResponse.body === null ? null : await clonedResponse.text(),
headers: serializeHeaders(clonedResponse.headers),
redirected: clonedResponse.redirected,
},
});
})();
}
return response;
}
async function getResponse(event, client, requestId) {
const { request } = event;
const requestClone = request.clone();
const getOriginalResponse = () => fetch(requestClone);
// Bypass mocking when the request client is not active.
if (!client) {
return getOriginalResponse();
}
// Bypass initial page load requests (i.e. static assets).
// The absence of the immediate/parent client in the map of the active clients
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
// and is not ready to handle requests.
if (!activeClientIds.has(client.id)) {
return await getOriginalResponse();
}
// Bypass requests with the explicit bypass header
if (requestClone.headers.get(bypassHeaderName) === "true") {
const cleanRequestHeaders = serializeHeaders(requestClone.headers);
// Remove the bypass header to comply with the CORS preflight check.
delete cleanRequestHeaders[bypassHeaderName];
const originalRequest = new Request(requestClone, {
headers: new Headers(cleanRequestHeaders),
});
return fetch(originalRequest);
}
// Send the request to the client-side MSW.
const reqHeaders = serializeHeaders(request.headers);
const body = await request.text();
const clientMessage = await sendToClient(client, {
type: "REQUEST",
payload: {
id: requestId,
url: request.url,
method: request.method,
headers: reqHeaders,
cache: request.cache,
mode: request.mode,
credentials: request.credentials,
destination: request.destination,
integrity: request.integrity,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
body,
bodyUsed: request.bodyUsed,
keepalive: request.keepalive,
},
});
switch (clientMessage.type) {
case "MOCK_SUCCESS": {
return delayPromise(
() => respondWithMock(clientMessage),
clientMessage.payload.delay
);
}
case "MOCK_NOT_FOUND": {
return getOriginalResponse();
}
case "NETWORK_ERROR": {
const { name, message } = clientMessage.payload;
const networkError = new Error(message);
networkError.name = name;
// Rejecting a request Promise emulates a network error.
throw networkError;
}
case "INTERNAL_ERROR": {
const parsedBody = JSON.parse(clientMessage.payload.body);
console.error(
`\
[MSW] Uncaught exception in the request handler for "%s %s":
${parsedBody.location}
This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
`,
request.method,
request.url
);
return respondWithMock(clientMessage);
}
}
return getOriginalResponse();
}
self.addEventListener("fetch", function (event) {
const { request } = event;
const accept = request.headers.get("accept") || "";
// Bypass server-sent events.
if (accept.includes("text/event-stream")) {
return;
}
// Bypass navigation requests.
if (request.mode === "navigate") {
return;
}
// Opening the DevTools triggers the "only-if-cached" request
// that cannot be handled by the worker. Bypass such requests.
if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
return;
}
// Bypass all requests when there are no active clients.
// Prevents the self-unregistered worked from handling requests
// after it's been deleted (still remains active until the next reload).
if (activeClientIds.size === 0) {
return;
}
const requestId = uuidv4();
return event.respondWith(
handleRequest(event, requestId).catch((error) => {
if (error.name === "NetworkError") {
console.warn(
'[MSW] Successfully emulated a network error for the "%s %s" request.',
request.method,
request.url
);
return;
}
// At this point, any exception indicates an issue with the original request/response.
console.error(
`\
[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
request.method,
request.url,
`${error.name}: ${error.message}`
);
})
);
});
function serializeHeaders(headers) {
const reqHeaders = {};
headers.forEach((value, name) => {
reqHeaders[name] = reqHeaders[name]
? [].concat(reqHeaders[name]).concat(value)
: value;
});
return reqHeaders;
}
function sendToClient(client, message) {
return new Promise((resolve, reject) => {
const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
if (event.data && event.data.error) {
return reject(event.data.error);
}
resolve(event.data);
};
client.postMessage(JSON.stringify(message), [channel.port2]);
});
}
function delayPromise(cb, duration) {
return new Promise((resolve) => {
setTimeout(() => resolve(cb()), duration);
});
}
function respondWithMock(clientMessage) {
return new Response(clientMessage.payload.body, {
...clientMessage.payload,
headers: clientMessage.payload.headers,
});
}
function uuidv4() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0;
const v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
@@ -0,0 +1,22 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="ds-react/Kom i gang" />
# Ta i bruk `@navikt/ds-react` pakken
## Oppsett
```bash
yarn add @navikt/ds-react @navikt/ds-css
```
Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
For å legge til all stylingen som trengs må man da bare importere `ds-css`.
```bash
import "@navikt/ds-css"
```
Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+57
View File
@@ -0,0 +1,57 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="ds-react/Roadmap" />
# Plan videre
Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
bygge mer robuste og fleksible løsninger for fremtiden.
(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
## Tokens
Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
## Intern / Ekstern sizing
Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
Løsning er ikke fast bestemt, men eksempel på dette er `size="s" -> 32px, size="m"-> 48px`.
Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
## Ny dokumentasjon-side
Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
## Theming
Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
eks darkmode.
## Vue, svelte, web-components etc...
Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
noe vi kunne ta en titt på hvis vi ser at det trengs.
## Feature-flagging
Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
## Versjonering
To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
slik at man kan ha mer finkontroll over komponentbruk på siden sin.
+14 -7
View File
@@ -1,13 +1,20 @@
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"),
],
});
baseConfig.config.module.rules.push(
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
include: [
path.resolve(__dirname, "../node_modules/@navikt/ds-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(
+3
View File
@@ -0,0 +1,3 @@
# Designsystem v2
Storybook: https://navikt.github.io/Designsystemet/
-98
View File
@@ -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;
}
-127
View File
@@ -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;
}
-314
View File
@@ -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);
}
-55
View File
@@ -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,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 {
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 {
padding: var(--navds-spacing-3);
gap: var(--navds-spacing-2);
}
.navds-confirmation-panel--checked {
background-color: var(--navds-confirmation-panel-color-background-checked);
border-color: var(--navds-confirmation-panel-color-border-checked);
}
.navds-confirmation-panel--error {
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==);
}
-15
View File
@@ -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: "•";
}
-34
View File
@@ -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;
}
-24
View File
@@ -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;
}
-10
View File
@@ -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;
}
-212
View File
@@ -1,212 +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-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-text);
}
.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;
}
-158
View File
@@ -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;
}
-85
View File
@@ -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;
}
-220
View File
@@ -1,220 +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--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;
}
-113
View File
@@ -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;
}
-109
View File
@@ -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;
}
-80
View File
@@ -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;
}
-61
View File
@@ -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);
}
-46
View File
@@ -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);
}
-57
View File
@@ -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);
}
-100
View File
@@ -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;
}
}
-102
View File
@@ -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);
}
-76
View File
@@ -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: start;
}
.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: start;
}
.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);
}
}
-122
View File
@@ -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;
}
-17
View File
@@ -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);
}
-54
View File
@@ -1,54 +0,0 @@
.navds-read-more {
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: underline;
border: none;
background: none;
display: flex;
align-items: center;
gap: var(--navds-spacing-2);
color: var(--navds-semantic-color-link);
text-align: left;
}
.navds-read-more:hover {
text-decoration: none;
}
.navds-read-more: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-read-more__expand-icon {
flex-shrink: 0;
font-size: 1.25rem;
}
.navds-read-more--open > .navds-read-more__expand-icon {
transform: rotate(180deg);
}
.navds-read-more + .ReactCollapse--collapse {
transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
padding-top: var(--navds-spacing-2);
}
.navds-read-more__content {
display: flex;
align-items: stretch;
gap: var(--navds-spacing-2);
}
.navds-read-more__content::before {
content: "";
display: block;
width: 2px;
background-color: var(--navds-semantic-color-border-muted);
margin: 0 9px;
flex-shrink: 0;
}
-202
View File
@@ -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;
}
-99
View File
@@ -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: start;
}
.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;
}
-233
View File
@@ -1,233 +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-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);
}
-109
View File
@@ -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;
}
-68
View File
@@ -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);
}
-97
View File
@@ -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;
}
-56
View File
@@ -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 1px 2px rgba(0, 0, 0, 0.05))
drop-shadow(0 1px 3px 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;
}
-180
View File
@@ -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);
}
-2
View File
@@ -1,2 +0,0 @@
/src
/png
-16
View File
@@ -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,
};
-28
View File
@@ -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)
-52
View File
@@ -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);
-85
View File
@@ -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;
}
-35
View File
@@ -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",
}
);
};
-57
View File
@@ -1,57 +0,0 @@
{
"name": "@navikt/ds-icons",
"version": "0.8.11",
"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": "^5.5.0",
"@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"
}
}
-3
View File
@@ -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.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.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.40237 21.3166 9.40237 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7063L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5603 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.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="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

-3
View File
@@ -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

-3
View File
@@ -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

-3
View File
@@ -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.16115 3.8317L12 0L14.8388 3.8317C16.1005 5.53465 15.5894 7.95753 13.7473 9.00572C12.664 9.62217 11.336 9.62217 10.2527 9.00572C8.41059 7.95753 7.89946 5.53465 9.16115 3.8317ZM10.7682 5.0223L12 3.35964L13.2318 5.0223C13.7793 5.76126 13.5575 6.8126 12.7582 7.26743C12.2881 7.53493 11.7119 7.53493 11.2418 7.26743C10.4425 6.8126 10.2207 5.76126 10.7682 5.0223ZM3.14286 12C3.06396 12 3 12.064 3 12.1429V16.5C3 17.3284 3.67157 18 4.5 18C5.32843 18 6 17.3284 6 16.5V15C6 14.4477 6.44772 14 7 14C7.55228 14 8 14.4477 8 15V16.5C8 18.2632 6.69615 19.7219 5 19.9646V22H11.1707C11.0602 21.6872 11 21.3506 11 21V17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17V21C13 21.5523 13.4477 22 14 22C14.5523 22 15 21.5523 15 21V16V15C15 14.4477 15.4477 14 16 14C16.5523 14 17 14.4477 17 15V16C17 17.1046 17.8954 18 19 18C20.1046 18 21 17.1046 21 16V12.1429C21 12.064 20.936 12 20.8571 12H13H11H3.14286ZM17 21V19.4649C17.5883 19.8052 18.2714 20 19 20V22H16.8293C16.9398 21.6872 17 21.3506 17 21ZM21 22V19.4649C22.1956 18.7733 23 17.4806 23 16V12.1429C23 10.9594 22.0406 10 20.8571 10H13H11H3.14286C1.95939 10 1 10.9594 1 12.1429V16.5C1 17.8962 1.81753 19.1015 3 19.6632V22C3 23.1046 3.89543 24 5 24H14H19C20.1046 24 21 23.1046 21 22Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

-3
View File
@@ -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 0L9.16115 3.8317C7.89946 5.53465 8.41059 7.95753 10.2527 9.00572C10.4916 9.14169 10.7425 9.24767 11 9.32366V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V9.32366C13.2575 9.24767 13.5084 9.14169 13.7473 9.00572C15.5894 7.95753 16.1005 5.53465 14.8388 3.8317L12 0ZM1 11.1429C1 11.064 1.06396 11 1.14286 11H22.8571C22.936 11 23 11.064 23 11.1429V16C23 17.1046 22 18 20 18C18 18 17 17.1046 17 16V15C17 14.4477 16.5523 14 16 14C15.4477 14 15 14.4477 15 15V21C15 21.5523 14.5523 22 14 22C13.4477 22 13 21.5523 13 21V17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17V21C11 23 11.5 23.5 12 24H4C3.44772 24 3 23.5523 3 23V19.9646C7 19.9646 8 18.2632 8 16.5V15C8 14.4477 7.55228 14 7 14C6.44772 14 6 14.4477 6 15V16.5C6 17.3284 5 18 3.5 18C2 18 1 17.3284 1 16.5V11.1429ZM17 21V19.4649C17.9112 19.9525 18.8223 19.9664 20.4899 19.9918C20.6525 19.9943 20.8223 19.9969 21 20V23C21 23.5523 20.5523 24 20 24H16C16.5 23.5 17 23 17 21Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

-4
View File
@@ -1,4 +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.7167 11.6111C13.8389 11.6111 15.752 12.5057 17.0997 13.9384L15.6059 15.4322C14.6412 14.3811 13.2559 13.7222 11.7167 13.7222C8.80187 13.7222 6.43893 16.0852 6.43893 19H4.32782C4.32782 14.9192 7.63594 11.6111 11.7167 11.6111ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.5341 16.1009C19.911 15.7239 20.5222 15.7239 20.8991 16.1009C21.2761 16.4778 21.2761 17.089 20.8991 17.4659ZM22.1848 18.7516L17.7674 23.169L13 24L13.831 19.2327L18.2485 14.8152C19.3354 13.7283 21.0978 13.7283 22.1848 14.8152C23.2718 15.9022 23.2718 17.6646 22.1848 18.7516Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 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 10Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

@@ -1,6 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6.5" cy="12" r="1.5" fill="#262626"/>
<circle cx="12" cy="12" r="1.5" fill="#262626"/>
<circle cx="17.5" cy="12" r="1.5" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 547 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 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 698 B

-3
View File
@@ -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 12C8 12.8284 7.32843 13.5 6.5 13.5C5.67157 13.5 5 12.8284 5 12C5 11.1716 5.67157 10.5 6.5 10.5C7.32843 10.5 8 11.1716 8 12ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17.5 13.5C18.3284 13.5 19 12.8284 19 12C19 11.1716 18.3284 10.5 17.5 10.5C16.6716 10.5 16 11.1716 16 12C16 12.8284 16.6716 13.5 17.5 13.5Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 581 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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM6.5 13.5C7.32843 13.5 8 12.8284 8 12C8 11.1716 7.32843 10.5 6.5 10.5C5.67157 10.5 5 11.1716 5 12C5 12.8284 5.67157 13.5 6.5 13.5ZM12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM19 12C19 12.8284 18.3284 13.5 17.5 13.5C16.6716 13.5 16 12.8284 16 12C16 11.1716 16.6716 10.5 17.5 10.5C18.3284 10.5 19 11.1716 19 12Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 704 B

-3
View File
@@ -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 8C11.1716 8 10.5 7.32843 10.5 6.5C10.5 5.67157 11.1716 5 12 5C12.8284 5 13.5 5.67157 13.5 6.5C13.5 7.32843 12.8284 8 12 8ZM12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5ZM10.5 17.5C10.5 18.3284 11.1716 19 12 19C12.8284 19 13.5 18.3284 13.5 17.5C13.5 16.6716 12.8284 16 12 16C11.1716 16 10.5 16.6716 10.5 17.5Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 581 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 1C24 0.447715 23.5523 -1.95703e-08 23 -4.37114e-08L1 -1.00536e-06C0.447716 -1.0295e-06 -1.95703e-08 0.447715 -4.37114e-08 0.999999L-1.00536e-06 23C-1.0295e-06 23.5523 0.447715 24 0.999999 24L23 24C23.5523 24 24 23.5523 24 23L24 1ZM10.5 6.5C10.5 7.32843 11.1716 8 12 8C12.8284 8 13.5 7.32843 13.5 6.5C13.5 5.67157 12.8284 5 12 5C11.1716 5 10.5 5.67157 10.5 6.5ZM10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12ZM12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 815 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8.2L0.518081 7.32378L0 7.60873V8.2H1ZM23 8.2H24V7.60873L23.4819 7.32378L23 8.2ZM12 2.15L12.4819 1.27378L12 1.00873L11.5181 1.27378L12 2.15ZM12 15L11.5211 15.8779L12 16.1391L12.4789 15.8779L12 15ZM22 20H2V22H22V20ZM1.48192 9.07622L12.4819 3.02622L11.5181 1.27378L0.518081 7.32378L1.48192 9.07622ZM11.5181 3.02622L22.5181 9.07622L23.4819 7.32378L12.4819 1.27378L11.5181 3.02622ZM22 8.2V9H24V8.2H22ZM2 9V8.2H0V9H2ZM22 9V20H24V9H22ZM22.5211 8.1221L13.5211 13.0312L14.4789 14.787L23.4789 9.8779L22.5211 8.1221ZM13.5211 13.0312L11.5211 14.1221L12.4789 15.8779L14.4789 14.787L13.5211 13.0312ZM23.5605 19.1718L14.5605 13.0809L13.4395 14.7373L22.4395 20.8282L23.5605 19.1718ZM2 20V9H0V20H2ZM12.4789 14.1221L10.4789 13.0312L9.52115 14.787L11.5211 15.8779L12.4789 14.1221ZM10.4789 13.0312L1.47885 8.1221L0.521148 9.8779L9.52115 14.787L10.4789 13.0312ZM1.56048 20.8282L10.5605 14.7373L9.43952 13.0809L0.439522 19.1718L1.56048 20.8282ZM2 20H2H0C0 21.1046 0.895431 22 2 22V20ZM22 22C23.1046 22 24 21.1046 24 20H22V22Z" 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="M0.210623 7.51518L10.4732 13.0282L10.4789 13.0312L10.4789 13.0312L12 13.8609L13.5211 13.0312L13.5268 13.0281L13.5268 13.0282L23.7894 7.51518L12 1L0.210623 7.51518ZM24 9.67234L15.9314 14.0067L24 19.4557V9.67234ZM23.3783 21.4492L13.9446 15.0784L12.4789 15.8779L12 16.1391L11.5211 15.8779L10.0554 15.0784L0.621651 21.4492C0.980399 21.7905 1.46574 22 2 22H22C22.5343 22 23.0196 21.7905 23.3783 21.4492ZM0 19.4557L8.06862 14.0067L0 9.67234V19.4557Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 614 B

-10
View File
@@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6836 0.585361C11.7435 0.401105 12.0041 0.401105 12.064 0.585362L12.5383 2.04506C12.5651 2.12746 12.6419 2.18325 12.7286 2.18325H14.2632C14.4569 2.18325 14.5375 2.43117 14.3807 2.54505L13.1391 3.44712C13.069 3.49805 13.0397 3.58833 13.0664 3.67074L13.5407 5.13034C13.6006 5.3146 13.3897 5.46783 13.233 5.35394L11.9914 4.45183C11.9213 4.4009 11.8263 4.4009 11.7563 4.45183L10.5146 5.35397C10.3578 5.46785 10.1469 5.31462 10.2068 5.13036L10.6811 3.67074C10.7079 3.58833 10.6785 3.49805 10.6084 3.44712L9.36682 2.54505C9.21008 2.43117 9.29063 2.18325 9.48438 2.18325H11.0191C11.1057 2.18325 11.1825 2.12746 11.2093 2.04506L11.6836 0.585361Z" fill="#262626"/>
<path d="M3.72187 3.991C3.63391 3.81837 3.81823 3.63404 3.99086 3.72199L5.38403 4.43175C5.46122 4.47108 5.55497 4.45623 5.61623 4.39497L6.72162 3.28964C6.85862 3.15264 7.09089 3.271 7.06057 3.46236L6.81595 5.00634C6.80239 5.09192 6.84548 5.1765 6.92269 5.21584L8.31573 5.92562C8.48835 6.01358 8.44758 6.27105 8.25622 6.30136L6.71211 6.54594C6.62654 6.55949 6.55942 6.62661 6.54587 6.71219L6.30129 8.25637C6.27098 8.44773 6.01351 8.48851 5.92555 8.31588L5.21577 6.92284C5.17643 6.84564 5.09185 6.80254 5.00627 6.8161L3.46232 7.06072C3.27095 7.09104 3.1526 6.85877 3.2896 6.72177L4.39497 5.61639C4.45624 5.55513 4.47109 5.46137 4.43175 5.38417L3.72187 3.991Z" fill="#262626"/>
<path d="M0.585361 12.2186C0.401105 12.1587 0.401105 11.898 0.585362 11.8381L2.15739 11.3273C2.23979 11.3005 2.29558 11.2238 2.29558 11.1371V9.48437C2.29558 9.29062 2.54351 9.21007 2.65739 9.36682L3.62879 10.704C3.67971 10.7741 3.76999 10.8034 3.8524 10.7767L5.42439 10.2659C5.60866 10.206 5.76189 10.4169 5.64799 10.5737L4.6764 11.9108C4.62546 11.9809 4.62546 12.0758 4.6764 12.1459L5.64802 13.4831C5.76191 13.6398 5.60869 13.8507 5.42442 13.7909L3.85239 13.2801C3.76999 13.2533 3.67971 13.2827 3.62879 13.3528L2.65739 14.6899C2.54351 14.8467 2.29558 14.7661 2.29558 14.5724V12.9196C2.29558 12.8329 2.23979 12.7562 2.15739 12.7294L0.585361 12.2186Z" fill="#262626"/>
<path d="M3.99086 20.0891C3.81823 20.177 3.63391 19.9927 3.72186 19.8201L4.43169 18.4269C4.47103 18.3497 4.45618 18.2559 4.39492 18.1947L3.28959 17.0893C3.15259 16.9523 3.27096 16.72 3.46232 16.7503L5.00638 16.995C5.09197 17.0086 5.17655 16.9655 5.21589 16.8883L5.92553 15.4953C6.01348 15.3226 6.27096 15.3634 6.30128 15.5548L6.54591 17.0989C6.55947 17.1845 6.62659 17.2516 6.71216 17.2651L8.25628 17.5097C8.44763 17.54 8.48841 17.7975 8.31579 17.8854L6.92289 18.5952C6.8457 18.6346 6.80261 18.7191 6.81616 18.8047L7.06069 20.3488C7.09099 20.5401 6.85872 20.6585 6.72173 20.5215L5.61627 19.416C5.55501 19.3548 5.46126 19.3399 5.38406 19.3793L3.99086 20.0891Z" fill="#262626"/>
<path d="M12.064 23.1204C12.0041 23.3047 11.7435 23.3047 11.6836 23.1205L11.2092 21.6608C11.1824 21.5784 11.1056 21.5226 11.019 21.5226H9.4844C9.29066 21.5226 9.2101 21.2746 9.36685 21.1608L10.6085 20.2587C10.6786 20.2078 10.7079 20.1175 10.6812 20.0351L10.2068 18.5756C10.1469 18.3914 10.3578 18.2381 10.5146 18.352L11.7563 19.254C11.8264 19.3049 11.9213 19.3049 11.9914 19.254L13.233 18.352C13.3897 18.2381 13.6006 18.3914 13.5407 18.5756L13.0665 20.0351C13.0397 20.1175 13.069 20.2078 13.1391 20.2587L14.3807 21.1608C14.5375 21.2746 14.4569 21.5226 14.2632 21.5226H12.7285C12.6418 21.5226 12.565 21.5784 12.5383 21.6608L12.064 23.1204Z" fill="#262626"/>
<path d="M20.0891 19.8201C20.177 19.9928 19.9927 20.1771 19.8201 20.0892L18.427 19.3794C18.3498 19.3401 18.2561 19.3549 18.1948 19.4162L17.0893 20.5217C16.9523 20.6587 16.72 20.5403 16.7503 20.3489L16.995 18.8047C17.0085 18.7191 16.9654 18.6345 16.8882 18.5952L15.4953 17.8855C15.3227 17.7975 15.3634 17.54 15.5548 17.5097L17.0989 17.2652C17.1845 17.2516 17.2516 17.1845 17.2651 17.0989L17.5097 15.5548C17.54 15.3634 17.7975 15.3226 17.8854 15.4953L18.5952 16.8883C18.6345 16.9655 18.7191 17.0086 18.8047 16.9951L20.3487 16.7504C20.5401 16.72 20.6584 16.9523 20.5214 17.0893L19.416 18.1949C19.3547 18.2562 19.3399 18.3499 19.3792 18.4271L20.0891 19.8201Z" fill="#262626"/>
<path d="M23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4145 12.2187L21.8424 12.7295C21.76 12.7563 21.7042 12.8331 21.7042 12.9197V14.5726C21.7042 14.7663 21.4563 14.8469 21.3424 14.6901L20.3709 13.3528C20.3199 13.2827 20.2297 13.2534 20.1473 13.2802L18.5754 13.791C18.3912 13.8508 18.2379 13.64 18.3518 13.4832L19.3233 12.146C19.3743 12.0759 19.3743 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3912 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7742 20.371 10.7041L21.3424 9.36682C21.4563 9.21007 21.7042 9.29062 21.7042 9.48437V11.1373C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382Z" fill="#262626"/>
<path d="M19.82 3.72203C19.9927 3.63407 20.177 3.8184 20.089 3.99102L19.3792 5.38419C19.3399 5.46139 19.3547 5.55514 19.416 5.61641L20.5214 6.72179C20.6584 6.85879 20.54 7.09107 20.3487 7.06075L18.8045 6.81606C18.719 6.8025 18.6344 6.8456 18.595 6.92281L17.8854 8.31578C17.7975 8.48842 17.54 8.44765 17.5097 8.25629L17.2651 6.71221C17.2515 6.62664 17.1844 6.55952 17.0988 6.54596L15.5547 6.30132C15.3634 6.271 15.3226 6.01354 15.4952 5.92558L16.8882 5.21585C16.9654 5.17652 17.0085 5.09194 16.9949 5.00635L16.7503 3.46238C16.72 3.27102 16.9522 3.15266 17.0892 3.28965L18.1948 4.39506C18.2561 4.45632 18.3498 4.47116 18.427 4.43183L19.82 3.72203Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 5.3 KiB

-3
View File
@@ -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="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM11.6942 1.58536C11.754 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.0019 5.08798C11.9318 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5231 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.6278 3.36313C9.47105 3.24925 9.55161 3.00132 9.74535 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536ZM4.704 4.43512C4.53138 4.34717 4.34706 4.5315 4.43502 4.70413L5.05696 5.92473C5.0963 6.00193 5.08145 6.09568 5.02018 6.15695L4.05175 7.12538C3.91475 7.26238 4.03311 7.49465 4.22447 7.46433L5.57715 7.25002C5.66273 7.23646 5.74731 7.27955 5.78664 7.35676L6.40849 8.57722C6.49645 8.74985 6.75392 8.70907 6.78423 8.51772L6.99851 7.16483C7.01207 7.07925 7.07919 7.01213 7.16476 6.99858L8.51758 6.7843C8.70894 6.75399 8.74972 6.49652 8.57709 6.40856L7.35662 5.78671C7.27941 5.74737 7.23632 5.66279 7.24988 5.57721L7.4642 4.22451C7.49452 4.03315 7.26225 3.91479 7.12524 4.05178L6.1568 5.02018C6.09553 5.08144 6.00179 5.09629 5.92459 5.05696L4.704 4.43512ZM1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163ZM4.43501 19.1228C4.34705 19.2954 4.53138 19.4798 4.704 19.3918L5.92462 18.7699C6.00182 18.7306 6.09557 18.7454 6.15684 18.8067L7.12535 19.7752C7.26234 19.9122 7.49461 19.7938 7.46431 19.6025L7.25008 18.2497C7.23652 18.1641 7.27961 18.0796 7.35681 18.0402L8.57716 17.4184C8.74977 17.3304 8.70899 17.0729 8.51764 17.0426L7.1648 16.8283C7.07923 16.8148 7.01212 16.7477 6.99856 16.6621L6.78423 15.3093C6.75391 15.1179 6.49643 15.0771 6.40848 15.2498L5.78675 16.4702C5.74742 16.5474 5.66283 16.5905 5.57724 16.577L4.22447 16.3626C4.03311 16.3323 3.91475 16.5645 4.05174 16.7015L5.02013 17.67C5.0814 17.7312 5.09624 17.825 5.05691 17.9022L4.43501 19.1228ZM12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74537C9.55163 20.7291 9.47107 20.4812 9.62782 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9318 18.6934 12.0019 18.6425L13.0888 17.8529C13.2455 17.739 13.4564 17.8923 13.3965 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451ZM19.1228 19.3919C19.2954 19.4798 19.4798 19.2955 19.3918 19.1229L18.7699 17.9024C18.7305 17.8252 18.7454 17.7314 18.8066 17.6702L19.7752 16.7016C19.9121 16.5646 19.7938 16.3323 19.6024 16.3626L18.2497 16.577C18.1641 16.5905 18.0795 16.5475 18.0402 16.4702L17.4184 15.2498C17.3304 15.0771 17.0729 15.1179 17.0426 15.3093L16.8283 16.6621C16.8148 16.7477 16.7477 16.8148 16.6621 16.8284L15.3093 17.0426C15.1179 17.073 15.0772 17.3304 15.2498 17.4184L16.4702 18.0402C16.5474 18.0795 16.5905 18.1641 16.5769 18.2497L16.3626 19.6026C16.3322 19.794 16.5645 19.9123 16.7015 19.7753L17.6701 18.8068C17.7313 18.7456 17.8251 18.7307 17.9023 18.77L19.1228 19.3919ZM22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7389 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74534V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359ZM19.3918 4.70416C19.4797 4.53153 19.2954 4.34721 19.1228 4.43517L17.9023 5.05703C17.8251 5.09637 17.7314 5.08152 17.6701 5.02027L16.7015 4.05179C16.5645 3.9148 16.3322 4.03316 16.3625 4.22452L16.5769 5.57722C16.5904 5.6628 16.5473 5.74738 16.4701 5.78672L15.2497 6.40853C15.0771 6.49648 15.1179 6.75395 15.3092 6.78427L16.6621 6.9986C16.7476 7.01216Line truncated
</svg>

Before

Width:  |  Height:  |  Size: 5.3 KiB

-3
View File
@@ -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.4142 0H2V22H12V20H4V2H12V7H17V14H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 445 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 0V22H11.5L14.5 19L11 15.5L14.5 12L18 15.5L19 14.5V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 448 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="M20 0H4V7H12C13.1046 7 14 7.89543 14 9V10H20V0ZM16 5H8V3H16V5ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 404 B

@@ -1,3 +0,0 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V0H14.5L19 4.5V11H17.3135C11.6605 11 8.31543 17.3293 11.5 22H2ZM13.5 2V5H16.5L13.5 2ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 645 B

-3
View File
@@ -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 0H14.4142L19 4.58579V16H17V7H12V2H4V20H11V22H2V0ZM14 2.41421L16.5858 5H14V2.41421ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 369 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 0V22H12L10 19.5L14 16L16 18L19 15V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 356 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H12V7H17V11H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 645 B

-3
View File
@@ -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="M18.0131 1.10889L18.0433 1.07797C19.2857 -0.193723 21.3537 -0.408751 22.7918 0.823966L22.8275 0.854537L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656L21.6845 7.59584L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53889L15.1817 4.53857L16.3832 3.07665L16.4505 2.99468L17.8601 1.27963L18.0131 1.10889ZM17.9807 4.28L19.375 2.58351L19.4707 2.47669C20.0324 1.90179 20.9117 1.84497 21.4932 2.3434L21.5908 2.43534C22.1151 2.9782 22.1517 3.88027 21.6295 4.51599L20.2534 6.19L17.9807 4.28ZM10.6593 13.1929L16.7116 5.82501L18.9843 7.73501L12.9138 15.1254L9.85575 16.5098L10.6593 13.1929ZM0 24H23.965V22H0V24Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 811 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.34783 12.9348V12.5015L9.03177 12.2052L1 4.67546L0.316059 5.405L1 4.67546V3.5H23V4.69448L15.4668 12.2277L15.1739 12.5206V12.9348L15.1739 21.5495L9.34783 23.0384V12.9348Z" stroke="#262626" stroke-width="2"/>
</svg>

Before

Width:  |  Height:  |  Size: 321 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3V4.17546C0 4.45187 0.114409 4.71595 0.316059 4.905L8.34783 12.4348V22.5384C8.34783 23.1911 8.96302 23.6689 9.59542 23.5073L15.4215 22.0184C15.8642 21.9052 16.1739 21.5064 16.1739 21.0495V12.4348L23.7071 4.90159C23.8946 4.71405 24 4.4597 24 4.19448V3C24 2.44772 23.5523 2 23 2H1C0.447715 2 0 2.44772 0 3Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 438 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="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 315 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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 449 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="M16.414 8.99999L21.7068 3.7071L20.2926 2.29288L14.9999 7.58561V2.99999H12.9999V11H20.9999V8.99999H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 399 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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 520 B

@@ -1,3 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.00069C4.0331 3.26794 8.15389 -0.475065 12.8802 0.0490726C14.1026 0.184637 15.1755 0.450403 16.1634 0.994663C17.1539 1.54041 17.9904 2.32824 18.8 3.40769C19.1313 3.84951 19.0418 4.47632 18.6 4.80769C18.1581 5.13906 17.5313 5.04951 17.2 4.60769C16.5096 3.68713 15.8755 3.11953 15.1982 2.74638C14.5183 2.37175 13.7262 2.15516 12.6597 2.03689C9.13467 1.64596 6.02491 4.44572 5.99995 8.01467L4 8.00069ZM18.3147 11.0585C18.8389 11.2323 19.123 11.7981 18.9492 12.3224L16.5204 19.6485L16.5191 19.6525C16.0817 20.9535 15.3501 22.0728 14.3046 22.8588C13.2528 23.6495 11.9457 24.0554 10.4489 24.0256C9.3869 24.0044 8.32234 23.6332 7.49354 22.9011C7.43449 22.8489 7.38734 22.8054 7.35353 22.7734C7.33661 22.7574 7.32298 22.7443 7.31282 22.7344L7.30019 22.7221L7.29586 22.7178L7.29419 22.7161L7.29316 22.7151C6.90264 22.3246 6.90235 21.6911 7.29287 21.3006C7.68272 20.9107 8.31436 20.9101 8.70505 21.2985L8.70608 21.2996L8.70681 21.3003L8.70763 21.3011L8.72702 21.3196C8.74601 21.3376 8.77665 21.366 8.81757 21.4021C9.25916 21.7922 9.8561 22.0134 10.4887 22.026C11.5863 22.0478 12.4448 21.7548 13.1028 21.2601C13.7667 20.761 14.2888 20.0091 14.6227 19.0172L14.6233 19.0152L17.0508 11.693C17.2246 11.1688 17.7904 10.8847 18.3147 11.0585ZM8.00002 8.00085C8.01822 5.33935 10.5876 3.43182 13.1415 4.19811C14.4429 4.58863 15.3943 5.58269 15.7875 6.77482C15.9605 7.29931 15.6755 7.86474 15.1511 8.03774C14.6266 8.21074 14.0611 7.9258 13.8881 7.40131C13.6903 6.80166 13.2152 6.30833 12.5667 6.11374C11.2962 5.73251 10.0111 6.68083 10 8.01144V8.91779C10.1443 9.01829 10.3009 9.14433 10.4571 9.30058C11.007 9.85049 11.5 10.7251 11.5 12.0077C11.5 12.56 11.0523 13.0077 10.5 13.0077C9.94772 13.0077 9.5 12.56 9.5 12.0077C9.5 11.2902 9.24298 10.9149 9.04289 10.7148C8.93333 10.6052 8.82479 10.5335 8.74873 10.4912C8.71123 10.4704 8.68357 10.4578 8.67053 10.4522L8.66761 10.451L8 10.2284L8.00002 8.00085ZM3.70718 23.7148L22.7072 4.71479L21.293 3.30057L2.29297 22.3006L3.70718 23.7148Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.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="M12.8802 0.0490061C8.83055 -0.399484 5.22544 2.28056 4.25537 6.03027C7.40915 9.49288 8.20399 15.9871 4.4137 20.1558C4.41524 20.1597 4.41679 20.1636 4.41834 20.1675L2.29297 22.2929L3.70718 23.7071L22.7072 4.70711L21.293 3.29289L19.4654 5.12045C18.4352 2.45838 16.0017 0.394705 12.8802 0.0490061ZM8.00002 7.99316C8.01821 5.33167 10.5876 3.42413 13.1415 4.19043C14.4429 4.58094 15.3943 5.57501 15.7875 6.76713C15.9605 7.29162 15.6755 7.85705 15.151 8.03005C14.6266 8.20305 14.0611 7.91811 13.8881 7.39362C13.6903 6.79398 13.2152 6.30064 12.5667 6.10605C11.2962 5.72482 10.0111 6.67315 10 8.00375V8.9101C10.1442 9.01061 10.3009 9.13664 10.4571 9.29289C11.007 9.8428 11.5 10.7174 11.5 12C11.5 12.5523 11.0523 13 10.5 13C9.94771 13 9.5 12.5523 9.5 12C9.5 11.2826 9.24298 10.9072 9.04289 10.7071C8.93332 10.5975 8.82478 10.5258 8.74873 10.4835C8.71122 10.4627 8.68357 10.4501 8.67053 10.4445L8.66761 10.4433L8 10.2208V9.5V8V7.99316L8.00002 7.99316ZM10.1974 22.8827C13.5 23.5 15.6802 21.9767 16.5712 19.3261L19 11L8 22C8 22 9 22.5 10.1974 22.8827Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.46165C0.0308633 3.0482 3.87356 -0.443161 8.28247 0.0457814C9.41685 0.171583 10.4181 0.418797 11.3418 0.927715C12.2682 1.43812 13.0481 2.17382 13.8 3.17634C14.1313 3.61817 14.0418 4.24497 13.6 4.57634C13.1581 4.90771 12.5313 4.81817 12.2 4.37634C11.5673 3.53271 10.9897 3.01724 10.3766 2.67943C9.76081 2.34014 9.04049 2.14211 8.06202 2.0336C4.85434 1.67787 2.02268 4.22598 1.99995 7.47563L0 7.46165ZM21 16.0077H24V14.0077H16V16.0077H19V24.0077H21V16.0077ZM8.53738 3.87844C6.13068 3.15629 3.70955 4.95392 3.69241 7.46181L3.69238 9.57402L4.35833 9.796C4.36841 9.80034 4.39138 9.81077 4.42309 9.82838C4.48832 9.86462 4.58244 9.92677 4.67758 10.0219C4.84883 10.1932 5.077 10.5204 5.077 11.161C5.077 11.7132 5.52471 12.161 6.077 12.161C6.62928 12.161 7.077 11.7132 7.077 11.161C7.077 9.95533 6.61286 9.12876 6.0918 8.60769C5.95585 8.47175 5.81961 8.35997 5.69238 8.2689V7.47244C5.70238 6.29542 6.83919 5.45698 7.96259 5.79406C8.53611 5.96615 8.9564 6.40228 9.13146 6.93301C9.30446 7.4575 9.86988 7.74244 10.3944 7.56944C10.9189 7.39644 11.2038 6.83101 11.0308 6.30652C10.6603 5.18331 9.76385 4.24645 8.53738 3.87844ZM17.7072 4.71479L1.70718 20.7148L0.292969 19.3006L16.293 3.30058L17.7072 4.71479ZM13.949 11.4756C14.1228 10.9514 13.8387 10.3856 13.3144 10.2118C12.7902 10.038 12.2244 10.322 12.0506 10.8463L9.80994 17.6049L9.80931 17.6068C9.50931 18.4982 9.04413 19.1718 8.45793 19.6213C7.87764 20.0663 7.12101 20.3366 6.15043 20.3327C5.52635 20.3301 4.93827 20.1115 4.51726 19.7234C4.49989 19.7074 4.48748 19.6955 4.48045 19.6888L4.47565 19.6842L4.47477 19.6833L4.47402 19.6825C4.08333 19.2941 3.45171 19.2948 3.06188 19.6846C2.67136 20.0751 2.67146 20.7084 3.06199 21.0989L3.06379 21.1007L3.0663 21.1032L3.07309 21.1099L3.09364 21.1299C3.11039 21.146 3.13322 21.1676 3.1617 21.1939C3.98695 21.9546 5.07137 22.3283 6.14227 22.3327C7.51204 22.3383 8.71011 21.9483 9.67495 21.2084C10.6335 20.4734 11.3036 19.4383 11.7057 18.2422L13.949 11.4756Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.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="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM19 16H16V14H24V16H21V24H19V16Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

@@ -1,3 +0,0 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.64058C0.0316034 3.12129 3.96644 -0.453788 8.48108 0.0468793C9.64266 0.175697 10.6679 0.428839 11.6137 0.949961C12.5623 1.47261 13.361 2.22595 14.1309 3.25251C14.4702 3.70493 14.3785 4.34676 13.9261 4.68608C13.4737 5.0254 12.8318 4.93371 12.4925 4.48128C11.8446 3.61742 11.2533 3.08959 10.6255 2.74368C9.99487 2.39626 9.25727 2.19347 8.25535 2.08236C4.97074 1.7181 2.07118 4.32732 2.04791 7.6549L0 7.64058ZM3.78095 7.64074C3.7985 5.07271 6.27769 3.23198 8.74211 3.97145C9.99798 4.34828 10.9159 5.3076 11.2953 6.45775C11.4725 6.99482 11.1807 7.5738 10.6436 7.75095C10.1066 7.9281 9.52757 7.63633 9.35042 7.09926C9.17117 6.5558 8.7408 6.10922 8.15353 5.933C7.00319 5.58784 5.83912 6.44638 5.82888 7.65162V8.46718C5.95916 8.56044 6.09867 8.6749 6.23788 8.8141C6.77144 9.34766 7.2467 10.1941 7.2467 11.4286C7.2467 11.9941 6.78825 12.4526 6.22272 12.4526C5.65719 12.4526 5.19874 11.9941 5.19874 11.4286C5.19874 10.7727 4.9651 10.4376 4.78975 10.2622C4.69233 10.1648 4.59595 10.1012 4.52915 10.0641C4.49668 10.046 4.47316 10.0353 4.46284 10.0309L3.78092 9.8036L3.78095 7.64074ZM1.74812 21.2115L18.1318 4.82785L16.6837 3.37973L0.299994 19.7634L1.74812 21.2115ZM13.9117 17.4155L14.6358 16.6915C17.2978 14.0295 21.6137 14.0295 24.2757 16.6915L24.9998 17.4155L23.5517 18.8636L22.8276 18.1396C20.9654 16.2774 17.9461 16.2774 16.0839 18.1396L15.3598 18.8636L13.9117 17.4155ZM16.6837 19.7634L15.9597 20.4875L17.4078 21.9356L18.1319 21.2115C18.863 20.4804 20.0485 20.4804 20.7797 21.2115L21.5037 21.9356L22.9518 20.4875L22.2278 19.7634C20.6968 18.2325 18.2147 18.2325 16.6837 19.7634ZM20.4796 23.5594C20.4796 24.1249 20.0211 24.5834 19.4556 24.5834C18.8901 24.5834 18.4316 24.1249 18.4316 23.5594C18.4316 22.9939 18.8901 22.5354 19.4556 22.5354C20.0211 22.5354 20.4796 22.9939 20.4796 23.5594ZM14.2834 11.7508C14.4614 11.214 14.1705 10.6346 13.6337 10.4566C13.0969 10.2787 12.5175 10.5696 12.3395 11.1064L10.0452 18.0271L10.0445 18.029C9.73734 18.9418 9.261 19.6315 8.66074 20.0918C8.06654 20.5475 7.29177 20.8243 6.29791 20.8203C5.65887 20.8177 5.05669 20.5937 4.62558 20.1963C4.6078 20.1799 4.59509 20.1678 4.58789 20.1609L4.58298 20.1562L4.58207 20.1553L4.5813 20.1545C4.18124 19.7568 3.53449 19.7575 3.13531 20.1566C2.73542 20.5565 2.73552 21.205 3.13541 21.6049L3.13726 21.6067L3.13983 21.6093L3.14678 21.6161L3.16782 21.6366C3.18497 21.6531 3.20835 21.6752 3.23751 21.7021C4.08255 22.4811 5.19298 22.8637 6.28956 22.8682C7.69218 22.8739 8.91897 22.4746 9.90695 21.717C10.8885 20.9643 11.5747 19.9044 11.9864 18.6796L14.2834 11.7508Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

@@ -1,3 +0,0 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.37825 0.0434101C5.79106 -0.353864 2.59764 2.02012 1.73832 5.34162C4.53202 8.40883 5.23613 14.1616 1.87857 17.8543L1.88267 17.8646L0 19.7473L1.25272 21L18.0831 4.1696L16.8304 2.91688L15.2115 4.53575C14.299 2.17766 12.1433 0.349634 9.37825 0.0434101ZM4.94122 7.07965C4.95785 4.64617 7.30714 2.90179 9.64257 3.60255C10.8327 3.95966 11.7026 4.8688 12.0621 5.95863C12.2351 6.48312 11.9501 7.04854 11.4256 7.22155C10.9011 7.39455 10.3357 7.10961 10.1627 6.58512C9.99866 6.08777 9.60496 5.67936 9.06777 5.51817C8.01565 5.20248 6.95067 5.98768 6.94119 7.09029V7.83376C7.06004 7.92006 7.18649 8.02483 7.31266 8.151C7.81975 8.65809 8.26991 9.46136 8.26991 10.6297C8.26991 11.182 7.82219 11.6297 7.26991 11.6297C6.71762 11.6297 6.26991 11.182 6.26991 10.6297C6.26991 10.0265 6.05571 9.72248 5.89844 9.56521C5.81029 9.47705 5.72316 9.41957 5.66316 9.38624C5.63564 9.37095 5.61553 9.3617 5.60619 9.35762L4.94119 9.13596V8.4152V7.08648V7.07965L4.94122 7.07965ZM7.00179 20.2697C9.9273 20.8165 11.8585 19.4672 12.6478 17.1193L14.7993 9.74391L5.05535 19.4878C5.05535 19.4878 5.94116 19.9307 7.00179 20.2697ZM20 23C20 23.5523 19.5523 24 19 24C18.4477 24 18 23.5523 18 23C18 22.4477 18.4477 22 19 22C19.5523 22 20 22.4477 20 23ZM13.5859 17L14.293 16.2929C16.8927 13.6932 21.1076 13.6932 23.7073 16.2929L24.4144 17L23.0002 18.4142L22.293 17.7071C20.4744 15.8885 17.5259 15.8885 15.7073 17.7071L15.0002 18.4142L13.5859 17ZM15.5859 20L16.293 19.2929C17.7881 17.7978 20.2122 17.7978 21.7073 19.2929L22.4144 20L21.0002 21.4142L20.293 20.7071C19.579 19.9931 18.4213 19.9931 17.7073 20.7071L17.0002 21.4142L15.5859 20Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

-3
View File
@@ -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="M3 4.06273V0H0.999999V7.99999H8.99999V5.99999H3.99914C5.82464 3.56964 8.72948 2 12 2C17.5228 2 22 6.47714 22 12C22 14.411 21.148 16.6204 19.7276 18.3474L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.41497 0 5.19798 1.57244 3 4.06273ZM16.3753 16.7808L11 12.4806L11 5.99999L13 5.99999L13 11.5194L17.6247 15.2191L16.3753 16.7808ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 22H6.99999V20H4.99999V22ZM13 24H11V22H13V24ZM17 22H19V20H17V22Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 646 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="M7.99999 6.99999L5.99999 4.99999L5.44642 4.44642C7.20205 2.92183 9.49364 2 12 2V12L20.5 19L20.5054 18.987L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.94014 0 6.14837 1.14549 4.02948 3.02948L3 2L0.999999 0V2.82842V4.99999V6.99999H3H3.33597L3.33723 7.00072L3.33765 6.99999H5.17157H7.99999ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 20V22H6.99999V20H4.99999ZM11 24V22H13V24H11ZM17 22H19V20H17V22Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 609 B

-7
View File
@@ -1,7 +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="M22 5H2L2 19H22V5ZM2 3C0.895431 3 0 3.89543 0 5V19C0 20.1046 0.89543 21 2 21H22C23.1046 21 24 20.1046 24 19V5C24 3.89543 23.1046 3 22 3H2Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.5V11H1.5V9H6V4.5H8Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.5V11H23V9H12V4.5H10Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 19.5V13H1.5V15H6V19.5H8Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 19.5V13H22.5V15H12V19.5H10Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 689 B

@@ -1,7 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 5C0 3.89543 0.895431 3 2 3H22C23.1046 3 24 3.89543 24 5V19C24 20.1046 23.1046 21 22 21H2C0.89543 21 0 20.1046 0 19V5Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3V10.5H0V8.5H6V3H8Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3V10.5H24V8.5H12V3H10Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 21V12.5H0V14.5H6V21H8Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 21V12.5H24V14.5H12V21H10Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 617 B

Loaded 100 of 1593 files, more files were not shown because too many files have changed in this diff. Show more