Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme #732

Closed
wants to merge 14 commits into from
+2,338 −1,188
Closed

feat(dropdown): added inline dropdown, style changes to dropdown, fixed link in data table readme #732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b740252
[WIP] feat(inputs): new inputs (#710)
marijohannessen Apr 18, 2018
451e34b
feat(color): Update colors (#711)
tw15egan Apr 18, 2018
e7ec143
[WIP] feat(inputs): new inputs (#710)
marijohannessen Apr 18, 2018
ce5dfa3
feat(color): Update colors (#711)
tw15egan Apr 18, 2018
3ee2e9c
fix(global): updated branch
marijohannessen Apr 26, 2018
2429fb1
Merge branch 'master' into beta
marijohannessen Apr 26, 2018
e5155a9
feat(form): added v2 version of form
marijohannessen Apr 26, 2018
e676206
Merge branch 'beta' of github.com:carbon-design-system/carbon-compone…
marijohannessen Apr 26, 2018
c31147b
Merge branch 'master' into beta
marijohannessen May 3, 2018
22e3cc8
feat(dropdown): added inline dropdown
marijohannessen Apr 27, 2018
4dc8dcc
fix(inline-dropdown): fixed hover width
marijohannessen May 2, 2018
f2308bb
fix(dropdown): added in caret for inline dropdown
marijohannessen May 2, 2018
20345e1
fix(dropdown): text ot always be brand-01
marijohannessen May 2, 2018
13a01d1
fix(dropdown): updated merge
marijohannessen May 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.#{$prefix}--accordion__item {
transition: all $transition--base $carbon--standard-easing;
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
overflow: hidden;

&:focus {
Expand All @@ -26,12 +26,12 @@
.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -.5px; // safari fix
outline-offset: -0.5px; // safari fix
}
}

&:last-child {
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $ui-03;
}
}

Expand All @@ -53,7 +53,7 @@
.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -.5px; // safari fix
outline-offset: -0.5px; // safari fix
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
.#{$prefix}--breadcrumb-item::after {
content: '/';
margin-left: $spacing-md;
color: $text-03;
color: $text-02;
}

.#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
Expand All @@ -52,8 +52,8 @@
&:hover,
&:focus {
outline: none;
color: $brand-01;
border-bottom: 1px solid $brand-01;
color: $hover-primary-text;
border-bottom: 1px solid $hover-primary-text;
}

// Applies to Firefox only
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
$brand-01,
transparent,
$inverse-01,
$brand-02,
$hover-primary,
$ui-01
);
}
Expand All @@ -49,7 +49,7 @@
transparent,
$brand-01,
$brand-01,
$brand-01,
$hover-secondary,
$brand-01
);

Expand Down
8 changes: 4 additions & 4 deletions src/components/card/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
width: rem(200px);
height: rem(240px);
background-color: $ui-01;
border: 1px solid $ui-04;
border: 1px solid $ui-03;

&:focus {
@include focus-outline('border');
Expand Down Expand Up @@ -58,7 +58,7 @@
align-items: center;
justify-content: space-between;
height: rem(48px);
background-color: $ui-03;
background-color: $ui-02;
padding-left: 1rem;
padding-right: 1rem;

Expand Down Expand Up @@ -130,7 +130,7 @@
width: rem(50px);
height: rem(50px);
background-color: $ui-01;
border: 1px solid $ui-04;
border: 1px solid $ui-03;
border-radius: 100%;

.#{$prefix}--about__icon--img {
Expand Down Expand Up @@ -181,7 +181,7 @@
&:hover,
&:focus {
.#{$prefix}--app-actions__button--icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/checkbox/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
top: calc(50% - 9px);
height: rem(18px);
width: rem(18px);
border: $checkbox-border-width solid $ui-05;
border: $checkbox-border-width solid $ui-04;
background-color: $ui-01;
}

Expand Down Expand Up @@ -116,7 +116,7 @@
width: rem(18px);
margin-right: $spacing-xs;
background-color: $ui-01;
border: $checkbox-border-width solid $ui-05;
border: $checkbox-border-width solid $ui-04;
min-width: rem(18px);
}

Expand Down
28 changes: 17 additions & 11 deletions src/components/content-switcher/_content-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@

&:focus {
outline: 1px solid transparent;
box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
background-color: $brand-02;
// box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
background-color: $hover-primary;
z-index: 2;
border-color: $brand-02;
border-color: $hover-primary;
text-decoration: underline;
color: $inverse-01;
}
Expand All @@ -43,8 +43,8 @@

