norma-library/dist/esm/components/Table/styles.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __makeTemplateObject } from "tslib";
import styled from "styled-components";
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  background: #fff;\n  box-shadow: 0px 2px 6px #0000000A;\n  padding: 24px 0;\n"], ["\n  width: 100%;\n  background: #fff;\n  box-shadow: 0px 2px 6px #0000000A;\n  padding: 24px 0;\n"])));
export var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-height: ", ";\n"], ["\n  min-height: ", ";\n"])), function (props) { return props.minHeight ? props.minHeight : 'auto'; });
export var Table = styled.table(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-collapse: collapse;\n  width: 100%;\n  thead {\n    tr {\n      border-bottom: 1px solid #E0E0E0;\n      th {\n        padding: 12px 24px;\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        padding: 16px 24px;\n        color: #666666;\n        font-size: 14px;\n      }\n    }\n    tr:nth-child(even) {\n      background: #FAFAFA;\n      border-bottom: 1px solid #f1f1f1;\n      border-top: 1px solid #f1f1f1;\n    }\n  }\n"], ["\n  border-collapse: collapse;\n  width: 100%;\n  thead {\n    tr {\n      border-bottom: 1px solid #E0E0E0;\n      th {\n        padding: 12px 24px;\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        padding: 16px 24px;\n        color: #666666;\n        font-size: 14px;\n      }\n    }\n    tr:nth-child(even) {\n      background: #FAFAFA;\n      border-bottom: 1px solid #f1f1f1;\n      border-top: 1px solid #f1f1f1;\n    }\n  }\n"])));
export var TextColumn = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #666666;\n  font-size: 14px;\n"], ["\n  color: #666666;\n  font-size: 14px;\n"])));
export var ColumnContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  gap: 2px;\n  align-items: center;\n  display: flex;\n"], ["\n  gap: 2px;\n  align-items: center;\n  display: flex;\n"])));
export var IconFilterDialog = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n"], ["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n"])));
export var backgroundDialog = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  height: 100vh;\n  background: transparent;\n  top: 0;\n  left: 0;\n"], ["\n  width: 100%;\n  position: absolute;\n  height: 100vh;\n  background: transparent;\n  top: 0;\n  left: 0;\n"])));
export var FilterDialog = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 8px;\n  margin: 6px 0px 0 0;\n  position: absolute;\n  width: 302px;\n  background: #fff;\n  box-shadow: 0px 3px 6px #00000029;\n  border: 1px solid #E0E0E0;\n"], ["\n  padding: 8px;\n  margin: 6px 0px 0 0;\n  position: absolute;\n  width: 302px;\n  background: #fff;\n  box-shadow: 0px 3px 6px #00000029;\n  border: 1px solid #E0E0E0;\n"])));
export var ListFilterDialog = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  .label {\n    margin: 0 0 8px 0;\n    color: #666666;\n    font-size: 14px;\n    font-weight: 400;\n    text-align: left;\n  }\n  .select {\n    border: 1px solid #E0E0E0;\n    padding: 8px 12px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  .label {\n    margin: 0 0 8px 0;\n    color: #666666;\n    font-size: 14px;\n    font-weight: 400;\n    text-align: left;\n  }\n  .select {\n    border: 1px solid #E0E0E0;\n    padding: 8px 12px;\n  }\n"])));
export var OptionFilterDialog = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  padding: 6px 8px;\n  cursor: pointer;\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  .icon {\n    color: #666;\n  }\n  .rotate {\n    rotate: 180deg;\n  }\n  div {\n    width: 20px;\n    height: 20px;\n  }\n  p {\n    margin: 0;\n    color: #666666;\n    font-size: 16px;\n    font-weight: 400;\n  }\n"], ["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  padding: 6px 8px;\n  cursor: pointer;\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  .icon {\n    color: #666;\n  }\n  .rotate {\n    rotate: 180deg;\n  }\n  div {\n    width: 20px;\n    height: 20px;\n  }\n  p {\n    margin: 0;\n    color: #666666;\n    font-size: 16px;\n    font-weight: 400;\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
//# sourceMappingURL=styles.js.map