jenkins-bot has submitted this change and it was merged.
Change subject: Make the tools panel responsive
......................................................................
Make the tools panel responsive
On small screens, the tools panel is shown at the bottom.
Change-Id: I70b7238993f9017a79915e50a344d11c92d27969
---
M modules/base/styles/ext.cx.base.less
M modules/base/styles/grid/agora-grid.less
A modules/base/styles/grid/grid-core.less
A modules/base/styles/grid/grid-responsive.less
A modules/base/styles/grid/grid-settings.less
5 files changed, 489 insertions(+), 1,469 deletions(-)
Approvals:
Santhosh: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/base/styles/ext.cx.base.less
b/modules/base/styles/ext.cx.base.less
index aaa7fbc..32dcac0 100644
--- a/modules/base/styles/ext.cx.base.less
+++ b/modules/base/styles/ext.cx.base.less
@@ -27,7 +27,7 @@
.cx-widget__header {
.mw-ui-item;
.mw-ui-one-whole;
- .mw-ui-palm-one-whole;
+ .mw-ui-one-whole(@palm);
}
.cx-column__language-label {
@@ -42,17 +42,24 @@
.cx-column--source,
.cx-column--translation {
- .mw-ui-palm-one-half;
+ .mw-ui-one-half(@palm);
}
.cx-column--tools {
- .mw-ui-palm-one-whole;
+ .mw-ui-one-whole(@palm);
background: #f0f0f0;
min-height: 100vh;
position: relative;
&.sticky {
- .sticky;
+ .stick-to-side;
+ @media @palm {
+ .stick-to-bottom;
+ }
}
+ @media @palm {
+ .stick-to-bottom;
+ }
+
}
/* Unused? */
@@ -66,11 +73,27 @@
border: 1px solid #cccccc;
padding: 10px;
margin: 2px 0;
- .mw-ui-palm-one-half;
+ .mw-ui-one-half(@palm);
}
-.sticky {
+.stick-to-side() {
position: fixed;
top: 0;
right: 0;
-}
\ No newline at end of file
+}
+
+.stick-to-bottom() {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ left: 0;
+ box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.05);
+ max-height: 20%;
+ min-height: 3em;
+ overflow-x: hidden;
+ overflow-y: auto;
+ transition: max-height 0.25s;
+ &:hover {
+ max-height: 50%;
+ }
+}
diff --git a/modules/base/styles/grid/agora-grid.less
b/modules/base/styles/grid/agora-grid.less
index 20172a5..2c74233 100644
--- a/modules/base/styles/grid/agora-grid.less
+++ b/modules/base/styles/grid/agora-grid.less
@@ -1,1462 +1,3 @@
-//out:../agora-grid.css
-
-//GRID VARIABLES
-
-// this is the fixed gutter between columns
-@grid-gutter: 20px;
-
-//Breakpoints:
-@palm: ~"only screen and (max-width: 480px)";
-@lap: ~"only screen and (min-width: 481px) and (max-width: 1023px)";
-@portable: ~"only screen and (max-width: 1023px)";
-@desk: ~"only screen and (min-width: 1024px)";
-
-
-//GRID
-
-.mw-ui-grid {
- margin-left: auto;
- margin-right: auto;
- overflow: hidden;
- clear: both;
-}
-.mw-ui-item {
- float: left;
- padding-left: (@grid-gutter / 2);
- padding-right: (@grid-gutter / 2);
- width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.mw-ui-one-whole,
-.mw-ui-set-one-whole .mw-ui-item {
- width: 100%;
-}
-.mw-ui-one-half,
-.mw-ui-set-one-half .mw-ui-item {
- width: 50%;
-}
-.mw-ui-one-third,
-.mw-ui-set-one-third .mw-ui-item {
- width: 33.333%;
-}
-.mw-ui-two-thirds,
-.mw-ui-set-two-thirds .mw-ui-item {
- width: 66.666%;
-}
-.mw-ui-one-quarter,
-.mw-ui-set-one-quarter .mw-ui-item {
- width: 25%;
-}
-.mw-ui-two-quarters,
-.mw-ui-set-two-quarters .mw-ui-item {
- width: 50%;
-}
-.mw-ui-three-quarters,
-.mw-ui-set-three-quarters .mw-ui-item {
- width: 75%;
-}
-.mw-ui-one-fifth,
-.mw-ui-set-one-fifth .mw-ui-item {
- width: 20%;
-}
-.mw-ui-two-fifths,
-.mw-ui-set-two-fifths .mw-ui-item {
- width: 40%;
-}
-.mw-ui-three-fifths,
-.mw-ui-set-three-fifths .mw-ui-item {
- width: 60%;
-}
-.mw-ui-four-fifths,
-.mw-ui-set-four-fifths .mw-ui-item {
- width: 80%;
-}
-.mw-ui-one-sixth,
-.mw-ui-set-one-sixth .mw-ui-item {
- width: 16.666%;
-}
-.mw-ui-two-sixths,
-.mw-ui-set-two-sixths .mw-ui-item {
- width: 33.333%;
-}
-.mw-ui-three-sixths,
-.mw-ui-set-three-sixths .mw-ui-item {
- width: 50%;
-}
-.mw-ui-four-sixths,
-.mw-ui-set-four-sixths .mw-ui-item {
- width: 66.666%;
-}
-.mw-ui-five-sixths,
-.mw-ui-set-five-sixths .mw-ui-item {
- width: 83.333%;
-}
-.mw-ui-one-eighth,
-.mw-ui-set-one-eighth .mw-ui-item {
- width: 12.5%;
-}
-.mw-ui-two-eighths,
-.mw-ui-set-two-eighths .mw-ui-item {
- width: 25%;
-}
-.mw-ui-three-eighths,
-.mw-ui-set-three-eighths .mw-ui-item {
- width: 37.5%;
-}
-.mw-ui-four-eighths,
-.mw-ui-set-four-eighths .mw-ui-item {
- width: 50%;
-}
-.mw-ui-five-eighths,
-.mw-ui-set-five-eighths .mw-ui-item {
- width: 62.5%;
-}
-.mw-ui-six-eighths,
-.mw-ui-set-six-eighths .mw-ui-item {
- width: 75%;
-}
-.mw-ui-seven-eighths,
-.mw-ui-set-seven-eighths .mw-ui-item {
- width: 87.5%;
-}
-.mw-ui-one-tenth,
-.mw-ui-set-one-tenth .mw-ui-item {
- width: 10%;
-}
-.mw-ui-two-tenths,
-.mw-ui-set-two-tenths .mw-ui-item {
- width: 20%;
-}
-.mw-ui-three-tenths,
-.mw-ui-set-three-tenths .mw-ui-item {
- width: 30%;
-}
-.mw-ui-four-tenths,
-.mw-ui-set-four-tenths .mw-ui-item {
- width: 40%;
-}
-.mw-ui-five-tenths,
-.mw-ui-set-five-tenths .mw-ui-item {
- width: 50%;
-}
-.mw-ui-six-tenths,
-.mw-ui-set-six-tenths .mw-ui-item {
- width: 60%;
-}
-.mw-ui-seven-tenths,
-.mw-ui-set-seven-tenths .mw-ui-item {
- width: 70%;
-}
-.mw-ui-eight-tenths,
-.mw-ui-set-eight-tenths .mw-ui-item {
- width: 80%;
-}
-.mw-ui-nine-tenths,
-.mw-ui-set-nine-tenths .mw-ui-item {
- width: 90%;
-}
-.mw-ui-one-twelfth,
-.mw-ui-set-one-twelfth .mw-ui-item {
- width: 8.333%;
-}
-.mw-ui-two-twelfths,
-.mw-ui-set-two-twelfths .mw-ui-item {
- width: 16.666%;
-}
-.mw-ui-three-twelfths,
-.mw-ui-set-three-twelfths .mw-ui-item {
- width: 25%;
-}
-.mw-ui-four-twelfths,
-.mw-ui-set-four-twelfths .mw-ui-item {
- width: 33.333%;
-}
-.mw-ui-five-twelfths,
-.mw-ui-set-five-twelfths .mw-ui-item {
- width: 41.666%;
-}
-.mw-ui-six-twelfths,
-.mw-ui-set-six-twelfths .mw-ui-item {
- width: 50%;
-}
-.mw-ui-seven-twelfths,
-.mw-ui-set-seven-twelfths .mw-ui-item {
- width: 58.333%;
-}
-.mw-ui-eight-twelfths,
-.mw-ui-set-eight-twelfths .mw-ui-item {
- width: 66.666%;
-}
-.mw-ui-nine-twelfths,
-.mw-ui-set-nine-twelfths .mw-ui-item {
- width: 75%;
-}
-.mw-ui-ten-twelfths,
-.mw-ui-set-ten-twelfths .mw-ui-item {
- width: 83.333%;
-}
-.mw-ui-eleven-twelfths,
-.mw-ui-set-eleven-twelfths .mw-ui-item {
- width: 91.666%;
-}
-//RESPONSIVE SUPPORT:
-
-//Palm
-.mw-ui-palm-one-whole,
-.mw-ui-palm-set-one-whole .mw-ui-item {
- @media @palm{
- .mw-ui-one-whole;
- }
-}
-
-.mw-ui-palm-one-half,
-.mw-ui-palm-set-one-half .mw-ui-item {
- @media @palm{
- .mw-ui-one-half;
- }
-}
-
-.mw-ui-palm-one-third,
-.mw-ui-palm-set-one-third .mw-ui-item {
- @media @palm{
- .mw-ui-one-third;
- }
-}
-
-.mw-ui-palm-two-thirds,
-.mw-ui-palm-set-two-thirds .mw-ui-item {
- @media @palm{
- .mw-ui-two-thirds;
- }
-}
-
-.mw-ui-palm-one-quarter,
-.mw-ui-palm-set-one-quarter .mw-ui-item {
- @media @palm{
- .mw-ui-one-quarter;
- }
-}
-
-.mw-ui-palm-two-quarters,
-.mw-ui-palm-set-two-quarters .mw-ui-item {
- @media @palm{
- .mw-ui-two-quarters;
- }
-}
-
-.mw-ui-palm-three-quarters,
-.mw-ui-palm-set-three-quarters .mw-ui-item {
- @media @palm{
- .mw-ui-three-quarters;
- }
-}
-
-.mw-ui-palm-one-fifth,
-.mw-ui-palm-set-one-fifth .mw-ui-item {
- @media @palm{
- .mw-ui-one-fifth;
- }
-}
-
-.mw-ui-palm-two-fifths,
-.mw-ui-palm-set-two-fifths .mw-ui-item {
- @media @palm{
- .mw-ui-two-fifths;
- }
-}
-
-.mw-ui-palm-three-fifths,
-.mw-ui-palm-set-three-fifths .mw-ui-item {
- @media @palm{
- .mw-ui-three-fifths;
- }
-}
-
-.mw-ui-palm-four-fifths,
-.mw-ui-palm-set-four-fifths .mw-ui-item {
- @media @palm{
- .mw-ui-four-fifths;
- }
-}
-
-.mw-ui-palm-one-sixth,
-.mw-ui-palm-set-one-sixth .mw-ui-item {
- @media @palm{
- .mw-ui-one-sixth;
- }
-}
-
-.mw-ui-palm-two-sixths,
-.mw-ui-palm-set-two-sixths .mw-ui-item {
- @media @palm{
- .mw-ui-two-sixths;
- }
-}
-
-.mw-ui-palm-three-sixths,
-.mw-ui-palm-set-three-sixths .mw-ui-item {
- @media @palm{
- .mw-ui-three-sixths;
- }
-}
-
-.mw-ui-palm-four-sixths,
-.mw-ui-palm-set-four-sixths .mw-ui-item {
- @media @palm{
- .mw-ui-four-sixths;
- }
-}
-
-.mw-ui-palm-five-sixths,
-.mw-ui-palm-set-five-sixths .mw-ui-item {
- @media @palm{
- .mw-ui-five-sixths;
- }
-}
-
-.mw-ui-palm-one-eighth,
-.mw-ui-palm-set-one-eighth .mw-ui-item {
- @media @palm{
- .mw-ui-one-eighth;
- }
-}
-
-.mw-ui-palm-two-eighths,
-.mw-ui-palm-set-two-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-two-eighths;
- }
-}
-
-.mw-ui-palm-three-eighths,
-.mw-ui-palm-set-three-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-three-eighths;
- }
-}
-
-.mw-ui-palm-four-eighths,
-.mw-ui-palm-set-four-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-four-eighths;
- }
-}
-
-.mw-ui-palm-five-eighths,
-.mw-ui-palm-set-five-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-five-eighths;
- }
-}
-
-.mw-ui-palm-six-eighths,
-.mw-ui-palm-set-six-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-six-eighths;
- }
-}
-
-.mw-ui-palm-seven-eighths,
-.mw-ui-palm-set-seven-eighths .mw-ui-item {
- @media @palm{
- .mw-ui-seven-eighths;
- }
-}
-
-.mw-ui-palm-one-tenth,
-.mw-ui-palm-set-one-tenth .mw-ui-item {
- @media @palm{
- .mw-ui-one-tenth;
- }
-}
-
-.mw-ui-palm-two-tenths,
-.mw-ui-palm-set-two-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-two-tenths;
- }
-}
-
-.mw-ui-palm-three-tenths,
-.mw-ui-palm-set-three-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-three-tenths;
- }
-}
-
-.mw-ui-palm-four-tenths,
-.mw-ui-palm-set-four-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-four-tenths;
- }
-}
-
-.mw-ui-palm-five-tenths,
-.mw-ui-palm-set-five-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-five-tenths;
- }
-}
-
-.mw-ui-palm-six-tenths,
-.mw-ui-palm-set-six-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-six-tenths;
- }
-}
-
-.mw-ui-palm-seven-tenths,
-.mw-ui-palm-set-seven-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-seven-tenths;
- }
-}
-
-.mw-ui-palm-eight-tenths,
-.mw-ui-palm-set-eight-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-eight-tenths;
- }
-}
-
-.mw-ui-palm-nine-tenths,
-.mw-ui-palm-set-nine-tenths .mw-ui-item {
- @media @palm{
- .mw-ui-nine-tenths;
- }
-}
-
-.mw-ui-palm-one-twelfth,
-.mw-ui-palm-set-one-twelfth .mw-ui-item {
- @media @palm{
- .mw-ui-one-twelfth;
- }
-}
-
-.mw-ui-palm-two-twelfths,
-.mw-ui-palm-set-two-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-two-twelfths;
- }
-}
-
-.mw-ui-palm-three-twelfths,
-.mw-ui-palm-set-three-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-three-twelfths;
- }
-}
-
-.mw-ui-palm-four-twelfths,
-.mw-ui-palm-set-four-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-four-twelfths;
- }
-}
-
-.mw-ui-palm-five-twelfths,
-.mw-ui-palm-set-five-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-five-twelfths;
- }
-}
-
-.mw-ui-palm-six-twelfths,
-.mw-ui-palm-set-six-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-six-twelfths;
- }
-}
-
-.mw-ui-palm-seven-twelfths,
-.mw-ui-palm-set-seven-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-seven-twelfths;
- }
-}
-
-.mw-ui-palm-eight-twelfths,
-.mw-ui-palm-set-eight-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-eight-twelfths;
- }
-}
-
-.mw-ui-palm-nine-twelfths,
-.mw-ui-palm-set-nine-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-nine-twelfths;
- }
-}
-
-.mw-ui-palm-ten-twelfths,
-.mw-ui-palm-set-ten-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-ten-twelfths;
- }
-}
-
-.mw-ui-palm-eleven-twelfths,
-.mw-ui-palm-set-eleven-twelfths .mw-ui-item {
- @media @palm{
- .mw-ui-eleven-twelfths;
- }
-}
-
-.mw-ui-palm-hidden {
- @media @palm{
- display: none !important;
- }
-}
-
-.mw-ui-palm-visible {
- @media @palm{
- display: block ;
- }
-}
-
-//Lap:
-.mw-ui-lap-one-whole,
-.mw-ui-lap-set-one-whole .mw-ui-item {
- @media @lap{
- .mw-ui-one-whole;
- }
-}
-
-.mw-ui-lap-one-half,
-.mw-ui-lap-set-one-half .mw-ui-item {
- @media @lap{
- .mw-ui-one-half;
- }
-}
-
-.mw-ui-lap-one-third,
-.mw-ui-lap-set-one-third .mw-ui-item {
- @media @lap{
- .mw-ui-one-third;
- }
-}
-
-.mw-ui-lap-two-thirds,
-.mw-ui-lap-set-two-thirds .mw-ui-item {
- @media @lap{
- .mw-ui-two-thirds;
- }
-}
-
-.mw-ui-lap-one-quarter,
-.mw-ui-lap-set-one-quarter .mw-ui-item {
- @media @lap{
- .mw-ui-one-quarter;
- }
-}
-
-.mw-ui-lap-two-quarters,
-.mw-ui-lap-set-two-quarters .mw-ui-item {
- @media @lap{
- .mw-ui-two-quarters;
- }
-}
-
-.mw-ui-lap-three-quarters,
-.mw-ui-lap-set-three-quarters .mw-ui-item {
- @media @lap{
- .mw-ui-three-quarters;
- }
-}
-
-.mw-ui-lap-one-fifth,
-.mw-ui-lap-set-one-fifth .mw-ui-item {
- @media @lap{
- .mw-ui-one-fifth;
- }
-}
-
-.mw-ui-lap-two-fifths,
-.mw-ui-lap-set-two-fifths .mw-ui-item {
- @media @lap{
- .mw-ui-two-fifths;
- }
-}
-
-.mw-ui-lap-three-fifths,
-.mw-ui-lap-set-three-fifths .mw-ui-item {
- @media @lap{
- .mw-ui-three-fifths;
- }
-}
-
-.mw-ui-lap-four-fifths,
-.mw-ui-lap-set-four-fifths .mw-ui-item {
- @media @lap{
- .mw-ui-four-fifths;
- }
-}
-
-.mw-ui-lap-one-sixth,
-.mw-ui-lap-set-one-sixth .mw-ui-item {
- @media @lap{
- .mw-ui-one-sixth;
- }
-}
-
-.mw-ui-lap-two-sixths,
-.mw-ui-lap-set-two-sixths .mw-ui-item {
- @media @lap{
- .mw-ui-two-sixths;
- }
-}
-
-.mw-ui-lap-three-sixths,
-.mw-ui-lap-set-three-sixths .mw-ui-item {
- @media @lap{
- .mw-ui-three-sixths;
- }
-}
-
-.mw-ui-lap-four-sixths,
-.mw-ui-lap-set-four-sixths .mw-ui-item {
- @media @lap{
- .mw-ui-four-sixths;
- }
-}
-
-.mw-ui-lap-five-sixths,
-.mw-ui-lap-set-five-sixths .mw-ui-item {
- @media @lap{
- .mw-ui-five-sixths;
- }
-}
-
-.mw-ui-lap-one-eighth,
-.mw-ui-lap-set-one-eighth .mw-ui-item {
- @media @lap{
- .mw-ui-one-eighth;
- }
-}
-
-.mw-ui-lap-two-eighths,
-.mw-ui-lap-set-two-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-two-eighths;
- }
-}
-
-.mw-ui-lap-three-eighths,
-.mw-ui-lap-set-three-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-three-eighths;
- }
-}
-
-.mw-ui-lap-four-eighths,
-.mw-ui-lap-set-four-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-four-eighths;
- }
-}
-
-.mw-ui-lap-five-eighths,
-.mw-ui-lap-set-five-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-five-eighths;
- }
-}
-
-.mw-ui-lap-six-eighths,
-.mw-ui-lap-set-six-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-six-eighths;
- }
-}
-
-.mw-ui-lap-seven-eighths,
-.mw-ui-lap-set-seven-eighths .mw-ui-item {
- @media @lap{
- .mw-ui-seven-eighths;
- }
-}
-
-.mw-ui-lap-one-tenth,
-.mw-ui-lap-set-one-tenth .mw-ui-item {
- @media @lap{
- .mw-ui-one-tenth;
- }
-}
-
-.mw-ui-lap-two-tenths,
-.mw-ui-lap-set-two-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-two-tenths;
- }
-}
-
-.mw-ui-lap-three-tenths,
-.mw-ui-lap-set-three-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-three-tenths;
- }
-}
-
-.mw-ui-lap-four-tenths,
-.mw-ui-lap-set-four-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-four-tenths;
- }
-}
-
-.mw-ui-lap-five-tenths,
-.mw-ui-lap-set-five-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-five-tenths;
- }
-}
-
-.mw-ui-lap-six-tenths,
-.mw-ui-lap-set-six-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-six-tenths;
- }
-}
-
-.mw-ui-lap-seven-tenths,
-.mw-ui-lap-set-seven-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-seven-tenths;
- }
-}
-
-.mw-ui-lap-eight-tenths,
-.mw-ui-lap-set-eight-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-eight-tenths;
- }
-}
-
-.mw-ui-lap-nine-tenths,
-.mw-ui-lap-set-nine-tenths .mw-ui-item {
- @media @lap{
- .mw-ui-nine-tenths;
- }
-}
-
-.mw-ui-lap-one-twelfth,
-.mw-ui-lap-set-one-twelfth .mw-ui-item {
- @media @lap{
- .mw-ui-one-twelfth;
- }
-}
-
-.mw-ui-lap-two-twelfths,
-.mw-ui-lap-set-two-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-two-twelfths;
- }
-}
-
-.mw-ui-lap-three-twelfths,
-.mw-ui-lap-set-three-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-three-twelfths;
- }
-}
-
-.mw-ui-lap-four-twelfths,
-.mw-ui-lap-set-four-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-four-twelfths;
- }
-}
-
-.mw-ui-lap-five-twelfths,
-.mw-ui-lap-set-five-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-five-twelfths;
- }
-}
-
-.mw-ui-lap-six-twelfths,
-.mw-ui-lap-set-six-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-six-twelfths;
- }
-}
-
-.mw-ui-lap-seven-twelfths,
-.mw-ui-lap-set-seven-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-seven-twelfths;
- }
-}
-
-.mw-ui-lap-eight-twelfths,
-.mw-ui-lap-set-eight-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-eight-twelfths;
- }
-}
-
-.mw-ui-lap-nine-twelfths,
-.mw-ui-lap-set-nine-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-nine-twelfths;
- }
-}
-
-.mw-ui-lap-ten-twelfths,
-.mw-ui-lap-set-ten-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-ten-twelfths;
- }
-}
-
-.mw-ui-lap-eleven-twelfths,
-.mw-ui-lap-set-eleven-twelfths .mw-ui-item {
- @media @lap{
- .mw-ui-eleven-twelfths;
- }
-}
-
-.mw-ui-lap-hidden {
- @media @lap{
- display: none !important;
- }
-}
-
-.mw-ui-lap-visible {
- @media @lap{
- display: block ;
- }
-}
-
-//Portable:
-
-.mw-ui-portable-one-whole,
-.mw-ui-portable-set-one-whole .mw-ui-item {
- @media @portable{
- .mw-ui-one-whole;
- }
-}
-
-.mw-ui-portable-one-half,
-.mw-ui-portable-set-one-half .mw-ui-item {
- @media @portable{
- .mw-ui-one-half;
- }
-}
-
-.mw-ui-portable-one-third,
-.mw-ui-portable-set-one-third .mw-ui-item {
- @media @portable{
- .mw-ui-one-third;
- }
-}
-
-.mw-ui-portable-two-thirds,
-.mw-ui-portable-set-two-thirds .mw-ui-item {
- @media @portable{
- .mw-ui-two-thirds;
- }
-}
-
-.mw-ui-portable-one-quarter,
-.mw-ui-portable-set-one-quarter .mw-ui-item {
- @media @portable{
- .mw-ui-one-quarter;
- }
-}
-
-.mw-ui-portable-two-quarters,
-.mw-ui-portable-set-two-quarters .mw-ui-item {
- @media @portable{
- .mw-ui-two-quarters;
- }
-}
-
-.mw-ui-portable-three-quarters,
-.mw-ui-portable-set-three-quarters .mw-ui-item {
- @media @portable{
- .mw-ui-three-quarters;
- }
-}
-
-.mw-ui-portable-one-fifth,
-.mw-ui-portable-set-one-fifth .mw-ui-item {
- @media @portable{
- .mw-ui-one-fifth;
- }
-}
-
-.mw-ui-portable-two-fifths,
-.mw-ui-portable-set-two-fifths .mw-ui-item {
- @media @portable{
- .mw-ui-two-fifths;
- }
-}
-
-.mw-ui-portable-three-fifths,
-.mw-ui-portable-set-three-fifths .mw-ui-item {
- @media @portable{
- .mw-ui-three-fifths;
- }
-}
-
-.mw-ui-portable-four-fifths,
-.mw-ui-portable-set-four-fifths .mw-ui-item {
- @media @portable{
- .mw-ui-four-fifths;
- }
-}
-
-.mw-ui-portable-one-sixth,
-.mw-ui-portable-set-one-sixth .mw-ui-item {
- @media @portable{
- .mw-ui-one-sixth;
- }
-}
-
-.mw-ui-portable-two-sixths,
-.mw-ui-portable-set-two-sixths .mw-ui-item {
- @media @portable{
- .mw-ui-two-sixths;
- }
-}
-
-.mw-ui-portable-three-sixths,
-.mw-ui-portable-set-three-sixths .mw-ui-item {
- @media @portable{
- .mw-ui-three-sixths;
- }
-}
-
-.mw-ui-portable-four-sixths,
-.mw-ui-portable-set-four-sixths .mw-ui-item {
- @media @portable{
- .mw-ui-four-sixths;
- }
-}
-
-.mw-ui-portable-five-sixths,
-.mw-ui-portable-set-five-sixths .mw-ui-item {
- @media @portable{
- .mw-ui-five-sixths;
- }
-}
-
-.mw-ui-portable-one-eighth,
-.mw-ui-portable-set-one-eighth .mw-ui-item {
- @media @portable{
- .mw-ui-one-eighth;
- }
-}
-
-.mw-ui-portable-two-eighths,
-.mw-ui-portable-set-two-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-two-eighths;
- }
-}
-
-.mw-ui-portable-three-eighths,
-.mw-ui-portable-set-three-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-three-eighths;
- }
-}
-
-.mw-ui-portable-four-eighths,
-.mw-ui-portable-set-four-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-four-eighths;
- }
-}
-
-.mw-ui-portable-five-eighths,
-.mw-ui-portable-set-five-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-five-eighths;
- }
-}
-
-.mw-ui-portable-six-eighths,
-.mw-ui-portable-set-six-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-six-eighths;
- }
-}
-
-.mw-ui-portable-seven-eighths,
-.mw-ui-portable-set-seven-eighths .mw-ui-item {
- @media @portable{
- .mw-ui-seven-eighths;
- }
-}
-
-.mw-ui-portable-one-tenth,
-.mw-ui-portable-set-one-tenth .mw-ui-item {
- @media @portable{
- .mw-ui-one-tenth;
- }
-}
-
-.mw-ui-portable-two-tenths,
-.mw-ui-portable-set-two-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-two-tenths;
- }
-}
-
-.mw-ui-portable-three-tenths,
-.mw-ui-portable-set-three-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-three-tenths;
- }
-}
-
-.mw-ui-portable-four-tenths,
-.mw-ui-portable-set-four-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-four-tenths;
- }
-}
-
-.mw-ui-portable-five-tenths,
-.mw-ui-portable-set-five-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-five-tenths;
- }
-}
-
-.mw-ui-portable-six-tenths,
-.mw-ui-portable-set-six-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-six-tenths;
- }
-}
-
-.mw-ui-portable-seven-tenths,
-.mw-ui-portable-set-seven-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-seven-tenths;
- }
-}
-
-.mw-ui-portable-eight-tenths,
-.mw-ui-portable-set-eight-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-eight-tenths;
- }
-}
-
-.mw-ui-portable-nine-tenths,
-.mw-ui-portable-set-nine-tenths .mw-ui-item {
- @media @portable{
- .mw-ui-nine-tenths;
- }
-}
-
-.mw-ui-portable-one-twelfth,
-.mw-ui-portable-set-one-twelfth .mw-ui-item {
- @media @portable{
- .mw-ui-one-twelfth;
- }
-}
-
-.mw-ui-portable-two-twelfths,
-.mw-ui-portable-set-two-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-two-twelfths;
- }
-}
-
-.mw-ui-portable-three-twelfths,
-.mw-ui-portable-set-three-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-three-twelfths;
- }
-}
-
-.mw-ui-portable-four-twelfths,
-.mw-ui-portable-set-four-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-four-twelfths;
- }
-}
-
-.mw-ui-portable-five-twelfths,
-.mw-ui-portable-set-five-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-five-twelfths;
- }
-}
-
-.mw-ui-portable-six-twelfths,
-.mw-ui-portable-set-six-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-six-twelfths;
- }
-}
-
-.mw-ui-portable-seven-twelfths,
-.mw-ui-portable-set-seven-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-seven-twelfths;
- }
-}
-
-.mw-ui-portable-eight-twelfths,
-.mw-ui-portable-set-eight-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-eight-twelfths;
- }
-}
-
-.mw-ui-portable-nine-twelfths,
-.mw-ui-portable-set-nine-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-nine-twelfths;
- }
-}
-
-.mw-ui-portable-ten-twelfths,
-.mw-ui-portable-set-ten-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-ten-twelfths;
- }
-}
-
-.mw-ui-portable-eleven-twelfths,
-.mw-ui-portable-set-eleven-twelfths .mw-ui-item {
- @media @portable{
- .mw-ui-eleven-twelfths;
- }
-}
-
-.mw-ui-portable-hidden {
- @media @portable{
- display: none !important;
- }
-}
-
-.mw-ui-portable-visible {
- @media @portable{
- display: block ;
- }
-}
-
-//Desk
-.mw-ui-desk-one-whole,
-.mw-ui-desk-set-one-whole .mw-ui-item {
- @media @desk{
- .mw-ui-one-whole;
- }
-}
-
-.mw-ui-desk-one-half,
-.mw-ui-desk-set-one-half .mw-ui-item {
- @media @desk{
- .mw-ui-one-half;
- }
-}
-
-.mw-ui-desk-one-third,
-.mw-ui-desk-set-one-third .mw-ui-item {
- @media @desk{
- .mw-ui-one-third;
- }
-}
-
-.mw-ui-desk-two-thirds,
-.mw-ui-desk-set-two-thirds .mw-ui-item {
- @media @desk{
- .mw-ui-two-thirds;
- }
-}
-
-.mw-ui-desk-one-quarter,
-.mw-ui-desk-set-one-quarter .mw-ui-item {
- @media @desk{
- .mw-ui-one-quarter;
- }
-}
-
-.mw-ui-desk-two-quarters,
-.mw-ui-desk-set-two-quarters .mw-ui-item {
- @media @desk{
- .mw-ui-two-quarters;
- }
-}
-
-.mw-ui-desk-three-quarters,
-.mw-ui-desk-set-three-quarters .mw-ui-item {
- @media @desk{
- .mw-ui-three-quarters;
- }
-}
-
-.mw-ui-desk-one-fifth,
-.mw-ui-desk-set-one-fifth .mw-ui-item {
- @media @desk{
- .mw-ui-one-fifth;
- }
-}
-
-.mw-ui-desk-two-fifths,
-.mw-ui-desk-set-two-fifths .mw-ui-item {
- @media @desk{
- .mw-ui-two-fifths;
- }
-}
-
-.mw-ui-desk-three-fifths,
-.mw-ui-desk-set-three-fifths .mw-ui-item {
- @media @desk{
- .mw-ui-three-fifths;
- }
-}
-
-.mw-ui-desk-four-fifths,
-.mw-ui-desk-set-four-fifths .mw-ui-item {
- @media @desk{
- .mw-ui-four-fifths;
- }
-}
-
-.mw-ui-desk-one-sixth,
-.mw-ui-desk-set-one-sixth .mw-ui-item {
- @media @desk{
- .mw-ui-one-sixth;
- }
-}
-
-.mw-ui-desk-two-sixths,
-.mw-ui-desk-set-two-sixths .mw-ui-item {
- @media @desk{
- .mw-ui-two-sixths;
- }
-}
-
-.mw-ui-desk-three-sixths,
-.mw-ui-desk-set-three-sixths .mw-ui-item {
- @media @desk{
- .mw-ui-three-sixths;
- }
-}
-
-.mw-ui-desk-four-sixths,
-.mw-ui-desk-set-four-sixths .mw-ui-item {
- @media @desk{
- .mw-ui-four-sixths;
- }
-}
-
-.mw-ui-desk-five-sixths,
-.mw-ui-desk-set-five-sixths .mw-ui-item {
- @media @desk{
- .mw-ui-five-sixths;
- }
-}
-
-.mw-ui-desk-one-eighth,
-.mw-ui-desk-set-one-eighth .mw-ui-item {
- @media @desk{
- .mw-ui-one-eighth;
- }
-}
-
-.mw-ui-desk-two-eighths,
-.mw-ui-desk-set-two-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-two-eighths;
- }
-}
-
-.mw-ui-desk-three-eighths,
-.mw-ui-desk-set-three-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-three-eighths;
- }
-}
-
-.mw-ui-desk-four-eighths,
-.mw-ui-desk-set-four-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-four-eighths;
- }
-}
-
-.mw-ui-desk-five-eighths,
-.mw-ui-desk-set-five-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-five-eighths;
- }
-}
-
-.mw-ui-desk-six-eighths,
-.mw-ui-desk-set-six-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-six-eighths;
- }
-}
-
-.mw-ui-desk-seven-eighths,
-.mw-ui-desk-set-seven-eighths .mw-ui-item {
- @media @desk{
- .mw-ui-seven-eighths;
- }
-}
-
-.mw-ui-desk-one-tenth,
-.mw-ui-desk-set-one-tenth .mw-ui-item {
- @media @desk{
- .mw-ui-one-tenth;
- }
-}
-
-.mw-ui-desk-two-tenths,
-.mw-ui-desk-set-two-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-two-tenths;
- }
-}
-
-.mw-ui-desk-three-tenths,
-.mw-ui-desk-set-three-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-three-tenths;
- }
-}
-
-.mw-ui-desk-four-tenths,
-.mw-ui-desk-set-four-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-four-tenths;
- }
-}
-
-.mw-ui-desk-five-tenths,
-.mw-ui-desk-set-five-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-five-tenths;
- }
-}
-
-.mw-ui-desk-six-tenths,
-.mw-ui-desk-set-six-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-six-tenths;
- }
-}
-
-.mw-ui-desk-seven-tenths,
-.mw-ui-desk-set-seven-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-seven-tenths;
- }
-}
-
-.mw-ui-desk-eight-tenths,
-.mw-ui-desk-set-eight-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-eight-tenths;
- }
-}
-
-.mw-ui-desk-nine-tenths,
-.mw-ui-desk-set-nine-tenths .mw-ui-item {
- @media @desk{
- .mw-ui-nine-tenths;
- }
-}
-
-.mw-ui-desk-one-twelfth,
-.mw-ui-desk-set-one-twelfth .mw-ui-item {
- @media @desk{
- .mw-ui-one-twelfth;
- }
-}
-
-.mw-ui-desk-two-twelfths,
-.mw-ui-desk-set-two-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-two-twelfths;
- }
-}
-
-.mw-ui-desk-three-twelfths,
-.mw-ui-desk-set-three-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-three-twelfths;
- }
-}
-
-.mw-ui-desk-four-twelfths,
-.mw-ui-desk-set-four-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-four-twelfths;
- }
-}
-
-.mw-ui-desk-five-twelfths,
-.mw-ui-desk-set-five-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-five-twelfths;
- }
-}
-
-.mw-ui-desk-six-twelfths,
-.mw-ui-desk-set-six-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-six-twelfths;
- }
-}
-
-.mw-ui-desk-seven-twelfths,
-.mw-ui-desk-set-seven-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-seven-twelfths;
- }
-}
-
-.mw-ui-desk-eight-twelfths,
-.mw-ui-desk-set-eight-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-eight-twelfths;
- }
-}
-
-.mw-ui-desk-nine-twelfths,
-.mw-ui-desk-set-nine-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-nine-twelfths;
- }
-}
-
-.mw-ui-desk-ten-twelfths,
-.mw-ui-desk-set-ten-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-ten-twelfths;
- }
-}
-
-.mw-ui-desk-eleven-twelfths,
-.mw-ui-desk-set-eleven-twelfths .mw-ui-item {
- @media @desk{
- .mw-ui-eleven-twelfths;
- }
-}
-
-.mw-ui-desk-hidden {
- @media @desk{
- display: none !important;
- }
-}
-
-.mw-ui-desk-visible {
- @media @desk{
- display: block ;
- }
-}
\ No newline at end of file
+@import "grid-settings";
+@import "grid-core";
+@import "grid-responsive";
diff --git a/modules/base/styles/grid/grid-core.less
b/modules/base/styles/grid/grid-core.less
new file mode 100644
index 0000000..d74cf66
--- /dev/null
+++ b/modules/base/styles/grid/grid-core.less
@@ -0,0 +1,210 @@
+@import "grid-settings";
+
+// Grid - core
+//
+// Mixins to indicate that an element should behave as a gid (.mw-ui-grid) or
a grid item (.mw-ui-item)
+// and a serie of proportional mixins with predefined widths (e.g.,
.mw-ui-tho-thirds) and visibility (.mw-ui-hidden).
+//
+
+.mw-ui-grid() {
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+ clear: both;
+ }
+
+.mw-ui-item(@gutter:@grid-gutter) {
+ float: left;
+ .mw-ui-gutter(@gutter / 2);
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ &.mw-ui-right {
+ float: right;
+ }
+}
+
+.mw-ui-gutter(@gutter){
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+}
+
+//Proportions
+.mw-ui-one-whole(){
+ .mw-ui-item;
+ width: 100%;
+}
+.mw-ui-one-half(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-one-third(){
+ .mw-ui-item;
+ width: 33.333%;
+}
+.mw-ui-two-thirds(){
+ .mw-ui-item;
+ width: 66.666%;
+}
+.mw-ui-one-quarter(){
+ .mw-ui-item;
+ width: 25%;
+}
+.mw-ui-two-quarters(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-three-quarters(){
+ .mw-ui-item;
+ width: 75%;
+}
+.mw-ui-one-fifth(){
+ .mw-ui-item;
+ width: 20%;
+}
+.mw-ui-two-fifths(){
+ .mw-ui-item;
+ width: 40%;
+}
+.mw-ui-three-fifths(){
+ .mw-ui-item;
+ width: 60%;
+}
+.mw-ui-four-fifths(){
+ .mw-ui-item;
+ width: 80%;
+}
+.mw-ui-one-sixth(){
+ .mw-ui-item;
+ width: 16.666%;
+}
+.mw-ui-two-sixths(){
+ .mw-ui-item;
+ width: 33.333%;
+}
+.mw-ui-three-sixths(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-four-sixths(){
+ .mw-ui-item;
+ width: 66.666%;
+}
+.mw-ui-five-sixths(){
+ .mw-ui-item;
+ width: 83.333%;
+}
+.mw-ui-one-eighth(){
+ .mw-ui-item;
+ width: 12.5%;
+}
+.mw-ui-two-eighths(){
+ .mw-ui-item;
+ width: 25%;
+}
+.mw-ui-three-eighths(){
+ .mw-ui-item;
+ width: 37.5%;
+}
+.mw-ui-four-eighths(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-five-eighths(){
+ .mw-ui-item;
+ width: 62.5%;
+}
+.mw-ui-six-eighths(){
+ .mw-ui-item;
+ width: 75%;
+}
+.mw-ui-seven-eighths(){
+ .mw-ui-item;
+ width: 87.5%;
+}
+.mw-ui-one-tenth(){
+ .mw-ui-item;
+ width: 10%;
+}
+.mw-ui-two-tenths(){
+ .mw-ui-item;
+ width: 20%;
+}
+.mw-ui-three-tenths(){
+ .mw-ui-item;
+ width: 30%;
+}
+.mw-ui-four-tenths(){
+ .mw-ui-item;
+ width: 40%;
+}
+.mw-ui-five-tenths(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-six-tenths(){
+ .mw-ui-item;
+ width: 60%;
+}
+.mw-ui-seven-tenths(){
+ .mw-ui-item;
+ width: 70%;
+}
+.mw-ui-eight-tenths(){
+ .mw-ui-item;
+ width: 80%;
+}
+.mw-ui-nine-tenths(){
+ .mw-ui-item;
+ width: 90%;
+}
+.mw-ui-one-twelfth(){
+ .mw-ui-item;
+ width: 8.333%;
+}
+.mw-ui-two-twelfths(){
+ .mw-ui-item;
+ width: 16.666%;
+}
+.mw-ui-three-twelfths(){
+ .mw-ui-item;
+ width: 25%;
+}
+.mw-ui-four-twelfths(){
+ .mw-ui-item;
+ width: 33.333%;
+}
+.mw-ui-five-twelfths(){
+ .mw-ui-item;
+ width: 41.666%;
+}
+.mw-ui-six-twelfths(){
+ .mw-ui-item;
+ width: 50%;
+}
+.mw-ui-seven-twelfths(){
+ .mw-ui-item;
+ width: 58.333%;
+}
+.mw-ui-eight-twelfths(){
+ .mw-ui-item;
+ width: 66.666%;
+}
+.mw-ui-nine-twelfths(){
+ .mw-ui-item;
+ width: 75%;
+}
+.mw-ui-ten-twelfths(){
+ .mw-ui-item;
+ width: 83.333%;
+}
+.mw-ui-eleven-twelfths(){
+ .mw-ui-item;
+ width: 91.666%;
+}
+
+//Visibility
+.mw-ui-hidden(){
+ display: none;
+}
diff --git a/modules/base/styles/grid/grid-responsive.less
b/modules/base/styles/grid/grid-responsive.less
new file mode 100644
index 0000000..e4c2791
--- /dev/null
+++ b/modules/base/styles/grid/grid-responsive.less
@@ -0,0 +1,236 @@
+@import "grid-core";
+
+// Grid - responsive
+//
+// Mixins to facilitate the specification of responsive layouts.
+// Mixins are analogous to those of grid-core but allow for a parameter that
will be used
+// as the breakpoint for which the mixin is applied.
+//
+
+//Proportions
+.mw-ui-one-whole(@medium){
+ @media @medium {
+ .mw-ui-one-whole;
+ }
+}
+.mw-ui-one-half(@medium){
+ @media @medium {
+ .mw-ui-one-half;
+ }
+}
+.mw-ui-one-third(@medium){
+ @media @medium {
+ .mw-ui-one-third;
+ }
+}
+.mw-ui-two-thirds(@medium){
+ @media @medium {
+ .mw-ui-two-thirds;
+ }
+}
+.mw-ui-one-quarter(@medium){
+ @media @medium {
+ .mw-ui-one-quarter;
+ }
+}
+.mw-ui-two-quarters(@medium){
+ @media @medium {
+ .mw-ui-two-quarters;
+ }
+}
+.mw-ui-three-quarters(@medium){
+ @media @medium {
+ .mw-ui-three-quarters;
+ }
+ .mw-ui-three-quarters(@rest)
+}
+.mw-ui-one-fifth(@medium){
+ @media @medium {
+ .mw-ui-one-fifth;
+ }
+}
+.mw-ui-two-fifths(@medium){
+ @media @medium {
+ .mw-ui-two-fifths;
+ }
+}
+.mw-ui-three-fifths(@medium){
+ @media @medium {
+ .mw-ui-three-fifths;
+ }
+}
+.mw-ui-four-fifths(@medium){
+ @media @medium {
+ .mw-ui-four-fifths;
+ }
+}
+.mw-ui-one-sixth(@medium){
+ @media @medium {
+ .mw-ui-one-sixth;
+ }
+}
+.mw-ui-two-sixths(@medium){
+ @media @medium {
+ .mw-ui-two-sixths;
+ }
+}
+.mw-ui-three-sixths(@medium){
+ @media @medium {
+ .mw-ui-three-sixths;
+ }
+}
+.mw-ui-four-sixths(@medium){
+ @media @medium {
+ .mw-ui-four-sixths;
+ }
+}
+.mw-ui-five-sixths(@medium){
+ @media @medium {
+ .mw-ui-five-sixths;
+ }
+ .mw-ui-five-sixths(@rest)
+}
+.mw-ui-one-eighth(@medium){
+ @media @medium {
+ .mw-ui-one-eighth;
+ }
+ .mw-ui-one-eighth(@rest)
+}
+.mw-ui-two-eighths(@medium){
+ @media @medium {
+ .mw-ui-two-eighths;
+ }
+ .mw-ui-two-eighths(@rest)
+}
+.mw-ui-three-eighths(@medium){
+ @media @medium {
+ .mw-ui-three-eighths;
+ }
+}
+.mw-ui-four-eighths(@medium){
+ @media @medium {
+ .mw-ui-four-eighths;
+ }
+}
+.mw-ui-five-eighths(@medium){
+ @media @medium {
+ .mw-ui-five-eighths;
+ }
+}
+.mw-ui-six-eighths(@medium){
+ @media @medium {
+ .mw-ui-six-eighths;
+ }
+}
+.mw-ui-seven-eighths(@medium){
+ @media @medium {
+ .mw-ui-seven-eighths;
+ }
+}
+.mw-ui-one-tenth(@medium){
+ @media @medium {
+ .mw-ui-one-tenth;
+ }
+}
+.mw-ui-two-tenths(@medium){
+ @media @medium {
+ .mw-ui-two-tenths;
+ }
+}
+.mw-ui-three-tenths(@medium){
+ @media @medium {
+ .mw-ui-three-tenths;
+ }
+}
+.mw-ui-four-tenths(@medium){
+ @media @medium {
+ .mw-ui-four-tenths;
+ }
+}
+.mw-ui-five-tenths(@medium){
+ @media @medium {
+ .mw-ui-five-tenths;
+ }
+}
+.mw-ui-six-tenths(@medium){
+ @media @medium {
+ .mw-ui-six-tenths;
+ }
+}
+.mw-ui-seven-tenths(@medium){
+ @media @medium {
+ .mw-ui-seven-tenths;
+ }
+}
+.mw-ui-eight-tenths(@medium){
+ @media @medium {
+ .mw-ui-eight-tenths;
+ }
+}
+.mw-ui-nine-tenths(@medium){
+ @media @medium {
+ .mw-ui-nine-tenths;
+ }
+}
+.mw-ui-one-twelfth(@medium){
+ @media @medium {
+ .mw-ui-one-twelfth;
+ }
+}
+.mw-ui-two-twelfths(@medium){
+ @media @medium {
+ .mw-ui-two-twelfths;
+ }
+}
+.mw-ui-three-twelfths(@medium){
+ @media @medium {
+ .mw-ui-three-twelfths;
+ }
+}
+.mw-ui-four-twelfths(@medium){
+ @media @medium {
+ .mw-ui-four-twelfths;
+ }
+}
+.mw-ui-five-twelfths(@medium){
+ @media @medium {
+ .mw-ui-five-twelfths;
+ }
+}
+.mw-ui-six-twelfths(@medium){
+ @media @medium {
+ .mw-ui-six-twelfths;
+ }
+}
+.mw-ui-seven-twelfths(@medium){
+ @media @medium {
+ .mw-ui-seven-twelfths;
+ }
+}
+.mw-ui-eight-twelfths(@medium){
+ @media @medium {
+ .mw-ui-eight-twelfths;
+ }
+}
+.mw-ui-nine-twelfths(@medium){
+ @media @medium {
+ .mw-ui-nine-twelfths;
+ }
+}
+.mw-ui-ten-twelfths(@medium){
+ @media @medium {
+ .mw-ui-ten-twelfths;
+ }
+}
+.mw-ui-eleven-twelfths(@medium){
+ @media @medium {
+ .mw-ui-eleven-twelfths;
+ }
+}
+
+//Visibility
+.mw-ui-hidden(@medium){
+ @media @medium {
+ .mw-ui-hidden;
+ }
+}
diff --git a/modules/base/styles/grid/grid-settings.less
b/modules/base/styles/grid/grid-settings.less
new file mode 100644
index 0000000..cfaa476
--- /dev/null
+++ b/modules/base/styles/grid/grid-settings.less
@@ -0,0 +1,10 @@
+//GRID VARIABLES
+
+// Default separation between columns:
+@grid-gutter: 20px;
+
+//Breakpoints:
+@palm: ~"only screen and (max-width: 480px)";
+@lap: ~"only screen and (min-width: 481px) and (max-width: 1023px)";
+@portable: ~"only screen and (max-width: 1023px)";
+@desk: ~"only screen and (min-width: 1024px)";
--
To view, visit https://gerrit.wikimedia.org/r/136106
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I70b7238993f9017a79915e50a344d11c92d27969
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Pginer <pgi...@wikimedia.org>
Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il>
Gerrit-Reviewer: Pginer <pgi...@wikimedia.org>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
