diff --git a/styles/atat.scss b/styles/atat.scss index 2a65b8d9..bb29e97f 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -3,6 +3,7 @@ @import 'core/grid'; @import 'core/util'; +@import 'core/transitions'; @import 'elements/typography'; @import 'elements/icons'; @@ -30,6 +31,7 @@ @import 'components/footer'; @import 'components/progress_menu.scss'; @import 'components/search_bar'; +@import 'components/forms'; @import 'sections/login'; @import 'sections/request_approval'; diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss new file mode 100644 index 00000000..83ab5b83 --- /dev/null +++ b/styles/components/_forms.scss @@ -0,0 +1,77 @@ +// Form Grid +.form-row { + margin: ($gap * 4) 0; + + .form-col { + flex-grow: 1; + + &:first-child .usa-input { + &:first-child { + margin-top: 0; + } + } + + &:last-child .usa-input { + &:first-child { + margin-top: 0; + } + } + } + + @include media($medium-screen) { + @include grid-row; + align-items: flex-start; + + .form-col { + .usa-input { + margin-left: ($gap * 4); + margin-right: ($gap * 4); + } + + &:first-child { + .usa-input { + margin-left: 0; + } + } + + &:last-child { + .usa-input { + margin-right: 0; + } + } + } + } +} + + +.form__sub-fields { + @include alert; + @include alert-level('default'); + + .usa-input { + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + > h1, > h2, > h3, > h4, > h5, > h6, > legend { + @include h3; + + margin: ($gap * 4) 0; + + &:first-child { + margin-top: 0; + } + + &.usa-sr-only { + + .usa-input { + margin-top: 0; + } + } + } +} + diff --git a/styles/core/_transitions.scss b/styles/core/_transitions.scss new file mode 100644 index 00000000..69c5f6ee --- /dev/null +++ b/styles/core/_transitions.scss @@ -0,0 +1,36 @@ +// Slide up/down transition +.slide-enter-active { + transform-origin: 0 0; + transition: transform 0.5s ease-out; + + > * { + transition: opacity 0.5s ease-in; + } +} + +.slide-leave-active { + transform-origin: 0 0; + transition: transform 0.5s ease-in; + + > * { + transition: opacity 0.5s ease-out; + } +} + +.slide-enter, +.slide-leave-to { + transform: scaleY(0); + + > * { + opacity: 0; + } +} + +.slide-enter-to, +.slide-leave { + transform: scaleY(1); + + > * { + opacity: 1; + } +} diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index b4b6fc1c..31aac23a 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -70,6 +70,7 @@ @include h4; @include line-max; position: relative; + clear: both; .icon-validation { position: absolute; @@ -225,49 +226,3 @@ select { } } - - -// Form Grid -.form-row { - margin: ($gap * 4) 0; - - .form-col { - flex-grow: 1; - - &:first-child .usa-input { - &:first-child { - margin-top: 0; - } - } - - &:last-child .usa-input { - &:first-child { - margin-top: 0; - } - } - } - - @include media($medium-screen) { - @include grid-row; - align-items: flex-start; - - .form-col { - .usa-input { - margin-left: ($gap * 4); - margin-right: ($gap * 4); - } - - &:first-child { - .usa-input { - margin-left: 0; - } - } - - &:last-child { - .usa-input { - margin-right: 0; - } - } - } - } -} diff --git a/templates/requests/screen-1.html b/templates/requests/screen-1.html index 24fac233..f164ada6 100644 --- a/templates/requests/screen-1.html +++ b/templates/requests/screen-1.html @@ -30,32 +30,52 @@

Cloud Readiness

{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }} {{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }} -