Skip to content

Commit

Permalink
Merge pull request #56 from eBay/3.3.0
Browse files Browse the repository at this point in the history
Merge 3.3.0 milestone branch into master prior to release
  • Loading branch information
ianmcburnie authored Feb 16, 2018
2 parents 9f07b18 + 0d73ac6 commit 48942a0
Show file tree
Hide file tree
Showing 39 changed files with 948 additions and 412 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ _cdn
_site
docs/.jekyll-metadata
node_modules
npm-debug.log.*
npm-debug.log*
2 changes: 2 additions & 0 deletions dist/button/ds6/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,8 @@ span.expand-btn__icon {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position-y: center;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 100%;
margin-left: 8px;
width: 8px;
Expand Down
246 changes: 246 additions & 0 deletions dist/dropdown/ds6/dropdown.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
.menu,
.fake-menu,
.listbox {
line-height: normal;
position: relative;
}
span.menu,
span.fake-menu,
span.listbox {
display: inline-block;
}
.menu .expand-btn[aria-expanded="true"],
.fake-menu .expand-btn[aria-expanded="true"],
.listbox .expand-btn[aria-expanded="true"] {
border-bottom: 0;
}
.menu .expand-btn[aria-expanded="true"] ~ .menu__items[role="menu"],
.listbox .expand-btn[aria-expanded="true"] ~ .listbox__options[role="listbox"],
.fake-menu .expand-btn[aria-expanded="true"] ~ .fake-menu__items {
display: block;
}
.menu .expand-btn ~ .menu__items[role="menu"],
.listbox .expand-btn ~ .listbox__options[role="listbox"],
.fake-menu .expand-btn ~ .fake-menu__items {
display: none;
position: absolute;
z-index: 1;
}
.menu__items[role="menu"],
.listbox__options[role="listbox"],
.fake-menu__items {
background-color: #ffffff;
border: 1px solid #c7c7c7;
box-sizing: border-box;
width: 100%;
}
span.menu__items[role="menu"],
div.listbox__options[role="listbox"],
span.fake-menu__items {
display: inline-block;
}
.fake-menu__items {
list-style-type: none;
margin: 0;
}
div.menu__item[role^="menuitem"],
div.listbox__option[role^="option"],
a.fake-menu__item,
button.fake-menu__item {
background-color: #ffffff;
box-sizing: border-box;
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 0.875rem;
height: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
line-height: 2.5;
padding: 0 16px;
width: 100%;
}
div.menu__item[role^="menuitem"] span:not([class*="menu__status"]),
div.listbox__option[role^="option"] span:not([class*="menu__status"]),
a.fake-menu__item span:not([class*="menu__status"]),
button.fake-menu__item span:not([class*="menu__status"]),
div.menu__item[role^="menuitem"] span:not([class*="listbox__status"]),
div.listbox__option[role^="option"] span:not([class*="listbox__status"]),
a.fake-menu__item span:not([class*="listbox__status"]),
button.fake-menu__item span:not([class*="listbox__status"]) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.menu__item[role^="menuitem"]:focus,
div.listbox__option[role^="option"]:focus,
a.fake-menu__item:focus,
button.fake-menu__item:focus,
div.menu__item[role^="menuitem"]:hover,
div.listbox__option[role^="option"]:hover,
a.fake-menu__item:hover,
button.fake-menu__item:hover {
background-color: #f5f5f5;
}
div.menu__item[role^="menuitem"]:focus,
div.listbox__option[role^="option"]:focus,
a.fake-menu__item:focus,
button.fake-menu__item:focus {
outline: 1px solid #c7c7c7;
}
div.menu__item[role^="menuitem"]:active,
div.listbox__option[role^="option"]:active,
a.fake-menu__item:active,
button.fake-menu__item:active {
font-weight: bold;
}
div.menu__item[role^="menuitem"]:active .menu__status,
div.listbox__option[role^="option"]:active .menu__status,
a.fake-menu__item:active .menu__status,
button.fake-menu__item:active .menu__status,
div.menu__item[role^="menuitem"]:active .listbox__status,
div.listbox__option[role^="option"]:active .listbox__status,
a.fake-menu__item:active .listbox__status,
button.fake-menu__item:active .listbox__status,
div.menu__item[role^="menuitem"]:active .fake-menu__status,
div.listbox__option[role^="option"]:active .fake-menu__status,
a.fake-menu__item:active .fake-menu__status,
button.fake-menu__item:active .fake-menu__status {
color: #c7c7c7;
}
div.menu__item[role^="menuitem"]:not(:last-child),
div.listbox__option[role^="option"]:not(:last-child),
a.fake-menu__item:not(:last-child),
button.fake-menu__item:not(:last-child) {
margin-bottom: 1px;
}
div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status,
div.listbox__option[role^="option"][aria-selected="true"] .menu__status,
div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status,
div.listbox__option[role^="option"][aria-selected="true"] .listbox__status {
visibility: visible;
}
a.fake-menu__item {
color: #111820;
text-decoration: none;
}
a.fake-menu__item:hover,
a.fake-menu__item:focus {
text-decoration: underline;
}
a.fake-menu__item[aria-current="page"] .fake-menu__status {
visibility: visible;
}
button.fake-menu__item {
background-color: #ffffff;
border: 0;
color: #111820;
display: block;
text-align: left;
}
.menu__status,
.listbox__status,
.fake-menu__status {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
color: #111820;
fill: currentColor;
height: 1em;
stroke: currentColor;
stroke-width: 0;
visibility: hidden;
width: 1em;
}
span.menu__status,
span.listbox__status,
span.fake-menu__status {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%277%27%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23111820%22%20d%3D%22M0%203.70913219%202.21049749%206%208%200%22%3E%3C/path%3E%3C/svg%3E');
background-position: right center;
background-repeat: no-repeat;
height: 1em;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 1em;
}
.menu__items--grow[role="menu"],
.menu__items--grow-reverse[role="menu"],
.listbox__options--grow[role="listbox"],
.listbox__options--grow-reverse[role="listbox"],
.fake-menu__items--grow,
.fake-menu__items--grow-reverse {
min-width: calc(100%);
width: auto;
}
.menu__items--grow-reverse[role="menu"],
.listbox__options--grow-reverse[role="listbox"],
.fake-menu__items--grow-reverse {
right: 0;
}
.listbox {
display: inline-block;
box-sizing: border-box;
width: 100%;
}
.listbox:hover > .listbox__control > input {
border-color: #4295ff;
}
.listbox__control > input {
background-color: #ffffff;
border: 1px solid #c7c7c7;
box-sizing: border-box;
color: transparent;
cursor: default;
font-family: inherit;
font-size: 16px;
height: 40px;
padding: 0 16px;
text-shadow: 0 0 0 #006efc;
vertical-align: middle;
width: 100%;
}
.listbox__control > input:focus {
border-color: #4295ff;
}
.listbox__control > input[disabled],
.listbox__control > input[aria-disabled="true"] {
border-color: #c7c7c7;
color: transparent;
text-shadow: 0 0 0 #c7c7c7;
}
.listbox__control > input[aria-expanded="true"] {
border-bottom: 0;
padding-bottom: 1px;
}
.listbox__control > input::-moz-selection {
background: #ffffff;
}
.listbox__control > input::selection {
background: #ffffff;
}
.listbox__control + div.listbox__options {
display: none;
position: absolute;
z-index: 1;
}
.listbox__control--expanded + div.listbox__options {
display: block;
}
span.listbox__arrow {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right center;
content: "";
height: 40px;
margin-left: 8px;
position: absolute;
right: 16px;
top: 0;
width: 8px;
}
.listbox__control--expanded span.listbox__arrow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
2 changes: 1 addition & 1 deletion dist/grid/ds4/grid-full.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
Skin v3.2.0
Skin v3.3.0
Copyright 2017 eBay! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/eBay/skin/blob/master/LICENSE.txt"
Expand Down
80 changes: 20 additions & 60 deletions dist/less/ds6/mixins.less
Original file line number Diff line number Diff line change
Expand Up @@ -3,79 +3,39 @@
// Typography
//-----------------------------

.ds6-typography-headline-1() {
font-size: @ds6-font-size-headline-1;
.ds6-typography-giant-2() {
font-size: @ds6-font-size-giant-2;
font-weight: @ds6-font-weight-bold;
line-height: 30px;
line-height: 46px;
}

.ds6-typography-headline-2() {
font-size: @ds6-font-size-headline-2;
.ds6-typography-giant-1() {
font-size: @ds6-font-size-giant-1;
font-weight: @ds6-font-weight-bold;
line-height: 28px;
}

.ds6-typography-headline-3() {
font-size: @ds6-font-size-headline-3;
font-weight: @ds6-font-weight-regular;
line-height: 26px;
}

.ds6-typography-title-1() {
font-size: @ds6-font-size-title-1;
font-weight: @ds6-font-weight-bold;
line-height: 24px;
line-height: 40px;
}

.ds6-typography-title-2() {
font-size: @ds6-font-size-title-2;
font-weight: @ds6-font-weight-regular;
line-height: 20px;
.ds6-typography-large-2() {
font-size: @ds6-font-size-large-2;
line-height: 32px;
}

.ds6-typography-title-3() {
font-size: @ds6-font-size-title-3;
font-weight: @ds6-font-weight-bold;
line-height: 18px;
.ds6-typography-large-1() {
font-size: @ds6-font-size-large-1;
line-height: 28px;
}

.ds6-typography-title-4() {
font-size: @ds6-font-size-title-4;
font-weight: @ds6-font-weight-regular;
line-height: 16px;
.ds6-typography-medium() {
font-size: @ds6-font-size-medium;
line-height: 24px;
}

.ds6-typography-body-1() {
font-family: @ds6-font-family-default;
font-size: @ds6-font-size-body-1;
font-weight: @ds6-font-weight-regular;
.ds6-typography-regular() {
font-size: @ds6-font-size-regular;
line-height: 20px;
}

.ds6-typography-caption-1() {
font-family: @ds6-font-family-default;
font-size: @ds6-font-size-caption-1;
font-weight: @ds6-font-weight-regular;
line-height: 15px;
}

.ds6-typography-caption-2() {
font-family: @ds6-font-family-default;
font-size: @ds6-font-size-caption-2;
font-weight: @ds6-font-weight-bold;
line-height: 14px;
}

.ds6-typography-caption-3() {
font-family: @ds6-font-family-default;
font-size: @ds6-font-size-caption-3;
font-weight: @ds6-font-weight-regular;
line-height: 14px;
}

.ds6-typography-legal-1() {
color: @ds6-color-light;
font-family: @ds6-font-family-default;
font-size: @ds6-font-size-legal-1;
font-weight: @ds6-font-weight-regular;
.ds6-typography-small() {
font-size: @ds6-font-size-small;
line-height: 18px;
}
Loading

0 comments on commit 48942a0

Please sign in to comment.