From f5a0678c00bb02568fd1522efd7ff598e7225e2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 20 Mar 2022 10:59:28 +0100 Subject: [PATCH] misc: remove usage of vendor prefixes (#62959) --- gadjo/static/css/_forms.scss | 10 +++++----- gadjo/static/css/_utils.scss | 6 ------ gadjo/static/css/gadjo.scss | 32 ++++++++++++++++---------------- 3 files changed, 21 insertions(+), 27 deletions(-) diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss index 6b8aea9..d69cdc6 100644 --- a/gadjo/static/css/_forms.scss +++ b/gadjo/static/css/_forms.scss @@ -93,7 +93,7 @@ a.button { padding: 5px 15px; cursor: pointer; border: 0px solid #aaa; - @include vendor-prefix('transition', 'all 200ms ease'); + transition: all 200ms ease; vertical-align: baseline; border-radius: 3px; font-weight: bold; @@ -124,7 +124,7 @@ a.button { box-shadow: none; cursor: not-allowed; } - @include vendor-prefix('transition', 'border-color 0.2s ease, box-shadow 0.2s linear'); + transition: border-color 0.2s ease, box-shadow 0.2s linear; } a.button, a.pk-button, button, input[type=submit], div.buttons input, div.buttons a.cancel { @@ -220,7 +220,7 @@ input, input[type="text"], input[type="url"], input[type="email"], input[type="p outline: medium none; padding: 0.7ex 0.7em; max-width: 100%; - @include vendor-prefix('transition', 'background-size 0.2s ease'); + transition: background-size 0.2s ease; background: $widget-background; color: $widget-color; &:focus:not([readonly]) { @@ -270,7 +270,7 @@ input[type=file] { select { background: white; - @include vendor-prefix('appearance', 'none'); + appearance: none; padding-right: 4em; background-image: url($data_uri_arrow-down); background-position: right 1.3rem center; @@ -359,7 +359,7 @@ fieldset.gadjo-foldable legend.gadjo-foldable-widget { } fieldset.gadjo-foldable legend.gadjo-foldable-widget:after { content: "▼"; - @include vendor-prefix('transition', 'transform 0.1s ease'); + transition: transform 0.1s ease; position: absolute; right: 1ex; } diff --git a/gadjo/static/css/_utils.scss b/gadjo/static/css/_utils.scss index 984fc80..fa1e6ca 100644 --- a/gadjo/static/css/_utils.scss +++ b/gadjo/static/css/_utils.scss @@ -8,12 +8,6 @@ font-style: normal; } -@mixin vendor-prefix($name, $value) { - @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') { - #{$vendor}#{$name}: #{$value}; - } -} - @function text-color($color) { @if (lightness($color) > 50) { @return #303030; diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss index 9a5061f..8784ea9 100644 --- a/gadjo/static/css/gadjo.scss +++ b/gadjo/static/css/gadjo.scss @@ -57,7 +57,7 @@ a { text-decoration: none; border-width: 0; border-bottom: 1px dotted $link-color; - @include vendor-prefix('transition', 'color 200ms ease-out'); + transition: color 200ms ease-out; &:hover { color: #003388; border-style: solid; @@ -224,7 +224,7 @@ div#header h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - @include vendor-prefix('transition', 'all ease 200ms'); + transition: all ease 200ms; @media screen and (max-width: $mobile-limit) { width: 100%; max-width: calc(100% - #{$sidepage-icon-width} - 21px); @@ -261,7 +261,7 @@ div#header h1 { content: ""; height: $header-height + 2px; width: $header-height + 2px; - @include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)'); + transform: scale(0.4, 0.707) rotate(45deg); display: inline-block; position: absolute; top: 0px; @@ -312,7 +312,7 @@ span#applabel { @media screen and (max-width: $mobile-limit) { left: $header-height + 5px; } - @include vendor-prefix('transition', 'opacity 100ms ease-out'); + transition: opacity 100ms ease-out; } &:hover::after { opacity: 0.8; @@ -531,7 +531,7 @@ table.main td { text-align: left; padding: 1em 1ex; border-bottom: 1px solid #f3f3f3; - @include vendor-prefix('transition', 'background ease 0.2s'); + transition: background ease 0.2s; } table.main tr td.checkbox { @@ -592,7 +592,7 @@ ul.apps li a { text-align: center; border: 1px solid #ccc; text-decoration: none; - @include vendor-prefix('transition', 'all .2s ease-in-out'); + transition: all .2s ease-in-out; color: $primary-color; border-radius: 15px; } @@ -760,7 +760,7 @@ ul.objects-list li { ul.objects-list.single-links li { padding: 0; - @include vendor-prefix('transition', 'background ease 0.2s'); + transition: background ease 0.2s; } ul.objects-list li:hover { @@ -820,7 +820,7 @@ ul.objects-list li span.tag { width: $sidepage-icon-width; height: 2em; text-align: left; - @include vendor-prefix('transition', 'width 0ms ease-in'); + transition: width 0ms ease-in; height: 100%; overflow: initial; color: white; @@ -851,7 +851,7 @@ body.enable-transitions { #sidepage span#applabel, #sidepage span#applabel::before, #sidepage { - @include vendor-prefix('transition-duration', '400ms'); + transition-duration: 400ms; } } @@ -872,7 +872,7 @@ body { #header, #main { - @include vendor-prefix('transition', 'margin-left 0ms ease-in'); + transition: margin-left 0ms ease-in; position: relative; } @@ -912,7 +912,7 @@ body { line-height: 20px; border-radius: 10px; z-index: 100; - @include vendor-prefix('transition', 'all 0ms ease-in'); + transition: all 0ms ease-in; @media screen and (max-width: $mobile-limit) { border-radius: 0; left: 0; @@ -945,7 +945,7 @@ body.sidepage-expanded #sidepage span#applabel::before { min-height: calc(100% - #{$header-height} - 1px); /* #top 40px + border 1px */ box-sizing: border-box; border-right: $sidepage-border-width solid $primary-color; - @include vendor-prefix('transition', 'all 0ms ease'); + transition: all 0ms ease; &::before { content: ""; position: absolute; @@ -956,9 +956,9 @@ body.sidepage-expanded #sidepage span#applabel::before { top: 0px; } li { - @include vendor-prefix('transition', 'all 200ms ease'); + transition: all 200ms ease; a { - @include vendor-prefix('transition', 'all 200ms ease'); + transition: all 200ms ease; } &.sub { @media screen and (max-width: $mobile-limit) { @@ -1011,7 +1011,7 @@ ul#sidepage-menu li a { @media screen and (max-width: $mobile-limit) { #sidepage { - @include vendor-prefix('transition', 'height 400ms ease-in'); + transition: height 400ms ease-in; height: $header-height; width: 100%; overflow: hidden; @@ -1040,7 +1040,7 @@ ul#sidepage-menu li a { background-position: 50% 1ex; } &::after { - @include vendor-prefix('transition', 'none'); + transition: none; } &.active::after { content: none;