react-misc-toolbox/dist/defaultStyles.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CTCMercuryStyleTemplates = exports.languagePickerTemplates = exports.modalStyleTemplates = exports.testStyles = exports.switchStyleTemplates = exports.buttonStyles = exports.cardStyles = undefined;

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _buttonStyles;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require('./helperFunctions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var cardStyles = exports.cardStyles = {
  none: {
    baseContainerStyle: {},
    baseImageStyle: {
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: 'contain'
    },
    baseSternStyle: {},
    baseStarboardStyle: {},
    baseTitleStyle: {},
    baseSubtitleStyle: {}
  },
  neutral: {
    baseContainerStyle: {
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      position: 'relative',
      padding: '0.5rem 1rem',
      marginLeft: '1rem',
      minWidth: '16rem'
    },
    baseImageStyle: {
      overflow: 'hidden',
      backgroundPosition: 'center', //justifyContent: 'center', //alignItems: `center`,
      marginBottom: '8px',
      borderRadius: '3px 3px 0',
      display: 'flex',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain',
      height: '19rem'
    },
    baseSternStyle: {},
    baseStarboardStyle: {},
    baseTitleStyle: { textAlign: 'center', padding: '5px' },
    baseSubtitleStyle: { textAlign: 'center', padding: '5px' }
  }
};
var buttonStyles = exports.buttonStyles = (_buttonStyles = {
  vivid: {
    transition: 'smooth',
    on: { backgroundColor: '#33aaff', color: '#fff' },
    off: { backgroundColor: '#ffbb33', color: '#333333' }
  },
  exotic: {
    transition: 'smooth',
    on: { backgroundColor: '#ffff00', color: '#770077' },
    off: { backgroundColor: '#770077', color: '#ffff00' }
  },
  facebook: {
    transition: 'smooth',
    off: { backgroundColor: '#4267b2', color: '#eeeeee' },
    on: { backgroundColor: '#e4e4e4', color: '#333333' },
    diff: 5
  },
  google: {
    transition: 'smooth',
    off: { backgroundColor: '#fff', color: '#5f646d' },
    on: { backgroundColor: '#e4e4e4', color: '#333333' },
    diff: 5
  },
  link: {
    on: { color: '#aaa', backgroundColor: '#fff0' },
    off: { color: '#050505', backgroundColor: '#fff0' },
    disabled: { color: '#d33' },
    transition: 'mix',
    diff: 40
  },
  linkOpaque: {
    on: { backgroundColor: '#ccc', color: '#fff' },
    off: { backgroundColor: '#fff', color: '#050505' },
    disabled: { color: '#d33' },
    transition: 'mix',
    diff: 40
  },
  neutral: {
    transition: 'mix',
    on: { backgroundColor: '#dddddd' },
    off: { backgroundColor: '#ffffff' },
    disabled: { backgroundColor: '#ccc', color: '#888' },
    diff: 30
  },
  smoke: {
    transition: 'mix',
    on: { backgroundColor: '#ccc' },
    off: { backgroundColor: '#eee' },
    diff: 30
  },
  transparentNeutral: {
    transition: 'mix',
    on: { backgroundColor: '#aaa9' },
    off: { backgroundColor: '#0000' },
    disabled: { backgroundColor: '#ccc', color: '#888' },
    diff: 30
  },
  semiTransparentNeutral: {
    transition: 'mix',
    on: { backgroundColor: '#aaa9' },
    off: { backgroundColor: '#dadada99' },
    disabled: { backgroundColor: '#ccc', color: '#888' },
    diff: 30
  },

  vampire: {
    transition: 'mix',
    on: { backgroundColor: '#bb2222', color: '#eeeeee' },
    off: { backgroundColor: '#e4e4e4', color: '#333333' },
    diff: 20
  },

  redden: {
    transition: 'mix',
    on: { backgroundColor: '#ff8888', color: '#eeeeee' },
    off: { backgroundColor: '#0000', color: '#333333' },
    diff: 25
  },
  verdant: {
    transition: 'mix',
    on: { backgroundColor: '#66bb66', color: '#fff' },
    off: { backgroundColor: '#0000', color: '#333333' },
    diff: 20
  },
  traffic: {
    transition: 'contrast',
    on: { backgroundColor: '#dd3333', color: '#eeeeee' },
    off: { backgroundColor: '#33dd33', color: '#333333' },
    diff: 20
  },
  delphinium: {
    transition: 'mix',
    on: { backgroundColor: '#dd33dd88', color: '#111' },
    off: { backgroundColor: '#ffffff', color: '#111' },
    diff: 25
  },
  lisanthus: {
    transition: 'mix',
    on: { backgroundColor: '#591b64', color: '#eee' },
    off: { backgroundColor: '#ffffff', color: '#414' },
    diff: 25
  },
  darken: {
    transition: 'mix',
    on: { backgroundColor: '#eeee' },
    off: { backgroundColor: '#3333' },
    diff: 20
  },
  yolk: {
    transition: 'mix',
    on: { backgroundColor: '#fcd12a', color: '#000000' },
    off: { backgroundColor: '#fcf4a3', color: '#000000' },
    diff: 20
  },
  monochrome: {
    transition: 'mix',
    on: { backgroundColor: '#333333', color: '#f4f4f4' },
    off: { backgroundColor: '#fafafa', color: '#333333' },
    diff: 20
  },
  icewind: {
    transition: 'mix',
    on: { backgroundColor: '#004', color: '#f4f4f4' },
    off: { backgroundColor: '#ddf8', color: '#333333' },
    diff: 40
  },
  surfing: {
    transition: 'mix',
    on: { backgroundColor: '#003b46', color: '#eeffff' },
    off: { backgroundColor: '#c4dfe6', color: '#001924' },
    diff: 10
  },
  highlight: {
    transition: 'mix',
    on: { backgroundColor: '#eeea' },
    off: { backgroundColor: '#3333' },
    disabled: { backgroundColor: '#ccc', color: '#888' },
    diff: 30
  },
  darkhighlight: {
    transition: 'mix',
    on: { backgroundColor: '#bbba', color: '#504147' },
    off: { backgroundColor: '#8883', color: '#504147' },
    disabled: { backgroundColor: '#ccc', color: '#888' },
    diff: 30
  },
  monochromeTransparent: {
    tag: 'monochromeTransparent',
    transition: 'mix',
    on: { backgroundColor: '#333333bb', color: '#f4f4f4' },
    off: { backgroundColor: '#fafafabb', color: '#333333' },
    diff: 20
  }
}, (0, _defineProperty3.default)(_buttonStyles, 'smoke', {
  transition: 'mix',
  on: { backgroundColor: '#ccc' },
  off: { backgroundColor: '#eee' },
  diff: 30
}), (0, _defineProperty3.default)(_buttonStyles, 'lightsmoke', {
  transition: 'mix',
  on: { backgroundColor: '#d7d7d7' },
  off: { backgroundColor: '#f7f7f7' },
  diff: 30
}), _buttonStyles);
var switchStyleTemplates = exports.switchStyleTemplates = {
  default: {
    option: {
      cursor: 'pointer'
    },
    content: {
      transition: 'all 150ms ease-in-out'
    }
  }
};