&:hover,
&:active {
background-color: $brand-02;
border-color: $brand-02;
background-color: $hover-primary;
border-color: $hover-primary;
color: $inverse-01;
}
}
Expand All @@ -64,18 +64,22 @@

.#{$prefix}--content-switcher-btn:not(:first-of-type) {
border-left: $content-switcher-option-border;

&:hover {
border-left-color: $hover-primary;
}
}

.#{$prefix}--content-switcher-btn:first-of-type {
border-bottom-left-radius: $content-switcher-border-radius;
border-top-left-radius: $content-switcher-border-radius;

&:hover {
border-color: $brand-02;
border-color: $hover-primary;
}

&:focus {
box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
// box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
z-index: 0;
}
}
Expand All @@ -85,11 +89,11 @@
border-bottom-right-radius: $content-switcher-border-radius;

&:hover {
border-color: $brand-02;
border-color: $hover-primary;
}

&:focus {
box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
// box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
z-index: 0;
}
}
Expand All @@ -100,8 +104,10 @@
font-weight: 400;
outline: 1px solid transparent;

&:hover {
border-color: $brand-01;
&:hover,
&:focus {
border-color: $hover-primary;
background-color: $hover-primary;
}
}
}
6 changes: 3 additions & 3 deletions src/components/copy-button/_copy-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
@include typescale('omega');
top: 1.1rem;
padding: 0.5rem 1rem;
border: 1px solid $ui-04;
border: 1px solid $ui-03;
color: $text-01;
content: attr(data-feedback);
transform: translateX(-50%);
Expand All @@ -40,8 +40,8 @@
top: 0.85rem;
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid $ui-04;
border-bottom: 1px solid $ui-04;
border-right: 1px solid $ui-03;
border-bottom: 1px solid $ui-03;
content: '';
transform: rotate(-135deg);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/data-table-v2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ The update to tables splits out the `scss` files into multiple partial files wit
### FAQ

**How do I sort the tables**
The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action `here`.
The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action [in the React Storybook](http://react.carbondesignsystem.com/?selectedKind=DataTable&selectedStory=with%20sorting&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).

**How do I use the expandable rows**
If you would like to programmatically expand table rows, you can add the `bx--expandable-row-v2` to the `selectorParentRows` elements.
Expand Down
6 changes: 3 additions & 3 deletions src/components/data-table-v2/_data-table-v2-action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,20 @@

&:hover {
> .#{$prefix}--toolbar-action__icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

&:focus {
@include focus-outline;
> .#{$prefix}--toolbar-action__icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

&:active {
> .#{$prefix}--toolbar-action__icon {
fill: darken($brand-01, 5%);
fill: $hover-secondary;
}
}

Expand Down
12 changes: 6 additions & 6 deletions src/components/data-table-v2/_data-table-v2-core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $ui-03;

thead {
@include typescale('zeta');
Expand Down Expand Up @@ -50,24 +50,24 @@
}

th {
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
}

th,
td {
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
padding-left: $spacing-sm;
vertical-align: middle;
text-align: left;

&:first-of-type {
padding-left: rem(24px);
border-left: 1px solid $ui-04;
border-left: 1px solid $ui-03;
}

&:last-of-type {
padding-right: $spacing-lg;
border-right: 1px solid $ui-04;
border-right: 1px solid $ui-03;
}
}

Expand Down Expand Up @@ -123,7 +123,7 @@
}

&:last-of-type {
border-right-color: $ui-04;
border-right-color: $ui-03;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/data-table-v2/_data-table-v2-expandable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

&:hover {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
}

> td:first-of-type {
Expand All @@ -51,7 +51,7 @@

+ tr[data-child-row] {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
border-bottom: 1px solid $brand-01;
border-right: 1px solid $brand-01;
}
Expand All @@ -61,7 +61,7 @@

tr.#{$prefix}--expandable-row--hover-v2 {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
border-top: 1px solid $brand-01;
}

Expand Down
8 changes: 4 additions & 4 deletions src/components/data-table/_data-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
min-width: 500px;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid $ui-04;
border: 2px solid $ui-03;

td {
@include reset;
Expand Down Expand Up @@ -67,7 +67,7 @@
@include reset;
border-collapse: collapse;
width: auto;
border: 2px solid $ui-04;
border: 2px solid $ui-03;

tr td:first-child,
tr th:first-child {
Expand Down Expand Up @@ -116,10 +116,10 @@
}

&--even {
background-color: $ui-03;
background-color: $ui-02;

& + .#{$prefix}--expandable-row {
background-color: $ui-03;
background-color: $ui-02;
}
}
}
Expand Down
Loading