@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
JavaScript
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)"
}
};
};