diff --git a/.stylelintrc.js b/.stylelintrc.js index 9d866f6f18..0e91533970 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -24,6 +24,14 @@ module.exports = { 'no-duplicate-selectors': null, 'number-max-precision': 5, 'property-case': null, + 'property-no-vendor-prefix': [true, { + ignoreProperties: [ + 'background-clip', // https://caniuse.com/background-clip-text + 'appearance', // https://caniuse.com/css-appearance + 'backdrop-filter', // https://caniuse.com/css-backdrop-filter + 'text-size-adjust', // https://caniuse.com/text-size-adjust + ], + }], 'rule-empty-line-before': null, 'string-quotes': 'double', 'value-keyword-case': null, @@ -35,7 +43,6 @@ module.exports = { 'selector-not-notation': null, // 169 errors 'import-notation': null, // 56 errors 'keyframes-name-pattern': null, // 50 errors - 'property-no-vendor-prefix': null, // 49 errors 'block-no-empty': null, // 25 errors 'selector-no-vendor-prefix': null, // 19 errors 'selector-class-pattern': null, // 19 errors diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 8e74e1922c..4799d59fb8 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -641,6 +641,8 @@ font-weight: @definitionHeaderFontWeight; color: @definitionHeaderColor; box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; + // https://github.com/fomantic/Fomantic-UI/pull/884 + // stylelint-disable-next-line property-no-vendor-prefix -moz-transform: scale(1); } @@ -654,6 +656,8 @@ font-weight: @definitionFooterFontWeight; color: @definitionFooterColor; box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; + // https://github.com/fomantic/Fomantic-UI/pull/884 + // stylelint-disable-next-line property-no-vendor-prefix -moz-transform: scale(1); } diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less index 8d8507a157..0a26119217 100755 --- a/src/definitions/elements/image.less +++ b/src/definitions/elements/image.less @@ -161,8 +161,6 @@ img.ui.image { .ui.circular.image, .ui.circular.images .image > *, .ui.circular.image > * { - -webkit-border-radius: @circularRadius; - -moz-border-radius: @circularRadius; border-radius: @circularRadius; } } @@ -199,8 +197,6 @@ img.ui.image { display: inline-block; width: @avatarSize; height: @avatarSize; - -webkit-border-radius: @circularRadius; - -moz-border-radius: @circularRadius; border-radius: @circularRadius; } } diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index 67e420eb74..eef2db5a15 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -328,6 +328,8 @@ .ui.elastic.loading.loading.loading > i.icon::before, .ui.elastic.loader.loader::before { animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); + // https://github.com/fomantic/Fomantic-UI/pull/363 + // stylelint-disable-next-line property-no-vendor-prefix -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); border-right-color: transparent; } diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index ae83085126..fcd9c30f56 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -455,7 +455,9 @@ .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { flex: 1 1 auto; & when (@supportIE) { - -ms-flex: 1 1 0; /* Solves #2550 MS Flex */ + // https://github.com/Semantic-Org/Semantic-UI/issues/2550 + // stylelint-disable-next-line property-no-vendor-prefix + -ms-flex: 1 1 0; } } .ui.horizontal.segments > .segment { diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less index 113c162266..70129a003d 100755 --- a/src/definitions/modules/dimmer.less +++ b/src/definitions/modules/dimmer.less @@ -155,6 +155,8 @@ perspective: @perspective; transform-origin: center center; &.modals { + // https://github.com/fomantic/Fomantic-UI/pull/1491 + // stylelint-disable-next-line property-no-vendor-prefix -moz-perspective: none; } } @@ -302,7 +304,6 @@ body.dimmable > .dimmer { .ui[class*="center dimmer"] { top: 50%; transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } .ui.segment > .ui.ui[class*="top dimmer"] { @@ -336,48 +337,40 @@ body.dimmable > .dimmer { 0% { opacity: 0; transform: translateY(-40%); - -webkit-transform: translateY(calc(-40% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } } @keyframes fadeInDownCenter { 0% { opacity: 0; transform: translateY(-60%); - -webkit-transform: translateY(calc(-60% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } } @keyframes fadeOutUpCenter { 0% { opacity: 1; transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-45%); - -webkit-transform: translateY(calc(-45% - 0.5px)); } } @keyframes fadeOutDownCenter { 0% { opacity: 1; transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-55%); - -webkit-transform: translateY(calc(-55% - 0.5px)); } } @keyframes bounceCenter { @@ -387,7 +380,6 @@ body.dimmable > .dimmer { 80%, 100% { transform: translateY(-50%); - -webkit-transform: translateY(calc(-50% - 0.5px)); } 40% { transform: translateY(calc(-50% - 30px)); diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 7a580a1c99..ddffc671ee 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -434,7 +434,6 @@ select.ui.dropdown { overflow-y: auto; overscroll-behavior: @overscrollBehavior; backface-visibility: hidden; - -webkit-overflow-scrolling: touch; border-top-width: 0 !important; width: auto; outline: none; @@ -634,7 +633,7 @@ select.ui.dropdown { } & when (@variationDropdownScrollhint) { /* CSS specific to iOS devices or firefox mobile only */ - @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance: none) { + @supports (-webkit-touch-callout: none) or (-moz-appearance: none) { @media (-moz-touch-enabled), (pointer: coarse) { .ui.dropdown .scrollhint.menu:not(.hidden)::before { animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration; @@ -751,7 +750,6 @@ select.ui.dropdown { overflow-y: auto; overscroll-behavior: @overscrollBehavior; backface-visibility: hidden; - -webkit-overflow-scrolling: touch; } @media only screen and (max-width: @largestMobileScreen) { .ui.search.dropdown .menu { @@ -1295,7 +1293,6 @@ select.ui.dropdown { overflow-y: auto; overscroll-behavior: @overscrollBehavior; backface-visibility: hidden; - -webkit-overflow-scrolling: touch; min-width: 100% !important; width: auto !important; } diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index 060d6122dd..c021bfe3bb 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -31,7 +31,6 @@ will-change: transform; transform: translate3d(0, 0, 0); visibility: hidden; - -webkit-overflow-scrolling: touch; height: 100%; max-height: 100%; max-width: 100%; diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 5a8ead52e8..eccf401b5f 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -446,7 +446,6 @@ .scrolling.dimmable.dimmed > .dimmer { overflow: auto; overscroll-behavior: @overscrollBehavior; - -webkit-overflow-scrolling: touch; } .modals.dimmer .ui.scrolling.modal:not(.fullscreen) { margin: @scrollingMargin auto; @@ -463,7 +462,6 @@ .scrolling.undetached.dimmable.dimmed { overflow: auto; overscroll-behavior: @overscrollBehavior; - -webkit-overflow-scrolling: touch; } .scrolling.undetached.dimmable.dimmed > .dimmer { overflow: hidden; diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less index c9070fafc0..7a39307697 100755 --- a/src/definitions/modules/popup.less +++ b/src/definitions/modules/popup.less @@ -175,6 +175,8 @@ [data-tooltip][data-position="left center"]:hover::after, [data-tooltip][data-position="right center"]:hover::after { transform: translateY(-50%) scale(1) !important; + // https://github.com/fomantic/Fomantic-UI/pull/1537 + // stylelint-disable-next-line property-no-vendor-prefix -moz-transform: translateY(-50%) scale(1.0001) !important; } [data-tooltip][data-position="top left"]::after, diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 9053d51274..170f6d6980 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -387,7 +387,6 @@ overflow-y: auto; overscroll-behavior: @overscrollBehavior; backface-visibility: hidden; - -webkit-overflow-scrolling: touch; } } diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index ce4544cc0f..c827313365 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -31,7 +31,6 @@ will-change: transform; transform: translate3d(0, 0, 0); visibility: hidden; - -webkit-overflow-scrolling: touch; height: 100% !important; max-height: 100%; border-radius: 0 !important; diff --git a/src/definitions/modules/sticky.less b/src/definitions/modules/sticky.less index 749de84e12..4e4983e595 100755 --- a/src/definitions/modules/sticky.less +++ b/src/definitions/modules/sticky.less @@ -62,13 +62,6 @@ *******************************/ .ui.native.sticky { - position: -webkit-sticky; - position: -moz-sticky; - & when (@supportIE) { - position: -ms-sticky; - } - - position: -o-sticky; position: sticky; } diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less index 305b65779c..406b8a980d 100755 --- a/src/definitions/views/card.less +++ b/src/definitions/views/card.less @@ -550,13 +550,6 @@ background-position: center; justify-content: center; align-items: center; - display: -webkit-box; - display: -moz-box; - & when (@supportIE) { - display: -ms-flexbox; - } - - display: -webkit-flex; display: flex; width: 100%; border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius; diff --git a/src/themes/pulsar/elements/loader.overrides b/src/themes/pulsar/elements/loader.overrides index eb4f38eb79..8ec23c38d7 100644 --- a/src/themes/pulsar/elements/loader.overrides +++ b/src/themes/pulsar/elements/loader.overrides @@ -3,67 +3,29 @@ *******************************/ .ui.loader::after { - -webkit-animation: loader-pulsar 2s infinite linear; animation: loader-pulsar 2s infinite linear; } -@-webkit-keyframes loader-pulsar { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - opacity: 0; - } - 20% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - 40% { - -webkit-transform: rotate(740deg); - transform: rotate(740deg); - opacity: 1; - } - 60% { - -webkit-transform: rotate(1120deg); - transform: rotate(1120deg); - opacity: 1; - } - 80% { - -webkit-transform: rotate(1440deg); - transform: rotate(1440deg); - } - 100% { - -webkit-transform: rotate(1800deg); - transform: rotate(1800deg); - opacity: 0; - } -} - @keyframes loader-pulsar { 0% { - -webkit-transform: rotate(0); transform: rotate(0); opacity: 0; } 20% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } 40% { - -webkit-transform: rotate(740deg); transform: rotate(740deg); opacity: 1; } 60% { - -webkit-transform: rotate(1120deg); transform: rotate(1120deg); opacity: 1; } 80% { - -webkit-transform: rotate(1440deg); transform: rotate(1440deg); } 100% { - -webkit-transform: rotate(1800deg); transform: rotate(1800deg); opacity: 0; }