forstok-ui-lib 5.12.0 → 5.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/button/styles.ts +12 -0
- package/src/typeds/shares.typed.ts +1 -1
package/dist/index.mjs
CHANGED
|
@@ -238,7 +238,7 @@ import*as e from"react";import t,{useState as n,useEffect as r,forwardRef as i,u
|
|
|
238
238
|
padding-right: 30px !important;
|
|
239
239
|
|
|
240
240
|
}
|
|
241
|
-
${({$mode:e,$isIndicatorArrow:t,$isShown:n,$isLoading:r,$activated:i,$size:a,disabled:o,$iconLeft:s,$shadow:l})=>{let c="";return n?(l&&(c+="\n box-shadow: var(--act-shd-bx);\n "),a&&("xsmall"===a?c+="\n font-size: 12px;\n height: 20px;\n padding: 0 8px;\n ":"small"===a?c+="\n font-size: 13px;\n height: 28px;\n min-width: 75px;\n ":"medium"===a&&(c+="\n height: 32px;\n ")),"red"===e?c+=`\n color: var(--act-clr);\n background-color: var(--act-clr-bg);\n &:hover {\n background-color: var(--act-clr-bg__hvr);\n }\n & ${at} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"white"===e?c+="\n color: var(--mt-clr);\n background-color: var(--cl-clr-bg);\n border: 1px solid var(--sec-clr-ln);\n &:hover { \n background-color: var(--cl-clr-bg__hvr);\n } \n ":"blue"===e?c+=`\n &, &:hover {\n background-color: var(--ck-clr-bg__act);\n color: var(--act-clr);\n }\n & ${at} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"nude"===e?c+="\n &, &:hover { \n background-color: var(--ter-clr-bg); \n } \n ":"clearL"===e?c+="\n width: auto;\n height: auto;\n color: var(--pri-clr-lnk__hvr);\n text-decoration: none;\n padding: 0;\n margin: 0;\n &, &:hover { \n background-color: transparent; \n }\n &:hover {\n opacity: .9;\n }\n ":"clearB"===e?c+=`\n background-color: var(--cl-clr-bg);\n color: var(--pri-clr-lnk__hvr);\n svg {\n fill: var(--pri-clr-lnk__hvr);\n stroke: var(--pri-clr-lnk__hvr);\n }\n & ${at} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n &:disabled {\n span {color: var(--mt-clr);}\n }\n `:"clear"===e?(c+="\n box-shadow: none !important;\n &, &:hover { \n background-color: transparent; \n }\n ",i&&(c+="\n color: var(--pri-clr) !important;\n font-weight: 600;\n ")):"more"===e?c+=`\n padding: 8px;\n background-color: var(--mt-clr-bg__fc);\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/dotted.svg');\n height: 14px;\n width: 14px;\n ${rt}\n }\n `:"round-close"===e?c+=`\n background-color: transparent;\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg');\n width: 12px;\n ${rt}\n } \n `:"small-white-round-close"===e?c+=`\n background-color: transparent;\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close-white.svg');\n width: 8px;\n ${rt}\n } \n `:"page-option"===e&&(c+=`\n border: 1px solid var(--ck-clr-ln);\n background-color: transparent;\n font-weight: 600;\n cursor: pointer;\n border-radius: var(--ter-rd);\n padding: 6px 12px;\n height: 28px;\n & ${at} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n `),o&&(c+="\n &, &:hover {\n background-color: var(--mt-clr-bg__fc) !important;\n cursor: default;\n color: var(--mt-clr);\n }\n "),s&&(c+=" padding-left: 35px; ","export"===s?c+=`\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-download.svg'); \n position: absolute;\n left: 12px;\n top: 7px;\n width: 14px;\n ${rt}\n }\n `:"import"===s?c+=`\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-white-upload.svg'); \n position: absolute;\n left: 50%;\n top: 8px;\n width: 1rem;\n margin-left: -8px;\n ${rt}\n }\n `:"filter"===s?c+="\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/filter.svg'); \n position: absolute;\n left: 12px;\n top: 50%;\n margin-top: -8px;\n width: 14px;\n height: 16px;\n }\n ":"calendar"===s?c+="\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); \n position: absolute;\n left: 12px;\n top: 50%;\n margin-top: -8px;\n width: 14px;\n height: 16px;\n }\n ":"add"===s&&(c+="\n &:before { \n content: '+'; \n color: #118EC5;\n position: absolute;\n left: 12px;\n top: 7px;\n width: 14px;\n height: 16px;\n font-size: 16px;\n }\n ")),t&&(c+=" \n padding-right: 25px; \n "),r&&(c+=" \n padding-right: 30px !important; \n "),c):"display:none;"}}
|
|
241
|
+
${({$mode:e,$isIndicatorArrow:t,$isShown:n,$isLoading:r,$activated:i,$size:a,disabled:o,$iconLeft:s,$shadow:l})=>{let c="";return n?(l&&(c+="\n box-shadow: var(--act-shd-bx);\n "),a&&("xsmall"===a?c+="\n font-size: 12px;\n height: 20px;\n padding: 0 8px;\n ":"small"===a?c+="\n font-size: 13px;\n height: 28px;\n min-width: 75px;\n ":"medium"===a&&(c+="\n height: 32px;\n ")),"red"===e?c+=`\n color: var(--act-clr);\n background-color: var(--act-clr-bg);\n &:hover {\n background-color: var(--act-clr-bg__hvr);\n }\n & ${at} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"green"===e?c+=`\n color: var(--act-clr);\n background-color: rgb(33, 186, 69);\n &:hover {\n background-color: #06402B);\n }\n & ${at} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"white"===e?c+="\n color: var(--mt-clr);\n background-color: var(--cl-clr-bg);\n border: 1px solid var(--sec-clr-ln);\n &:hover { \n background-color: var(--cl-clr-bg__hvr);\n } \n ":"blue"===e?c+=`\n &, &:hover {\n background-color: var(--ck-clr-bg__act);\n color: var(--act-clr);\n }\n & ${at} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"nude"===e?c+="\n &, &:hover { \n background-color: var(--ter-clr-bg); \n } \n ":"clearL"===e?c+="\n width: auto;\n height: auto;\n color: var(--pri-clr-lnk__hvr);\n text-decoration: none;\n padding: 0;\n margin: 0;\n &, &:hover { \n background-color: transparent; \n }\n &:hover {\n opacity: .9;\n }\n ":"clearB"===e?c+=`\n background-color: var(--cl-clr-bg);\n color: var(--pri-clr-lnk__hvr);\n svg {\n fill: var(--pri-clr-lnk__hvr);\n stroke: var(--pri-clr-lnk__hvr);\n }\n & ${at} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n &:disabled {\n span {color: var(--mt-clr);}\n }\n `:"clear"===e?(c+="\n box-shadow: none !important;\n &, &:hover { \n background-color: transparent; \n }\n ",i&&(c+="\n color: var(--pri-clr) !important;\n font-weight: 600;\n ")):"more"===e?c+=`\n padding: 8px;\n background-color: var(--mt-clr-bg__fc);\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/dotted.svg');\n height: 14px;\n width: 14px;\n ${rt}\n }\n `:"round-close"===e?c+=`\n background-color: transparent;\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close.svg');\n width: 12px;\n ${rt}\n } \n `:"small-white-round-close"===e?c+=`\n background-color: transparent;\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/close-white.svg');\n width: 8px;\n ${rt}\n } \n `:"page-option"===e&&(c+=`\n border: 1px solid var(--ck-clr-ln);\n background-color: transparent;\n font-weight: 600;\n cursor: pointer;\n border-radius: var(--ter-rd);\n padding: 6px 12px;\n height: 28px;\n & ${at} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n `),o&&(c+="\n &, &:hover {\n background-color: var(--mt-clr-bg__fc) !important;\n cursor: default;\n color: var(--mt-clr);\n }\n "),s&&(c+=" padding-left: 35px; ","export"===s?c+=`\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-download.svg'); \n position: absolute;\n left: 12px;\n top: 7px;\n width: 14px;\n ${rt}\n }\n `:"import"===s?c+=`\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/arrow-white-upload.svg'); \n position: absolute;\n left: 50%;\n top: 8px;\n width: 1rem;\n margin-left: -8px;\n ${rt}\n }\n `:"filter"===s?c+="\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/filter.svg'); \n position: absolute;\n left: 12px;\n top: 50%;\n margin-top: -8px;\n width: 14px;\n height: 16px;\n }\n ":"calendar"===s?c+="\n &:before { \n content: url('https://forstok-staging-storage.s3.ap-southeast-1.amazonaws.com/public/frontend/icons/calendar.svg'); \n position: absolute;\n left: 12px;\n top: 50%;\n margin-top: -8px;\n width: 14px;\n height: 16px;\n }\n ":"add"===s&&(c+="\n &:before { \n content: '+'; \n color: #118EC5;\n position: absolute;\n left: 12px;\n top: 7px;\n width: 14px;\n height: 16px;\n font-size: 16px;\n }\n ")),t&&(c+=" \n padding-right: 25px; \n "),r&&(c+=" \n padding-right: 30px !important; \n "),c):"display:none;"}}
|
|
242
242
|
|
|
243
243
|
`,at=x.svg`
|
|
244
244
|
display: inline-block;
|