pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS refactor

Browse Source 
accordion_table.scss refactor

audit_log.scss refactor

budget_chart.scss refactor

delete checklist.scss

dod_login_notice.scss refactor

empty_state.scss refactor

footer.scss refactor

forms.scss refactor

global_navigation.scss refactor

delete member_edit.scss

modal.scss refactor

refactor portfolio_layout

delete search_bar.scss

selector.scss refactor

sticky_cta.scss refactor

refactor topbar.scss

refactor accordions.scss

refactor action_group.scss

refactor block_list.scss

refactor card.scss

refactor icon css

refactor inputs.scss

refactor labels.scss

refactor panel.scss

sidename.scss

tables.scss

refactor uploader.scss

application list and edit refactor

home.scss refactor

login.scss styles

reports.scss refactor

task_order.scss refactor
This commit is contained in:
mk-dds
2019-07-16 16:44:53 -04:00
committed by leigh-mil
parent c5ec2c296f
commit 5f99ceee5f
39 changed files with 703 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
styles/components/_modal.scss
View File

@@ -15,7 +15,7 @@ body {
bottom: 0;
background-color: $color-overlay;
.modal__container {
&__container {
height: 100vh;
max-height: 100vh;
@@ -24,7 +24,7 @@ body {
}
}
.modal__dialog {
&__dialog {
padding: $gap;
margin: 0 auto;
display: flex;
@@ -42,101 +42,101 @@ body {
@include media($large-screen) {
padding: $gap * 4;
}
}
.modal__body {
background-color: $color-white;
padding: $gap * 2;
width: 100%;
border-radius: 5px;
overflow-y: auto;
-ms-overflow-style: scrollbar;
&__body {
background-color: $color-white;
padding: $gap * 2;
width: 100%;
border-radius: 5px;
overflow-y: auto;
-ms-overflow-style: scrollbar;
@include ie-only {
max-height: calc(100vh - #{$gap * 8});
}
@include ie-only {
max-height: calc(100vh - #{$gap * 8});
}
@include media($medium-screen) {
padding: $gap * 2.5 $gap * 5;
}
h1,
h2 {
@include h3;
}
> :first-child {
margin-top: 0;
}
.block-list {
margin: -$gap * 2;
padding-bottom: $fixed-footer-height;
@include media($medium-screen) {
padding: $gap * 2.5 $gap * 5;
margin: -$gap * 4;
}
h1,
h2 {
@include h3;
.block-list__header {
border-top: 0;
}
> :first-child {
margin-top: 0;
.block-list__item {
&:last-child {
border: 0;
}
}
.modal__dismiss {
.block-list__footer {
height: $fixed-footer-height;
margin: 0;
padding: 0 ($gap * 2);
display: flex;
justify-content: space-between;
position: absolute;
top: $gap;
bottom: $gap;
left: $gap;
right: $gap;
width: 8rem;
background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) {
top: $gap * 2;
bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
}
.block-list {
margin: -$gap * 2;
padding-bottom: $fixed-footer-height;
@include media($medium-screen) {
margin: -$gap * 4;
}
.block-list__header {
border-top: 0;
}
.block-list__item {
&:last-child {
border: 0;
}
}
.block-list__footer {
height: $fixed-footer-height;
.action-group {
margin: 0;
padding: 0 ($gap * 2);
display: flex;
justify-content: space-between;
position: absolute;
bottom: $gap;
left: $gap;
right: $gap;
background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) {
bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
.action-group {
margin: 0;
}
}
}
}
}
&.modal--dismissable {
&__dismiss {
position: absolute;
top: $gap;
right: $gap;
width: 8rem;
@include media($medium-screen) {
top: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
right: $gap * 4;
}
}
&--dissmissable {
.modal__body {
> :first-child {
margin-right: 8rem;
@@ -144,20 +144,10 @@ body {
}
}
&.wide {
.modal__dialog {
max-width: 90rem;
}
.modal__body {
padding-left: 4rem;
padding-right: 4rem;
}
}
.modal__form {
.modal__form--header {
&__form {
&--header {
margin-bottom: 4rem;
text-align: left;
h1 {
margin-bottom: 0;
@@ -170,18 +160,27 @@ body {
}
}
&--padded {
padding-left: 5%;
padding-right: 5%;
.usa-input .usa-input__choices select {
max-width: 100%;
}
}
.progress-menu ul {
width: 40%;
margin-left: 30%;
font-size: 2rem;
.progress-menu__item::before {
&__item::before {
width: 2.8rem;
height: 2.8rem;
margin-left: -1.25rem;
}
.progress-menu__item--complete::before {
&__item--complete::before {
content: url("#{$asset-path}/icons/checkmark-alt.svg");
padding-top: 0.4rem;
}
@@ -210,14 +209,16 @@ body {
opacity: inherit;
}
}
}
.modal__form--padded {
padding-left: 5%;
padding-right: 5%;
&.wide {
.modal__dialog {
max-width: 90rem;
}
.usa-input .usa-input__choices select {
max-width: 100%;
}
.modal__body {
padding-left: 4rem;
padding-right: 4rem;
}
}