codogo-react-widgets/lib/components/shell/styles.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tpadding-left: ", "px;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 100%;\n"], ["\n\tpadding-left: ", "px;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 100%;\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tbox-shadow: 0px 0px 8px rgba(0, 0, 0, 0);\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\tz-index: 1;\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: ", "px;\n"], ["\n\talign-items: center;\n\tbackground-color: ", ";\n\tbox-shadow: 0px 0px 8px rgba(0, 0, 0, 0);\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\tz-index: 1;\n\tposition: fixed;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: ", "px;\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n\tpadding: ", "px 0;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n"], ["\n\tpadding: ", "px 0;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n"]),
    _templateObject4 = _taggedTemplateLiteral(["\n\tpadding: ", "px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\twidth: 100%;\n"], ["\n\tpadding: ", "px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\twidth: 100%;\n"]),
    _templateObject5 = _taggedTemplateLiteral(["\n\tborder-radius: ", "px;\n\tmargin: ", "px ", "px;\n\toverflow: hidden;\n\tposition: relative;\n\n\t&:after {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tright: 0;\n\t\tmargin-top: -", "px;\n\n\t\tborder: ", "px solid transparent;\n\t\tborder-left-width: 0;\n\t\tborder-right-color: white;\n\t\tborder-right-width: ", "px;\n\t}\n\n\t&:hover,\n\t&:active {\n\t\topacity: ", ";\n\t}\n"], ["\n\tborder-radius: ", "px;\n\tmargin: ", "px ", "px;\n\toverflow: hidden;\n\tposition: relative;\n\n\t&:after {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tright: 0;\n\t\tmargin-top: -", "px;\n\n\t\tborder: ", "px solid transparent;\n\t\tborder-left-width: 0;\n\t\tborder-right-color: white;\n\t\tborder-right-width: ", "px;\n\t}\n\n\t&:hover,\n\t&:active {\n\t\topacity: ", ";\n\t}\n"]),
    _templateObject6 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\ttop: ", "px;\n\tright: 0;\n\tmargin-top: -", "px;\n\n\tborder: ", "px solid transparent;\n\tborder-left-width: 0;\n\tborder-right-color: white;\n\tborder-right-width: ", "px;\n\n\ttransition: 0.25s ease-out top;\n"], ["\n\tposition: absolute;\n\ttop: ", "px;\n\tright: 0;\n\tmargin-top: -", "px;\n\n\tborder: ", "px solid transparent;\n\tborder-left-width: 0;\n\tborder-right-color: white;\n\tborder-right-width: ", "px;\n\n\ttransition: 0.25s ease-out top;\n"]),
    _templateObject7 = _taggedTemplateLiteral(["\n\twidth: ", "px;\n\theight: ", "px;\n\tborder: 2px dashed white;\n\tborder-radius: ", "px;\n\tmargin: ", "px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\topacity: 0.5;\n\ttransition: 0.15s ease-out all;\n\n\t&:hover {\n\t\topacity: 1;\n\t\tborder-style: solid;\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t}\n"], ["\n\twidth: ", "px;\n\theight: ", "px;\n\tborder: 2px dashed white;\n\tborder-radius: ", "px;\n\tmargin: ", "px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\topacity: 0.5;\n\ttransition: 0.15s ease-out all;\n\n\t&:hover {\n\t\topacity: 1;\n\t\tborder-style: solid;\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t}\n"]);

import React from "react";
import styled from "styled-components";
import * as R from "ramda";

var AddIcon = function AddIcon(props) {
	return React.createElement(
		"svg",
		props,
		React.createElement("path", {
			d: "M12 5v14M5 12h14"
		})
	);
};

AddIcon.defaultProps = {
	xmlns: "http://www.w3.org/2000/svg",
	width: "24",
	height: "24",
	viewBox: "0 0 24 24",
	fill: "none",
	stroke: "currentColor",
	strokeWidth: "2",
	strokeLinecap: "round",
	strokeLinejoin: "round",
	className: "feather feather-plus"
};

// --------------------------------------------------

var gutter = 8;
var arrow = 12;

// --------------------------------------------------

export var Container = styled.div(_templateObject, function (_ref) {
	var theme = _ref.theme;
	return theme.sizes.sidebarButtonSize + 2 * gutter;
});

// --------------------------------------------------

export var Sidebar = styled.div(_templateObject2, R.path(["theme", "colors", "primary"]), function (_ref2) {
	var theme = _ref2.theme;
	return theme.sizes.sidebarButtonSize + 2 * gutter;
});

export var SidebarOrgsSection = styled.div(_templateObject3, gutter / 2);

export var SidebarIconsSection = styled.div(_templateObject4, function (_ref3) {
	var theme = _ref3.theme;
	return theme.sizes.sidebarButtonSize - theme.sizes.sidebarIconSize + gutter;
});

// --------------------------------------------------

export var SideBarButtonImage = styled.div(_templateObject5, gutter, gutter / 2, gutter, arrow, arrow, arrow * 1.4, R.path(["theme", "colors", "translucent"]));

// --------------------------------------------------

export var Arrow = styled.div(_templateObject6, function (props) {
	return gutter + props.theme.sizes.sidebarButtonSize / 2 + props.index * (gutter + props.theme.sizes.sidebarButtonSize);
}, arrow, arrow, arrow * 1.4);

// --------------------------------------------------

//Add Org Button
var AOBWrapper = styled.div(_templateObject7, R.path(["theme", "sizes", "sidebarButtonSize"]), R.path(["theme", "sizes", "sidebarButtonSize"]), gutter, gutter / 2);

var iconSize = "70%";

var AOBIcon = function AOBIcon() {
	return React.createElement(AddIcon, {
		width: iconSize,
		height: iconSize,
		stroke: "white",
		strokeWidth: "2"
	});
};

export var AddOrgButton = function AddOrgButton(props) {
	return React.createElement(
		AOBWrapper,
		props,
		React.createElement(AOBIcon, null)
	);
};