var testStyles = exports.testStyles = {
  test1: {
    container: {
      position: 'relative',
      cursor: 'default',
      margin: '0 1rem',
      opacity: '1',
      color: '#020202',
      background: '#aaa',
      border: '1px solid #575757',
      zIndex: '0',
      borderRadius: '0.375rem'
    },
    getBody: function getBody(_ref) {
      var hasHeader = _ref.hasHeader,
          hasFooter = _ref.hasFooter,
          hasCloseModalButton = _ref.hasCloseModalButton;

      return {
        background: '#fed',
        padding: '2.4rem 2rem',
        overflowY: 'auto',
        borderRadius: (hasHeader ? '0 0' : hasCloseModalButton ? '0.375rem 0' : '0.375rem 0.375rem') + ' ' + (hasFooter ? '0 0' : '0.375rem 0.375rem')
      };
    },
    body: {
      background: '#fdfdfd',
      padding: '2.4rem 2rem',
      overflowY: 'auto'
    },
    background: {
      position: 'fixed',
      height: '100%',
      top: '0',
      left: '0',
      width: '100%',
      background: 'rgba(0, 0, 0, 0.5)',
      zIndex: '2',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      WebkitTapHighlightColor: 'transparent'
    },
    getHeader: function getHeader(_ref2) {
      var hasCloseModalButton = _ref2.hasCloseModalButton;

      return {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '0',
        padding: '2rem 2rem 1.5rem 2rem',
        borderBottom: '0.5rem solid #f0f0f0',
        background: '#444',
        borderRadius: hasCloseModalButton ? '0.375rem 0 0.375rem 0.375rem' : '0.375rem'
      };
    },

    buttons: {
      borderTop: '1px solid #575757',
      borderRadius: '0 0 0.375rem 0.375rem  ',
      padding: '0.5rem',
      background: '#fafafa',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end'
    },
    closemodalbutton: {
      zIndex: 2,
      top: '2rem',
      right: '2rem',
      position: 'fixed',
      height: '1.75rem',
      cursor: 'pointer',
      background: '#fff',
      borderTop: '1px solid #575757',
      borderLeft: '1px solid #575757',
      borderRight: '1px solid #575757',
      borderRadius: '1rem',
      display: 'flex'
    }
  }
};
var modalStyleTemplates = exports.modalStyleTemplates = {
  basic: {
    container: {
      position: 'relative',
      cursor: 'default',
      background: '#fff'
    },
    getHeader: function getHeader() {
      return {};
    },
    getBody: function getBody() {
      return {};
    },
    body: {
      opacity: 1
    },
    background: {
      zIndex: 2,
      background: '#000a',
      position: 'fixed',
      height: '100%',
      top: '0',
      left: '0',
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    header: {},
    buttons: {},
    closemodalbutton: {
      zIndex: 1,
      cursor: 'pointer',
      position: 'absolute'
    }
  },
  default: {
    container: {
      position: 'relative',
      cursor: 'default',
      margin: '0 1rem',
      opacity: '1',
      color: '#020202',
      background: '#fff',
      border: '1px solid #575757',
      zIndex: '0',
      borderRadius: '0.375rem'
    },
    getBody: function getBody(_ref3) {
      var hasHeader = _ref3.hasHeader,
          hasFooter = _ref3.hasFooter,
          hasCloseModalButton = _ref3.hasCloseModalButton;

      return {
        background: '#fdfdfd',
        padding: '2.4rem 2rem',
        overflowY: 'auto',
        borderRadius: (hasHeader ? '0 0' : hasCloseModalButton ? '0.375rem 0' : '0.375rem 0.375rem') + ' ' + (hasFooter ? '0 0' : '0.375rem 0.375rem')
      };
    },
    body: {
      background: '#fdfdfd',
      padding: '2.4rem 2rem',
      overflowY: 'auto'
    },
    background: {
      position: 'fixed',
      height: '100%',
      top: '0',
      left: '0',
      width: '100%',
      background: 'rgba(0, 0, 0, 0.5)',
      zIndex: '2',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      WebkitTapHighlightColor: 'transparent'
    },
    getHeader: function getHeader(_ref4) {
      var hasCloseModalButton = _ref4.hasCloseModalButton;

      return {
        display: 'flex',
        alignItems: 'center',
        margin: '0',
        padding: '2rem 2rem 1.5rem 2rem',
        borderBottom: '0.5rem solid #f0f0f0',
        background: '#fafafa',
        borderRadius: hasCloseModalButton ? '0.375rem 0 0.375rem 0.375rem' : '0.375rem'
      };
    },
    header: {
      display: 'flex',
      alignItems: 'center',
      margin: '0',
      padding: '2rem 2rem 1.5rem 2rem',
      borderBottom: '0.5rem solid #f0f0f0',
      borderRadius: '0.375rem 0.375rem 0 0 ',
      background: '#fafafa'
    },
    buttons: {
      borderTop: '1px solid #575757',
      borderRadius: '0 0 0.375rem 0.375rem  ',
      padding: '0.5rem',
      background: '#fafafa',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end'
    },
    closemodalbutton: {
      zIndex: 2,
      top: '2rem',
      right: '2rem',
      position: 'fixed',
      height: '1.75rem',
      cursor: 'pointer',
      background: '#fff',
      borderTop: '1px solid #575757',
      borderLeft: '1px solid #575757',
      borderRight: '1px solid #575757',
      borderRadius: '1rem',
      display: 'flex'
    }
  }
};
var languagePickerTemplates = exports.languagePickerTemplates = {
  none: {
    children: {
      position: 'absolute'
    },
    item: {},
    trigger: {}
  },
  default: {
    children: {
      position: 'absolute'
    },
    item: {
      width: '2.5rem',
      height: '2rem',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: '80%'
    },
    trigger: {
      width: '2.5rem',
      height: '2rem',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: '80%'
    }
  }
};

var CTCMercuryStyleTemplates = exports.CTCMercuryStyleTemplates = {
  default: {
    buttonColors: buttonStyles.neutral,
    getBarStyle: function getBarStyle(isOn) {
      return {
        transition: 'flex-grow 0.5s linear',
        padding: '0.25rem 0'
      };
    },
    getSideBarsStyle: function getSideBarsStyle(isOn) {
      return {
        flexGrow: isOn ? 0.5 : 1,
        backgroundColor: '#111',
        height: '1rem'
      };
    },
    getLeftBarStyle: function getLeftBarStyle(isOn) {
      return {};
    },
    getRightBarStyle: function getRightBarStyle(isOn) {
      return {};
    },
    getCenterBarStyle: function getCenterBarStyle(isOn) {
      return {
        flexGrow: isOn ? 1 : 0.5
      };
    }
  },
  weird: {
    buttonColors: buttonStyles.vivid,
    getBarStyle: function getBarStyle(isOn) {
      return {
        transition: 'flex-grow 0.5s linear',
        padding: '0.25rem 0'
      };
    },
    getSideBarsStyle: function getSideBarsStyle(isOn) {
      return {
        flexGrow: isOn ? 0.2 : 1,
        backgroundColor: isOn ? '#3c3' : '#464',
        height: '0.5rem'
      };
    },
    getLeftBarStyle: function getLeftBarStyle(isOn) {
      return {};
    },
    getRightBarStyle: function getRightBarStyle(isOn) {
      return {};
    },
    getCenterBarStyle: function getCenterBarStyle(isOn) {
      return {
        flexGrow: isOn ? 1 : 0.2,
        backgroundColor: '#000',
        color: '#fff'
      };
    }
  }
};