ac-react-simple-image-slider/dist/Slider.styles.js

A simple image slider built with React, emotion and hooks

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Dot = exports.ArrowRight = exports.ArrowLeft = exports.Arrow = exports.SliderFooter = exports.SlideImage = exports.ElementWrapper = exports.fadeIn = exports.SliderContent = exports.SliderWrapper = void 0;

var _styled = _interopRequireDefault(require("@emotion/styled"));

var _core = require("@emotion/core");

var _styledTools = require("styled-tools");

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

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n      height: 5px;\n      opacity: 1;\n    "]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  height: 9px;\n  width: 5px;\n  border-radius: 100%;\n  background-color: gray;\n  opacity: 0.6;\n  cursor: pointer;\n\n  ", "\n\n  &:not(:last-child) {\n    margin-right: 5px;\n  }\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  right: 10px;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  left: 10px;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  height: 30px;\n  width: 30px;\n  color: #fff;\n  border: 1px solid #fff;\n  border-radius: 30px;\n  background-color: rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n\n  & > img {\n    height: 50%;\n  }\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  height: 30px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n      display: block;\n      opacity: 1;\n      animation: ", " 3s;\n    "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  object-fit: cover;\n  object-position: top;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  display: none;\n  ", "\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  height: ", ";\n  width: 100%;\n  position: relative;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  height: ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var SliderWrapper = _styled.default.div(_templateObject(), (0, _styledTools.prop)('width', '500px'), (0, _styledTools.prop)('height', '500px'));

exports.SliderWrapper = SliderWrapper;

var SliderContent = _styled.default.div(_templateObject2(), (0, _styledTools.ifProp)('isDots', 'calc(100% - 30px)', '100%'));

exports.SliderContent = SliderContent;
var fadeIn = (0, _core.keyframes)(_templateObject3());
exports.fadeIn = fadeIn;

var ElementWrapper = _styled.default.div(_templateObject4());

exports.ElementWrapper = ElementWrapper;

var SlideImage = _styled.default.img(_templateObject5(), (0, _styledTools.ifProp)({
  isActive: true
}, (0, _core.css)(_templateObject6(), fadeIn)));

exports.SlideImage = SlideImage;

var SliderFooter = _styled.default.div(_templateObject7());

exports.SliderFooter = SliderFooter;

var Arrow = _styled.default.div(_templateObject8());

exports.Arrow = Arrow;
var ArrowLeft = (0, _styled.default)(Arrow)(_templateObject9());
exports.ArrowLeft = ArrowLeft;
var ArrowRight = (0, _styled.default)(Arrow)(_templateObject10());
exports.ArrowRight = ArrowRight;

var Dot = _styled.default.div(_templateObject11(), (0, _styledTools.ifProp)('selected', (0, _core.css)(_templateObject12())));

exports.Dot = Dot;