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(business/radio-button): expose radio-button component for business #43

Merged
merged 3 commits into from
Jun 20, 2019
Merged

feat(business/radio-button): expose radio-button component for business #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab6bdb4
feat(business/field): expose field component for business applications
efux Jun 17, 2019
1117d8f
feat(business/radiobutton): expose radiobutton component for business
efux Jun 19, 2019
0d71a8f
Merge branch 'master' into feature/business-radiobutton
kyubisation Jun 20, 2019
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
1 change: 1 addition & 0 deletions projects/sbb-esta/angular-business/src/lib/radio-button/radio-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../../../../angular-public/src/lib/radio-button/radio-button';
1 change: 1 addition & 0 deletions projects/sbb-esta/angular-business/src/public-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
* Public API Surface of angular-business
*/
export * from './lib/field/field';
export * from './lib/radio-button/radio-button';
export * from './lib/time-input/time-input';
export * from './lib/textarea/textarea';
58 changes: 40 additions & 18 deletions projects/sbb-esta/angular-public/src/lib/radio-button/_radio-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@
& + .sbb-radio-label-content {
color: $sbbColorGrey;
transition: color 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);

@include businessOnly() {
padding-top: toPx(2);
padding-bottom: toPx(3);
line-height: pxToEm(15px);
}
}
}

Expand Down Expand Up @@ -59,33 +65,49 @@
width: toPx(20);
height: toPx(20);
background-color: $sbbColorWhite;
border: toPx(2) solid $sbbColorGraphite;
border-radius: 50%;
margin-right: toPx(8);
margin-top: toPx(1);

@include mq($from: desktop4k) {
width: toPx(20 * $scalingFactor4k);
height: toPx(20 * $scalingFactor4k);
border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
margin-right: toPx(8 * $scalingFactor4k);
margin-top: toPx(1 * $scalingFactor4k);

@include businessOnly() {
margin-top: 0;
border: toPx(1) solid $sbbColorGraphite;
}

@include mq($from: desktop5k) {
width: toPx(20 * $scalingFactor5k);
height: toPx(20 * $scalingFactor5k);
border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
margin-right: toPx(8 * $scalingFactor5k);
margin-top: toPx(1 * $scalingFactor5k);
@include publicOnly() {
margin-top: toPx(1);
border: toPx(2) solid $sbbColorGraphite;

@include mq($from: desktop4k) {
width: toPx(20 * $scalingFactor4k);
height: toPx(20 * $scalingFactor4k);
border: toPx(2 * $scalingFactor4k) solid $sbbColorGraphite;
margin-right: toPx(8 * $scalingFactor4k);
margin-top: toPx(1 * $scalingFactor4k);
}

@include mq($from: desktop5k) {
width: toPx(20 * $scalingFactor5k);
height: toPx(20 * $scalingFactor5k);
border: toPx(2 * $scalingFactor5k) solid $sbbColorGraphite;
margin-right: toPx(8 * $scalingFactor5k);
margin-top: toPx(1 * $scalingFactor5k);
}
}

border-radius: 50%;
margin-right: toPx(8);

.sbb-radio-circle-checked {
height: 100%;
width: 100%;
background-color: $sbbColorRed;
border-radius: 50%;
transform: scale(0.65);
transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);

@include publicOnly() {
background-color: $sbbColorRed;
}

@include businessOnly() {
background-color: $sbbColorGranite;
}
}
}