diff --git a/src/common-elements/buttons.ts b/src/common-elements/buttons.ts new file mode 100644 index 00000000..33dace2c --- /dev/null +++ b/src/common-elements/buttons.ts @@ -0,0 +1,30 @@ +import styled from '../styled-components'; + +export const Button = styled.button` + display: inline-block; + vertical-align: middle; + border: 0; + padding: 0; + margin: 4px; + position: relative; + width: 24px; + height: 24px; + background-color: #ebebeb; + cursor: pointer; + transition: background .15s,opacity .15s,border-color .15s; + white-space: nowrap; + border-radius: 16px; + + &:hover { + background-color: #ccc; + text-decoration: none; + } + + &:focus { + outline: none; + } + + @media screen and (max-width: 450px) { + display: none; + } +`; diff --git a/src/common-elements/index.ts b/src/common-elements/index.ts index 5c9ec542..f19ef6ed 100644 --- a/src/common-elements/index.ts +++ b/src/common-elements/index.ts @@ -9,3 +9,4 @@ export * from './mixins'; export * from './tabs'; export * from './samples'; export * from './perfect-scrollbar'; +export * from './buttons'; diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index b93f881b..81c48f03 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -13,7 +13,7 @@ import { PropertyRow, } from '../../common-elements/fields-layout'; -import { ShelfIcon } from '../../common-elements/'; +import { Button, ShelfIcon } from '../../common-elements/'; import { FieldModel } from '../../services/models'; import { Schema, SchemaOptions } from '../Schema/Schema'; @@ -65,7 +65,9 @@ export class Field extends React.Component { > {name} - + {!required && optional } ) : ( @@ -85,7 +87,7 @@ export class Field extends React.Component { {withSubSchema && ( - +