@ovine/craft/lib/components/aside/indicator/styled.js

Ovine json editor.

import styled, { css } from 'styled-components';
const transPos = (p) => {
    const { t, r, b, l } = p;
    return {
        top: t,
        right: r,
        bottom: b,
        left: l,
    };
};
export const StyledContainer = styled.div `
  padding: 10px;
  .container-content {
    margin: 10px 0 0;
    border: 1px solid #dedede;
  }
`;
export const StyledCorner = styled.div `
  ${transPos};
  position: absolute;
  padding: 2px 4px;
  font-size: 12px;
  background-color: blue;
  color: #fff;
`;
const baseVerHor = css `
  ${transPos};
  position: absolute;
  font-size: 20px;

  &.v-center {
    top: 50%;
    transform: translateY(-50%);
  }

  &.h-center {
    left: 50%;
    transform: translateX(-50%);
  }

  &.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  ul {
    padding: 0;
    margin: 0;
  }
  li {
    list-style: none;
    cursor: pointer;
  }
`;
export const StyledVertical = styled.div `
  ${baseVerHor};
  li {
    display: block;
  }
`;
export const StyledHorizontal = styled.div `
  ${baseVerHor};
  li {
    display: inline-block;
  }
`;