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. 88
      src/components/Radio/index.scss

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

@ -4,7 +4,14 @@ import "./index.scss";
export default function Radio(props) {
return (
<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">
{/* {props.label} */}
</label>

@ -1,58 +1,58 @@
$color1: #f4f4f4;
$color2: #3197EE;
$color2: #12cf7f;
.radio {
input[type="radio"] {
position: absolute;
opacity: 0;
input[type="radio"] {
position: absolute;
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 {
&: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 {
&:before {
background-color: $color2;
box-shadow: inset 0 0 0 4px $color1;
}
background-color: $color2;
box-shadow: inset 0 0 0 4px $color1;
}
}
&:focus {
+ .radio-label {
&:before {
outline: none;
border-color: $color2;
}
}
&:focus {
+ .radio-label {
&:before {
outline: none;
border-color: $color2;
}
}
&:disabled {
+ .radio-label {
&:before {
box-shadow: inset 0 0 0 4px $color1;
border-color: darken($color1, 25%);
background: darken($color1, 25%);
}
}
&:disabled {
+ .radio-label {
&:before {
box-shadow: inset 0 0 0 4px $color1;
border-color: darken($color1, 25%);
background: darken($color1, 25%);
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}
}

Loading…
Cancel
Save