From dc6e4eec9b1919e80b9b9c83f1b61ecec01393f8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 1 Feb 2022 18:30:53 +0100 Subject: [PATCH 1/2] chore(storybook): improve style handling in angular example --- .../hero-form/hero-form.component.css | 271 +++++++++++++++++- .../hero-form/hero-form.component.html | 2 +- 2 files changed, 267 insertions(+), 6 deletions(-) diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css index 3dd3e324e01f..bb3b7b432db6 100644 --- a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css +++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css @@ -1,9 +1,270 @@ -@import url('https://unpkg.com/bootstrap@4.4/dist/css/bootstrap.min.css'); - -.ng-valid[required], .ng-valid.required { - border-left: 5px solid #42A948; +.ng-valid[required], +.ng-valid.required { + border-left: 5px solid #42a948; } -.ng-invalid:not(form) { +.ng-invalid:not(form) { border-left: 5px solid #a94442; } + +* { + font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif; + box-sizing: border-box; +} +h1, +h2 { + margin-top: 0; + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +h1 { + font-size: 2.5rem; +} +h2 { + font-size: 2rem; +} +@media (min-width: 576px) { + .container, + .container-sm { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container, + .container-md, + .container-sm { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container, + .container-lg, + .container-md, + .container-sm { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container, + .container-lg, + .container-md, + .container-sm { + max-width: 1140px; + } +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.form-control:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%); +} +.form-group { + margin-bottom: 1rem; +} +label { + display: inline-block; + margin-bottom: 0.5rem; + line-height: 1.5; +} +.alert { + position: relative; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +.alert-danger { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} +.btn { + display: inline-block; + font-weight: 400; + color: #212529; + text-align: center; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +.btn.disabled, +.btn:disabled { + opacity: 0.65; +} + +.btn-success { + color: #fff; + background-color: #28a745; + border-color: #28a745; +} + +.btn-success.disabled, +.btn-success:disabled { + color: #fff; + background-color: #28a745; + border-color: #28a745; +} +.btn-primary { + margin-top: 0.37rem; + color: #fff; + background-color: #007bff; + border-color: #007bff; +} +.spinner-border { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-bottom; + border: 0.25em solid currentColor; + border-right-color: transparent; + border-radius: 50%; + -webkit-animation: spinner-border 0.75s linear infinite; + animation: spinner-border 0.75s linear infinite; +} +.spinner-border-sm { + margin-left: 0.5rem !important; + width: 1rem; + height: 1rem; + border-width: 0.2em; +} +@keyframes spinner-border { + to { + transform: rotate(360deg); + } +} +.font-weight-bold { + font-weight: 700 !important; +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.col, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-auto, +.col-lg, +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-auto, +.col-md, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-auto, +.col-sm, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-auto, +.col-xl, +.col-xl-1, +.col-xl-10, +.col-xl-11, +.col-xl-12, +.col-xl-2, +.col-xl-3, +.col-xl-4, +.col-xl-5, +.col-xl-6, +.col-xl-7, +.col-xl-8, +.col-xl-9, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; + line-height: 24px; +} + +@media (min-width: 576px) { + .col-sm-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .col-sm-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } +} diff --git a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html index 83da1d2c1e2b..51607476cbf1 100644 --- a/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html +++ b/examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html @@ -36,7 +36,7 @@

Hero Form

From bb50807c4e95a043648205ee24d545cd670dc77a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 2 Feb 2022 14:26:57 +0100 Subject: [PATCH 2/2] update snapshots --- .../addon-interactions.stories.storyshot | 35 +++---------------- 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot b/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot index e4888a3560d2..c81acafb0a8d 100644 --- a/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/interactions/__snapshots__/addon-interactions.stories.storyshot @@ -112,12 +112,7 @@ exports[`Storyshots Addons/Interactions Filled 1`] = ` type="submit" > Submit -