Skip to content

Commit

Permalink
Merge pull request #1040 from skoolbus39/201611-rem-em-px
Browse files Browse the repository at this point in the history 
Remove rem/px function, update px/em/rem values
  • Loading branch information
@kabel
kabel authored Dec 21, 2016
2 parents a3cabf6 + 2499dad commit 70e499b
Show file tree
Hide file tree
Showing 29 changed files with 574 additions and 329 deletions.
2 changes: 1 addition & 1 deletion wdn/templates_4.1/images/b1g.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 17 additions & 17 deletions wdn/templates_4.1/less/_mixins/breakpoints.less
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
// Standard, width-based media queries
@bp480: ~" (min-width: 480px)";
@bp640: ~" (min-width: 640px)";
@bp768: ~" (min-width: 768px)";
@bp960: ~" (min-width: 960px)";
@bp1280: ~" (min-width: 1280px)";
@bp1600: ~" (min-width: 1600px)";
@bp480: ~" (min-width: 30em)";
@bp640: ~" (min-width: 40em)";
@bp768: ~" (min-width: 48em)";
@bp960: ~" (min-width: 60em)";
@bp1280: ~" (min-width: 80em)";
@bp1600: ~" (min-width: 100em)";

// Width-based media queries which shouldn't cascade to other breakpoints
@bp480-767: ~" (min-width: 480px) and (max-width: 767px)";
@bp640-959: ~" (min-width: 640px) and (max-width: 959px)";
@bp768-959: ~" (min-width: 768px) and (max-width: 959px)";
@bp960-1279: ~" (min-width: 960px) and (max-width: 1279px)";
@bp-under480w: ~" (max-width: 479px)";
@bp-under640w: ~" (max-width: 639px)";
@bp-under768w: ~" (max-width: 767px)";
@bp480-767: ~" (min-width: 30em) and (max-width: 47.99em)";
@bp640-959: ~" (min-width: 40em) and (max-width: 59.99em)";
@bp768-959: ~" (min-width: 48em) and (max-width: 59.99em)";
@bp960-1279: ~" (min-width: 60em) and (max-width: 79.99em)";
@bp-under480w: ~" (max-width: 29.99em)";
@bp-under640w: ~" (max-width: 39.99em)";
@bp-under768w: ~" (max-width: 47.99em)";

// Height-based media-queries
@bp-under640h: ~" (max-height: 639px)";
@bp-under640h: ~" (max-height: 39.99em)";

// The navigation breaks from the traditional media queries
@bp-nav-hidden: ~" (max-width: 699px)";
@bp-nav-full: ~" (min-width: 700px)";
@bp-nav-max: ~" (min-width: 1016px)"; // nav toggle width + bp3
@bp-nav-hidden: ~" (max-width: 43.69em)";
@bp-nav-full: ~" (min-width: 43.75em)";
@bp-nav-max: ~" (min-width: 63.5em)"; // nav toggle width + bp3

// Deprecated names
@bp1: @bp480;
Expand Down
25 changes: 0 additions & 25 deletions wdn/templates_4.1/less/_mixins/functions.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,6 @@
}
}

//http://css-tricks.com/remux-an-experimental-approach-to-responsive-web-design/
@rem-fallback: true; // switch to include px fallback

.rem (@px-value) {
.rem(@px-value, @px-value);
}

.rem (@px-value-sm, @px-value-lg) {
@rem-value-sm: ((round((unit(@px-value-sm) / unit(@base-font-size-sm)) * 10000000)) / 10000000);
@rem-value-lg: ((round((unit(@px-value-lg) / unit(@base-font-size-lg)) * 10000000)) / 10000000);

.result (@rem-value, @px-value, @rem-fallback) when (@rem-fallback = true) {
font-size: ~"@{px-value}px";
font-size: ~"@{rem-value}rem";
}
.result (@rem-value, @px-value, @rem-fallback) when (@rem-fallback = false) {
font-size: ~"@{rem-value}rem";
}

.result(@rem-value-sm, unit(@px-value-sm), @rem-fallback);
@media @bp2 {
.result(@rem-value-lg, unit(@px-value-lg), @rem-fallback);
}
}

