"rule-empty-line-before": null,
"selector-max-id": null,
"scss/at-function-pattern": null,
- "function-parentheses-space-inside": "never-single-line"
+ "function-parentheses-space-inside": "never-single-line",
+ "property-no-vendor-prefix": [
+ true,
+ {
+ "ignoreProperties": [ "mask-image" ]
+ }
+ ]
}
}
}
.icon-menu {
- background-color: pvar(--mainForegroundColor);
mask-image: url('../assets/images/misc/menu.svg');
+ -webkit-mask-image: url('../assets/images/misc/menu.svg');
+
+ background-color: pvar(--mainForegroundColor);
margin: 0 18px 0 20px;
@media screen and (max-width: $mobile-view) {
}
.admin-sub-header {
- @include admin-sub-header-responsive;
+ flex-direction: column;
+
+ .form-sub-title {
+ margin-right: 0 !important;
+ margin-bottom: 10px;
+ text-align: center;
+ }
+
+ .admin-sub-nav {
+ display: block;
+ overflow-x: auto;
+ white-space: nowrap;
+ height: 50px;
+ padding: 10px 0;
+ width: 100%;
+
+ a {
+ margin-left: 5px;
+ }
+ }
}
my-markdown-textarea {
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 responsive-width ($width) {
width: $width;
}
&::after {
- @include 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;
}
select {
}
}
-@mixin admin-sub-header-responsive {
- flex-direction: column;
-
- .form-sub-title {
- margin-right: 0 !important;
- margin-bottom: 10px;
- text-align: center;
- }
-
- .admin-sub-nav {
- display: block;
- overflow-x: auto;
- white-space: nowrap;
- height: 50px;
- padding: 10px 0;
- width: 100%;
-
- a {
- margin-left: 5px;
- }
- }
-}
-
// applies ratio (default to 16:9) to a child element (using $selector) only using
// an immediate's parent size. This allows to set a ratio without explicit
// dimensions, as width/height cannot be computed from each other.
@each $icon in $icons {
&[class$="-#{$icon}"] {
mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+ -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
}
}
&.icon-next,
&.icon-previous {
mask-image: url('#{$assets-path}/player/images/next.svg');
+ -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+
background-color: #fff;
mask-size: cover;
width: 11px;
}
.cross {
+ mask-image: url('#{$assets-path}/images/feather/x.svg');
+ -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+
cursor: pointer;
width: 20px;
height: 20px;
- mask-image: url('#{$assets-path}/images/feather/x.svg');
background-color: #fff;
mask-size: cover;
}
}
.vjs-playlist-icon {
+ mask-image: url('#{$assets-path}/images/feather/list.svg');
+ -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+
width: 22px;
height: 22px;
- mask-image: url('#{$assets-path}/images/feather/list.svg');
background-color: #fff;
mask-size: cover;
margin-bottom: 3px;