max-height: $font-size * $number-of-lines;
/* Fallback for non-webkit */
font-size: $font-size;
- line-height: $font-size - 0.1;
- -webkit-line-clamp: $number-of-lines;
- -webkit-box-orient: vertical;
+ line-height: $font-size;
overflow: hidden;
text-overflow: ellipsis;
}
}
@mixin peertube-word-wrap {
- word-break: normal;
+ word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
}
@mixin apply-svg-color ($color) {
- /deep/ svg {
+ ::ng-deep svg {
path[fill="#000000"],
g[fill="#000000"],
rect[fill="#000000"],
@mixin peertube-input-group($width) {
width: $width;
- height: $button-height;
+ min-height: $button-height;
padding-top: 0;
padding-bottom: 0;
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) {
- display: none;
+ opacity: 0;
+ position: absolute;
+
+ &:focus + span {
+ box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+ }
& + span {
position: relative;
width: 18px;
+ min-width: 18px;
height: 18px;
- border: $border-width solid var(--mainForegroundColor);
+ border: $border-width solid $fg-color;
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
- border-right: 2px solid var(--mainBackgroundColor);
- border-bottom: 2px solid var(--mainBackgroundColor);
+ border-right: 2px solid $bg-color;
+ border-bottom: 2px solid $bg-color;
}
}
&:checked + span {
border-color: transparent;
- background: var(--mainColor);
+ background: $orange-color;
animation: jelly 0.6s ease;
&:after {
border-radius: 50%;
width: $size;
height: $size;
+ min-width: $size;
+ min-height: $size;
}
@mixin chevron ($size, $border-width) {
@media screen and (max-width: 800px) {
flex-direction: column;
height: auto;
- text-align: center;
align-items: center;
}
}
@mixin dropdown-with-icon-item {
- padding: 6px 24px;
+ padding: 6px 15px;
my-global-icon {
- width: 24px;
+ width: 22px;
+ opacity: .7;
margin-right: 10px;
position: relative;