zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-03 11:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve modal styling

Browse Source
This commit is contained in:
John Furrow
2016-02-19 22:18:18 -08:00
parent d20440be74
commit dcaa1d96f2
9 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/components/_modals.scss
+45 -19
View File
@@ -1,6 +1,18 @@
$modal--border-radius: 3px;
$modal-content--padding--horizontal: $spacing-unit;
$modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
$modal--padding--horizontal: $spacing-unit;
$modal--padding--vertical: $modal--padding--horizontal * 4/5;
$modal--content--padding--top: $spacing-unit * 4/5;
$modal--content--padding--right: $spacing-unit;
$modal--content--padding--bottom: $spacing-unit * 4/5;
$modal--content--padding--left: $spacing-unit;
$modal--actions--margin--top: $spacing-unit;
$modal--tabs--margin--top: $spacing-unit * 2/5;
$modal--tabs--margin--right: $spacing-unit * -1/5;
$modal--tabs--margin--bottom: 0;
$modal--tabs--margin--left: $spacing-unit * -1/5;
.modal {
background: $modal--overlay;
@@ -12,21 +24,15 @@ $modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
width: 100%;
z-index: 100;
&__header {
background: $modal--heading--background;
border-radius: $modal--border-radius $modal--border-radius 0 0;
box-shadow: inset 0 -1px 0 $modal--heading--border;
color: $modal--heading--foreground;
flex: 0 0 auto;
font-size: 1.1em;
font-weight: 400;
padding: $modal-content--padding--vertical $modal-content--padding--horizontal 0 $modal-content--padding--horizontal;
&--align-center {
text-align: center;
}
&__tabs {
color: $modal--tab--foreground;
font-size: 0.7em;
margin: 0 $spacing-unit * -1/5;
font-weight: 400;
margin: $modal--tabs--margin--top $modal--tabs--margin--right $modal--tabs--margin--bottom $modal--tabs--margin--left;
.modal {
@@ -53,7 +59,7 @@ $modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
&.is-active {
color: $modal--tab--foreground--active;
font-weight: 600;
font-weight: 800;
&:after {
background: $modal--tab--border--active;
@@ -63,10 +69,26 @@ $modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
}
}
&__header {
background: $modal--heading--background;
border-radius: $modal--border-radius $modal--border-radius 0 0;
box-shadow: inset 0 -1px 0 $modal--heading--border;
color: $modal--heading--foreground;
flex: 0 0 auto;
font-size: 1.25em;
font-weight: 300;
line-height: 1;
padding: $modal--padding--vertical $modal--padding--horizontal;
&.has-tabs {
padding-bottom: 0;
}
}
&__content {
flex: 1 1 auto;
overflow: auto;
padding: $modal-content--padding--vertical $modal-content--padding--horizontal;
padding: $modal--content--padding--top $modal--content--padding--right $modal--content--padding--bottom $modal--content--padding--left;
&__wrapper {
background: $modal--background;
@@ -84,20 +106,24 @@ $modal-content--padding--vertical: $modal-content--padding--horizontal * 1/2;
transform: translate(-50%, 0);
width: 500px;
}
}
&--align-center {
text-align: center;
}
&__body {
color: $modal--body--foreground;
font-size: 0.9em;
}
&__actions {
margin-top: $spacing-unit;
padding: 0 0 $modal-content--padding--vertical 0;
margin-top: $modal--actions--margin--top;
}
&__button-group {
text-align: right;
.modal--align-center & {
text-align: center;
}
.button {
& + .button {