@unbxd-ui/unbxd-react-components 0.3.1 → 0.3.2-beta.10

package/components/Table/tableCore.scss

@@ -0,0 +1,547 @@
+.RCB {
+    &-table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    &-th {
+        &.RCB-expand-column {
+            width: 50px;
+        }
+    }
+
+    &-th-sortable {
+        cursor: pointer;
+    }
+
+    &-th-sort {
+        &:after {
+            content: "\2B0D"
+        }
+    }
+
+    &-th-asc {
+        &:after {
+            content: "\25B2";
+        }
+    }
+
+    &-th-dsc {
+        &:after {
+            content: "\25BC";
+        }
+    }
+
+    &-tr {
+
+        .expand-open {
+            &:before {
+                content: "▼"
+            }
+        }
+
+        .expand-close {
+            &:before {
+                content: "▶"
+            }
+        }
+    }
+
+    &-paginate-wrapper {
+        .RCB-per-page-count {
+            display: inline-block;
+        }
+
+        .RCB-form-el-cont {
+            margin: 0;
+        }
+
+        .RCB-inline-modal-btn {
+            background: transparent;
+            padding: 0;
+        }
+    }
+
+    &-paginate-nav {
+        display: inline-block;
+        border-radius: 12px;
+        border: solid 1px #8399ae;
+        background-color: #f6f7f9;
+        vertical-align: middle;
+        margin-left: 15px;
+        overflow: hidden;
+    }
+
+    &-page-nav {
+        padding: 0 5px;
+        text-decoration: none;
+        color: inherit;
+
+        &:first-child {
+            border-right: solid 1px #8399ae;
+        }
+
+        &.disabled {
+            color: #ccc;
+            pointer-events: none;
+            cursor: not-allowed;
+        }
+    }
+
+    &-no-data {
+        text-align: center;
+    }
+}
+
+.nutana-table {
+    font-family: Nunito Sans, Helvetica Neue, Helvetica, Roboto, "sans-serif";
+    letter-spacing: 0.42px;
+    max-height: unset !important;
+    min-height: unset !important;
+    overflow: inherit !important;
+    z-index: 20;
+
+    .rdt_TableRow {
+        border-bottom-color: #DDE2EE !important;
+
+        &:hover {
+            background-color: #F4F8FF;
+
+            .readable {
+                color: #3E71F2;
+                cursor: pointer;
+            }
+
+            .view-one {
+                background-color: #F4F8FF;
+
+                .no-metric-wrap {
+                    background-color: #F4F8FF !important;
+                }
+            }
+
+            .rdt_TableCell:first-child,
+            [aria-label="Expand Row"] {
+                box-shadow: inset 3px 0px 0px 0px #3E71F2;
+            }
+        }
+
+        .rdt_TableCell {
+            padding: 0;
+            border-right: unset;
+
+            &:first-child {
+                border-left: 1px solid #DDE2EE;
+            }
+
+            &:last-child {
+                border-right: 1px solid #DDE2EE;
+            }
+        }
+    }
+
+    &.first-clm-sticky {
+        overflow-x: auto !important;
+        overflow-y: hidden;
+
+        .rdt_TableRow {
+            .rdt_TableCell {
+                &:first-child {
+                    background: white;
+                    border-right: 1px solid #dde2ee;
+                    box-shadow: 5px 10px 15px 0px #17173A14;
+                    position: sticky;
+                    left: 0;
+                    z-index: 9;
+                }
+            }
+
+            &:hover {
+                .rdt_TableCell:first-child {
+                    background-color: #F4F8FF;
+                }
+            }
+        }
+
+        .rdt_TableHeadRow .rdt_TableCol:first-child {
+            background: white;
+            border-right: 1px solid #dde2ee;
+            position: sticky;
+            left: 0;
+            z-index: 9;
+        }
+    }
+
+    &.last-clm-sticky {
+        overflow-x: auto !important;
+        overflow-y: hidden;
+
+        .rdt_TableRow {
+            .rdt_TableCell {
+                &:last-child {
+                    background: white;
+                    border-left: 1px solid #dde2ee;
+                    box-shadow: -5px 10px 15px 0px #17173A14;
+                    position: sticky;
+                    left: unset;
+                    right: 0;
+                    z-index: 9;
+                }
+            }
+
+            &:hover {
+                .rdt_TableCell:last-child {
+                    background-color: #F4F8FF;
+                }
+            }
+        }
+
+        .rdt_TableHeadRow .rdt_TableCol:last-child {
+            background: white;
+            border-left: 1px solid #dde2ee;
+            position: sticky;
+            left: unset;
+            right: 0;
+            z-index: 9;
+        }
+    }
+
+    .tbl-content {
+        padding: 18px 24px;
+        width: 100%;
+    }
+
+    .header-title {
+        color: #17173A;
+        display: inline;
+        font-weight: 600;
+        font-size: 16px;
+        text-transform: capitalize;
+    }
+
+    .tbl-title-1 {
+        color: #17173A;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-title-2 {
+        color: #17173A;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .tbl-title-3 {
+        color: #17173A;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .tbl-desc-1 {
+        color: #6F6F8D;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-desc-2 {
+        color: #6F6F8D;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-desc-3 {
+        color: #6F6F8D;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .42px;
+    }
+
+    .rdt_TableHeadRow {
+        box-shadow: 0px 5px 15px 0px #17173A14;
+        border-color: #DDE2EE;
+        z-index: 10;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol:first-child {
+        border-right: unset;
+        border-left: 1px solid #dde2ee;
+        border-top: 1px solid #dde2ee;
+        border-top-left-radius: 8px;
+        margin: 0;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol {
+        border-right: unset;
+        border-color: #DDE2EE;
+        padding: 16px 24px;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol:last-child {
+        border-right: 1px solid #DDE2EE;
+        border-top-right-radius: 8px;
+    }
+
+    .rdt_TableCol_Sortable {
+        [data-column-id] {
+            color: #17173a;
+            display: inline;
+            font-size: 16px;
+            font-weight: 600;
+            text-transform: capitalize;
+        }
+
+        .status-col-tooltip {
+            vertical-align: middle;
+
+            .RCB-tooltip-btn {
+                margin-left: 5px;
+                border: unset;
+            }
+        }
+    }
+
+    .column-kebab-menu {
+        .RCB-inline-modal-btn {
+            padding: 0;
+        }
+
+        .RCB-inline-modal-body {
+            border-radius: 4px;
+            width: max-content;
+        }
+    }
+
+    .left-line {
+        border-left: 1px solid #dde2ee;
+        height: 20px;
+        padding-left: 12px;
+    }
+
+    .dd-menu-item {
+        align-items: center;
+        cursor: pointer;
+        color: #6F6F8D;
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        padding: 12px 16px;
+
+        &:hover {
+            box-shadow: inset 3px 0 0 0 #3E71F2;
+            background-color: #F4F8FF;
+            color: #17173A;
+
+            .tbl-plus-icon {
+                background-position: -1988px -2777px;
+            }
+
+            .tbl-file-icon {
+                background-position: -2031px -2777px;
+            }
+        }
+
+        .menu-icon {
+            margin-right: 8px;
+        }
+
+        &.no-more-queries-disabled {
+            color: #bfc8ce;
+            text-decoration: none;
+            cursor: no-drop;
+        }
+    }
+
+    .status-btn {
+        border: 1px solid;
+        border-radius: 37px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .42px;
+        padding: 3px 8px;
+
+        &__active {
+            background-color: #e9f8f3;
+            ;
+            border-color: #90DCC1;
+            color: #00C48C;
+
+        }
+
+        &__draft {
+            background-color: #e1e8fa;
+            border-color: #8BACFF;
+            color: #0A8FFD;
+        }
+
+        &__upcoming {
+            background-color: #fff5de;
+            border-color: #FEE199;
+            color: #C39C5B;
+        }
+
+        &__expired {
+            background: #FFE6E6;
+            border-color: #FF8484;
+            color: #F05C5C;
+        }
+
+        &__stopped {
+            background: #EFEFEF;
+            border-color: #A0A0A0;
+            color: #6F6F8D;
+        }
+    }
+
+    .status-btns {
+        margin-bottom: 0;
+    }
+
+    .merch-rule-type {
+        border: 1px solid #dae1e9;
+        border-radius: 12px;
+        background-color: #ffffff;
+        color: #687f8f;
+        font-size: 10px;
+        padding: 4px 9px;
+    }
+
+    .campaign-type-icon span:first-of-type {
+        &:before {
+            content: "";
+            margin-right: 2px;
+
+        }
+    }
+
+    .vertical-menu-icon {
+        background-position: -1946px -2744px;
+        height: 18px;
+        transform: scale(1.3);
+        width: 18px;
+
+        &:hover {
+            background-position: -1946px -2778px;
+        }
+    }
+
+    .right-triangle-icon {
+        background-position: -1857px -2745px;
+        height: 20px;
+        transform: scale(1);
+        width: 20px;
+    }
+
+    .delete-text {
+        color: #F05C5C;
+    }
+
+    .loading-anim-wrap {
+        padding: 18px 24px;
+        width: 100%;
+    }
+
+    .global {
+        align-items: center;
+        color: #3E71F2;
+        text-transform: capitalize;
+
+        .glob-icon {
+            margin-right: 3px;
+            margin-left: -2px;
+        }
+    }
+
+    .meta-info-bg {
+        background-color: #F4F8FF;
+        border-radius: 6px;
+        padding: 16px;
+        width: fit-content;
+    }
+
+    .mb-5 {
+        margin-bottom: 5px;
+    }
+
+    .mb-0 {
+        margin-bottom: 0;
+    }
+
+    .mb-3 {
+        margin-bottom: 3px;
+    }
+
+    .mt-2 {
+        margin-top: 2px;
+    }
+
+    .pl-3 {
+        padding-left: 3px;
+    }
+
+    .pl-10 {
+        padding-left: 10px;
+    }
+}
+
+.RCB-table {
+    font-size: 14px;
+
+    thead {
+        border: 1px solid #DADFE6;
+    }
+
+    th {
+        color: #FFF;
+        background-color: #5C7185;
+        padding: 10px 8px;
+        text-align: left;
+    }
+
+    .RCB-tr {
+        height: 41px;
+    }
+
+    td {
+        padding: 6px;
+        background-color: #FFF;
+        border-bottom: 1px solid #E8EDEF;
+    }
+
+    .RCB-form-el-cont {
+        margin: 0;
+    }
+}
+
+.RCB-th-sortable:after {
+    content: " ";
+    margin-left: 7px;
+}
+
+.RCB-paginate-bar {
+    color: #445870;
+    font-size: 14px;
+    padding: 7px 18px;
+    border: 1px solid #DADFE6;
+    border-radius: 7px 7px 0 0;
+    background-color: #eef2fc;
+
+    .RCB-dropdown {
+        .RCB-inline-modal {
+            border: none;
+        }
+    }
+
+    .RCB-inline-modal-btn {
+        background: transparent;
+        padding: 0;
+    }
+}
+
+.rdt_Pagination {
+    border-color: #DDE2EE !important;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}

package/components/Table/tableTheme.scss

@@ -0,0 +1,34 @@
+.RCB {
+    &-table {
+        td {
+            padding: 10px;
+        }
+    }
+
+    &-th {
+        background-color: #2287b4;
+        color: #FFF;
+        font-weight: normal;
+        padding: 10px;
+    }
+
+    &-even-tr {
+        background-color: #FFF;
+    }
+
+    &-odd-tr {
+        background-color: #dcf1fa;
+    }
+
+    &-expanded-row {
+        background-color: #ecf2f4;
+    }
+
+    &-paginate-bar {
+        background-color: #a3c9db;
+        text-align: right;
+        font-size: 14px;
+        padding: 5px;
+        border-radius: 5px 5px 0 0;
+    }
+}

package/components/TabsComponent/tabs.css

@@ -0,0 +1 @@
+.RCB-tab-title{list-style-type:none;display:inline-block;padding:10px;cursor:pointer}.RCB-tab-title.selected{background:#FFF;font-weight:bold;border:1px solid #cacaca;border-bottom:0;position:relative;z-index:1;bottom:-1px}.RCB-tab-content{list-style-type:none;border:1px solid #cacaca;padding:10px}.RCB-tab-content.selected{display:block}

package/components/TabsComponent/tabsCore.scss

@@ -0,0 +1,59 @@
+.RCB {
+    &-tabs-container {
+        display: flex;
+    }
+
+    &-tab-title {
+        list-style-type: none;
+        padding: 10px;
+        cursor: pointer;
+
+        &.selected {
+            background: #FFF;
+            font-weight: bold;
+            border: 1px solid #cacaca;
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &-tabs-horizontal {
+        flex-direction: column;
+        
+        .RCB-tab-title {
+            display: inline-block;
+
+            &.selected {
+                border-bottom: 0;
+                bottom: -1px;
+            }
+        }
+    }
+
+    &-tabs-vertical {
+        .RCB-tab-title {
+            display: block;
+
+            &.selected {
+                border-right: 0;
+                right: -1px;
+            }
+        }
+    }
+
+    &-tab-content {
+        list-style-type: none;
+        border: 1px solid #cacaca;
+        padding: 10px;
+
+        &.selected {
+            display: block;
+        }
+    }
+
+    &-tab-disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        color: #ccc;
+    }
+}