Add file alignment

This commit is contained in:
Jeremy Thomas
2017-08-07 19:49:24 +01:00
parent 5d1288dcb9
commit f9acb1ea69
4 changed files with 297 additions and 43 deletions

View File

@@ -543,14 +543,176 @@ table th {
text-align: center !important;
}
@media screen and (max-width: 768px) {
.has-text-centered-mobile {
text-align: center !important;
}
}
@media screen and (min-width: 769px), print {
.has-text-centered-tablet {
text-align: center !important;
}
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
.has-text-centered-tablet-only {
text-align: center !important;
}
}
@media screen and (max-width: 1007px) {
.has-text-centered-touch {
text-align: center !important;
}
}
@media screen and (min-width: 1008px) {
.has-text-centered-desktop {
text-align: center !important;
}
}
@media screen and (min-width: 1008px) and (max-width: 1199px) {
.has-text-centered-desktop-only {
text-align: center !important;
}
}
@media screen and (min-width: 1200px) {
.has-text-centered-widescreen {
text-align: center !important;
}
}
@media screen and (min-width: 1200px) and (max-width: 1391px) {
.has-text-centered-widescreen-only {
text-align: center !important;
}
}
@media screen and (min-width: 1392px) {
.has-text-centered-fullhd {
text-align: center !important;
}
}
.has-text-left {
text-align: left !important;
}
@media screen and (max-width: 768px) {
.has-text-left-mobile {
text-align: left !important;
}
}
@media screen and (min-width: 769px), print {
.has-text-left-tablet {
text-align: left !important;
}
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
.has-text-left-tablet-only {
text-align: left !important;
}
}
@media screen and (max-width: 1007px) {
.has-text-left-touch {
text-align: left !important;
}
}
@media screen and (min-width: 1008px) {
.has-text-left-desktop {
text-align: left !important;
}
}
@media screen and (min-width: 1008px) and (max-width: 1199px) {
.has-text-left-desktop-only {
text-align: left !important;
}
}
@media screen and (min-width: 1200px) {
.has-text-left-widescreen {
text-align: left !important;
}
}
@media screen and (min-width: 1200px) and (max-width: 1391px) {
.has-text-left-widescreen-only {
text-align: left !important;
}
}
@media screen and (min-width: 1392px) {
.has-text-left-fullhd {
text-align: left !important;
}
}
.has-text-right {
text-align: right !important;
}
@media screen and (max-width: 768px) {
.has-text-right-mobile {
text-align: right !important;
}
}
@media screen and (min-width: 769px), print {
.has-text-right-tablet {
text-align: right !important;
}
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
.has-text-right-tablet-only {
text-align: right !important;
}
}
@media screen and (max-width: 1007px) {
.has-text-right-touch {
text-align: right !important;
}
}
@media screen and (min-width: 1008px) {
.has-text-right-desktop {
text-align: right !important;
}
}
@media screen and (min-width: 1008px) and (max-width: 1199px) {
.has-text-right-desktop-only {
text-align: right !important;
}
}
@media screen and (min-width: 1200px) {
.has-text-right-widescreen {
text-align: right !important;
}
}
@media screen and (min-width: 1200px) and (max-width: 1391px) {
.has-text-right-widescreen-only {
text-align: right !important;
}
}
@media screen and (min-width: 1392px) {
.has-text-right-fullhd {
text-align: right !important;
}
}
.is-capitalized {
text-transform: capitalize !important;
}
@@ -3108,14 +3270,20 @@ a.box:active {
justify-content: center;
}
.file.is-centered .file-label {
.file.is-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.file.is-boxed .file-label {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.file.is-centered .file-cta {
.file.is-boxed .file-cta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
@@ -3124,36 +3292,36 @@ a.box:active {
padding: 1em 3em;
}
.file.is-centered .file-name {
.file.is-boxed .file-name {
border-width: 0 1px 1px;
}
.file.is-centered .file-icon {
.file.is-boxed .file-icon {
height: 1.5em;
width: 1.5em;
}
.file.is-centered .file-icon .fa {
.file.is-boxed .file-icon .fa {
font-size: 21px;
}
.file.is-centered.is-small .file-icon .fa {
.file.is-boxed.is-small .file-icon .fa {
font-size: 14px;
}
.file.is-centered.is-medium .file-icon .fa {
.file.is-boxed.is-medium .file-icon .fa {
font-size: 28px;
}
.file.is-centered.is-large .file-icon .fa {
.file.is-boxed.is-large .file-icon .fa {
font-size: 35px;
}
.file.is-centered.has-name .file-cta {
.file.is-boxed.has-name .file-cta {
border-radius: 3px 3px 0 0;
}
.file.is-centered.has-name .file-name {
.file.is-boxed.has-name .file-name {
border-radius: 0 0 3px 3px;
border-width: 0 1px 1px;
}
@@ -3202,7 +3370,7 @@ a.box:active {
}
.file-label:hover .file-name {
border-color: #eeeeee;
border-color: #d5d5d5;
}
.file-label:active .file-cta {
@@ -3211,7 +3379,7 @@ a.box:active {
}
.file-label:active .file-name {
border-color: #e8e8e8;
border-color: #cfcfcf;
}
.file-input {
@@ -3249,7 +3417,7 @@ a.box:active {
padding-top: calc(0.375em - 1px);
position: relative;
vertical-align: top;
border-color: transparent;
border-color: #dbdbdb;
border-radius: 3px;
font-size: 1em;
padding-left: 1em;
@@ -3276,7 +3444,7 @@ a.box:active {
}
.file-name {
border-color: whitesmoke;
border-color: #dbdbdb;
border-style: solid;
border-width: 1px 1px 1px 0;
display: block;
@@ -6113,6 +6281,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
}
@media screen and (max-width: 1007px) {
.navbar > .container {
display: block;
}
.navbar-brand .navbar-item {
-webkit-box-align: center;
-ms-flex-align: center;