mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge pull request #16 from oceanprotocol/feature/files
Adding multiple files UI
This commit is contained in:
Jernej Pregelj
GitHub
commit
9c5682afe3
42
package-lock.json
generated
42
package-lock.json
generated
@ -1164,6 +1164,11 @@
|
||||
"integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/is-url": {
|
||||
"version": "1.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@types/is-url/-/is-url-1.2.28.tgz",
|
||||
"integrity": "sha1-kU2r1QVG2bAUKAbkLHK8fCt+B4c="
|
||||
},
|
||||
"@types/jest": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.0.tgz",
|
||||
@ -1247,6 +1252,14 @@
|
||||
"@types/react-router": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "2.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
|
||||
"integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/tapable": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
|
||||
@ -5616,6 +5629,14 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
|
||||
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
|
||||
@ -9865,6 +9886,11 @@
|
||||
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
|
||||
},
|
||||
"is-url": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
|
||||
"integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
|
||||
},
|
||||
"is-utf8": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
|
||||
@ -16571,6 +16597,11 @@
|
||||
"react-side-effect": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
|
||||
@ -16938,6 +16969,17 @@
|
||||
"shallowequal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
|
||||
"integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
|
||||
"requires": {
|
||||
"dom-helpers": "^3.3.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
|
||||
@ -17,14 +17,18 @@
|
||||
"dependencies": {
|
||||
"@oceanprotocol/art": "^2.2.0",
|
||||
"@oceanprotocol/squid": "^0.2.8",
|
||||
"@types/is-url": "^1.2.28",
|
||||
"@types/react-helmet": "^5.0.8",
|
||||
"@types/react-transition-group": "^2.0.15",
|
||||
"classnames": "^2.2.6",
|
||||
"eslint": "^5.6.0",
|
||||
"is-url": "^1.2.4",
|
||||
"query-string": "^6.2.0",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-transition-group": "^2.5.3",
|
||||
"slugify": "^1.3.4",
|
||||
"web3": "^1.0.0-beta.43"
|
||||
},
|
||||
|
||||
@ -5,7 +5,7 @@ import About from './routes/About'
|
||||
import Details from './routes/Details'
|
||||
import Home from './routes/Home'
|
||||
import NotFound from './routes/NotFound'
|
||||
import Publish from './routes/Publish'
|
||||
import Publish from './routes/Publish/'
|
||||
import Search from './routes/Search'
|
||||
import Styleguide from './routes/Styleguide'
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ interface InputProps {
|
||||
onChange?: any
|
||||
rows?: number
|
||||
group?: any
|
||||
multiple?: boolean
|
||||
}
|
||||
|
||||
interface InputState {
|
||||
@ -150,7 +151,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { name, label, required, help, additionalComponent } = this.props
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
help,
|
||||
additionalComponent,
|
||||
multiple
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Row>
|
||||
@ -162,6 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
|
||||
|
||||
{help && <Help>{help}</Help>}
|
||||
|
||||
{multiple && 'hello'}
|
||||
|
||||
{additionalComponent && additionalComponent}
|
||||
</Row>
|
||||
)
|
||||
|
||||
@ -7,7 +7,14 @@
|
||||
"placeholder": "i.e. My cool data set",
|
||||
"type": "text",
|
||||
"required": true,
|
||||
"help": "Help me"
|
||||
"help": "Help me Obiwan"
|
||||
},
|
||||
"files": {
|
||||
"label": "Files",
|
||||
"placeholder": "i.e. https://file.com/file.json",
|
||||
"type": "text",
|
||||
"required": true,
|
||||
"help": "Provide one or multiple links to your data files."
|
||||
},
|
||||
"description": {
|
||||
"label": "Description",
|
||||
@ -16,11 +23,11 @@
|
||||
"required": true,
|
||||
"rows": 5
|
||||
},
|
||||
"price": {
|
||||
"label": "Price",
|
||||
"placeholder": "i.e. 1000",
|
||||
"type": "number",
|
||||
"required": true
|
||||
"type": {
|
||||
"label": "Type",
|
||||
"type": "select",
|
||||
"required": true,
|
||||
"options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
|
||||
},
|
||||
"author": {
|
||||
"label": "Author",
|
||||
@ -28,18 +35,6 @@
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"files": {
|
||||
"label": "Files",
|
||||
"placeholder": "i.e. https://file.com/file.json",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"type": {
|
||||
"label": "Type",
|
||||
"type": "select",
|
||||
"required": true,
|
||||
"options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
|
||||
},
|
||||
"license": {
|
||||
"label": "License",
|
||||
"type": "select",
|
||||
|
||||
34
src/routes/Publish/Files/Item.module.scss
Normal file
34
src/routes/Publish/Files/Item.module.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.linkUrl {
|
||||
font-size: $font-size-mini;
|
||||
display: block;
|
||||
font-family: $font-family-base;
|
||||
|
||||
// TODO: truncate long urls with ellipsis
|
||||
}
|
||||
|
||||
.remove {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-family: $font-family-button;
|
||||
font-size: $font-size-h4;
|
||||
color: $brand-grey-light;
|
||||
line-height: $line-height;
|
||||
cursor: pointer;
|
||||
margin-left: $spacer / 2;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: $spacer / 4;
|
||||
right: 0;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
18
src/routes/Publish/Files/Item.tsx
Normal file
18
src/routes/Publish/Files/Item.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import styles from './Item.module.scss'
|
||||
|
||||
const Item = ({ item, removeItem }: { item: string; removeItem: any }) => (
|
||||
<li>
|
||||
<a href={item}>{item}</a>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.remove}
|
||||
title="Remove item"
|
||||
onClick={removeItem}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
|
||||
export default Item
|
||||
16
src/routes/Publish/Files/ItemForm.module.scss
Normal file
16
src/routes/Publish/Files/ItemForm.module.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.itemForm {
|
||||
margin-top: $spacer / 2;
|
||||
padding-left: $spacer / 2;
|
||||
|
||||
button {
|
||||
margin-top: -($spacer * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: $font-size-small;
|
||||
color: $red;
|
||||
margin-left: $spacer / 4;
|
||||
}
|
||||
90
src/routes/Publish/Files/ItemForm.tsx
Normal file
90
src/routes/Publish/Files/ItemForm.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import isUrl from 'is-url'
|
||||
import Input from '../../../components/atoms/Form/Input'
|
||||
import Button from '../../../components/atoms/Button'
|
||||
import styles from './ItemForm.module.scss'
|
||||
|
||||
interface ItemFormProps {
|
||||
addItem: any
|
||||
placeholder: string
|
||||
}
|
||||
|
||||
interface ItemFormStates {
|
||||
url: string
|
||||
hasError: boolean
|
||||
noUrl: boolean
|
||||
}
|
||||
|
||||
export default class ItemForm extends PureComponent<
|
||||
ItemFormProps,
|
||||
ItemFormStates
|
||||
> {
|
||||
public state: ItemFormStates = {
|
||||
url: '',
|
||||
hasError: false,
|
||||
noUrl: false
|
||||
}
|
||||
|
||||
public handleSubmit = (e: Event) => {
|
||||
e.preventDefault()
|
||||
|
||||
const { url } = this.state
|
||||
|
||||
// return when required fields are empty, and url value is no url
|
||||
// Can't use browser validation cause we are in a form within a form
|
||||
if (!url) {
|
||||
this.setState({ hasError: true })
|
||||
return
|
||||
}
|
||||
|
||||
if (url && !isUrl(url)) {
|
||||
this.setState({ noUrl: true })
|
||||
return
|
||||
}
|
||||
|
||||
this.props.addItem(url)
|
||||
}
|
||||
|
||||
public onChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
|
||||
this.setState({ url: e.currentTarget.value })
|
||||
this.clearErrors()
|
||||
}
|
||||
|
||||
public clearErrors() {
|
||||
if (this.state.hasError) this.setState({ hasError: false })
|
||||
if (this.state.noUrl) this.setState({ noUrl: true })
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { url, hasError, noUrl } = this.state
|
||||
|
||||
return (
|
||||
<div className={styles.itemForm}>
|
||||
<Input
|
||||
label="Url"
|
||||
name="url"
|
||||
required
|
||||
type="url"
|
||||
placeholder={this.props.placeholder}
|
||||
value={url}
|
||||
onChange={this.onChangeUrl}
|
||||
/>
|
||||
|
||||
<Button onClick={(e: Event) => this.handleSubmit(e)}>
|
||||
Add File
|
||||
</Button>
|
||||
|
||||
{hasError && (
|
||||
<span className={styles.error}>
|
||||
Please fill in all required fields.
|
||||
</span>
|
||||
)}
|
||||
{noUrl && (
|
||||
<span className={styles.error}>
|
||||
Please enter a valid URL.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
31
src/routes/Publish/Files/index.module.scss
Normal file
31
src/routes/Publish/Files/index.module.scss
Normal file
@ -0,0 +1,31 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.newItems {
|
||||
margin-top: $spacer / 2;
|
||||
}
|
||||
|
||||
.itemsList {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: $spacer / 2;
|
||||
font-family: $font-family-button;
|
||||
color: $brand-grey-light;
|
||||
border-bottom: 1px solid $brand-grey-lighter;
|
||||
|
||||
li {
|
||||
border-top: 1px solid $brand-grey-lighter;
|
||||
padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brand-grey;
|
||||
}
|
||||
}
|
||||
102
src/routes/Publish/Files/index.tsx
Normal file
102
src/routes/Publish/Files/index.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { CSSTransition, TransitionGroup } from 'react-transition-group'
|
||||
import Button from '../../../components/atoms/Button'
|
||||
import Help from '../../../components/atoms/Form/Help'
|
||||
import ItemForm from './ItemForm'
|
||||
import Item from './Item'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface FilesProps {
|
||||
files: string[]
|
||||
placeholder: string
|
||||
help?: string
|
||||
name: string
|
||||
onChange: any
|
||||
// resetForm: any
|
||||
}
|
||||
|
||||
interface FilesStates {
|
||||
isFormShown: boolean
|
||||
}
|
||||
|
||||
export default class Files extends PureComponent<FilesProps, FilesStates> {
|
||||
public state: FilesStates = {
|
||||
isFormShown: false
|
||||
}
|
||||
|
||||
public toggleForm = (e: Event) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.setState({ isFormShown: !this.state.isFormShown })
|
||||
}
|
||||
|
||||
public addItem = (value: string) => {
|
||||
this.props.files.push(value)
|
||||
// this.props.resetForm()
|
||||
this.setState({ isFormShown: !this.state.isFormShown })
|
||||
}
|
||||
|
||||
public removeItem = (index: number) => {
|
||||
this.props.files.splice(index, 1)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { isFormShown } = this.state
|
||||
const { files, help, placeholder, name, onChange } = this.props
|
||||
|
||||
return (
|
||||
<>
|
||||
{help && <Help>{help}</Help>}
|
||||
|
||||
{/* Use hidden input to collect files */}
|
||||
<input
|
||||
type="hidden"
|
||||
name={name}
|
||||
value={files}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
<div className={styles.newItems}>
|
||||
{files.length > 0 && (
|
||||
<TransitionGroup
|
||||
component="ul"
|
||||
className={styles.itemsList}
|
||||
>
|
||||
{files.map((item: string, index: number) => (
|
||||
<CSSTransition
|
||||
key={index}
|
||||
timeout={400}
|
||||
classNames="fade"
|
||||
>
|
||||
<Item
|
||||
item={item}
|
||||
removeItem={() =>
|
||||
this.removeItem(index)
|
||||
}
|
||||
/>
|
||||
</CSSTransition>
|
||||
))}
|
||||
</TransitionGroup>
|
||||
)}
|
||||
|
||||
<Button link onClick={this.toggleForm}>
|
||||
{isFormShown ? '- Cancel' : '+ Add a file'}
|
||||
</Button>
|
||||
|
||||
<CSSTransition
|
||||
classNames="grow"
|
||||
in={isFormShown}
|
||||
timeout={200}
|
||||
unmountOnExit
|
||||
onExit={() => this.setState({ isFormShown: false })}
|
||||
>
|
||||
<ItemForm
|
||||
placeholder={placeholder}
|
||||
addItem={this.addItem}
|
||||
/>
|
||||
</CSSTransition>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,17 @@
|
||||
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
import Route from '../components/templates/Route'
|
||||
import Button from '../components/atoms/Button'
|
||||
import Form from '../components/atoms/Form/Form'
|
||||
import Input from '../components/atoms/Form/Input'
|
||||
import { User } from '../context/User'
|
||||
import AssetModel from '../models/AssetModel'
|
||||
import Web3message from '../components/Web3message'
|
||||
import Route from '../../components/templates/Route'
|
||||
import Button from '../../components/atoms/Button'
|
||||
import Form from '../../components/atoms/Form/Form'
|
||||
import Input from '../../components/atoms/Form/Input'
|
||||
import Label from '../../components/atoms/Form/Label'
|
||||
import Row from '../../components/atoms/Form/Row'
|
||||
import { User } from '../../context/User'
|
||||
import AssetModel from '../../models/AssetModel'
|
||||
import Web3message from '../../components/Web3message'
|
||||
import Files from './Files/'
|
||||
|
||||
import form from '../data/form-publish.json'
|
||||
import form from '../../data/form-publish.json'
|
||||
|
||||
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
|
||||
|
||||
@ -35,13 +38,13 @@ class Publish extends Component<{}, PublishState> {
|
||||
name: '',
|
||||
dateCreated: new Date(),
|
||||
description: '',
|
||||
files: [''],
|
||||
files: [],
|
||||
price: 0,
|
||||
author: '',
|
||||
type: 'dataset' as AssetType,
|
||||
license: '',
|
||||
copyrightHolder: '',
|
||||
categories: [''],
|
||||
categories: [],
|
||||
isPublishing: false,
|
||||
isPublished: false,
|
||||
publishedDid: '',
|
||||
@ -56,6 +59,23 @@ class Publish extends Component<{}, PublishState> {
|
||||
onChange = this.inputToArrayChange
|
||||
}
|
||||
|
||||
if (key === 'files') {
|
||||
return (
|
||||
<Row key={key}>
|
||||
<Label htmlFor={key} required>
|
||||
{value.label}
|
||||
</Label>
|
||||
<Files
|
||||
placeholder={value.placeholder}
|
||||
name={value.name}
|
||||
help={value.help}
|
||||
files={this.state.files}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Input
|
||||
key={key}
|
||||
@ -77,7 +97,7 @@ class Publish extends Component<{}, PublishState> {
|
||||
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value
|
||||
[event.currentTarget.name]: event.currentTarget.value
|
||||
})
|
||||
}
|
||||
|
||||
@ -85,7 +105,7 @@ class Publish extends Component<{}, PublishState> {
|
||||
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
this.setState({
|
||||
[event.target.name]: [event.target.value]
|
||||
[event.currentTarget.name]: [event.currentTarget.value]
|
||||
})
|
||||
}
|
||||
|
||||
@ -143,6 +163,7 @@ class Publish extends Component<{}, PublishState> {
|
||||
AssetModel.additionalInformation
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
const asset = await this.context.ocean.registerAsset(
|
||||
newAsset,
|
||||
43
src/styles/_animations.scss
Normal file
43
src/styles/_animations.scss
Normal file
@ -0,0 +1,43 @@
|
||||
.fade {
|
||||
&-enter {
|
||||
opacity: .01;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 400ms ease-out;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-exit-active {
|
||||
opacity: .01;
|
||||
transition: opacity 400ms ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.grow {
|
||||
&-enter {
|
||||
opacity: .01;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
opacity: 1;
|
||||
max-height: 500px;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
opacity: 1;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
&-exit-active {
|
||||
opacity: .01;
|
||||
max-height: 0;
|
||||
transition: 200ms ease-in;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
|
||||
|
||||
@import 'variables';
|
||||
@import 'animations';
|
||||
|
||||
*,
|
||||
*:before,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user