.list-reset () {
margin: 0;
padding: 0;
Expand Down
4 changes: 2 additions & 2 deletions wdn/templates_4.1/less/_mixins/vars.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@base-font-size-sm: 13px;
@base-font-size-sm: 80.188%; // 12.83px
@base-line-height-sm: 1.662;
@base-font-size-lg: 16px;
@base-font-size-lg: 100%; // 16px
@base-line-height-lg: 1.777;

// variables for margin values
Expand Down
65 changes: 54 additions & 11 deletions wdn/templates_4.1/less/base/text.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,29 @@ h1, h2, h3, h4, h5, h6 {
margin: 1em 0 1rem 0;
}

h1 { .rem(41,51); }
h2 { .rem(38,41); }
h3 { .rem(30,38); }
h4 { .rem(28,30); }
h5 { .rem(23,28); }
h6 { .rem(21,23); }
h1 {
font-size: 3.157rem; // 40.51px, 50.517px
}

h2 {
font-size: 2.9538rem; // 37.897px
}

h3 {
font-size: 2.369rem; // 30.39px, 37.897px
}

h4 {
font-size: 2.2159rem; // 28.43px
}

h5 {
font-size: 1.777rem; // 22.798px
}

h6 {
font-size: 1.662rem; // 21.328px
}

// Calculate margins above heading based on heading size
p, span, div, ul, li, section, img {
Expand Down Expand Up @@ -74,7 +91,7 @@ p, span, div, ul, li, section, img {

.wdn-alt-header {
.wdn-sans-caps();
.rem(13,16);
font-size: 1rem; // 12.83px, 16px
}

.wdn-list-header {
Expand Down Expand Up @@ -102,13 +119,13 @@ p, span, div, ul, li, section, img {

h1, h2, h3 {
> .wdn-subhead, + .wdn-subhead {
.rem(13,16);
font-size: 1rem; // 12.83px, 16px
}
}

h4, h5, h6 {
> .wdn-subhead, + .wdn-subhead {
.rem(10,12);
font-size: .75rem; // 9.625px, 12px
}
}

Expand All @@ -133,12 +150,38 @@ p {
}

// Magazine-style, larger introduction paragraph

.wdn-intro-p {
.rem(17,21);
font-size: 1.333rem; // 17.103px, 21.328px
}

p.small {
.rem(12,13);
font-size: .9353rem; // 12px
}



@media @bp768 {

h2 {
font-size: 2.532rem; // 40.51px
}

h4 {
font-size: 1.899rem; // 30.39px
}

h5 {
font-size: 1.777rem; // 28.43px
}

h6 {
font-size: 1.425rem; // 22.798px
}

p.small {
font-size: .802rem; // 12.83px
}
}


Expand Down
84 changes: 45 additions & 39 deletions wdn/templates_4.1/less/layouts/breadcrumbs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@

.breadcrumb-arrow() {
top: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
border-top: 1.333em solid transparent;
border-bottom: 1.333em solid transparent;
border-left: 1em solid #fff;
}

.selected-arrow() {
left: ~'calc(50% - 6px)';
bottom: -2px;
left: ~'calc(50% - .563em)';
bottom: 0;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: .563em solid transparent;
border-right: .563em solid transparent;
border-bottom: .563em solid #fff;
}

.breadcrumb-loop(@i) when (@i > 0) {
.breadcrumb-loop(@i) when (@i > 1) {
.breadcrumb-loop((@i - 1)); // next iteration
li:nth-child(@{i}) {
margin-left: (12px * @i);
margin-left: (1.333em * (@i - 2));
}
}

Expand All @@ -38,9 +38,6 @@
}

ul {
@media @bp-nav-hidden {
margin-left: -12px;
}

@media @bp-nav-full {

Expand All @@ -54,21 +51,20 @@
}

li {
display: inline-block;
position: relative;
.rem(10);
font-size: .75019rem; // 9.625px
vertical-align: middle;

@media @bp-nav-hidden {
display: block;
margin-bottom: 1em;
padding-left: 1.333em;
line-height: 1.069;
margin-bottom: .75em;
}

@media @bp-nav-full {
padding: 1px 6px 0 23px;
line-height: 1.333;
display: inline-block;
margin-bottom: -1px;
padding: 1px .422em 0 1.777em;
line-height: 2.37;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5b5b5a+0,474746+100 */
background: linear-gradient(to right, #5b5b5a 0%,#474746 100%);

Expand All @@ -78,34 +74,39 @@
}
}

@media @bp768 {
font-size: .60156rem; // 9.625px
}

&:before {

@media @bp-nav-hidden {
.breadcrumb-pseudo();
top: -0.254em;
left: 0.254em;
width: 0.75em;
height: 0.75em;
top: .1em;
left: .254em;
width: .6em;
height: .6em;
border-bottom: 1px solid @ui08;
border-left: 1px solid @ui08;
}
}

&:after {
.breadcrumb-pseudo();

@media @bp-nav-full {
.breadcrumb-arrow();
right: -13px;
border-left-color: @ui09;
z-index: 1;
.breadcrumb-pseudo();
.breadcrumb-arrow();
right: 0;
z-index: 1;
transform: translateX(100%);
border-left-color: @ui09;
}
}

&:first-child {

@media @bp-nav-full {
margin-left: -23px;
margin-left: -1.777em;

.flexbox & {
flex: none;
Expand All @@ -125,7 +126,6 @@
&:not(.last-link) {

@media @bp-nav-full {
padding-left: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand All @@ -142,19 +142,26 @@
}
}

&:not(:first-child) {

@media @bp-nav-hidden {
padding-left: 1.333em;
}
}

&.selected {

@media @bp-nav-full {
background: @cream;
background: @cream;
transition: max-width 0.5s ease-in-out 0.5s;
}

&:first-child {

&:before {
.breadcrumb-pseudo();

@media @bp-nav-full {
.breadcrumb-pseudo();
.breadcrumb-arrow();
left: 0;
border-left-color: @ui08;
Expand All @@ -177,11 +184,11 @@
}

&:before {
.breadcrumb-pseudo();

@media @bp-nav-full {
.breadcrumb-pseudo();
.selected-arrow();
border-bottom-color: @scarlet;
border-bottom: .563em solid @scarlet;
}
}
}
Expand All @@ -190,12 +197,11 @@

a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

@media @bp-nav-full {
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: @ui03;
}
}
Expand Down
Loading

0 comments on commit 70e499b

Please sign in to comment.