UNPKG

@trap_stevo/legendarybuilderproreact-ui

Version:

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

224 lines 7.42 kB
import _slicedToArray from "@babel/runtime/helpers/slicedToArray"; export var centerContent = function centerContent() { return { display: "flex", justifyContent: "center", alignItems: "center" }; }; export var toggle = function toggle(condition) { var toggleConfigurationSettings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var configurationSettings = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; return condition ? toggleConfigurationSettings : configurationSettings; }; export var enableScrolling = function enableScrolling() { var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "both"; var scrollStyles = { overflowX: direction === "horizontal" || direction === "both" ? "auto" : "hidden", overflowY: direction === "vertical" || direction === "both" ? "auto" : "hidden" }; return scrollStyles; }; export var equalColumns = function equalColumns(count) { var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px"; return { display: "grid", gridTemplateColumns: "repeat(".concat(count, ", 1fr)"), gap: gap }; }; export var adjustSpacing = function adjustSpacing() { var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px"; return { gap: gap }; }; export var responsiveFlex = function responsiveFlex() { var justifyContent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "center"; var alignItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "center"; return { display: "flex", justifyContent: justifyContent, alignItems: alignItems, flexWrap: "wrap" }; }; export var responsiveGrid = function responsiveGrid(minColumnWidth) { var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px"; return { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(".concat(minColumnWidth, ", 1fr))"), gap: gap }; }; export var fixedSidebarLayout = function fixedSidebarLayout() { var sidebarWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "250px"; var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px"; return { display: "grid", gridTemplateColumns: "".concat(sidebarWidth, " 1fr"), gap: gap }; }; export var stackedLayout = function stackedLayout() { return { display: "grid", gridTemplateRows: "auto auto auto", gap: "10px" }; }; export var fullHeightLayout = function fullHeightLayout() { return { height: "100vh", display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr" }; }; export var aspectRatio = function aspectRatio() { var ratio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "16:9"; var _ratio$split = ratio.split(":"), _ratio$split2 = _slicedToArray(_ratio$split, 2), width = _ratio$split2[0], height = _ratio$split2[1]; return { position: "relative", paddingBottom: "".concat(height / width * 100, "%"), height: 0, overflow: "hidden", '& > *': { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" } }; }; export var alignStart = function alignStart() { return { display: "flex", justifyContent: "flex-start", alignItems: "flex-start" }; }; export var alignEnd = function alignEnd() { return { display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }; }; export var alignCenter = function alignCenter() { return { display: "flex", justifyContent: "center", alignItems: "center" }; }; export var applyGridGap = function applyGridGap() { var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px"; return { display: "grid", gap: gap }; }; export var autoRowsGrid = function autoRowsGrid() { var rowHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "auto"; var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "10px"; return { display: "grid", gridAutoRows: rowHeight, gap: gap }; }; export var autoFlow = function autoFlow() { var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "row"; var dense = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; return { gridAutoFlow: "".concat(direction).concat(dense ? ' dense' : '') }; }; export var updateGridAreas = function updateGridAreas(currentAreas, newAreas) { return newAreas || currentAreas; }; export var fixedFlexibleGrid = function fixedFlexibleGrid() { var fixedWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "200px"; var flexibleWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1fr"; var gap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "10px"; return { display: "grid", gridTemplateColumns: "".concat(fixedWidth, " ").concat(flexibleWidth), gap: gap }; }; export var cardLayout = function cardLayout() { var cardHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "300px"; var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "20px"; return { display: "grid", gridTemplateRows: "repeat(auto-fill, ".concat(cardHeight, ")"), gridAutoFlow: "dense", gap: gap }; }; export var overlayGrid = function overlayGrid() { var gap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "10px"; return { display: "grid", gridTemplateAreas: "'main main' 'overlay overlay'", gap: gap }; }; export var overlay = function overlay() { var zIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "rgba(0, 0, 0, 0.5)"; return { position: "relative", zIndex: zIndex, backgroundColor: backgroundColor }; }; export var gradientBackground = function gradientBackground(startColor, endColor) { return { background: "linear-gradient(135deg, ".concat(startColor, ", ").concat(endColor, ")"), color: "#ffffff", padding: "20px", borderRadius: "10px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }; }; export var gridWithBackground = function gridWithBackground(backgroundColor) { return { display: "grid", backgroundColor: backgroundColor, padding: "20px", borderRadius: "10px" }; }; export var circularGrid = function circularGrid() { var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "100px"; var gap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "20px"; return { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(".concat(size, ", 1fr))"), gap: gap, alignItems: "center", justifyItems: "center" }; }; export var itemCursor = function itemCursor() { var cursorStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "pointer"; return { cursor: cursorStyle }; }; export var hoverEffectGrid = function hoverEffectGrid() { return { display: "grid", transition: "transform 0.3s ease-in-out", '&:hover': { transform: "scale(1.05)" } }; };