tabexseriescomponents 0.0.64 → 0.0.66

package/src1-10/styles/general/dropdown.css

@@ -0,0 +1,199 @@
+/* Dropdown */
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+    position: relative;
+}
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 9rem;
+    max-width: 9rem;
+    padding: 0.2rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 0.88rem;
+    color: #022648;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 2px solid #e6e6e6;
+    border-radius: 0.25rem;
+}
+.resposiveheader_languagedropdown .dropdown-menu{
+    left: -100px !important;
+}
+.headerdropdownml .dropdown-menu{
+    left: -120px !important;
+}
+.headerdropdownmr .dropdown-menu{
+    right: -120px !important;
+}
+@media screen and (max-width:500px) {
+    .drodownright .dropdown-menu{
+        left: -100px !important;
+        /* min-width: 9.5rem !important;
+        max-width: 9.5rem !important; */
+    }
+    .drodownrighttrans{
+        right: -100px !important;
+
+    }
+    
+}
+.notifications-dropdown-container .dropdown-menu {
+    min-width: 20rem;
+    max-width: 25rem;
+}
+.dropdown-menu.show {
+    animation: fade-in 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+@keyframes fade-in {
+    0% {
+        margin-top: -50px;
+        visibility: hidden;
+        opacity: 0;
+    }
+    100% {
+        margin-top: 0px;
+        visibility: visible;
+        opacity: 1;
+    }
+}
+.dropdown-menu-right {
+    right: 0;
+    left: auto;
+}
+.dropdown-menu-left {
+    right: auto;
+    left: 0;
+}
+.dropdown-menu[x-placement^='top'],
+.dropdown-menu[x-placement^='right'],
+.dropdown-menu[x-placement^='bottom'],
+.dropdown-menu[x-placement^='left'] {
+    right: auto;
+    bottom: auto;
+}
+.dropdown-divider {
+    height: 0;
+    margin: 0.2rem 0;
+    overflow: hidden;
+    border-top: 1px solid #e9ecef;
+}
+.dropdown-item {
+    display: block;
+    padding: 0.3rem 0.8rem;
+    font-weight: 500;
+    color: #000;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    font-size: 13px;
+    transition: 0.3s;
+    width: 100%;
+    display: flex;
+    justify-content: start;
+}
+.dropdown-item:hover,
+.dropdown-item:focus {
+    text-decoration: none;
+}
+.dropdown-item.active,
+.dropdown-item:active {
+    color: #fff;
+    text-decoration: none;
+}
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+    pointer-events: none;
+    background-color: transparent;
+    cursor: not-allowed;
+}
+.dropdown-menu.show {
+    display: block;
+}
+.dropdown-header {
+    display: block;
+    padding: 0 1.5rem, 5rem 1.5rem;
+    margin-bottom: 0;
+    font-size: 0.968rem;
+    color: #022648;
+    white-space: nowrap;
+    border-bottom: 1px solid #eee;
+    text-align: center;
+    text-transform: capitalize;
+}
+.dropdown-item-text {
+    display: block;
+    padding: 0.4rem 1.5rem;
+    color: #212529;
+}
+.btn-primary.dropdown-toggle {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border-color: transparent;
+}
+.show > .btn-primary.dropdown-toggle {
+    border-color: transparent;
+    background-color: transparent;
+}
+.show > .btn-primary.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0 transparent;
+    background-color: transparent;
+    /* border-color: transparent; */
+}
+.btn.dropdown-toggle:not(:disabled):not(.disabled):active,
+.btn.dropdown-toggle:not(:disabled):not(.disabled).active {
+    background-color: transparent;
+    border-color: transparent;
+}
+.dropdown-container-translated .dropdown-item {
+    text-align: right;
+}
+@media (max-width: 991.98px) {
+    .dropdown-menu::before,
+    .dropdown-menu::after {
+        display: none;
+    }
+}
+@media (max-width: 800px) {
+    .dropdown-menu {
+        width: 80%;
+        left: 10%;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .dropdown-menu {
+        min-width: 10rem;
+    }
+}
+.informationdropdown .dropdown-menu{
+    min-width: 30rem !important;
+    padding: 15px 40px !important;
+}
+.informationdropdown_en .dropdown-menu{
+    left: -400px !important
+}
+.informationdropdown_ar .dropdown-menu{
+    right: -400px !important
+}
+.informationdropdown .dropdown-item {
+    padding: 15px 5px !important;
+    display: flex;
+    justify-content: start;
+}
+.informationdropdown .dropdown-header {
+    padding:  10px 0 !important;
+    border-bottom: 0px solid #eee !important;
+    text-align: start !important;
+    text-transform: capitalize;
+}

package/src1-10/styles/general/editorbardropdown.module.css

@@ -0,0 +1,94 @@
+.horizontalscrollcont {
+    white-space: nowrap !important;
+    position: relative !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    -webkit-overflow-scrolling: touch !important;
+    background-color: white;
+    width: 98% !important;
+    border-radius: 20px !important;
+    margin: auto;
+    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
+}
+.horizontalscrollcont:hover {
+    overflow-x: auto !important;
+}
+.editorbarcard {
+    position: relative;
+    flex-direction: column;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border-right: 1px solid #eee;
+    padding: 0.5em 0.8em;
+    transition: all 0.2s;
+    min-width: 150px !important;
+    float: none !important;
+    display: inline-block !important;
+    zoom: 1 !important;
+}
+
+.sub_scrollbar::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+.sub_scrollbar::-webkit-scrollbar-track {
+    /* box-shadow: inset 0 0 5px grey; */
+    border-radius: 10px;
+}
+.sub_scrollbar::-webkit-scrollbar-thumb {
+    background: #4d4d4d;
+    border-radius: 10px;
+}
+.sub_scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+}
+.horizontalscrollcardcont:hover p {
+    color: #eac435;
+    transition: 0.3s;
+}
+
+.editorchild {
+    height: 0 !important;
+
+    display: block !important;
+    transition: all 0.3s !important;
+    -webkit-transition: all 0.3s !important;
+    -o-transition: all 0.3s !important;
+    -moz-transition: all 0.3s !important;
+    transform-origin: top right !important;
+    -webkit-transform: scale(0) !important;
+    -moz-transform: scale(0) !important;
+    -ms-transform: scale(0) !important;
+    -o-transform: scale(0) !important;
+    transform: scale(0) !important;
+}
+.editorchild-opened {
+    -webkit-transform: scale(1) !important;
+    -moz-transform: scale(1) !important;
+    -ms-transform: scale(1) !important;
+    -o-transform: scale(1) !important;
+    transform: scale(1) !important;
+    min-height: 10vh !important;
+}
+.filterdropdown {
+    height: 20vh !important;
+    background-color: #e6e6e6;
+    /* position: absolute; */
+}
+.icon-container {
+    position: absolute;
+    top: -15px;
+    right: 25px;
+    z-index: 1;
+    width: 4vh;
+    height: 4vh;
+    border-radius: 50%;
+    color: white;
+    background-color: var(--danger);
+    transition: 0.3s;
+    cursor: pointer;
+}
+.icon-container:hover {
+    background-color: var(--dangerhover);
+}

