mirror of https://github.com/astrit/css.gg.git
feat(styled-components): init
This commit is contained in:
JiangWeixian
parent
88f7f2f3b8
commit
e272e0c9b0
|
|
@ -0,0 +1,29 @@
|
|||
# common
|
||||
node_modules
|
||||
|
||||
# editor
|
||||
.DS_Store
|
||||
.vscode
|
||||
|
||||
# test
|
||||
converage
|
||||
cache
|
||||
jest
|
||||
|
||||
# build
|
||||
dist
|
||||
lib
|
||||
.lib
|
||||
|
||||
# log
|
||||
lerna-debug.log
|
||||
|
||||
# types
|
||||
**/*.styl.d.ts
|
||||
|
||||
# bin-template
|
||||
lib
|
||||
.lib
|
||||
|
||||
# react-components-lib-tempate
|
||||
es
|
||||
|
|
@ -0,0 +1 @@
|
|||
registry=https://registry.npmjs.org/
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
*.styl
|
||||
.*ignore
|
||||
.npmrc
|
||||
.umi/
|
||||
.DS_Store
|
||||
CODEOWNERS
|
||||
*.ejs
|
||||
src/assets
|
||||
!.*.js
|
||||
dist/
|
||||
nginx.conf
|
||||
Dockerfile
|
||||
Jenkinsfile
|
||||
*.png
|
||||
*.xml
|
||||
*.styl.d.ts
|
||||
/.docz
|
||||
*.json
|
||||
*.md
|
||||
*.sh
|
||||
*.html
|
||||
*.lock
|
||||
*.ico
|
||||
*.svg
|
||||
*.info
|
||||
*.afdesign
|
||||
*.watchmanconfig
|
||||
*.flowconfig
|
||||
LICENSE
|
||||
lib/
|
||||
*.tpl
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"printWidth": 100,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"useTabs": false,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all",
|
||||
"overrides": [
|
||||
{
|
||||
"files": [".prettierrc", ".stylintrc"],
|
||||
"options": { "parser": "json" }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019 JW
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# styled-cssgg
|
||||
> styled components for [css.gg](https://github.com/astrit/css.gg)
|
||||
|
||||
## pre
|
||||
|
||||
```bash
|
||||
npm install styled-cssgg --save
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```tsx
|
||||
import React from 'react'
|
||||
import { Abstract } from 'styled-cssgg'
|
||||
|
||||
export default function() {
|
||||
return (
|
||||
<div>
|
||||
<Abstract />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
BROWSER=none
|
||||
ESLINT=1
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "eslint-config-umi"
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/npm-debug.log*
|
||||
/yarn-error.log
|
||||
/yarn.lock
|
||||
/package-lock.json
|
||||
|
||||
# production
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
# umi
|
||||
.umi
|
||||
.umi-production
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
**/*.md
|
||||
**/*.svg
|
||||
**/*.ejs
|
||||
**/*.html
|
||||
package.json
|
||||
.umi
|
||||
.umi-production
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 100,
|
||||
"overrides": [
|
||||
{
|
||||
"files": ".prettierrc",
|
||||
"options": { "parser": "json" }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { IConfig } from 'umi-types';
|
||||
|
||||
// ref: https://umijs.org/config/
|
||||
const config: IConfig = {
|
||||
treeShaking: true,
|
||||
plugins: [
|
||||
// ref: https://umijs.org/plugin/umi-plugin-react.html
|
||||
[
|
||||
'umi-plugin-react',
|
||||
{
|
||||
antd: false,
|
||||
dva: false,
|
||||
dynamicImport: { webpackChunkName: true },
|
||||
title: 'example',
|
||||
dll: false,
|
||||
|
||||
routes: {
|
||||
exclude: [/components\//],
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
"test": "umi test",
|
||||
"lint:es": "eslint --ext .js src mock tests",
|
||||
"lint:ts": "tslint \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"precommit": "lint-staged"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"styled-cssgg": "file:.."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^23.3.12",
|
||||
"@types/react": "^16.7.18",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"@types/react-test-renderer": "^16.0.3",
|
||||
"babel-eslint": "^9.0.0",
|
||||
"eslint": "^5.4.0",
|
||||
"eslint-config-umi": "^1.4.0",
|
||||
"eslint-plugin-flowtype": "^2.50.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-jsx-a11y": "^5.1.1",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"husky": "^0.14.3",
|
||||
"lint-staged": "^7.2.2",
|
||||
"react-test-renderer": "^16.7.0",
|
||||
"tslint": "^5.12.0",
|
||||
"tslint-eslint-rules": "^5.4.0",
|
||||
"tslint-react": "^3.6.0",
|
||||
"umi": "^2.7.0",
|
||||
"umi-plugin-react": "^1.8.0",
|
||||
"umi-types": "^0.3.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx}": [
|
||||
"tslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,jsx}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import 'jest';
|
||||
import BasicLayout from '..';
|
||||
import React from 'react';
|
||||
import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
|
||||
|
||||
describe('Layout: BasicLayout', () => {
|
||||
it('Render correctly', () => {
|
||||
const wrapper: ReactTestRenderer = renderer.create(<BasicLayout />);
|
||||
expect(wrapper.root.children.length).toBe(1);
|
||||
const outerLayer = wrapper.root.children[0] as ReactTestInstance;
|
||||
expect(outerLayer.type).toBe('div');
|
||||
const title = outerLayer.children[0] as ReactTestInstance;
|
||||
expect(title.type).toBe('h1');
|
||||
expect(title.children[0]).toBe('Yay! Welcome to umi!');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.normal {
|
||||
font-family: Georgia, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: -1px;
|
||||
background: darkslateblue;
|
||||
padding: 0.6em 0;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
import styles from './index.css';
|
||||
|
||||
const BasicLayout: React.FC = props => {
|
||||
return (
|
||||
<div className={styles.normal}>
|
||||
<h1 className={styles.title}>Yay! Welcome to umi!</h1>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicLayout;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import 'jest';
|
||||
import Index from '..';
|
||||
import React from 'react';
|
||||
import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
|
||||
|
||||
describe('Page: index', () => {
|
||||
it('Render correctly', () => {
|
||||
const wrapper: ReactTestRenderer = renderer.create(<Index />);
|
||||
expect(wrapper.root.children.length).toBe(1);
|
||||
const outerLayer = wrapper.root.children[0] as ReactTestInstance;
|
||||
expect(outerLayer.type).toBe('div');
|
||||
expect(outerLayer.children.length).toBe(2);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.normal {
|
||||
font-family: Georgia, sans-serif;
|
||||
margin-top: 4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
height: 328px;
|
||||
background: url(../assets/yay.jpg) no-repeat center 0;
|
||||
background-size: 388px 328px;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 1.2em;
|
||||
margin-top: 1.8em;
|
||||
list-style: none;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.list code {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import styles from './index.css';
|
||||
import { Abstract } from 'styled-cssgg';
|
||||
|
||||
export default function() {
|
||||
return (
|
||||
<div className={styles.normal}>
|
||||
<Abstract />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"jsx": "react",
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
defaultSeverity: error
|
||||
extends:
|
||||
- tslint-react
|
||||
- tslint-eslint-rules
|
||||
jsRules:
|
||||
rules:
|
||||
eofline: true
|
||||
no-console: true
|
||||
no-construct: true
|
||||
no-debugger: true
|
||||
no-reference: true
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
declare module '*.css';
|
||||
declare module '*.png';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
cacheDirectory: './jest/cache',
|
||||
collectCoverage: true,
|
||||
collectCoverageFrom: ['src/**/*'],
|
||||
coverageDirectory: './jest/coverage',
|
||||
preset: 'ts-jest',
|
||||
resetMocks: true,
|
||||
resetModules: true,
|
||||
restoreMocks: true,
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
diagnostics: false,
|
||||
},
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'@/(.*)': '<rootDir>/src/$1',
|
||||
},
|
||||
roots: ['<rootDir>/test'],
|
||||
moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
|
||||
testRegex: '/test/.+\\.test\\.tsx?$',
|
||||
verbose: false,
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"name": "styled-cssgg",
|
||||
"version": "1.0.1",
|
||||
"main": "lib/index.js",
|
||||
"module": "lib/index.js",
|
||||
"browser": "lib/index.js",
|
||||
"typings": "lib/index.d.ts",
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"dependencies": {
|
||||
"css.gg": "1.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "24.0.22",
|
||||
"@types/ms": "0.7.31",
|
||||
"@types/react": "16.9.23",
|
||||
"@types/styled-components": "5.0.1",
|
||||
"fs-extra": "8.1.0",
|
||||
"husky": "3.0.9",
|
||||
"jest": "24.9.0",
|
||||
"lodash.camelcase": "^4.3.0",
|
||||
"mustache": "4.0.0",
|
||||
"np": "5.1.3",
|
||||
"prettier": "1.19.1",
|
||||
"pretty-quick": "2.0.1",
|
||||
"react": "16.13.0",
|
||||
"rimraf": "3.0.0",
|
||||
"styled-components": "5.0.1",
|
||||
"ts-jest": "24.1.0",
|
||||
"ts-node": "8.5.0",
|
||||
"tslib": "1.10.0",
|
||||
"typescript": "3.7.2"
|
||||
},
|
||||
"scripts": {
|
||||
"prebuild": "node scripts/pre-build.js && npm run prettier",
|
||||
"build": "tsc",
|
||||
"test": "ts-node test/test.ts",
|
||||
"pretest": "npm run build",
|
||||
"update": "npm update && npm update --save-dev",
|
||||
"check": "npm outdated && npm outdated --save-dev",
|
||||
"prepublishOnly": "npm run build && np --no-cleanup --yolo --no-publish --any-branch",
|
||||
"prettier": "prettier --config .prettierrc --write 'src/**/*'"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "pretty-quick --staged"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
const fs = require('fs-extra')
|
||||
const path = require('path')
|
||||
const icons = require('css.gg/icons-json/icons.json')
|
||||
const mustache = require('mustache')
|
||||
const camelcase = require('lodash.camelcase')
|
||||
|
||||
const iconsTpl = fs.readFileSync(path.resolve(__dirname, '../template/icon.tsx.tpl'))
|
||||
const entryTpl = fs.readFileSync(path.resolve(__dirname, '../template/index.tsx.tpl'))
|
||||
|
||||
Object.keys(icons).forEach(k => {
|
||||
const css = icons[k][0][0].css.replace(/(\.gg-[a-zA-Z\-]*)/g, '&')
|
||||
const name = `${camelcase(k)[0].toUpperCase()}${camelcase(k).slice(1)}`
|
||||
const result = mustache.render(iconsTpl.toString(), {
|
||||
styledname: `Styled${name}`,
|
||||
name,
|
||||
css,
|
||||
})
|
||||
fs.outputFileSync(path.resolve(__dirname, `../src/icons/${name}.tsx`), result)
|
||||
})
|
||||
|
||||
const exportIcons = Object.keys(icons).map(k => {
|
||||
const name = `${camelcase(k)[0].toUpperCase()}${camelcase(k).slice(1)}`
|
||||
return {
|
||||
export: `export { ${name} } from './icons/${name}'`,
|
||||
}
|
||||
})
|
||||
|
||||
const entry = mustache.render(entryTpl.toString(), {
|
||||
exports: exportIcons,
|
||||
})
|
||||
fs.outputFileSync(path.resolve(__dirname, `../src/index.ts`), entry)
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAbstract = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 3px solid;
|
||||
border-top: 3px solid;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border: 3px solid;
|
||||
border-radius: 12px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Abstract = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAbstract {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAdd = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Add = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAdd {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAddR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
}
|
||||
`
|
||||
|
||||
export const AddR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAddR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAdidas = styled.i`
|
||||
& {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 23px;
|
||||
height: 15px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
overflow: hidden;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 18px;
|
||||
background: currentColor;
|
||||
transform: rotate(-30deg);
|
||||
left: 4px;
|
||||
bottom: -14px;
|
||||
box-shadow: 7px -2px, 14px -4px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Adidas = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAdidas {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlarm = styled.i`
|
||||
& {
|
||||
background: linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 4.5px 6px/5px
|
||||
2px,
|
||||
linear-gradient(to left, currentColor 7px, transparent 0) no-repeat 4.5px 2px/2px 6px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid transparent;
|
||||
transform: scale(var(--ggs, 1));
|
||||
box-shadow: 0 0 0 2px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
top: -4px;
|
||||
}
|
||||
&::before {
|
||||
left: -5px;
|
||||
transform: rotate(-42deg);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(42deg);
|
||||
right: -5px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Alarm = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlarm {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlbum = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
box-shadow: 0 0 0 2px, inset 6px 4px 0 -4px, inset -6px 4px 0 -4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
background: currentColor;
|
||||
transform: rotate(46deg);
|
||||
top: 5px;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(-46deg);
|
||||
right: 2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Album = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlbum {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignBottom = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-bottom: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
margin-top: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
background: currentColor;
|
||||
bottom: 2px;
|
||||
}
|
||||
&::before {
|
||||
left: 1px;
|
||||
height: 12px;
|
||||
}
|
||||
&::after {
|
||||
height: 6px;
|
||||
right: 1px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignBottom = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignBottom {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignCenter = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-top: 2px solid transparent;
|
||||
transform: scale(var(--ggs, 1));
|
||||
margin-left: -4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: currentColor;
|
||||
}
|
||||
&::before {
|
||||
left: 2px;
|
||||
width: 12px;
|
||||
top: -2px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
right: 1px;
|
||||
top: 4px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignCenter = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignCenter {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignLeft = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-left: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
margin-left: -4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 12px;
|
||||
background: currentColor;
|
||||
left: 2px;
|
||||
top: 1px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
top: 7px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignMiddle = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
margin-top: -8px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
background: currentColor;
|
||||
}
|
||||
&::before {
|
||||
left: 1px;
|
||||
height: 12px;
|
||||
top: 2px;
|
||||
}
|
||||
&::after {
|
||||
height: 6px;
|
||||
right: 1px;
|
||||
top: 5px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignMiddle = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignMiddle {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignRight = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-right: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
margin-right: -4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 12px;
|
||||
background: currentColor;
|
||||
right: 2px;
|
||||
top: 1px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
top: 7px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAlignTop = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-top: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
margin-top: -4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
background: currentColor;
|
||||
top: 2px;
|
||||
}
|
||||
&::before {
|
||||
left: 1px;
|
||||
height: 12px;
|
||||
}
|
||||
&::after {
|
||||
height: 6px;
|
||||
right: 1px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
export const AlignTop = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAlignTop {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAnchor = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: currentColor;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
}
|
||||
&::after {
|
||||
width: 12px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
border-top-color: transparent;
|
||||
left: -5px;
|
||||
bottom: 2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
border-radius: 8px;
|
||||
top: -4px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Anchor = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAnchor {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledAppleWatch = styled.i`
|
||||
& {
|
||||
background: linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 13px 4px/2px 4px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 5px solid transparent;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 9px;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
border: 2px solid;
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
left: 2px;
|
||||
}
|
||||
&::after {
|
||||
top: -3px;
|
||||
}
|
||||
&::before {
|
||||
transform: scaleY(-1);
|
||||
top: 12px;
|
||||
}
|
||||
`
|
||||
|
||||
export const AppleWatch = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledAppleWatch {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowAlignH = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 2px 4px/6px 2px,
|
||||
linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 12px 4px/6px 2px,
|
||||
linear-gradient(to left, currentColor 15px, transparent 0) no-repeat center/2px 10px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transform: rotate(45deg);
|
||||
top: 2px;
|
||||
}
|
||||
&::after {
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
left: 1px;
|
||||
}
|
||||
&::before {
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
right: 1px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowAlignH = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowAlignH {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowAlignV = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 4px 2px/2px 6px,
|
||||
linear-gradient(to left, currentColor 15px, transparent 0) no-repeat 4px 12px/2px 6px,
|
||||
linear-gradient(to left, currentColor 15px, transparent 0) no-repeat center/10px 2px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transform: rotate(-45deg);
|
||||
left: 2px;
|
||||
}
|
||||
&::after {
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
bottom: 1px;
|
||||
}
|
||||
&::before {
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
top: 1px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowAlignV = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowAlignV {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomLeft = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-bottom: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-left: 2px solid;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 3px;
|
||||
left: -3px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomLeftO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 4px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomLeftO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomLeftO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomLeftR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 4px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomLeftR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomLeftR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomRight = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-bottom: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
bottom: 3px;
|
||||
right: -3px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomRightO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 4px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomRightO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomRightO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowBottomRightR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 4px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowBottomRightR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowBottomRightR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowDown = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(-45deg);
|
||||
left: 7px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
left: 10px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowDown = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowDown {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowDownO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(-45deg);
|
||||
left: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowDownO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowDownO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowDownR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(-45deg);
|
||||
left: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowDownR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowDownR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLeft = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
}
|
||||
&::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 7px;
|
||||
}
|
||||
&::before {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
bottom: 10px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLeftO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
bottom: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLeftO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLeftO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLeftR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
bottom: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLeftR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLeftR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongDown = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongDown = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongDown {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongDownC = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-top: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
top: -4px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongDownC = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongDownC {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongDownE = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-top: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
top: -5px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongDownE = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongDownE {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongDownL = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
top: -1px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongDownL = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongDownL {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongDownR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-top: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: -5px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongDownR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongDownR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongLeft = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongLeftC = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
right: -4px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongLeftC = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongLeftC {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongLeftE = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
right: -4px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongLeftE = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongLeftE {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongLeftL = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background: currentColor;
|
||||
right: -1px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongLeftL = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongLeftL {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongLeftR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: -5px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongLeftR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongLeftR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongRight = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongRightC = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
left: -4px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongRightC = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongRightC {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongRightE = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
left: -4px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongRightE = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongRightE {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongRightL = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background: currentColor;
|
||||
left: -1px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongRightL = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongRightL {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongRightR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
width: 24px;
|
||||
height: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: -5px;
|
||||
bottom: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongRightR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongRightR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongUp = styled.i`
|
||||
&,
|
||||
&::after {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 6px;
|
||||
}
|
||||
& {
|
||||
position: relative;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongUp = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongUp {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongUpC = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
bottom: -4px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongUpC = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongUpC {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongUpE = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
bottom: -5px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongUpE = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongUpE {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongUpL = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
bottom: -1px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongUpL = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongUpL {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowLongUpR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
box-shadow: inset 0 0 0 2px;
|
||||
height: 24px;
|
||||
width: 6px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: -5px;
|
||||
left: -2px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowLongUpR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowLongUpR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowRight = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
&::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 7px;
|
||||
}
|
||||
&::before {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
bottom: 10px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowRightO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
bottom: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowRightO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowRightO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowRightR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
bottom: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
bottom: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowRightR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowRightR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopLeft = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
top: 3px;
|
||||
left: -3px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopLeftO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
bottom: 8px;
|
||||
right: 4px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopLeftO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopLeftO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopLeftR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 4px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopLeftR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopLeftR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopRight = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-right: 2px solid;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
top: 3px;
|
||||
right: -3px;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopRightO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 4px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopRightO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopRightO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowTopRightR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(-45deg);
|
||||
bottom: 8px;
|
||||
}
|
||||
&::before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 4px;
|
||||
border-top: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowTopRightR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowTopRightR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowUp = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 7px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
left: 10px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowUp = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowUp {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowUpO = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 20px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowUpO = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowUpO {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowUpR = styled.i`
|
||||
& {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
&::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-top: 2px solid;
|
||||
border-left: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
left: 6px;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
background: currentColor;
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowUpR = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowUpR {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsBreakeH = styled.i``
|
||||
|
||||
export const ArrowsBreakeH = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsBreakeH {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsBreakeV = styled.i``
|
||||
|
||||
export const ArrowsBreakeV = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsBreakeV {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExchange = styled.i``
|
||||
|
||||
export const ArrowsExchange = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExchange {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExchangeAlt = styled.i``
|
||||
|
||||
export const ArrowsExchangeAlt = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExchangeAlt {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExchangeAltV = styled.i``
|
||||
|
||||
export const ArrowsExchangeAltV = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExchangeAltV {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExchangeV = styled.i``
|
||||
|
||||
export const ArrowsExchangeV = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExchangeV {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExpandDownLeft = styled.i``
|
||||
|
||||
export const ArrowsExpandDownLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExpandDownLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExpandDownRight = styled.i``
|
||||
|
||||
export const ArrowsExpandDownRight = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExpandDownRight {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExpandLeft = styled.i``
|
||||
|
||||
export const ArrowsExpandLeft = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExpandLeft {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const StyledArrowsExpandLeftAlt = styled.i``
|
||||
|
||||
export const ArrowsExpandLeftAlt = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
|
||||
>((props, ref) => {
|
||||
return (
|
||||
<>
|
||||
<StyledArrowsExpandLeftAlt {...props} ref={ref} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue