diff --git a/src/components/Sidebar/SidebarMenu/index.js b/src/components/Sidebar/SidebarMenu/index.js index 0cee485..d7d8c35 100644 --- a/src/components/Sidebar/SidebarMenu/index.js +++ b/src/components/Sidebar/SidebarMenu/index.js @@ -1,3 +1,5 @@ +// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu + import React from "react"; import "./index.scss"; diff --git a/src/components/Sidebar/SidebarMenu/index.scss b/src/components/Sidebar/SidebarMenu/index.scss index f0bf785..e69de29 100644 --- a/src/components/Sidebar/SidebarMenu/index.scss +++ b/src/components/Sidebar/SidebarMenu/index.scss @@ -1,9 +0,0 @@ -.no-scrollbar::-webkit-scrollbar { - display: none; -} - -/* Hide scrollbar for IE, Edge and Firefox */ -.no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js index 22f53af..3b0db97 100644 --- a/src/components/Switch/index.js +++ b/src/components/Switch/index.js @@ -1,3 +1,5 @@ +// it has style inside index.scss ---> // Start Switch && end Switch + import React from "react"; import "./index.scss"; diff --git a/src/components/Switch/index.scss b/src/components/Switch/index.scss index d84c858..e69de29 100644 --- a/src/components/Switch/index.scss +++ b/src/components/Switch/index.scss @@ -1,9 +0,0 @@ -input:checked ~ .dot { - transform: translateX(100%); - background-color: #65a9ff; -} - -input:checked ~ .dot { - transform: translateX(100%); - background-color: #65a9ff; -} diff --git a/src/components/TimeLineComponent/index.js b/src/components/TimeLineComponent/index.js index b017858..2269c0a 100644 --- a/src/components/TimeLineComponent/index.js +++ b/src/components/TimeLineComponent/index.js @@ -1,4 +1,7 @@ +// it has style inside index.scss ---> // Start TimeLineComponent && end TimeLineComponent + import React from "react"; + import SearchBox from "../SearchBox"; import TitleSubtitle from "../TitleSubtitle"; diff --git a/src/components/TimeLineComponent/index.scss b/src/components/TimeLineComponent/index.scss index 9ed932d..e69de29 100644 --- a/src/components/TimeLineComponent/index.scss +++ b/src/components/TimeLineComponent/index.scss @@ -1,85 +0,0 @@ -#root { - width: 100%; -} - -.timeline-container::after { - background-color: #06bace; - content: ""; - position: absolute; - right: calc(50% - 2px); - width: 4px; - height: 100%; - border-radius: 10px; -} - -.timeline-item:nth-child(odd) { - align-self: flex-start; - justify-content: flex-end; - padding-right: 0px; - padding-left: 30px; -} - -.timeline-item-content::after { - content: ""; - background-color: #fff; - box-shadow: 1px -1px 1px #d6d6d6; - width: 15px; - height: 15px; - position: absolute; - transform: rotate(45deg); - right: -7.5px; - top: calc(50% - 5px); -} - -.timeline-item:nth-child(odd) .timeline-item-content { - align-items: flex-start; - text-align: left; -} - -.timeline-item:nth-child(odd) .timeline-item-content::after { - box-shadow: -1px 1px 1px #d6d6d6; - right: auto; - left: -7.5px; -} - -.timeline-item-content .circle { - background-color: #06bace; - border: solid 4px #fff; - border-radius: 50%; - width: 20px; - height: 20px; - position: absolute; - top: calc(50% - 10px); - right: -41px; - z-index: 100; -} - -.timeline-item:nth-child(odd) .timeline-item-content .circle { - right: auto; - left: -41px; -} - -@media only screen and (max-width: 767px) { - .timeline-item-content, - .timeline-item:nth-child(odd) .timeline-item-content { - padding: 15px 10px; - text-align: center !important; - align-items: center !important; - } - - .timeline-item-content .tag { - width: calc(100% - 10px); - } - - .timeline-item-content time { - margin-top: 20px; - } - - .timeline-item-content a { - text-decoration: underline; - } - - .timeline-item-content a::after { - display: none; - } -} diff --git a/src/components/Toast/index.js b/src/components/Toast/index.js index fec01c6..2029408 100644 --- a/src/components/Toast/index.js +++ b/src/components/Toast/index.js @@ -1,3 +1,5 @@ +// it has style inside index.scss ---> // Start Toast && end Toast + import React from "react"; import "./index.scss"; diff --git a/src/components/Toast/index.scss b/src/components/Toast/index.scss index fffc7ad..e69de29 100644 --- a/src/components/Toast/index.scss +++ b/src/components/Toast/index.scss @@ -1,75 +0,0 @@ -$red: #e92424; -$errorToastBgColor: #ffeaea; - -$lightGreen: #3ee924; -$successToastBgColor: #f2ffea; - -$white: #fff; - -.swal2-popup.swal2-toast .swal2-title { - font-size: 14px !important; -} - -.swal2-popup.swal2-toast .swal2-close { - margin-left: 0px !important; - margin-top: 0px !important; -} - -.swal2-timer-progress-bar-container { - direction: ltr !important; -} - -// .swal2-timer-progress-bar { -// background-color: yellow !important; -// } - -.swal2-icon { - font-size: 13px !important; -} - -// ! error Tost -.error-toast-title { - color: $red !important; -} - -.error-toast-modalBox, -.error-toast-modalBox-timer { - background-color: $errorToastBgColor !important; -} - -.error-toast-closeButton { - background-color: $red !important; - color: $white !important; - padding: 15px !important; -} - -.success-toast-title { - color: $lightGreen !important; -} - -.success-toast-modalBox, -.success-toast-modalBox-timer { - background-color: $successToastBgColor !important; -} - -.success-toast-closeButton { - background-color: $lightGreen !important; - color: $white !important; - padding: 15px !important; -} - -.error-toast-modalBox-timer .swal2-timer-progress-bar-container { - background-color: #e9242455 !important; -} - -.error-toast-modalBox-timer .swal2-timer-progress-bar { - background-color: $red !important; -} - -.success-toast-modalBox-timer .swal2-timer-progress-bar-container { - background-color: #3ee92455 !important; -} - -.success-toast-modalBox-timer .swal2-timer-progress-bar { - background-color: $lightGreen !important; -} diff --git a/src/components/starRating/StarRating.js b/src/components/starRating/StarRating.js index 9e69752..0e47d0e 100644 --- a/src/components/starRating/StarRating.js +++ b/src/components/starRating/StarRating.js @@ -1,3 +1,5 @@ +// it has style inside index.scss ---> // Start StarRating && end StarRating + import React, { useState } from "react"; import "./StarRating.scss"; diff --git a/src/components/starRating/StarRating.scss b/src/components/starRating/StarRating.scss index 7b92e02..e69de29 100644 --- a/src/components/starRating/StarRating.scss +++ b/src/components/starRating/StarRating.scss @@ -1,6 +0,0 @@ -.on { - color: #ffbd35; -} -.off { - color: #ccc; -} diff --git a/src/components/vodProductDesign/VodProductDesign.js b/src/components/vodProductDesign/VodProductDesign.js index b675105..9294fd1 100644 --- a/src/components/vodProductDesign/VodProductDesign.js +++ b/src/components/vodProductDesign/VodProductDesign.js @@ -1,3 +1,5 @@ +// it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign + import React, { useEffect, useState } from "react"; import StarRating from "../starRating/StarRating"; diff --git a/src/components/vodProductDesign/VodProductDesign.scss b/src/components/vodProductDesign/VodProductDesign.scss index 42bbd11..e69de29 100644 --- a/src/components/vodProductDesign/VodProductDesign.scss +++ b/src/components/vodProductDesign/VodProductDesign.scss @@ -1,3 +0,0 @@ -.playBtnImg { - transition: all 0.4s; -} diff --git a/src/index.scss b/src/index.scss index a4b2298..48c4a2e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -801,6 +801,224 @@ l.leaflet-popup-content, // * end PopupCard Sidebar/SidebarDesign2 +// TODO Start Sidebar/SidebarMenu Component + +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +// * end PopupCard Sidebar/SidebarMenu + +// TODO Start StarRating Component + +.on { + color: #ffbd35; +} + +.off { + color: #ccc; +} + +// * end PopupCard StarRating + +// TODO Start Switch Component + +input:checked ~ .dot { + transform: translateX(100%); + background-color: #65a9ff; +} + +input:checked ~ .dot { + transform: translateX(100%); + background-color: #65a9ff; +} + +// * end PopupCard Switch + +// TODO Start TimeLineComponent Component + +#root { + width: 100%; +} + +.timeline-container::after { + background-color: #06bace; + content: ""; + position: absolute; + right: calc(50% - 2px); + width: 4px; + height: 100%; + border-radius: 10px; +} + +.timeline-item:nth-child(odd) { + align-self: flex-start; + justify-content: flex-end; + padding-right: 0px; + padding-left: 30px; +} + +.timeline-item-content::after { + content: ""; + background-color: #fff; + box-shadow: 1px -1px 1px #d6d6d6; + width: 15px; + height: 15px; + position: absolute; + transform: rotate(45deg); + right: -7.5px; + top: calc(50% - 5px); +} + +.timeline-item:nth-child(odd) .timeline-item-content { + align-items: flex-start; + text-align: left; +} + +.timeline-item:nth-child(odd) .timeline-item-content::after { + box-shadow: -1px 1px 1px #d6d6d6; + right: auto; + left: -7.5px; +} + +.timeline-item-content .circle { + background-color: #06bace; + border: solid 4px #fff; + border-radius: 50%; + width: 20px; + height: 20px; + position: absolute; + top: calc(50% - 10px); + right: -41px; + z-index: 100; +} + +.timeline-item:nth-child(odd) .timeline-item-content .circle { + right: auto; + left: -41px; +} + +@media only screen and (max-width: 767px) { + .timeline-item-content, + .timeline-item:nth-child(odd) .timeline-item-content { + padding: 15px 10px; + text-align: center !important; + align-items: center !important; + } + + .timeline-item-content .tag { + width: calc(100% - 10px); + } + + .timeline-item-content time { + margin-top: 20px; + } + + .timeline-item-content a { + text-decoration: underline; + } + + .timeline-item-content a::after { + display: none; + } +} + +// * end PopupCard TimeLineComponent + +// TODO Start Toast Component + +$red: #e92424; +$errorToastBgColor: #ffeaea; + +$lightGreen: #3ee924; +$successToastBgColor: #f2ffea; + +$white: #fff; + +.swal2-popup.swal2-toast .swal2-title { + font-size: 14px !important; +} + +.swal2-popup.swal2-toast .swal2-close { + margin-left: 0px !important; + margin-top: 0px !important; +} + +.swal2-timer-progress-bar-container { + direction: ltr !important; +} + +// .swal2-timer-progress-bar { +// background-color: yellow !important; +// } + +.swal2-icon { + font-size: 13px !important; +} + +// ! error Tost +.error-toast-title { + color: $red !important; +} + +.error-toast-modalBox, +.error-toast-modalBox-timer { + background-color: $errorToastBgColor !important; +} + +.error-toast-closeButton { + background-color: $red !important; + color: $white !important; + padding: 15px !important; +} + +.success-toast-title { + color: $lightGreen !important; +} + +.success-toast-modalBox, +.success-toast-modalBox-timer { + background-color: $successToastBgColor !important; +} + +.success-toast-closeButton { + background-color: $lightGreen !important; + color: $white !important; + padding: 15px !important; +} + +.error-toast-modalBox-timer .swal2-timer-progress-bar-container { + background-color: #e9242455 !important; +} + +.error-toast-modalBox-timer .swal2-timer-progress-bar { + background-color: $red !important; +} + +.success-toast-modalBox-timer .swal2-timer-progress-bar-container { + background-color: #3ee92455 !important; +} + +.success-toast-modalBox-timer .swal2-timer-progress-bar { + background-color: $lightGreen !important; +} + +// * end Toast Component + +// TODO Start vodProductDesign Component + +.playBtnImg { + transition: all 0.4s; +} + +// * end vodProductDesign Component + // ? class for selectbox inside -->> CustomSelectBox <<-- .customizeSelect { background-position: left 0.5rem center;