package/src1-10/styles/general/filter.module.css

@@ -0,0 +1,108 @@
+.filterside_cont {
+    position: fixed;
+    height: 100vh;
+    width: 20vw;
+    background-color: white;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    transform: translateX(150%);
+    transition: 0.3s;
+}
+.filter_container_opened {
+    transform: translateX(0) !important;
+}
+.close_menu_icon_cont {
+    width: 4.5vh;
+    height: 4.5vh;
+    background-color: #022648;
+    border-radius: 50%;
+    color: white;
+    position: absolute;
+    top: 20px;
+    left: -17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.3s;
+    cursor: pointer;
+}
+.close_menu_icon_cont:hover {
+    background-color: #eac435;
+}
+
+/* .timeline .timelineinnercont {
+    border-left: 1px solid red !important;
+    position: relative;
+    margin-left: 17px;
+}
+.timeline .btn_item {
+    width: 3.5vh;
+    height: 3.5vh;
+    z-index: 1;
+    margin-left: -13px;
+    background-color: #eee;
+}
+.timelineinnercont_active:hover .btn_item {
+    background-color: var(--info);
+    cursor: pointer;
+}
+.timelineinnercont_active .btn_item {
+    background-color: var(--infohover) !important;
+}
+.timelineinnercont_active .btn_item:before {
+    display: inline-block;
+    content: '✓';
+    color: white;
+}
+.timeline_text {
+    color: #022648 !important;
+}
+.timelineinnercont_active .timeline_text {
+    color: var(--infohover) !important;
+    font-weight: 600;
+}
+.timelineinnercont_active:hover .timeline_text {
+    color: var(--info) !important;
+}
+.timeline .border_left_line:last-child {
+    border-left: 1px solid white;
+}
+.timeline_text {
+    cursor: pointer;
+} */
+
+.timeline .border_left_line {
+    border-left: 1px solid #ccc;
+    position: relative;
+    margin-left: 17px;
+}
+.timeline .btn_item {
+    width: 3.5vh;
+    height: 3.5vh;
+    z-index: 1;
+    margin-left: -13px;
+    background-color: #eee;
+}
+.timelineinnercont_active .timeline_text {
+    color: var(--infohover) !important;
+    font-weight: 600;
+}
+.timelineinnercont:not(.timelineinnercont_active):hover .timeline_text {
+    color: var(--info) !important;
+}
+.timelineinnercont_active .btn_item {
+    background-color: var(--infohover) !important;
+}
+.timelineinnercont_active .btn_item:before {
+    display: inline-block;
+    content: '✓';
+    color: white;
+}
+.timelineinnercont:not(.timelineinnercont_active):hover .btn_item {
+    background-color: var(--info) !important;
+    cursor: pointer;
+}
+.timeline .border_left_line:last-child {
+    border-left: 1px solid white;
+}

