How to use the @edtr-io/editor-ui.styled.button function in @edtr-io/editor-ui

To help you get started, we’ve selected a few @edtr-io/editor-ui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github edtr-io / edtr-io / packages / plugin-sc-mc-exercise / src / choice-editor.tsx View on Github external
}

  private removeAnswer = () => {
    const { state, index } = this.props
    state.answers.remove(index)
  }

  private EditorUiContainer = styled.div({
    float: 'right'
  })

  private ContentContainer = styled.div({
    clear: 'both'
  })

  private RemoveButton = styled.button({
    marginRight: '5px'
  })
}
github edtr-io / edtr-io / packages / plugins / solution-steps / src / helper / styled-elements.tsx View on Github external
)
}

export const Controls = styled.div({
  right: '0',
  position: 'absolute',
  top: '0',
  transform: 'translate(50%, -5px)',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center'
})

export const ControlButton = styled.button({
  borderRadius: '50%',
  border: '1px solid rgba(5,51,51,0.95)',
  width: '27px',
  height: '27px',
  outline: 'none',
  textAlign: 'center',
  background: 'rgba(51,51,51,0.95)',
  color: 'white',
  zIndex: 20,
  '&:hover': {
    background: '#469bff',
    border: '1px solid #469bff'
  }
})

export const DragHandler = styled.div({
github edtr-io / edtr-io / packages / plugin-equations / src / editor.tsx View on Github external
import { StatefulPluginEditorProps } from '@edtr-io/core'
import { Icon, faPlus, faTimes, styled } from '@edtr-io/editor-ui'
import * as React from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

import { EquationsRenderer } from './renderer'
import { equationsState } from '.'

const DraggableContainer = styled.div({
  border: '1px solid #000',
  margin: '10px',
  background: 'lightgrey',
  padding: '10px'
})

const RemoveButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  width: '35px',
  height: '35px',
  border: 'none',
  float: 'right',
  background: 'transparent',
  position: 'relative',
  top: '-15px',
  right: '-30px'
})

const ColWrapper = styled.div({
  cursor: 'auto',
  background: '#fff'
})
github edtr-io / edtr-io / packages / plugin-equations / src / editor.tsx View on Github external
width: '35px',
  height: '35px',
  border: 'none',
  float: 'right',
  background: 'transparent',
  position: 'relative',
  top: '-15px',
  right: '-30px'
})

const ColWrapper = styled.div({
  cursor: 'auto',
  background: '#fff'
})

const AddButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  width: '35px',
  height: '35px',
  border: 'none',
  margin: 'auto'
})

const AddButtonWrapper = styled.div({
  textAlign: 'center'
})

export class EquationsEditor extends React.Component<
  StatefulPluginEditorProps
> {
  private addButton = () => {