mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-06 02:30:54 -08:00
Add: SASS - OS mixin
This commit is contained in:
parent
9f1f19d1b3
commit
38812b9baa
2 changed files with 204 additions and 0 deletions
152
__tests__/os.test.scss
Normal file
152
__tests__/os.test.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
@use 'true' as *;
|
||||
@use "../src/utils/os" as *;
|
||||
|
||||
// TODO: Need more tests..
|
||||
@mixin example() {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@include test-module("Create OS related media [mix]") {
|
||||
@include test("win7") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win7) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-os-version: windows-win7) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("win8") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win8) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-os-version: windows-win8) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("win10") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win10) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-os-version: windows-win10) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("linux") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($linux) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-gtk-csd-available) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("mac") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($mac) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("bigsur") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($bigsur) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-mac-big-sur-theme: 0) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("win") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("all os - win7, win8, win10, mac, bigsur, linux") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win7, $win8, $win10, $mac, $bigsur, $linux) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available) {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include test("all os - win, mac, bigsur, linux") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include OS($win, $mac, $bigsur, $linux) {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@media (-moz-mac-big-sur-theme: 0), (-moz-gtk-csd-available), (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
|
||||
@include example;
|
||||
}
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/utils/_os.scss
Normal file
52
src/utils/_os.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "list" as list-utils;
|
||||
@use "media";
|
||||
|
||||
$win: "win";
|
||||
$mac: "mac";
|
||||
$linux: "linux";
|
||||
|
||||
$win7: "win7";
|
||||
$win8: "win8";
|
||||
$win10: "win10";
|
||||
$bigsur: "bigsur";
|
||||
|
||||
$_win-template: "-moz-os-version: windows-";
|
||||
$_win-media: (
|
||||
#{$win7}: $_win-template + "win7",
|
||||
#{$win8}: $_win-template + "win8",
|
||||
#{$win10}: $_win-template + "win10",
|
||||
);
|
||||
$_others-media: (
|
||||
#{$linux}: "-moz-gtk-csd-available",
|
||||
#{$bigsur}: "-moz-mac-big-sur-theme: 0",
|
||||
);
|
||||
$_os-media: map.merge(
|
||||
$_win-media, $_others-media
|
||||
);
|
||||
|
||||
@mixin OS($osNames...) {
|
||||
@if list.index($osNames, $win) {
|
||||
$osNames: list-utils.remove($osNames, $win);
|
||||
$osNames: list.join($osNames, map.keys($_win-media));
|
||||
}
|
||||
|
||||
$osMedias: ();
|
||||
@each $osName in $osNames {
|
||||
$osMedia: map.get($_os-media, $osName);
|
||||
@if $osMedia != null {
|
||||
$osMedias: list.append($osMedias, $osMedia);
|
||||
}
|
||||
}
|
||||
|
||||
@include media.each($osMedias) {
|
||||
@content;
|
||||
}
|
||||
|
||||
@if list.index($osNames, $mac) {
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue