master
mahdi andalib 3 years ago
parent fa1c761947
commit df4e01064b
  1. 8
      src/components/Alert/index.js
  2. 230
      src/components/Alert/index.scss

@ -88,8 +88,8 @@ function Alert(props) {
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-4", title: "title-error-4",
confirmButton: "confirm-button-2", confirmButton: "confirm-button-4",
cancelButton: "cancle-button2", cancelButton: "cancle-button4",
popup: "alert-popup4", popup: "alert-popup4",
}, },
}) })
@ -179,8 +179,8 @@ function Alert(props) {
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-8", title: "title-error-8",
confirmButton: "confirm-button-7", confirmButton: "confirm-button-8",
cancelButton: "cancle-button7", cancelButton: "cancle-button-8",
popup: "alert-popup8", popup: "alert-popup8",
}, },
}) })

@ -11,23 +11,16 @@ $lightBlue: #06bace;
$confirmBtnBgColor: #f6feff; $confirmBtnBgColor: #f6feff;
$blueTitleBgColor: #dfe6e9; $blueTitleBgColor: #dfe6e9;
// ? green alert Box , error1 // * green alert Box , error1
$lightGreen: #3ee924; $lightGreen: #3ee924;
$darkGreen: #21ae0b; $darkGreen: #21ae0b;
$greenTitleBgColor: #91ff5233; $greenTitleBgColor: #91ff5233;
$darkRed: #e92424; // ! red alert Box , error7
$darkRed: #c70000;
// $errorcolor1: #06bace; $redTitleBgColor: #ff525233;
// $errorcolor2: #3ee924; $red: #e92424;
// $errorcolor7: #c70000;
// $errorcolor7button: #e92424;
// $white: #fff;
// $black: #000;
// $contentcolor: #646464;
// $toastbgerror: #ffeaea;
// $toastbgsuccess: #c3ffb9;
// $toastsuccesscolor: #21ae0b;
// ! common styles // ! common styles
// * alert box // * alert box
.swal2-container.swal2-center > .swal2-popup { .swal2-container.swal2-center > .swal2-popup {
@ -212,126 +205,205 @@ $darkRed: #e92424;
color: $lightGreen !important; color: $lightGreen !important;
} }
/* !error4 */ // ? error4
/* ? تایتل */ // TODO تایتل
.title-error-4 { .title-error-4 {
text-align: center !important; text-align: center !important;
color: var(--error-color2) !important; color: $darkGreen !important;
}
// * کانفرم باتن
.confirm-button-4 {
background-color: $white !important;
border: solid 1px $lightGreen !important;
color: $darkGreen !important;
}
// * هاور کانفرم باتن
.confirm-button-4:hover {
background-color: $lightGreen !important;
color: $white !important;
}
// * کنسل باتن
.cancle-button4 {
background-color: $lightGreen !important;
color: $white !important;
border: solid 1px $lightGreen !important;
} }
// * هاور کنسل باتن
.cancle-button4:hover {
background: $white !important;
color: $lightGreen !important;
}
// * alert box width
.alert-popup4 { .alert-popup4 {
width: 440px !important; width: 440px !important;
} }
/* !error5 */
/* ? کانفرم باتن */ // ? error5
// TODO کانفرم باتن
.confirm-button-5 { .confirm-button-5 {
background-color: var(--error-color2) !important; background-color: $lightGreen !important;
margin-top: -81px !important;
margin-left: -260px !important;
padding: 12px 15px !important; padding: 12px 15px !important;
border-top-right-radius: 0px !important; border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important; border-bottom-right-radius: 0px !important;
position: absolute;
left: 4% !important;
bottom: 8% !important;
} }
/* ? اینپوت فیلد */
// *input field
.input-error-5 { .input-error-5 {
width: 70% !important; position: relative;
height: 47px !important ;
border-top-left-radius: 0px !important; border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important; border-bottom-left-radius: 0px !important;
} }
/* !error6 */
/* ? دکمه ضربدر بالا سمت چپ */ // ? error6
// TODO دکمه ضربدر بالا سمت چپ
.close-button-6 { .close-button-6 {
color: var(--error-color1) !important; color: $lightBlue !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-6:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 4px var(--error-color1) !important;
} }
/* !error7 */
/* ? تایتل */ // ? error7
// TODO تایتل
.title-error-7 { .title-error-7 {
color: var(--error-color7) !important; color: $darkRed !important;
background-color: $redTitleBgColor !important;
} }
/* ? دکمه ضربدر بالا سمت چپ */
// * دکمه ضربدر بالا سمت چپ
.close-button-7 { .close-button-7 {
background-color: var(--error-color7-button) !important; background-color: $red !important;
color: var(--white) !important; color: $white !important;
} }
/* ? هاور دکمه ضربدر بالا سمت چپ */
// * هاور دکمه ضربدر بالا سمت چپ
.close-button-7:hover { .close-button-7:hover {
background-color: var(--white) !important; background-color: $white !important;
color: var(--error-color7) !important; color: $red !important;
border: solid 4px var(--error-color7-button) !important; border: solid 2px $red !important;
} }
/* ? کانفرم باتن */
// * کانفرم باتن
.confirm-button-7 { .confirm-button-7 {
background-color: var(--white) !important; background-color: $redTitleBgColor !important;
border: solid 2px var(--error-color7-button) !important; border: solid 1px $darkRed !important;
color: var(--error-color7) !important; color: $darkRed !important;
//
position: absolute !important;
left: 20px !important;
margin-bottom: 33px !important;
} }
/* ? هاور کانفرم باتن */
// * هاور کانفرم باتن
.confirm-button-7:hover { .confirm-button-7:hover {
background-color: var(--error-color7-button) !important; background-color: $red !important;
color: var(--white) !important; color: $white !important;
} }
/* ? کنسل باتن */
// * کنسل باتن
.cancle-button7 { .cancle-button7 {
background-color: var(--error-color7-button) !important; background-color: $red !important;
color: var(--white) !important; border: solid 1px $red !important;
border: solid 2px var(--error-color7-button) !important; color: $white !important;
//
position: absolute !important;
left: 33% !important;
margin-bottom: 33px !important;
} }
/* ? هاور کنسل باتن */
// * هاور کنسل باتن
.cancle-button7:hover { .cancle-button7:hover {
background-color: var(--white) !important; background: $white !important;
color: var(--error-color7-button) !important; color: $red !important;
} }
/* !error8 */
// ? error8
.title-error-8 { .title-error-8 {
color: var(--error-color7-button) !important; color: $darkRed !important;
text-align: center !important; text-align: center !important;
} }
// * کانفرم باتن
.confirm-button-8 {
background-color: $redTitleBgColor !important;
border: solid 1px $darkRed !important;
color: $darkRed !important;
}
// * هاور کانفرم باتن
.confirm-button-8:hover {
background-color: $red !important;
color: $white !important;
}
// * کنسل باتن
.cancle-button-8 {
background-color: $red !important;
border: solid 1px $red !important;
color: $white !important;
}
// * هاور کنسل باتن
.cancle-button-8:hover {
background: $white !important;
color: $red !important;
}
// * alert box width
.alert-popup8 { .alert-popup8 {
width: 440px !important; width: 440px !important;
} }
/* !error9 */
// ? error9
.title-error-9 { .title-error-9 {
color: var(--white) !important; color: $white !important;
} }
.alert-popup9 { .alert-popup9 {
background-color: var(--error-color2) !important; background-color: $darkRed !important;
border-color: var(--error-color2) !important; border-color: $darkRed !important;
} }
.close-button-9 { .close-button-9 {
background-color: var(--toast-bg-success) !important; background-color: $white !important;
color: var(--toast-success-color) !important; color: $red !important;
} }
.confirm-button-9 { .confirm-button-9 {
background-color: #35bb20 !important; background-color: $red !important;
} }
.cancle-button9 { .cancle-button9 {
background-color: var(--white) !important; background-color: $white !important;
color: var(--error-color2) !important; color: $red !important;
} }
.footer-error-9 a { .footer-error-9 a {
color: var(--white) !important; color: $white !important;
border-bottom-color: var(--white) !important;
font-size: 18px !important;
} }
/* !error10 */
// ? error10
.alert-popup10 { .alert-popup10 {
background-color: var(--error-color7-button) !important; background-color: $darkGreen !important;
border-color: var(--error-color7-button) !important; border-color: $darkGreen !important;
} }
.close-button-10 { .close-button-10 {
background-color: #fd6a6a !important; background-color: $white !important;
color: var(--white) !important; color: $darkGreen !important;
} }
.confirm-button-10 { .confirm-button-10 {
background-color: #bb2020 !important; background-color: $lightGreen !important;
} }
.cancle-button10 { .cancle-button10 {
background-color: var(--white) !important; background-color: $white !important;
color: var(--error-color7-button) !important; color: $lightGreen !important;
} }

Loading…
Cancel
Save