package/src1-10/styles/general/form.module.css

@@ -0,0 +1,273 @@
+/* Forms */
+.form_control {
+    display: block;
+    width: 100%;
+    height: 25px;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #444054;
+    background-color: white;
+    border-radius: 20px;
+    box-shadow: 0 0 10px #e6e6e6;
+    height: 40px;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 14px;
+    transition: background 0s ease-out;
+    border: 0;
+    padding: 0 10px;
+}
+.form_controlcheckout{
+    display: block;
+    width: 100%;
+    height: 25px;
+    /* font-size: 1rem; */
+    /* font-weight: 500; */
+    /* color: #444054; */
+    /* background-color: #eee; */
+    /* border-radius: 10px; */
+    height: 40px;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 14px;
+    transition: background 0s ease-out;
+    border: 0;
+    padding: 0 10px;
+}
+.textarea{
+    resize: none;
+    /* background-color: #eee; */
+}
+@media screen and (prefers-reduced-motion: reduce) {
+    .form_control {
+        transition: none;
+    }
+}
+.form_control::-ms-expand {
+    background-color: transparent;
+    border: 0;
+}
+.form_control::placeholder {
+    color: #eac435;
+    opacity: 1;
+}
+.form_control:disabled,
+.form_control[readonly] {
+    background-color: #e9ecef;
+    opacity: 1;
+    cursor: not-allowed;
+}
+textarea.form_control {
+    min-height: 100px !important;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.form_control:focus {
+    transition-duration: 0.3s;
+    box-shadow: none;
+    box-shadow: 0 0 10px #ccc;
+}
+.form_control::-moz-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+.form_control:-ms-input-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+.form_control::-webkit-input-placeholder {
+    color: #aaaaaa;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.form_control_border_none {
+    background-image: none;
+}
+.form_control.disabled,
+.form_control:disabled,
+.form_control[disabled] {
+    cursor: not-allowed;
+}
+.input_label_name {
+    font-size: 16px;
+    text-transform: capitalize;
+    color: var(--cardheader);
+    font-weight: 500;
+}
+.input_label_name-bolder {
+    font-weight: 500;
+}
+.input_icon {
+    position: absolute;
+    bottom: 5px;
+    left: 0;
+    color: #d9d9d9;
+}
+/* Radio Buttons */
+.radiobtn_label {
+    display: flex;
+    cursor: pointer;
+    font-weight: 500;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 0;
+}
+.radiobtn_label input {
+    position: absolute;
+    left: -9999px;
+    display: none;
+}
+.radiobtn_label input:checked + span {
+    background-color: #f0f5f5;
+    color: var(--focus);
+    font-weight: 500;
+}
+.radiobtn_label input:checked + span:before {
+    box-shadow: inset 0 0 0 0.3em #eac435;
+}
+.radiobtn_label span {
+    display: flex;
+    align-items: center;
+    text-transform: capitalize;
+    padding: 0.375em 0.75em 0.375em 0.375em;
+    border-radius: 99em;
+    transition: 0.25s ease;
+    font-weight: normal;
+    color: var(--focus);
+}
+.radiobtn_label span:hover {
+    background-color: #e6e6e6;
+}
+.radiobtn_label span:before {
+    display: flex;
+    flex-shrink: 0;
+    content: '';
+    background-color: #fff;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    margin-right: 0.375em;
+    transition: 0.25s ease;
+    box-shadow: inset 0 0 0 0.125em var(--focus);
+}
+.radiobtn_label.text-grey span:before {
+    box-shadow: inset 0 0 0 0.125em grey;
+}
+.radiobtn_label input.disabled {
+    cursor: not-allowed;
+}
+.radiobtn_label_translated span:before {
+    display: flex;
+    flex-shrink: 0;
+    content: '';
+    background-color: #fff;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    margin-left: 0.375em;
+    margin-right: 0;
+    transition: 0.25s ease;
+    box-shadow: inset 0 0 0 0.125em var(--focus);
+}
+.radiobtn_label_translated input.disabled {
+    cursor: not-allowed;
+}
+
+/* Checkbox */
+.checkbox {
+    --border: #022648;
+    --border-hover: #959ed0;
+    --tick: #fff;
+    position: relative;
+    /* color: var(--cardheader); */
+}
+.checkbox_label {
+    font-size: 16px;
+    text-transform: capitalize;
+    font-weight: 500;
+    cursor: pointer;
+}
+.checkbox:hover {
+    /* color: var(--border-hover); */
+}
+.checkbox input,
+.checkbox svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+.checkbox_sub input {
+    width: 15px;
+    height: 15px;
+}
+.checkbox input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    position: relative;
+    outline: none;
+    background: white;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: box-shadow 0.3s;
+    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
+}
+.checkbox input:disabled {
+    cursor: not-allowed;
+}
+.checkbox input:hover {
+    /* --s: 2px; */
+    /* --b: var(--border-hover); */
+}
+.checkbox input:checked {
+    /* --b: var(--secondary); */
+}
+.checkbox svg {
+    pointer-events: none;
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* stroke: var(--stroke, var(--secondary)); */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 21px;
+    transform: scale(var(--scale, 1)) translateZ(0);
+}
+.checkbox_sub svg {
+    pointer-events: none;
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: var(--stroke, var(--secondary));
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 21px;
+    transform: scale(var(--scale, 1)) translateZ(0);
+}
+.checkboxtranslated svg {
+    right: 0;
+}
+.checkbox input:checked {
+    --s: 2px;
+    transition-delay: 0.4s;
+}
+.checkbox input:checked + svg {
+    --a: 16.1 86.12;
+    --o: 102.22;
+}
+.checkbox svg {
+    stroke-dasharray: var(--a, 86.12);
+    stroke-dashoffset: var(--o, 86.12);
+    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
+}