}
@mixin apply-svg-color ($color) {
- /deep/ svg {
+ ::ng-deep svg {
path[fill="#000000"],
g[fill="#000000"],
rect[fill="#000000"],
cursor: pointer;
}
+@mixin select-arrow-down {
+ top: 50%;
+ right: calc(0% + 15px);
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border: 5px solid rgba(0, 0, 0, 0);
+ border-top-color: #000;
+ margin-top: -2px;
+ z-index: 100;
+}
+
@mixin peertube-select-container ($width) {
padding: 0;
margin: 0;
position: relative;
font-size: 15px;
+ &.disabled {
+ background-color: #E5E5E5;
+
+ select {
+ cursor: default;
+ }
+ }
+
@media screen and (max-width: $width) {
width: 100%;
}
&:after {
- top: 50%;
- right: calc(0% + 15px);
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border: 5px solid rgba(0, 0, 0, 0);
- border-top-color: #000;
- margin-top: -2px;
- z-index: 100;
+ @include select-arrow-down;
}
select {
}
}
-@mixin peertube-select-disabled-container ($width) {
- @include peertube-select-container($width);
-
- background-color: #E5E5E5;
-
- select {
- cursor: default;
- }
-}
-
// Thanks: https://codepen.io/triss90/pen/XNEdRe/
@mixin peertube-radio-container {
input[type="radio"] {
@mixin peertube-checkbox ($border-width) {
opacity: 0;
- width: 0;
+ position: absolute;
&:focus + span {
- outline: auto;
+ outline: 1px solid #1e5180;
}
& + span {
position: relative;
width: 18px;
+ min-width: 18px;
height: 18px;
border: $border-width solid var(--mainForegroundColor);
border-radius: 3px;
border-radius: 50%;
width: $size;
height: $size;
+ min-width: $size;
}
@mixin chevron ($size, $border-width) {