.flexibleButtonGroup {
display: flex;
flex-wrap: wrap;
-
+
> li {
display: flex;
flex: 0 0 auto;
-
+
&:not(:last-child) {
margin-right: 5px;
-
+
&.spaceAfter {
margin-right: 20px;
}
}
-
+
> input[type="radio"] {
left: -3000px;
opacity: 0;
position: absolute;
-
+
&:checked + label {
cursor: default;
-
+
> .icon {
cursor: default !important;
}
}
-
+
&:focus + label {
- border-color: rgba(0, 0, 0, .3);
+ border-color: rgba(0, 0, 0, 0.3);
}
}
-
+
> a,
> label {
background-color: rgb(207, 216, 220);
color: rgb(33, 33, 33);
cursor: pointer;
padding: 5px 10px;
-
+
> .icon {
color: inherit;
}
-
+
> .icon {
color: inherit !important;
cursor: pointer !important;
}
}
-
+
> a.active,
> input[type="radio"]:checked + label,
> input[type="radio"] + label:hover {
color: #fff;
-
+
&.green {
background-color: rgb(46, 125, 50);
}
-
+
&.red {
background-color: rgb(198, 40, 40);
}
-
+
&.yellow {
background-color: rgb(251, 140, 0);
color: #000;
background-color: rgb(242, 242, 242) !important;
color: rgb(125, 130, 100) !important;
cursor: default;
-
+
> .icon {
color: rgb(125, 130, 100) !important;
cursor: default !important;