changed radion button color | 20

temp
mahdi 2 years ago
parent 85c77f3002
commit 10fd2d4340
  1. 48
      src/App.scss
  2. 9
      src/components/Radio/index.js
  3. 86
      src/components/Radio/index.scss

@ -5,34 +5,33 @@
@import "./views/Home/Landscape/Page2/Mobile/index"; @import "./views/Home/Landscape/Page2/Mobile/index";
@import "./views/Home/Landscape/Page1/Lights/index.scss"; @import "./views/Home/Landscape/Page1/Lights/index.scss";
*{ * {
font-family: Regular; font-family: Regular;
} }
.ltr {
.ltr{
direction: ltr; direction: ltr;
} }
.rtl{ .rtl {
direction: rtl; direction: rtl;
} }
.scrolling-carousel button{ .scrolling-carousel button {
display: none; display: none;
} }
.bold{ .bold {
font-family: ExtraBold; font-family: ExtraBold;
} }
.shadow-all{ .shadow-all {
box-shadow: 0px 0px 10px rgba(0,0,0,0.08); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
} }
//slider //slider
.styles-module_item-tracker__3bypy{ .styles-module_item-tracker__3bypy {
padding-top : 20px !important; padding-top: 20px !important;
// transform: translateY(-20px) !important; // transform: translateY(-20px) !important;
} }
@ -82,45 +81,46 @@
} }
//map //map
.mapboxgl-map{ .mapboxgl-map {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
border-radius: 20px !important; border-radius: 20px !important;
.marker{
.marker {
width: 20px; width: 20px;
height: 20px height: 20px;
} }
} }
.container{ .container {
width: 100%; width: 100%;
margin : 0px auto; margin: 0px auto;
} }
@media screen and (min-width : $xs){ @media screen and (min-width: $xs) {
.container{ .container {
max-width: 80%; max-width: 80%;
} }
} }
@media screen and (min-width : $lg){ @media screen and (min-width: $lg) {
.container{ .container {
max-width: 100%; max-width: 100%;
} }
} }
@media screen and (min-width : $xl){ @media screen and (min-width: $xl) {
.container{ .container {
max-width: 1200px; max-width: 1200px;
} }
} }
@media screen and (min-width : $xxl) { @media screen and (min-width: $xxl) {
.container{ .container {
max-width: 1480px; max-width: 1480px;
} }
} }
.Toastify *{ .Toastify * {
font-size: 13px; font-size: 13px;
} }

@ -4,7 +4,14 @@ import "./index.scss";
export default function Radio(props) { export default function Radio(props) {
return ( return (
<div className="radio flex items-center"> <div className="radio flex items-center">
<input id="radio-1" name={props.name} type="radio" checked={props.active} onChange={() => {}} /> <input
id="radio-1"
name={props.name}
type="radio"
className="accent-pink-500"
checked={props.active}
onChange={() => {}}
/>
<label htmlFor="radio-1" className="radio-label text-xs"> <label htmlFor="radio-1" className="radio-label text-xs">
{/* {props.label} */} {/* {props.label} */}
</label> </label>

@ -1,58 +1,58 @@
$color1: #f4f4f4; $color1: #f4f4f4;
$color2: #3197EE; $color2: #12cf7f;
.radio { .radio {
input[type="radio"] { input[type="radio"] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
+ .radio-label {
&:before {
content: "";
background: $color1;
border-radius: 100%;
border: 1px solid darken($color1, 25%);
display: inline-block;
width: 1.7em;
height: 1.7em;
position: relative;
vertical-align: top;
margin-left: 0.5em;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
}
&:checked {
+ .radio-label { + .radio-label {
&:before { &:before {
content: ''; background-color: $color2;
background: $color1; box-shadow: inset 0 0 0 4px $color1;
border-radius: 100%;
border: 1px solid darken($color1, 25%);
display: inline-block;
width: 1.7em;
height: 1.7em;
position: relative;
vertical-align: top;
margin-left: 0.5em;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
}
&:checked {
+ .radio-label {
&:before {
background-color: $color2;
box-shadow: inset 0 0 0 4px $color1;
}
} }
} }
&:focus { }
+ .radio-label { &:focus {
&:before { + .radio-label {
outline: none; &:before {
border-color: $color2; outline: none;
} border-color: $color2;
} }
} }
&:disabled { }
+ .radio-label { &:disabled {
&:before { + .radio-label {
box-shadow: inset 0 0 0 4px $color1; &:before {
border-color: darken($color1, 25%); box-shadow: inset 0 0 0 4px $color1;
background: darken($color1, 25%); border-color: darken($color1, 25%);
} background: darken($color1, 25%);
} }
} }
+ .radio-label { }
&:empty { + .radio-label {
&:before { &:empty {
margin-right: 0; &:before {
} margin-right: 0;
} }
} }
} }
} }
}

Loading…
Cancel
Save