diff --git a/projects/sbb-esta/angular-business/src/lib/radio-button/radio-button.ts b/projects/sbb-esta/angular-business/src/lib/radio-button/radio-button.ts new file mode 100644 index 0000000000..c767bdaece --- /dev/null +++ b/projects/sbb-esta/angular-business/src/lib/radio-button/radio-button.ts @@ -0,0 +1 @@ +export * from '../../../../angular-public/src/lib/radio-button/radio-button'; diff --git a/projects/sbb-esta/angular-business/src/public-api.ts b/projects/sbb-esta/angular-business/src/public-api.ts index 41aca0e8e1..d613f70bc0 100644 --- a/projects/sbb-esta/angular-business/src/public-api.ts +++ b/projects/sbb-esta/angular-business/src/public-api.ts @@ -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'; diff --git a/projects/sbb-esta/angular-public/src/lib/radio-button/_radio-button.scss b/projects/sbb-esta/angular-public/src/lib/radio-button/_radio-button.scss index 9232b80010..4cc7ba37ee 100644 --- a/projects/sbb-esta/angular-public/src/lib/radio-button/_radio-button.scss +++ b/projects/sbb-esta/angular-public/src/lib/radio-button/_radio-button.scss @@ -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); + } } } @@ -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; + } } }