update 13 files

master
mahdi 2 years ago
parent 2b76e533d2
commit b3c1e80dd5
  1. 2
      src/components/Sidebar/SidebarMenu/index.js
  2. 9
      src/components/Sidebar/SidebarMenu/index.scss
  3. 2
      src/components/Switch/index.js
  4. 9
      src/components/Switch/index.scss
  5. 3
      src/components/TimeLineComponent/index.js
  6. 85
      src/components/TimeLineComponent/index.scss
  7. 2
      src/components/Toast/index.js
  8. 75
      src/components/Toast/index.scss
  9. 2
      src/components/starRating/StarRating.js
  10. 6
      src/components/starRating/StarRating.scss
  11. 2
      src/components/vodProductDesign/VodProductDesign.js
  12. 3
      src/components/vodProductDesign/VodProductDesign.scss
  13. 218
      src/index.scss

@ -1,3 +1,5 @@
// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu
import React from "react"; import React from "react";
import "./index.scss"; import "./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 */
}

@ -1,3 +1,5 @@
// it has style inside index.scss ---> // Start Switch && end Switch
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";

@ -1,9 +0,0 @@
input:checked ~ .dot {
transform: translateX(100%);
background-color: #65a9ff;
}
input:checked ~ .dot {
transform: translateX(100%);
background-color: #65a9ff;
}

@ -1,4 +1,7 @@
// it has style inside index.scss ---> // Start TimeLineComponent && end TimeLineComponent
import React from "react"; import React from "react";
import SearchBox from "../SearchBox"; import SearchBox from "../SearchBox";
import TitleSubtitle from "../TitleSubtitle"; import TitleSubtitle from "../TitleSubtitle";

@ -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;
}
}

@ -1,3 +1,5 @@
// it has style inside index.scss ---> // Start Toast && end Toast
import React from "react"; import React from "react";
import "./index.scss"; import "./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;
}

@ -1,3 +1,5 @@
// it has style inside index.scss ---> // Start StarRating && end StarRating
import React, { useState } from "react"; import React, { useState } from "react";
import "./StarRating.scss"; import "./StarRating.scss";

@ -1,6 +0,0 @@
.on {
color: #ffbd35;
}
.off {
color: #ccc;
}

@ -1,3 +1,5 @@
// it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import StarRating from "../starRating/StarRating"; import StarRating from "../starRating/StarRating";

@ -1,3 +0,0 @@
.playBtnImg {
transition: all 0.4s;
}

@ -801,6 +801,224 @@ l.leaflet-popup-content,
// * end PopupCard Sidebar/SidebarDesign2 // * 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 <<-- // ? class for selectbox inside -->> CustomSelectBox <<--
.customizeSelect { .customizeSelect {
background-position: left 0.5rem center; background-position: left 0.5rem center;

Loading…
Cancel
Save