From 5990aa7fb6608ab65f4da1246e5f10272964cc83 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Mon, 29 Jul 2019 21:07:31 +0100 Subject: [PATCH] Update gradient mixins from OOUI, add horizontal-gradient Change-Id: I31ab76ea938f29c3d39456f093268780a44c014e --- .../src/mediawiki.less/mediawiki.mixins.less | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less index 4684ea27cd..cce306151b 100644 --- a/resources/src/mediawiki.less/mediawiki.mixins.less +++ b/resources/src/mediawiki.less/mediawiki.mixins.less @@ -12,11 +12,20 @@ background-image: e( '/* @embed */' ) url( @url ); } -.vertical-gradient( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) { - background-color: @endColor; - background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+ - background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard +.horizontal-gradient( @startColor: #808080, @endColor: #fff, @startPos: 0, @endPos: 100% ) { + background-color: average( @startColor, @endColor ); + background-image: -webkit-gradient( linear, left top, right top, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); + background-image: -webkit-linear-gradient( left, @startColor @startPos, @endColor @endPos ); + background-image: -moz-linear-gradient( left, @startColor @startPos, @endColor @endPos ); + background-image: linear-gradient( to right, @startColor @startPos, @endColor @endPos ); +} + +.vertical-gradient( @startColor: #808080, @endColor: #fff, @startPos: 0, @endPos: 100% ) { + background-color: average( @startColor, @endColor ); + background-image: -webkit-gradient( linear, right top, right bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); + background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); + background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); + background-image: linear-gradient( to bottom, @startColor @startPos, @endColor @endPos ); } // SVG support using a transparent gradient to guarantee cross-browser -- 2.20.1