mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 11:34:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling for dialogs

Browse Source 
- More padding
- Deeper shadow
- Add rounded corners
- A pull-left flat button can be added
This commit is contained in:
Phuc Nguyen 2014-10-13 15:12:05 +07:00
parent b9349a551e
commit a45d1a982b
10 changed files with 191 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
dist/css/material-wfont.css vendored
View File

@ -3523,20 +3523,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -4215,6 +4201,43 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
dist/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

51
dist/css/material.css vendored
View File

@ -3522,20 +3522,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -4214,6 +4200,43 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

38
less/_dialogs.import.less vendored Normal file
View File

@ -0,0 +1,38 @@
.modal-content {
.shadow-z-5();
margin-top: 10em; //XXX TODO Need a better way to vertically position the dialog
border-radius: 2px;
border: none;
.modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-footer {
border-top: none;
padding: 24px;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
button+button {
margin-bottom: 16px;
}
}
}
.modal-backdrop {
display: none;
}

16
less/material.less
View File

@ -47,21 +47,6 @@ legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
.shadow-z-2();
border-radius: 0;
border: 0;
.modal-header {
border-bottom: 0;
}
.modal-footer {
border-top: 0;
.btn+.btn {
margin-bottom: 10px;
}
}
}
// Lists // Lists
@import "_lists.import.less"; @import "_lists.import.less";
@ -112,6 +97,7 @@ legend {
@import "_icons.import.less"; @import "_icons.import.less";
@import "_dialogs.import.less";
// External plugins // External plugins
@import "_plugin-snackbarjs.import.less"; @import "_plugin-snackbarjs.import.less";

51
template/material/css/material-wfont.css
View File

@ -3523,20 +3523,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -4215,6 +4201,43 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
template/material/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

51
template/material/css/material.css
View File

@ -3522,20 +3522,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -4214,6 +4200,43 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
template/material/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long