]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Move form.sass into its own folder
authorJeremy Thomas <bbxdesign@gmail.com>
Sat, 18 May 2019 14:52:00 +0000 (15:52 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Sat, 18 May 2019 15:00:19 +0000 (16:00 +0100)
bulma.sass
docs/css/bulma-docs.css
sass/elements/_all.sass
sass/elements/form.sass
sass/form/_all.sass [new file with mode: 0644]
sass/form/checkbox-radio.sass [new file with mode: 0644]
sass/form/file.sass [new file with mode: 0644]
sass/form/input-textarea.sass [new file with mode: 0644]
sass/form/select.sass [new file with mode: 0644]
sass/form/shared.sass [new file with mode: 0644]
sass/form/tools.sass [new file with mode: 0644]

index 81bbcce183361adcb90cf6e6cb7099d2e0685ffe..1557299ab0e734d72c03d8b4094712ba7b0d177c 100644 (file)
@@ -3,6 +3,7 @@
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"
+@import "sass/form/_all"
 @import "sass/components/_all"
 @import "sass/grid/_all"
 @import "sass/layout/_all"
index 9c95c3343293782c5aa666cb815f529be1c3fc24..0617574e64e02dc5e99bac0095415fca9e00b139 100644 (file)
   width: 32px;
 }
 
-.button.is-loading::after, .select.is-loading::after, .control.is-loading::after, .loader {
+.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   top: 0;
 }
 
-.button, .input,
-.textarea, .select select, .file-cta,
+.button, .input, .textarea, .select select, .file-cta,
 .file-name, .pagination-previous,
 .pagination-next,
 .pagination-link,
   vertical-align: top;
 }
 
-.button:focus, .input:focus,
-.textarea:focus, .select select:focus, .file-cta:focus,
+.button:focus, .input:focus, .textarea:focus, .select select:focus, .file-cta:focus,
 .file-name:focus, .pagination-previous:focus,
 .pagination-next:focus,
 .pagination-link:focus,
-.pagination-ellipsis:focus, .is-focused.button, .is-focused.input,
-.is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
+.pagination-ellipsis:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
 .is-focused.file-name, .is-focused.pagination-previous,
 .is-focused.pagination-next,
 .is-focused.pagination-link,
-.is-focused.pagination-ellipsis, .button:active, .input:active,
-.textarea:active, .select select:active, .file-cta:active,
+.is-focused.pagination-ellipsis, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
 .file-name:active, .pagination-previous:active,
 .pagination-next:active,
 .pagination-link:active,
-.pagination-ellipsis:active, .is-active.button, .is-active.input,
-.is-active.textarea, .select select.is-active, .is-active.file-cta,
+.pagination-ellipsis:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
 .is-active.file-name, .is-active.pagination-previous,
 .is-active.pagination-next,
 .is-active.pagination-link,
   outline: none;
 }
 
-.button[disabled], .input[disabled],
-.textarea[disabled], .select select[disabled], .file-cta[disabled],
+.button[disabled], .input[disabled], .textarea[disabled], .select select[disabled], .file-cta[disabled],
 .file-name[disabled], .pagination-previous[disabled],
 .pagination-next[disabled],
 .pagination-link[disabled],
@@ -3022,2442 +3016,2316 @@ fieldset[disabled] .button {
   font-size: 1.5rem;
 }
 
-.input,
-.textarea {
-  background-color: white;
-  border-color: #dbdbdb;
-  border-radius: 4px;
-  color: #363636;
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-  max-width: 100%;
-  width: 100%;
+.icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.5rem;
 }
 
-.input::-moz-placeholder,
-.textarea::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.icon.is-small {
+  height: 1rem;
+  width: 1rem;
 }
 
-.input::-webkit-input-placeholder,
-.textarea::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.icon.is-medium {
+  height: 2rem;
+  width: 2rem;
 }
 
-.input:-moz-placeholder,
-.textarea:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.icon.is-large {
+  height: 3rem;
+  width: 3rem;
 }
 
-.input:-ms-input-placeholder,
-.textarea:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.image {
+  display: block;
+  position: relative;
 }
 
-.input:hover, .input.is-hovered,
-.textarea:hover,
-.textarea.is-hovered {
-  border-color: #b5b5b5;
+.image img {
+  display: block;
+  height: auto;
+  width: 100%;
 }
 
-.input:focus, .input.is-focused, .input:active, .input.is-active,
-.textarea:focus,
-.textarea.is-focused,
-.textarea:active,
-.textarea.is-active {
-  border-color: #3273dc;
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+.image img.is-rounded {
+  border-radius: 290486px;
 }
 
-.input[disabled],
-fieldset[disabled] .input,
-.textarea[disabled],
-fieldset[disabled]
-.textarea {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
-  box-shadow: none;
-  color: #7a7a7a;
+.image.is-square img,
+.image.is-square .has-ratio, .image.is-1by1 img,
+.image.is-1by1 .has-ratio, .image.is-5by4 img,
+.image.is-5by4 .has-ratio, .image.is-4by3 img,
+.image.is-4by3 .has-ratio, .image.is-3by2 img,
+.image.is-3by2 .has-ratio, .image.is-5by3 img,
+.image.is-5by3 .has-ratio, .image.is-16by9 img,
+.image.is-16by9 .has-ratio, .image.is-2by1 img,
+.image.is-2by1 .has-ratio, .image.is-3by1 img,
+.image.is-3by1 .has-ratio, .image.is-4by5 img,
+.image.is-4by5 .has-ratio, .image.is-3by4 img,
+.image.is-3by4 .has-ratio, .image.is-2by3 img,
+.image.is-2by3 .has-ratio, .image.is-3by5 img,
+.image.is-3by5 .has-ratio, .image.is-9by16 img,
+.image.is-9by16 .has-ratio, .image.is-1by2 img,
+.image.is-1by2 .has-ratio, .image.is-1by3 img,
+.image.is-1by3 .has-ratio {
+  height: 100%;
+  width: 100%;
 }
 
-.input[disabled]::-moz-placeholder,
-fieldset[disabled] .input::-moz-placeholder,
-.textarea[disabled]::-moz-placeholder,
-fieldset[disabled]
-.textarea::-moz-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.image.is-square, .image.is-1by1 {
+  padding-top: 100%;
 }
 
-.input[disabled]::-webkit-input-placeholder,
-fieldset[disabled] .input::-webkit-input-placeholder,
-.textarea[disabled]::-webkit-input-placeholder,
-fieldset[disabled]
-.textarea::-webkit-input-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.image.is-5by4 {
+  padding-top: 80%;
 }
 
-.input[disabled]:-moz-placeholder,
-fieldset[disabled] .input:-moz-placeholder,
-.textarea[disabled]:-moz-placeholder,
-fieldset[disabled]
-.textarea:-moz-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.image.is-4by3 {
+  padding-top: 75%;
 }
 
-.input[disabled]:-ms-input-placeholder,
-fieldset[disabled] .input:-ms-input-placeholder,
-.textarea[disabled]:-ms-input-placeholder,
-fieldset[disabled]
-.textarea:-ms-input-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.image.is-3by2 {
+  padding-top: 66.6666%;
 }
 
-.input[readonly],
-.textarea[readonly] {
-  box-shadow: none;
+.image.is-5by3 {
+  padding-top: 60%;
 }
 
-.input.is-white,
-.textarea.is-white {
-  border-color: white;
+.image.is-16by9 {
+  padding-top: 56.25%;
 }
 
-.input.is-white:focus, .input.is-white.is-focused, .input.is-white:active, .input.is-white.is-active,
-.textarea.is-white:focus,
-.textarea.is-white.is-focused,
-.textarea.is-white:active,
-.textarea.is-white.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+.image.is-2by1 {
+  padding-top: 50%;
 }
 
-.input.is-black,
-.textarea.is-black {
-  border-color: #0a0a0a;
+.image.is-3by1 {
+  padding-top: 33.3333%;
 }
 
-.input.is-black:focus, .input.is-black.is-focused, .input.is-black:active, .input.is-black.is-active,
-.textarea.is-black:focus,
-.textarea.is-black.is-focused,
-.textarea.is-black:active,
-.textarea.is-black.is-active {
-  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
+.image.is-4by5 {
+  padding-top: 125%;
 }
 
-.input.is-light,
-.textarea.is-light {
-  border-color: whitesmoke;
+.image.is-3by4 {
+  padding-top: 133.3333%;
 }
 
-.input.is-light:focus, .input.is-light.is-focused, .input.is-light:active, .input.is-light.is-active,
-.textarea.is-light:focus,
-.textarea.is-light.is-focused,
-.textarea.is-light:active,
-.textarea.is-light.is-active {
-  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
+.image.is-2by3 {
+  padding-top: 150%;
 }
 
-.input.is-dark,
-.textarea.is-dark {
-  border-color: #363636;
+.image.is-3by5 {
+  padding-top: 166.6666%;
 }
 
-.input.is-dark:focus, .input.is-dark.is-focused, .input.is-dark:active, .input.is-dark.is-active,
-.textarea.is-dark:focus,
-.textarea.is-dark.is-focused,
-.textarea.is-dark:active,
-.textarea.is-dark.is-active {
-  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
+.image.is-9by16 {
+  padding-top: 177.7777%;
 }
 
-.input.is-primary,
-.textarea.is-primary {
-  border-color: #00d1b2;
+.image.is-1by2 {
+  padding-top: 200%;
 }
 
-.input.is-primary:focus, .input.is-primary.is-focused, .input.is-primary:active, .input.is-primary.is-active,
-.textarea.is-primary:focus,
-.textarea.is-primary.is-focused,
-.textarea.is-primary:active,
-.textarea.is-primary.is-active {
-  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+.image.is-1by3 {
+  padding-top: 300%;
 }
 
-.input.is-link,
-.textarea.is-link {
-  border-color: #3273dc;
+.image.is-16x16 {
+  height: 16px;
+  width: 16px;
 }
 
-.input.is-link:focus, .input.is-link.is-focused, .input.is-link:active, .input.is-link.is-active,
-.textarea.is-link:focus,
-.textarea.is-link.is-focused,
-.textarea.is-link:active,
-.textarea.is-link.is-active {
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+.image.is-24x24 {
+  height: 24px;
+  width: 24px;
 }
 
-.input.is-info,
-.textarea.is-info {
-  border-color: #209cee;
+.image.is-32x32 {
+  height: 32px;
+  width: 32px;
 }
 
-.input.is-info:focus, .input.is-info.is-focused, .input.is-info:active, .input.is-info.is-active,
-.textarea.is-info:focus,
-.textarea.is-info.is-focused,
-.textarea.is-info:active,
-.textarea.is-info.is-active {
-  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+.image.is-48x48 {
+  height: 48px;
+  width: 48px;
 }
 
-.input.is-success,
-.textarea.is-success {
-  border-color: #23d160;
+.image.is-64x64 {
+  height: 64px;
+  width: 64px;
 }
 
-.input.is-success:focus, .input.is-success.is-focused, .input.is-success:active, .input.is-success.is-active,
-.textarea.is-success:focus,
-.textarea.is-success.is-focused,
-.textarea.is-success:active,
-.textarea.is-success.is-active {
-  box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
+.image.is-96x96 {
+  height: 96px;
+  width: 96px;
 }
 
-.input.is-warning,
-.textarea.is-warning {
-  border-color: #ffdd57;
+.image.is-128x128 {
+  height: 128px;
+  width: 128px;
 }
 
-.input.is-warning:focus, .input.is-warning.is-focused, .input.is-warning:active, .input.is-warning.is-active,
-.textarea.is-warning:focus,
-.textarea.is-warning.is-focused,
-.textarea.is-warning:active,
-.textarea.is-warning.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
+.notification {
+  background-color: whitesmoke;
+  border-radius: 4px;
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+  position: relative;
 }
 
-.input.is-danger,
-.textarea.is-danger {
-  border-color: #ff3860;
+.notification a:not(.button):not(.dropdown-item) {
+  color: currentColor;
+  text-decoration: underline;
 }
 
-.input.is-danger:focus, .input.is-danger.is-focused, .input.is-danger:active, .input.is-danger.is-active,
-.textarea.is-danger:focus,
-.textarea.is-danger.is-focused,
-.textarea.is-danger:active,
-.textarea.is-danger.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
+.notification strong {
+  color: currentColor;
 }
 
-.input.is-small,
-.textarea.is-small {
-  border-radius: 2px;
-  font-size: 0.75rem;
+.notification code,
+.notification pre {
+  background: white;
 }
 
-.input.is-medium,
-.textarea.is-medium {
-  font-size: 1.25rem;
+.notification pre code {
+  background: transparent;
 }
 
-.input.is-large,
-.textarea.is-large {
-  font-size: 1.5rem;
+.notification > .delete {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
 }
 
-.input.is-fullwidth,
-.textarea.is-fullwidth {
-  display: block;
-  width: 100%;
+.notification .title,
+.notification .subtitle,
+.notification .content {
+  color: currentColor;
 }
 
-.input.is-inline,
-.textarea.is-inline {
-  display: inline;
-  width: auto;
+.notification.is-white {
+  background-color: white;
+  color: #0a0a0a;
 }
 
-.input.is-rounded {
-  border-radius: 290486px;
-  padding-left: 1em;
-  padding-right: 1em;
+.notification.is-black {
+  background-color: #0a0a0a;
+  color: white;
 }
 
-.input.is-static {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-  padding-left: 0;
-  padding-right: 0;
+.notification.is-light {
+  background-color: whitesmoke;
+  color: #363636;
 }
 
-.textarea {
-  display: block;
-  max-width: 100%;
-  min-width: 100%;
-  padding: 0.625em;
-  resize: vertical;
+.notification.is-dark {
+  background-color: #363636;
+  color: whitesmoke;
 }
 
-.textarea:not([rows]) {
-  max-height: 600px;
-  min-height: 120px;
+.notification.is-primary {
+  background-color: #00d1b2;
+  color: #fff;
 }
 
-.textarea[rows] {
-  height: initial;
+.notification.is-link {
+  background-color: #3273dc;
+  color: #fff;
 }
 
-.textarea.has-fixed-size {
-  resize: none;
+.notification.is-info {
+  background-color: #209cee;
+  color: #fff;
 }
 
-.checkbox,
-.radio {
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1.25;
-  position: relative;
+.notification.is-success {
+  background-color: #23d160;
+  color: #fff;
 }
 
-.checkbox input,
-.radio input {
-  cursor: pointer;
+.notification.is-warning {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.checkbox:hover,
-.radio:hover {
-  color: #363636;
+.notification.is-danger {
+  background-color: #ff3860;
+  color: #fff;
 }
 
-.checkbox[disabled],
-fieldset[disabled] .checkbox,
-.radio[disabled],
-fieldset[disabled]
-.radio {
-  color: #7a7a7a;
-  cursor: not-allowed;
+.progress {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 290486px;
+  display: block;
+  height: 1rem;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
 }
 
-.radio + .radio {
-  margin-left: 0.5em;
+.progress::-webkit-progress-bar {
+  background-color: #dbdbdb;
 }
 
-.select {
-  display: inline-block;
-  max-width: 100%;
-  position: relative;
-  vertical-align: top;
+.progress::-webkit-progress-value {
+  background-color: #4a4a4a;
 }
 
-.select:not(.is-multiple) {
-  height: 2.25em;
+.progress::-moz-progress-bar {
+  background-color: #4a4a4a;
 }
 
-.select:not(.is-multiple):not(.is-loading)::after {
-  border-color: #3273dc;
-  right: 1.125em;
-  z-index: 4;
+.progress::-ms-fill {
+  background-color: #4a4a4a;
+  border: none;
 }
 
-.select.is-rounded select {
-  border-radius: 290486px;
-  padding-left: 1em;
+.progress.is-white::-webkit-progress-value {
+  background-color: white;
 }
 
-.select select {
+.progress.is-white::-moz-progress-bar {
   background-color: white;
-  border-color: #dbdbdb;
-  border-radius: 4px;
-  color: #363636;
-  cursor: pointer;
-  display: block;
-  font-size: 1em;
-  max-width: 100%;
-  outline: none;
 }
 
-.select select::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.progress.is-white::-ms-fill {
+  background-color: white;
 }
 
-.select select::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.progress.is-white:indeterminate {
+  background-image: linear-gradient(to right, white 30%, #dbdbdb 30%);
 }
 
-.select select:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.progress.is-black::-webkit-progress-value {
+  background-color: #0a0a0a;
 }
 
-.select select:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+.progress.is-black::-moz-progress-bar {
+  background-color: #0a0a0a;
 }
 
-.select select:hover, .select select.is-hovered {
-  border-color: #b5b5b5;
+.progress.is-black::-ms-fill {
+  background-color: #0a0a0a;
 }
 
-.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
-  border-color: #3273dc;
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+.progress.is-black:indeterminate {
+  background-image: linear-gradient(to right, #0a0a0a 30%, #dbdbdb 30%);
 }
 
-.select select[disabled],
-fieldset[disabled] .select select {
+.progress.is-light::-webkit-progress-value {
   background-color: whitesmoke;
-  border-color: whitesmoke;
-  box-shadow: none;
-  color: #7a7a7a;
 }
 
-.select select[disabled]::-moz-placeholder,
-fieldset[disabled] .select select::-moz-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.progress.is-light::-moz-progress-bar {
+  background-color: whitesmoke;
 }
 
-.select select[disabled]::-webkit-input-placeholder,
-fieldset[disabled] .select select::-webkit-input-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.progress.is-light::-ms-fill {
+  background-color: whitesmoke;
 }
 
-.select select[disabled]:-moz-placeholder,
-fieldset[disabled] .select select:-moz-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.progress.is-light:indeterminate {
+  background-image: linear-gradient(to right, whitesmoke 30%, #dbdbdb 30%);
 }
 
-.select select[disabled]:-ms-input-placeholder,
-fieldset[disabled] .select select:-ms-input-placeholder {
-  color: rgba(122, 122, 122, 0.3);
+.progress.is-dark::-webkit-progress-value {
+  background-color: #363636;
 }
 
-.select select::-ms-expand {
-  display: none;
+.progress.is-dark::-moz-progress-bar {
+  background-color: #363636;
 }
 
-.select select[disabled]:hover,
-fieldset[disabled] .select select:hover {
-  border-color: whitesmoke;
+.progress.is-dark::-ms-fill {
+  background-color: #363636;
 }
 
-.select select:not([multiple]) {
-  padding-right: 2.5em;
+.progress.is-dark:indeterminate {
+  background-image: linear-gradient(to right, #363636 30%, #dbdbdb 30%);
 }
 
-.select select[multiple] {
-  height: auto;
-  padding: 0;
+.progress.is-primary::-webkit-progress-value {
+  background-color: #00d1b2;
 }
 
-.select select[multiple] option {
-  padding: 0.5em 1em;
+.progress.is-primary::-moz-progress-bar {
+  background-color: #00d1b2;
 }
 
-.select:not(.is-multiple):not(.is-loading):hover::after {
-  border-color: #363636;
+.progress.is-primary::-ms-fill {
+  background-color: #00d1b2;
 }
 
-.select.is-white:not(:hover)::after {
-  border-color: white;
+.progress.is-primary:indeterminate {
+  background-image: linear-gradient(to right, #00d1b2 30%, #dbdbdb 30%);
 }
 
-.select.is-white select {
-  border-color: white;
+.progress.is-link::-webkit-progress-value {
+  background-color: #3273dc;
 }
 
-.select.is-white select:hover, .select.is-white select.is-hovered {
-  border-color: #f2f2f2;
+.progress.is-link::-moz-progress-bar {
+  background-color: #3273dc;
 }
 
-.select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+.progress.is-link::-ms-fill {
+  background-color: #3273dc;
 }
 
-.select.is-black:not(:hover)::after {
-  border-color: #0a0a0a;
+.progress.is-link:indeterminate {
+  background-image: linear-gradient(to right, #3273dc 30%, #dbdbdb 30%);
 }
 
-.select.is-black select {
-  border-color: #0a0a0a;
+.progress.is-info::-webkit-progress-value {
+  background-color: #209cee;
 }
 
-.select.is-black select:hover, .select.is-black select.is-hovered {
-  border-color: black;
+.progress.is-info::-moz-progress-bar {
+  background-color: #209cee;
 }
 
-.select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
+.progress.is-info::-ms-fill {
+  background-color: #209cee;
 }
 
-.select.is-light:not(:hover)::after {
-  border-color: whitesmoke;
+.progress.is-info:indeterminate {
+  background-image: linear-gradient(to right, #209cee 30%, #dbdbdb 30%);
 }
 
-.select.is-light select {
-  border-color: whitesmoke;
+.progress.is-success::-webkit-progress-value {
+  background-color: #23d160;
 }
 
-.select.is-light select:hover, .select.is-light select.is-hovered {
-  border-color: #e8e8e8;
+.progress.is-success::-moz-progress-bar {
+  background-color: #23d160;
 }
 
-.select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
+.progress.is-success::-ms-fill {
+  background-color: #23d160;
 }
 
-.select.is-dark:not(:hover)::after {
-  border-color: #363636;
+.progress.is-success:indeterminate {
+  background-image: linear-gradient(to right, #23d160 30%, #dbdbdb 30%);
 }
 
-.select.is-dark select {
-  border-color: #363636;
+.progress.is-warning::-webkit-progress-value {
+  background-color: #ffdd57;
 }
 
-.select.is-dark select:hover, .select.is-dark select.is-hovered {
-  border-color: #292929;
+.progress.is-warning::-moz-progress-bar {
+  background-color: #ffdd57;
 }
 
-.select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
+.progress.is-warning::-ms-fill {
+  background-color: #ffdd57;
 }
 
-.select.is-primary:not(:hover)::after {
-  border-color: #00d1b2;
+.progress.is-warning:indeterminate {
+  background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%);
 }
 
-.select.is-primary select {
-  border-color: #00d1b2;
+.progress.is-danger::-webkit-progress-value {
+  background-color: #ff3860;
 }
 
-.select.is-primary select:hover, .select.is-primary select.is-hovered {
-  border-color: #00b89c;
+.progress.is-danger::-moz-progress-bar {
+  background-color: #ff3860;
 }
 
-.select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+.progress.is-danger::-ms-fill {
+  background-color: #ff3860;
 }
 
-.select.is-link:not(:hover)::after {
-  border-color: #3273dc;
+.progress.is-danger:indeterminate {
+  background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%);
 }
 
-.select.is-link select {
-  border-color: #3273dc;
+.progress:indeterminate {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
+  animation-timing-function: linear;
+  background-color: #dbdbdb;
+  background-image: linear-gradient(to right, #4a4a4a 30%, #dbdbdb 30%);
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: 150% 150%;
 }
 
-.select.is-link select:hover, .select.is-link select.is-hovered {
-  border-color: #2366d1;
+.progress:indeterminate::-webkit-progress-bar {
+  background-color: transparent;
 }
 
-.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+.progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
 }
 
-.select.is-info:not(:hover)::after {
-  border-color: #209cee;
+.progress.is-small {
+  height: 0.75rem;
 }
 
-.select.is-info select {
-  border-color: #209cee;
+.progress.is-medium {
+  height: 1.25rem;
 }
 
-.select.is-info select:hover, .select.is-info select.is-hovered {
-  border-color: #118fe4;
+.progress.is-large {
+  height: 1.5rem;
 }
 
-.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+@keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
 }
 
-.select.is-success:not(:hover)::after {
-  border-color: #23d160;
+.table {
+  background-color: white;
+  color: #363636;
 }
 
-.select.is-success select {
-  border-color: #23d160;
+.table td,
+.table th {
+  border: 1px solid #dbdbdb;
+  border-width: 0 0 1px;
+  padding: 0.5em 0.75em;
+  vertical-align: top;
 }
 
-.select.is-success select:hover, .select.is-success select.is-hovered {
-  border-color: #20bc56;
+.table td.is-white,
+.table th.is-white {
+  background-color: white;
+  border-color: white;
+  color: #0a0a0a;
 }
 
-.select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
+.table td.is-black,
+.table th.is-black {
+  background-color: #0a0a0a;
+  border-color: #0a0a0a;
+  color: white;
 }
 
-.select.is-warning:not(:hover)::after {
-  border-color: #ffdd57;
+.table td.is-light,
+.table th.is-light {
+  background-color: whitesmoke;
+  border-color: whitesmoke;
+  color: #363636;
 }
 
-.select.is-warning select {
-  border-color: #ffdd57;
+.table td.is-dark,
+.table th.is-dark {
+  background-color: #363636;
+  border-color: #363636;
+  color: whitesmoke;
 }
 
-.select.is-warning select:hover, .select.is-warning select.is-hovered {
-  border-color: #ffd83d;
+.table td.is-primary,
+.table th.is-primary {
+  background-color: #00d1b2;
+  border-color: #00d1b2;
+  color: #fff;
 }
 
-.select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
+.table td.is-link,
+.table th.is-link {
+  background-color: #3273dc;
+  border-color: #3273dc;
+  color: #fff;
 }
 
-.select.is-danger:not(:hover)::after {
-  border-color: #ff3860;
+.table td.is-info,
+.table th.is-info {
+  background-color: #209cee;
+  border-color: #209cee;
+  color: #fff;
 }
 
-.select.is-danger select {
-  border-color: #ff3860;
+.table td.is-success,
+.table th.is-success {
+  background-color: #23d160;
+  border-color: #23d160;
+  color: #fff;
 }
 
-.select.is-danger select:hover, .select.is-danger select.is-hovered {
-  border-color: #ff1f4b;
+.table td.is-warning,
+.table th.is-warning {
+  background-color: #ffdd57;
+  border-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
-  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
+.table td.is-danger,
+.table th.is-danger {
+  background-color: #ff3860;
+  border-color: #ff3860;
+  color: #fff;
 }
 
-.select.is-small {
-  border-radius: 2px;
-  font-size: 0.75rem;
+.table td.is-narrow,
+.table th.is-narrow {
+  white-space: nowrap;
+  width: 1%;
 }
 
-.select.is-medium {
-  font-size: 1.25rem;
+.table td.is-selected,
+.table th.is-selected {
+  background-color: #00d1b2;
+  color: #fff;
 }
 
-.select.is-large {
-  font-size: 1.5rem;
+.table td.is-selected a,
+.table td.is-selected strong,
+.table th.is-selected a,
+.table th.is-selected strong {
+  color: currentColor;
 }
 
-.select.is-disabled::after {
-  border-color: #7a7a7a;
+.table th {
+  color: #363636;
 }
 
-.select.is-fullwidth {
-  width: 100%;
+.table th:not([align]) {
+  text-align: left;
 }
 
-.select.is-fullwidth select {
-  width: 100%;
+.table tr.is-selected {
+  background-color: #00d1b2;
+  color: #fff;
 }
 
-.select.is-loading::after {
-  margin-top: 0;
-  position: absolute;
-  right: 0.625em;
-  top: 0.625em;
-  transform: none;
+.table tr.is-selected a,
+.table tr.is-selected strong {
+  color: currentColor;
 }
 
-.select.is-loading.is-small:after {
-  font-size: 0.75rem;
+.table tr.is-selected td,
+.table tr.is-selected th {
+  border-color: #fff;
+  color: currentColor;
 }
 
-.select.is-loading.is-medium:after {
-  font-size: 1.25rem;
+.table thead {
+  background-color: transparent;
 }
 
-.select.is-loading.is-large:after {
-  font-size: 1.5rem;
+.table thead td,
+.table thead th {
+  border-width: 0 0 2px;
+  color: #363636;
 }
 
-.file {
-  align-items: stretch;
-  display: flex;
-  justify-content: flex-start;
-  position: relative;
+.table tfoot {
+  background-color: transparent;
 }
 
-.file.is-white .file-cta {
-  background-color: white;
-  border-color: transparent;
-  color: #0a0a0a;
+.table tfoot td,
+.table tfoot th {
+  border-width: 2px 0 0;
+  color: #363636;
 }
 
-.file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta {
-  background-color: #f9f9f9;
-  border-color: transparent;
-  color: #0a0a0a;
+.table tbody {
+  background-color: transparent;
 }
 
-.file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
-  color: #0a0a0a;
+.table tbody tr:last-child td,
+.table tbody tr:last-child th {
+  border-bottom-width: 0;
 }
 
-.file.is-white:active .file-cta, .file.is-white.is-active .file-cta {
-  background-color: #f2f2f2;
-  border-color: transparent;
-  color: #0a0a0a;
+.table.is-bordered td,
+.table.is-bordered th {
+  border-width: 1px;
 }
 
-.file.is-black .file-cta {
-  background-color: #0a0a0a;
-  border-color: transparent;
-  color: white;
+.table.is-bordered tr:last-child td,
+.table.is-bordered tr:last-child th {
+  border-bottom-width: 1px;
 }
 
-.file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta {
-  background-color: #040404;
-  border-color: transparent;
-  color: white;
+.table.is-fullwidth {
+  width: 100%;
 }
 
-.file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
-  color: white;
+.table.is-hoverable tbody tr:not(.is-selected):hover {
+  background-color: #fafafa;
 }
 
-.file.is-black:active .file-cta, .file.is-black.is-active .file-cta {
-  background-color: black;
-  border-color: transparent;
-  color: white;
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
+  background-color: #fafafa;
 }
 
-.file.is-light .file-cta {
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
   background-color: whitesmoke;
-  border-color: transparent;
-  color: #363636;
 }
 
-.file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta {
-  background-color: #eeeeee;
-  border-color: transparent;
-  color: #363636;
+.table.is-narrow td,
+.table.is-narrow th {
+  padding: 0.25em 0.5em;
 }
 
-.file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
-  color: #363636;
+.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
+  background-color: #fafafa;
 }
 
-.file.is-light:active .file-cta, .file.is-light.is-active .file-cta {
-  background-color: #e8e8e8;
-  border-color: transparent;
-  color: #363636;
+.table-container {
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+  overflow-y: hidden;
+  max-width: 100%;
 }
 
-.file.is-dark .file-cta {
-  background-color: #363636;
-  border-color: transparent;
-  color: whitesmoke;
+.tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
-.file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta {
-  background-color: #2f2f2f;
-  border-color: transparent;
-  color: whitesmoke;
+.tags .tag {
+  margin-bottom: 0.5rem;
 }
 
-.file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
-  color: whitesmoke;
+.tags .tag:not(:last-child) {
+  margin-right: 0.5rem;
 }
 
-.file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta {
-  background-color: #292929;
-  border-color: transparent;
-  color: whitesmoke;
+.tags:last-child {
+  margin-bottom: -0.5rem;
 }
 
-.file.is-primary .file-cta {
-  background-color: #00d1b2;
-  border-color: transparent;
-  color: #fff;
+.tags:not(:last-child) {
+  margin-bottom: 1rem;
 }
 
-.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
-  background-color: #00c4a7;
-  border-color: transparent;
-  color: #fff;
+.tags.are-medium .tag:not(.is-normal):not(.is-large) {
+  font-size: 1rem;
 }
 
-.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
-  color: #fff;
+.tags.are-large .tag:not(.is-normal):not(.is-medium) {
+  font-size: 1.25rem;
 }
 
-.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta {
-  background-color: #00b89c;
-  border-color: transparent;
-  color: #fff;
+.tags.is-centered {
+  justify-content: center;
 }
 
-.file.is-link .file-cta {
-  background-color: #3273dc;
-  border-color: transparent;
-  color: #fff;
+.tags.is-centered .tag {
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
 }
 
-.file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta {
-  background-color: #276cda;
-  border-color: transparent;
-  color: #fff;
+.tags.is-right {
+  justify-content: flex-end;
 }
 
-.file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
-  color: #fff;
+.tags.is-right .tag:not(:first-child) {
+  margin-left: 0.5rem;
 }
 
-.file.is-link:active .file-cta, .file.is-link.is-active .file-cta {
-  background-color: #2366d1;
-  border-color: transparent;
-  color: #fff;
-}
-
-.file.is-info .file-cta {
-  background-color: #209cee;
-  border-color: transparent;
-  color: #fff;
+.tags.is-right .tag:not(:last-child) {
+  margin-right: 0;
 }
 
-.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
-  background-color: #1496ed;
-  border-color: transparent;
-  color: #fff;
+.tags.has-addons .tag {
+  margin-right: 0;
 }
 
-.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
-  color: #fff;
+.tags.has-addons .tag:not(:first-child) {
+  margin-left: 0;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
 
-.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
-  background-color: #118fe4;
-  border-color: transparent;
-  color: #fff;
+.tags.has-addons .tag:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.file.is-success .file-cta {
-  background-color: #23d160;
-  border-color: transparent;
-  color: #fff;
+.tag:not(body) {
+  align-items: center;
+  background-color: whitesmoke;
+  border-radius: 4px;
+  color: #4a4a4a;
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 2em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
 }
 
-.file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta {
-  background-color: #22c65b;
-  border-color: transparent;
-  color: #fff;
+.tag:not(body) .delete {
+  margin-left: 0.25rem;
+  margin-right: -0.375rem;
 }
 
-.file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
-  color: #fff;
+.tag:not(body).is-white {
+  background-color: white;
+  color: #0a0a0a;
 }
 
-.file.is-success:active .file-cta, .file.is-success.is-active .file-cta {
-  background-color: #20bc56;
-  border-color: transparent;
-  color: #fff;
+.tag:not(body).is-black {
+  background-color: #0a0a0a;
+  color: white;
 }
 
-.file.is-warning .file-cta {
-  background-color: #ffdd57;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
+.tag:not(body).is-light {
+  background-color: whitesmoke;
+  color: #363636;
 }
 
-.file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta {
-  background-color: #ffdb4a;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
+.tag:not(body).is-dark {
+  background-color: #363636;
+  color: whitesmoke;
 }
 
-.file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
-  color: rgba(0, 0, 0, 0.7);
+.tag:not(body).is-primary {
+  background-color: #00d1b2;
+  color: #fff;
 }
 
-.file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta {
-  background-color: #ffd83d;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
+.tag:not(body).is-link {
+  background-color: #3273dc;
+  color: #fff;
 }
 
-.file.is-danger .file-cta {
-  background-color: #ff3860;
-  border-color: transparent;
+.tag:not(body).is-info {
+  background-color: #209cee;
   color: #fff;
 }
 
-.file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
-  background-color: #ff2b56;
-  border-color: transparent;
+.tag:not(body).is-success {
+  background-color: #23d160;
   color: #fff;
 }
 
-.file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
-  border-color: transparent;
-  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
-  color: #fff;
+.tag:not(body).is-warning {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
-  background-color: #ff1f4b;
-  border-color: transparent;
+.tag:not(body).is-danger {
+  background-color: #ff3860;
   color: #fff;
 }
 
-.file.is-small {
+.tag:not(body).is-normal {
   font-size: 0.75rem;
 }
 
-.file.is-medium {
+.tag:not(body).is-medium {
+  font-size: 1rem;
+}
+
+.tag:not(body).is-large {
   font-size: 1.25rem;
 }
 
-.file.is-medium .file-icon .fa {
-  font-size: 21px;
+.tag:not(body) .icon:first-child:not(:last-child) {
+  margin-left: -0.375em;
+  margin-right: 0.1875em;
 }
 
-.file.is-large {
-  font-size: 1.5rem;
+.tag:not(body) .icon:last-child:not(:first-child) {
+  margin-left: 0.1875em;
+  margin-right: -0.375em;
 }
 
-.file.is-large .file-icon .fa {
-  font-size: 28px;
+.tag:not(body) .icon:first-child:last-child {
+  margin-left: -0.375em;
+  margin-right: -0.375em;
 }
 
-.file.has-name .file-cta {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+.tag:not(body).is-delete {
+  margin-left: 1px;
+  padding: 0;
+  position: relative;
+  width: 2em;
 }
 
-.file.has-name .file-name {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+.tag:not(body).is-delete::before, .tag:not(body).is-delete::after {
+  background-color: currentColor;
+  content: "";
+  display: block;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform-origin: center center;
 }
 
-.file.has-name.is-empty .file-cta {
-  border-radius: 4px;
+.tag:not(body).is-delete::before {
+  height: 1px;
+  width: 50%;
 }
 
-.file.has-name.is-empty .file-name {
-  display: none;
+.tag:not(body).is-delete::after {
+  height: 50%;
+  width: 1px;
 }
 
-.file.is-boxed .file-label {
-  flex-direction: column;
+.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
+  background-color: #e8e8e8;
 }
 
-.file.is-boxed .file-cta {
-  flex-direction: column;
-  height: auto;
-  padding: 1em 3em;
+.tag:not(body).is-delete:active {
+  background-color: #dbdbdb;
 }
 
-.file.is-boxed .file-name {
-  border-width: 0 1px 1px;
+.tag:not(body).is-rounded {
+  border-radius: 290486px;
 }
 
-.file.is-boxed .file-icon {
-  height: 1.5em;
-  width: 1.5em;
+a.tag:hover {
+  text-decoration: underline;
 }
 
-.file.is-boxed .file-icon .fa {
-  font-size: 21px;
+.title,
+.subtitle {
+  word-break: break-word;
 }
 
-.file.is-boxed.is-small .file-icon .fa {
-  font-size: 14px;
+.title em,
+.title span,
+.subtitle em,
+.subtitle span {
+  font-weight: inherit;
 }
 
-.file.is-boxed.is-medium .file-icon .fa {
-  font-size: 28px;
+.title sub,
+.subtitle sub {
+  font-size: 0.75em;
 }
 
-.file.is-boxed.is-large .file-icon .fa {
-  font-size: 35px;
+.title sup,
+.subtitle sup {
+  font-size: 0.75em;
 }
 
-.file.is-boxed.has-name .file-cta {
-  border-radius: 4px 4px 0 0;
+.title .tag,
+.subtitle .tag {
+  vertical-align: middle;
 }
 
-.file.is-boxed.has-name .file-name {
-  border-radius: 0 0 4px 4px;
-  border-width: 0 1px 1px;
+.title {
+  color: #363636;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.125;
 }
 
-.file.is-centered {
-  justify-content: center;
+.title strong {
+  color: inherit;
+  font-weight: inherit;
 }
 
-.file.is-fullwidth .file-label {
-  width: 100%;
+.title + .highlight {
+  margin-top: -0.75rem;
 }
 
-.file.is-fullwidth .file-name {
-  flex-grow: 1;
-  max-width: none;
+.title:not(.is-spaced) + .subtitle {
+  margin-top: -1.25rem;
 }
 
-.file.is-right {
-  justify-content: flex-end;
+.title.is-1 {
+  font-size: 3rem;
 }
 
-.file.is-right .file-cta {
-  border-radius: 0 4px 4px 0;
+.title.is-2 {
+  font-size: 2.5rem;
 }
 
-.file.is-right .file-name {
-  border-radius: 4px 0 0 4px;
-  border-width: 1px 0 1px 1px;
-  order: -1;
+.title.is-3 {
+  font-size: 2rem;
 }
 
-.file-label {
-  align-items: stretch;
-  display: flex;
-  cursor: pointer;
-  justify-content: flex-start;
-  overflow: hidden;
-  position: relative;
+.title.is-4 {
+  font-size: 1.5rem;
 }
 
-.file-label:hover .file-cta {
-  background-color: #eeeeee;
-  color: #363636;
+.title.is-5 {
+  font-size: 1.25rem;
 }
 
-.file-label:hover .file-name {
-  border-color: #d5d5d5;
+.title.is-6 {
+  font-size: 1rem;
 }
 
-.file-label:active .file-cta {
-  background-color: #e8e8e8;
-  color: #363636;
+.title.is-7 {
+  font-size: 0.75rem;
 }
 
-.file-label:active .file-name {
-  border-color: #cfcfcf;
+.subtitle {
+  color: #4a4a4a;
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.25;
 }
 
-.file-input {
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  outline: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
+.subtitle strong {
+  color: #363636;
+  font-weight: 600;
 }
 
-.file-cta,
-.file-name {
-  border-color: #dbdbdb;
-  border-radius: 4px;
-  font-size: 1em;
-  padding-left: 1em;
-  padding-right: 1em;
-  white-space: nowrap;
+.subtitle:not(.is-spaced) + .title {
+  margin-top: -1.25rem;
 }
 
-.file-cta {
-  background-color: whitesmoke;
-  color: #4a4a4a;
+.subtitle.is-1 {
+  font-size: 3rem;
 }
 
-.file-name {
-  border-color: #dbdbdb;
-  border-style: solid;
-  border-width: 1px 1px 1px 0;
-  display: block;
-  max-width: 16em;
-  overflow: hidden;
-  text-align: left;
-  text-overflow: ellipsis;
+.subtitle.is-2 {
+  font-size: 2.5rem;
 }
 
-.file-icon {
-  align-items: center;
-  display: flex;
-  height: 1em;
-  justify-content: center;
-  margin-right: 0.5em;
-  width: 1em;
+.subtitle.is-3 {
+  font-size: 2rem;
 }
 
-.file-icon .fa {
-  font-size: 14px;
+.subtitle.is-4 {
+  font-size: 1.5rem;
 }
 
-.label {
-  color: #363636;
-  display: block;
-  font-size: 1rem;
-  font-weight: 700;
+.subtitle.is-5 {
+  font-size: 1.25rem;
 }
 
-.label:not(:last-child) {
-  margin-bottom: 0.5em;
+.subtitle.is-6 {
+  font-size: 1rem;
 }
 
-.label.is-small {
+.subtitle.is-7 {
   font-size: 0.75rem;
 }
 
-.label.is-medium {
-  font-size: 1.25rem;
-}
-
-.label.is-large {
-  font-size: 1.5rem;
-}
-
-.help {
+.heading {
   display: block;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
+  font-size: 11px;
+  letter-spacing: 1px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
 }
 
-.help.is-white {
-  color: white;
+.highlight {
+  font-weight: 400;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
 }
 
-.help.is-black {
-  color: #0a0a0a;
+.highlight pre {
+  overflow: auto;
+  max-width: 100%;
 }
 
-.help.is-light {
-  color: whitesmoke;
+.number {
+  align-items: center;
+  background-color: whitesmoke;
+  border-radius: 290486px;
+  display: inline-flex;
+  font-size: 1.25rem;
+  height: 2em;
+  justify-content: center;
+  margin-right: 1.5rem;
+  min-width: 2.5em;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  vertical-align: top;
 }
 
-.help.is-dark {
+.input, .textarea, .select select {
+  background-color: white;
+  border-color: #dbdbdb;
+  border-radius: 4px;
   color: #363636;
 }
 
-.help.is-primary {
-  color: #00d1b2;
+.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
 }
 
-.help.is-link {
-  color: #3273dc;
+.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
 }
 
-.help.is-info {
-  color: #209cee;
+.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {
+  color: rgba(54, 54, 54, 0.3);
 }
 
-.help.is-success {
-  color: #23d160;
+.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
+  color: rgba(54, 54, 54, 0.3);
 }
 
-.help.is-warning {
-  color: #ffdd57;
+.input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered {
+  border-color: #b5b5b5;
 }
 
-.help.is-danger {
-  color: #ff3860;
+.input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
+  border-color: #3273dc;
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 }
 
-.field:not(:last-child) {
-  margin-bottom: 0.75rem;
+.input[disabled], .textarea[disabled], .select select[disabled],
+fieldset[disabled] .input,
+fieldset[disabled] .textarea,
+fieldset[disabled] .select select,
+.select fieldset[disabled] select {
+  background-color: whitesmoke;
+  border-color: whitesmoke;
+  box-shadow: none;
+  color: #7a7a7a;
 }
 
-.field.has-addons {
-  display: flex;
-  justify-content: flex-start;
+.input[disabled]::-moz-placeholder, .textarea[disabled]::-moz-placeholder, .select select[disabled]::-moz-placeholder,
+fieldset[disabled] .input::-moz-placeholder,
+fieldset[disabled] .textarea::-moz-placeholder,
+fieldset[disabled] .select select::-moz-placeholder,
+.select fieldset[disabled] select::-moz-placeholder {
+  color: rgba(122, 122, 122, 0.3);
 }
 
-.field.has-addons .control:not(:last-child) {
-  margin-right: -1px;
+.input[disabled]::-webkit-input-placeholder, .textarea[disabled]::-webkit-input-placeholder, .select select[disabled]::-webkit-input-placeholder,
+fieldset[disabled] .input::-webkit-input-placeholder,
+fieldset[disabled] .textarea::-webkit-input-placeholder,
+fieldset[disabled] .select select::-webkit-input-placeholder,
+.select fieldset[disabled] select::-webkit-input-placeholder {
+  color: rgba(122, 122, 122, 0.3);
 }
 
-.field.has-addons .control:not(:first-child):not(:last-child) .button,
-.field.has-addons .control:not(:first-child):not(:last-child) .input,
-.field.has-addons .control:not(:first-child):not(:last-child) .select select {
-  border-radius: 0;
+.input[disabled]:-moz-placeholder, .textarea[disabled]:-moz-placeholder, .select select[disabled]:-moz-placeholder,
+fieldset[disabled] .input:-moz-placeholder,
+fieldset[disabled] .textarea:-moz-placeholder,
+fieldset[disabled] .select select:-moz-placeholder,
+.select fieldset[disabled] select:-moz-placeholder {
+  color: rgba(122, 122, 122, 0.3);
 }
 
-.field.has-addons .control:first-child:not(:only-child) .button,
-.field.has-addons .control:first-child:not(:only-child) .input,
-.field.has-addons .control:first-child:not(:only-child) .select select {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+.input[disabled]:-ms-input-placeholder, .textarea[disabled]:-ms-input-placeholder, .select select[disabled]:-ms-input-placeholder,
+fieldset[disabled] .input:-ms-input-placeholder,
+fieldset[disabled] .textarea:-ms-input-placeholder,
+fieldset[disabled] .select select:-ms-input-placeholder,
+.select fieldset[disabled] select:-ms-input-placeholder {
+  color: rgba(122, 122, 122, 0.3);
 }
 
-.field.has-addons .control:last-child:not(:only-child) .button,
-.field.has-addons .control:last-child:not(:only-child) .input,
-.field.has-addons .control:last-child:not(:only-child) .select select {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+.input, .textarea {
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+  max-width: 100%;
+  width: 100%;
 }
 
-.field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered,
-.field.has-addons .control .input:not([disabled]):hover,
-.field.has-addons .control .input:not([disabled]).is-hovered,
-.field.has-addons .control .select select:not([disabled]):hover,
-.field.has-addons .control .select select:not([disabled]).is-hovered {
-  z-index: 2;
+.input[readonly], .textarea[readonly] {
+  box-shadow: none;
 }
 
-.field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active,
-.field.has-addons .control .input:not([disabled]):focus,
-.field.has-addons .control .input:not([disabled]).is-focused,
-.field.has-addons .control .input:not([disabled]):active,
-.field.has-addons .control .input:not([disabled]).is-active,
-.field.has-addons .control .select select:not([disabled]):focus,
-.field.has-addons .control .select select:not([disabled]).is-focused,
-.field.has-addons .control .select select:not([disabled]):active,
-.field.has-addons .control .select select:not([disabled]).is-active {
-  z-index: 3;
+.is-white.input, .is-white.textarea {
+  border-color: white;
 }
 
-.field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover,
-.field.has-addons .control .input:not([disabled]):focus:hover,
-.field.has-addons .control .input:not([disabled]).is-focused:hover,
-.field.has-addons .control .input:not([disabled]):active:hover,
-.field.has-addons .control .input:not([disabled]).is-active:hover,
-.field.has-addons .control .select select:not([disabled]):focus:hover,
-.field.has-addons .control .select select:not([disabled]).is-focused:hover,
-.field.has-addons .control .select select:not([disabled]):active:hover,
-.field.has-addons .control .select select:not([disabled]).is-active:hover {
-  z-index: 4;
+.is-white.input:focus, .is-white.textarea:focus, .is-white.is-focused.input, .is-white.is-focused.textarea, .is-white.input:active, .is-white.textarea:active, .is-white.is-active.input, .is-white.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
 }
 
-.field.has-addons .control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
+.is-black.input, .is-black.textarea {
+  border-color: #0a0a0a;
 }
 
-.field.has-addons.has-addons-centered {
-  justify-content: center;
+.is-black.input:focus, .is-black.textarea:focus, .is-black.is-focused.input, .is-black.is-focused.textarea, .is-black.input:active, .is-black.textarea:active, .is-black.is-active.input, .is-black.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
 }
 
-.field.has-addons.has-addons-right {
-  justify-content: flex-end;
+.is-light.input, .is-light.textarea {
+  border-color: whitesmoke;
 }
 
-.field.has-addons.has-addons-fullwidth .control {
-  flex-grow: 1;
-  flex-shrink: 0;
+.is-light.input:focus, .is-light.textarea:focus, .is-light.is-focused.input, .is-light.is-focused.textarea, .is-light.input:active, .is-light.textarea:active, .is-light.is-active.input, .is-light.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
 }
 
-.field.is-grouped {
-  display: flex;
-  justify-content: flex-start;
+.is-dark.input, .is-dark.textarea {
+  border-color: #363636;
 }
 
-.field.is-grouped > .control {
-  flex-shrink: 0;
+.is-dark.input:focus, .is-dark.textarea:focus, .is-dark.is-focused.input, .is-dark.is-focused.textarea, .is-dark.input:active, .is-dark.textarea:active, .is-dark.is-active.input, .is-dark.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
 }
 
-.field.is-grouped > .control:not(:last-child) {
-  margin-bottom: 0;
-  margin-right: 0.75rem;
+.is-primary.input, .is-primary.textarea {
+  border-color: #00d1b2;
 }
 
-.field.is-grouped > .control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
+.is-primary.input:focus, .is-primary.textarea:focus, .is-primary.is-focused.input, .is-primary.is-focused.textarea, .is-primary.input:active, .is-primary.textarea:active, .is-primary.is-active.input, .is-primary.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
 }
 
-.field.is-grouped.is-grouped-centered {
-  justify-content: center;
+.is-link.input, .is-link.textarea {
+  border-color: #3273dc;
 }
 
-.field.is-grouped.is-grouped-right {
-  justify-content: flex-end;
+.is-link.input:focus, .is-link.textarea:focus, .is-link.is-focused.input, .is-link.is-focused.textarea, .is-link.input:active, .is-link.textarea:active, .is-link.is-active.input, .is-link.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 }
 
-.field.is-grouped.is-grouped-multiline {
-  flex-wrap: wrap;
+.is-info.input, .is-info.textarea {
+  border-color: #209cee;
 }
 
-.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {
-  margin-bottom: 0.75rem;
+.is-info.input:focus, .is-info.textarea:focus, .is-info.is-focused.input, .is-info.is-focused.textarea, .is-info.input:active, .is-info.textarea:active, .is-info.is-active.input, .is-info.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
 }
 
-.field.is-grouped.is-grouped-multiline:last-child {
-  margin-bottom: -0.75rem;
+.is-success.input, .is-success.textarea {
+  border-color: #23d160;
 }
 
-.field.is-grouped.is-grouped-multiline:not(:last-child) {
-  margin-bottom: 0;
+.is-success.input:focus, .is-success.textarea:focus, .is-success.is-focused.input, .is-success.is-focused.textarea, .is-success.input:active, .is-success.textarea:active, .is-success.is-active.input, .is-success.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
 }
 
-@media screen and (min-width: 769px), print {
-  .field.is-horizontal {
-    display: flex;
-  }
+.is-warning.input, .is-warning.textarea {
+  border-color: #ffdd57;
 }
 
-.field-label .label {
-  font-size: inherit;
+.is-warning.input:focus, .is-warning.textarea:focus, .is-warning.is-focused.input, .is-warning.is-focused.textarea, .is-warning.input:active, .is-warning.textarea:active, .is-warning.is-active.input, .is-warning.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
 }
 
-@media screen and (max-width: 768px) {
-  .field-label {
-    margin-bottom: 0.5rem;
-  }
+.is-danger.input, .is-danger.textarea {
+  border-color: #ff3860;
 }
 
-@media screen and (min-width: 769px), print {
-  .field-label {
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    margin-right: 1.5rem;
-    text-align: right;
-  }
-  .field-label.is-small {
-    font-size: 0.75rem;
-    padding-top: 0.375em;
-  }
-  .field-label.is-normal {
-    padding-top: 0.375em;
-  }
-  .field-label.is-medium {
-    font-size: 1.25rem;
-    padding-top: 0.375em;
-  }
-  .field-label.is-large {
-    font-size: 1.5rem;
-    padding-top: 0.375em;
-  }
+.is-danger.input:focus, .is-danger.textarea:focus, .is-danger.is-focused.input, .is-danger.is-focused.textarea, .is-danger.input:active, .is-danger.textarea:active, .is-danger.is-active.input, .is-danger.is-active.textarea {
+  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
 }
 
-.field-body .field .field {
-  margin-bottom: 0;
+.is-small.input, .is-small.textarea {
+  border-radius: 2px;
+  font-size: 0.75rem;
 }
 
-@media screen and (min-width: 769px), print {
-  .field-body {
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 5;
-    flex-shrink: 1;
-  }
-  .field-body .field {
-    margin-bottom: 0;
-  }
-  .field-body > .field {
-    flex-shrink: 1;
-  }
-  .field-body > .field:not(.is-narrow) {
-    flex-grow: 1;
-  }
-  .field-body > .field:not(:last-child) {
-    margin-right: 0.75rem;
-  }
+.is-medium.input, .is-medium.textarea {
+  font-size: 1.25rem;
 }
 
-.control {
-  box-sizing: border-box;
-  clear: both;
-  font-size: 1rem;
-  position: relative;
-  text-align: left;
+.is-large.input, .is-large.textarea {
+  font-size: 1.5rem;
 }
 
-.control.has-icons-left .input:focus ~ .icon,
-.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
-.control.has-icons-right .select:focus ~ .icon {
-  color: #7a7a7a;
+.is-fullwidth.input, .is-fullwidth.textarea {
+  display: block;
+  width: 100%;
 }
 
-.control.has-icons-left .input.is-small ~ .icon,
-.control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon,
-.control.has-icons-right .select.is-small ~ .icon {
-  font-size: 0.75rem;
+.is-inline.input, .is-inline.textarea {
+  display: inline;
+  width: auto;
 }
 
-.control.has-icons-left .input.is-medium ~ .icon,
-.control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon,
-.control.has-icons-right .select.is-medium ~ .icon {
-  font-size: 1.25rem;
+.input.is-rounded {
+  border-radius: 290486px;
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
-.control.has-icons-left .input.is-large ~ .icon,
-.control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon,
-.control.has-icons-right .select.is-large ~ .icon {
-  font-size: 1.5rem;
+.input.is-static {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  color: #dbdbdb;
-  height: 2.25em;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 2.25em;
-  z-index: 4;
+.textarea {
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  padding: 0.625em;
+  resize: vertical;
 }
 
-.control.has-icons-left .input,
-.control.has-icons-left .select select {
-  padding-left: 2.25em;
+.textarea:not([rows]) {
+  max-height: 600px;
+  min-height: 120px;
 }
 
-.control.has-icons-left .icon.is-left {
-  left: 0;
+.textarea[rows] {
+  height: initial;
 }
 
-.control.has-icons-right .input,
-.control.has-icons-right .select select {
-  padding-right: 2.25em;
+.textarea.has-fixed-size {
+  resize: none;
 }
 
-.control.has-icons-right .icon.is-right {
-  right: 0;
+.checkbox, .radio {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.25;
+  position: relative;
 }
 
-.control.is-loading::after {
-  position: absolute !important;
-  right: 0.625em;
-  top: 0.625em;
-  z-index: 4;
+.checkbox input, .radio input {
+  cursor: pointer;
 }
 
-.control.is-loading.is-small:after {
-  font-size: 0.75rem;
+.checkbox:hover, .radio:hover {
+  color: #363636;
 }
 
-.control.is-loading.is-medium:after {
-  font-size: 1.25rem;
+.checkbox[disabled], .radio[disabled],
+fieldset[disabled] .checkbox,
+fieldset[disabled] .radio {
+  color: #7a7a7a;
+  cursor: not-allowed;
 }
 
-.control.is-loading.is-large:after {
-  font-size: 1.5rem;
+.radio + .radio {
+  margin-left: 0.5em;
 }
 
-.icon {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  height: 1.5rem;
-  width: 1.5rem;
+.select {
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
 }
 
-.icon.is-small {
-  height: 1rem;
-  width: 1rem;
+.select:not(.is-multiple) {
+  height: 2.25em;
 }
 
-.icon.is-medium {
-  height: 2rem;
-  width: 2rem;
+.select:not(.is-multiple):not(.is-loading)::after {
+  border-color: #3273dc;
+  right: 1.125em;
+  z-index: 4;
 }
 
-.icon.is-large {
-  height: 3rem;
-  width: 3rem;
+.select.is-rounded select {
+  border-radius: 290486px;
+  padding-left: 1em;
 }
 
-.image {
+.select select {
+  cursor: pointer;
   display: block;
-  position: relative;
+  font-size: 1em;
+  max-width: 100%;
+  outline: none;
 }
 
-.image img {
-  display: block;
-  height: auto;
-  width: 100%;
+.select select::-ms-expand {
+  display: none;
 }
 
-.image img.is-rounded {
-  border-radius: 290486px;
+.select select[disabled]:hover,
+fieldset[disabled] .select select:hover {
+  border-color: whitesmoke;
 }
 
-.image.is-square img,
-.image.is-square .has-ratio, .image.is-1by1 img,
-.image.is-1by1 .has-ratio, .image.is-5by4 img,
-.image.is-5by4 .has-ratio, .image.is-4by3 img,
-.image.is-4by3 .has-ratio, .image.is-3by2 img,
-.image.is-3by2 .has-ratio, .image.is-5by3 img,
-.image.is-5by3 .has-ratio, .image.is-16by9 img,
-.image.is-16by9 .has-ratio, .image.is-2by1 img,
-.image.is-2by1 .has-ratio, .image.is-3by1 img,
-.image.is-3by1 .has-ratio, .image.is-4by5 img,
-.image.is-4by5 .has-ratio, .image.is-3by4 img,
-.image.is-3by4 .has-ratio, .image.is-2by3 img,
-.image.is-2by3 .has-ratio, .image.is-3by5 img,
-.image.is-3by5 .has-ratio, .image.is-9by16 img,
-.image.is-9by16 .has-ratio, .image.is-1by2 img,
-.image.is-1by2 .has-ratio, .image.is-1by3 img,
-.image.is-1by3 .has-ratio {
-  height: 100%;
-  width: 100%;
+.select select:not([multiple]) {
+  padding-right: 2.5em;
 }
 
-.image.is-square, .image.is-1by1 {
-  padding-top: 100%;
+.select select[multiple] {
+  height: auto;
+  padding: 0;
 }
 
-.image.is-5by4 {
-  padding-top: 80%;
+.select select[multiple] option {
+  padding: 0.5em 1em;
 }
 
-.image.is-4by3 {
-  padding-top: 75%;
+.select:not(.is-multiple):not(.is-loading):hover::after {
+  border-color: #363636;
 }
 
-.image.is-3by2 {
-  padding-top: 66.6666%;
+.select.is-white:not(:hover)::after {
+  border-color: white;
 }
 
-.image.is-5by3 {
-  padding-top: 60%;
-}
+.select.is-white select {
+  border-color: white;
+}
 
-.image.is-16by9 {
-  padding-top: 56.25%;
+.select.is-white select:hover, .select.is-white select.is-hovered {
+  border-color: #f2f2f2;
 }
 
-.image.is-2by1 {
-  padding-top: 50%;
+.select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
 }
 
-.image.is-3by1 {
-  padding-top: 33.3333%;
+.select.is-black:not(:hover)::after {
+  border-color: #0a0a0a;
 }
 
-.image.is-4by5 {
-  padding-top: 125%;
+.select.is-black select {
+  border-color: #0a0a0a;
 }
 
-.image.is-3by4 {
-  padding-top: 133.3333%;
+.select.is-black select:hover, .select.is-black select.is-hovered {
+  border-color: black;
 }
 
-.image.is-2by3 {
-  padding-top: 150%;
+.select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
 }
 
-.image.is-3by5 {
-  padding-top: 166.6666%;
+.select.is-light:not(:hover)::after {
+  border-color: whitesmoke;
 }
 
-.image.is-9by16 {
-  padding-top: 177.7777%;
+.select.is-light select {
+  border-color: whitesmoke;
 }
 
-.image.is-1by2 {
-  padding-top: 200%;
+.select.is-light select:hover, .select.is-light select.is-hovered {
+  border-color: #e8e8e8;
 }
 
-.image.is-1by3 {
-  padding-top: 300%;
+.select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
 }
 
-.image.is-16x16 {
-  height: 16px;
-  width: 16px;
+.select.is-dark:not(:hover)::after {
+  border-color: #363636;
 }
 
-.image.is-24x24 {
-  height: 24px;
-  width: 24px;
+.select.is-dark select {
+  border-color: #363636;
 }
 
-.image.is-32x32 {
-  height: 32px;
-  width: 32px;
+.select.is-dark select:hover, .select.is-dark select.is-hovered {
+  border-color: #292929;
 }
 
-.image.is-48x48 {
-  height: 48px;
-  width: 48px;
+.select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
 }
 
-.image.is-64x64 {
-  height: 64px;
-  width: 64px;
+.select.is-primary:not(:hover)::after {
+  border-color: #00d1b2;
 }
 
-.image.is-96x96 {
-  height: 96px;
-  width: 96px;
+.select.is-primary select {
+  border-color: #00d1b2;
 }
 
-.image.is-128x128 {
-  height: 128px;
-  width: 128px;
+.select.is-primary select:hover, .select.is-primary select.is-hovered {
+  border-color: #00b89c;
 }
 
-.notification {
-  background-color: whitesmoke;
-  border-radius: 4px;
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
-  position: relative;
+.select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
 }
 
-.notification a:not(.button):not(.dropdown-item) {
-  color: currentColor;
-  text-decoration: underline;
+.select.is-link:not(:hover)::after {
+  border-color: #3273dc;
 }
 
-.notification strong {
-  color: currentColor;
+.select.is-link select {
+  border-color: #3273dc;
 }
 
-.notification code,
-.notification pre {
-  background: white;
+.select.is-link select:hover, .select.is-link select.is-hovered {
+  border-color: #2366d1;
 }
 
-.notification pre code {
-  background: transparent;
+.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 }
 
-.notification > .delete {
-  position: absolute;
-  right: 0.5rem;
-  top: 0.5rem;
+.select.is-info:not(:hover)::after {
+  border-color: #209cee;
 }
 
-.notification .title,
-.notification .subtitle,
-.notification .content {
-  color: currentColor;
+.select.is-info select {
+  border-color: #209cee;
 }
 
-.notification.is-white {
-  background-color: white;
-  color: #0a0a0a;
+.select.is-info select:hover, .select.is-info select.is-hovered {
+  border-color: #118fe4;
 }
 
-.notification.is-black {
-  background-color: #0a0a0a;
-  color: white;
+.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
 }
 
-.notification.is-light {
-  background-color: whitesmoke;
-  color: #363636;
+.select.is-success:not(:hover)::after {
+  border-color: #23d160;
 }
 
-.notification.is-dark {
-  background-color: #363636;
-  color: whitesmoke;
+.select.is-success select {
+  border-color: #23d160;
 }
 
-.notification.is-primary {
-  background-color: #00d1b2;
-  color: #fff;
+.select.is-success select:hover, .select.is-success select.is-hovered {
+  border-color: #20bc56;
 }
 
-.notification.is-link {
-  background-color: #3273dc;
-  color: #fff;
+.select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
 }
 
-.notification.is-info {
-  background-color: #209cee;
-  color: #fff;
+.select.is-warning:not(:hover)::after {
+  border-color: #ffdd57;
 }
 
-.notification.is-success {
-  background-color: #23d160;
-  color: #fff;
+.select.is-warning select {
+  border-color: #ffdd57;
 }
 
-.notification.is-warning {
-  background-color: #ffdd57;
-  color: rgba(0, 0, 0, 0.7);
+.select.is-warning select:hover, .select.is-warning select.is-hovered {
+  border-color: #ffd83d;
 }
 
-.notification.is-danger {
-  background-color: #ff3860;
-  color: #fff;
+.select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
 }
 
-.progress {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  border-radius: 290486px;
-  display: block;
-  height: 1rem;
-  overflow: hidden;
-  padding: 0;
-  width: 100%;
+.select.is-danger:not(:hover)::after {
+  border-color: #ff3860;
 }
 
-.progress::-webkit-progress-bar {
-  background-color: #dbdbdb;
+.select.is-danger select {
+  border-color: #ff3860;
 }
 
-.progress::-webkit-progress-value {
-  background-color: #4a4a4a;
+.select.is-danger select:hover, .select.is-danger select.is-hovered {
+  border-color: #ff1f4b;
 }
 
-.progress::-moz-progress-bar {
-  background-color: #4a4a4a;
+.select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25);
 }
 
-.progress::-ms-fill {
-  background-color: #4a4a4a;
-  border: none;
+.select.is-small {
+  border-radius: 2px;
+  font-size: 0.75rem;
 }
 
-.progress:indeterminate {
-  animation-duration: 1.5s;
-  animation-iteration-count: infinite;
-  animation-name: moveIndeterminate;
-  animation-timing-function: linear;
-  background-color: #dbdbdb;
-  background-image: linear-gradient(to right, #4a4a4a 30%, #dbdbdb 30%);
-  background-position: top left;
-  background-repeat: no-repeat;
-  background-size: 150% 150%;
+.select.is-medium {
+  font-size: 1.25rem;
 }
 
-.progress:indeterminate::-webkit-progress-bar {
-  background-color: transparent;
+.select.is-large {
+  font-size: 1.5rem;
 }
 
-.progress:indeterminate::-moz-progress-bar {
-  background-color: transparent;
+.select.is-disabled::after {
+  border-color: #7a7a7a;
 }
 
-.progress.is-white::-webkit-progress-value {
-  background-color: white;
+.select.is-fullwidth {
+  width: 100%;
 }
 
-.progress.is-white::-moz-progress-bar {
-  background-color: white;
+.select.is-fullwidth select {
+  width: 100%;
 }
 
-.progress.is-white::-ms-fill {
-  background-color: white;
+.select.is-loading::after {
+  margin-top: 0;
+  position: absolute;
+  right: 0.625em;
+  top: 0.625em;
+  transform: none;
 }
 
-.progress.is-white:indeterminate {
-  background-image: linear-gradient(to right, white 30%, #dbdbdb 30%);
+.select.is-loading.is-small:after {
+  font-size: 0.75rem;
 }
 
-.progress.is-black::-webkit-progress-value {
-  background-color: #0a0a0a;
+.select.is-loading.is-medium:after {
+  font-size: 1.25rem;
 }
 
-.progress.is-black::-moz-progress-bar {
-  background-color: #0a0a0a;
+.select.is-loading.is-large:after {
+  font-size: 1.5rem;
 }
 
-.progress.is-black::-ms-fill {
-  background-color: #0a0a0a;
+.file {
+  align-items: stretch;
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
 }
 
-.progress.is-black:indeterminate {
-  background-image: linear-gradient(to right, #0a0a0a 30%, #dbdbdb 30%);
+.file.is-white .file-cta {
+  background-color: white;
+  border-color: transparent;
+  color: #0a0a0a;
 }
 
-.progress.is-light::-webkit-progress-value {
-  background-color: whitesmoke;
+.file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta {
+  background-color: #f9f9f9;
+  border-color: transparent;
+  color: #0a0a0a;
 }
 
-.progress.is-light::-moz-progress-bar {
-  background-color: whitesmoke;
+.file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
+  color: #0a0a0a;
 }
 
-.progress.is-light::-ms-fill {
+.file.is-white:active .file-cta, .file.is-white.is-active .file-cta {
+  background-color: #f2f2f2;
+  border-color: transparent;
+  color: #0a0a0a;
+}
+
+.file.is-black .file-cta {
+  background-color: #0a0a0a;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta {
+  background-color: #040404;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
+  color: white;
+}
+
+.file.is-black:active .file-cta, .file.is-black.is-active .file-cta {
+  background-color: black;
+  border-color: transparent;
+  color: white;
+}
+
+.file.is-light .file-cta {
   background-color: whitesmoke;
+  border-color: transparent;
+  color: #363636;
 }
 
-.progress.is-light:indeterminate {
-  background-image: linear-gradient(to right, whitesmoke 30%, #dbdbdb 30%);
+.file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta {
+  background-color: #eeeeee;
+  border-color: transparent;
+  color: #363636;
 }
 
-.progress.is-dark::-webkit-progress-value {
-  background-color: #363636;
+.file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
+  color: #363636;
 }
 
-.progress.is-dark::-moz-progress-bar {
-  background-color: #363636;
+.file.is-light:active .file-cta, .file.is-light.is-active .file-cta {
+  background-color: #e8e8e8;
+  border-color: transparent;
+  color: #363636;
 }
 
-.progress.is-dark::-ms-fill {
+.file.is-dark .file-cta {
   background-color: #363636;
+  border-color: transparent;
+  color: whitesmoke;
 }
 
-.progress.is-dark:indeterminate {
-  background-image: linear-gradient(to right, #363636 30%, #dbdbdb 30%);
+.file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta {
+  background-color: #2f2f2f;
+  border-color: transparent;
+  color: whitesmoke;
 }
 
-.progress.is-primary::-webkit-progress-value {
-  background-color: #00d1b2;
+.file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
+  color: whitesmoke;
 }
 
-.progress.is-primary::-moz-progress-bar {
-  background-color: #00d1b2;
+.file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta {
+  background-color: #292929;
+  border-color: transparent;
+  color: whitesmoke;
 }
 
-.progress.is-primary::-ms-fill {
+.file.is-primary .file-cta {
   background-color: #00d1b2;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-primary:indeterminate {
-  background-image: linear-gradient(to right, #00d1b2 30%, #dbdbdb 30%);
+.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta {
+  background-color: #00c4a7;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-link::-webkit-progress-value {
-  background-color: #3273dc;
+.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
+  color: #fff;
 }
 
-.progress.is-link::-moz-progress-bar {
-  background-color: #3273dc;
+.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta {
+  background-color: #00b89c;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-link::-ms-fill {
+.file.is-link .file-cta {
   background-color: #3273dc;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-link:indeterminate {
-  background-image: linear-gradient(to right, #3273dc 30%, #dbdbdb 30%);
+.file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta {
+  background-color: #276cda;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-info::-webkit-progress-value {
-  background-color: #209cee;
+.file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
+  color: #fff;
 }
 
-.progress.is-info::-moz-progress-bar {
-  background-color: #209cee;
+.file.is-link:active .file-cta, .file.is-link.is-active .file-cta {
+  background-color: #2366d1;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-info::-ms-fill {
+.file.is-info .file-cta {
   background-color: #209cee;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-info:indeterminate {
-  background-image: linear-gradient(to right, #209cee 30%, #dbdbdb 30%);
+.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
+  background-color: #1496ed;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-success::-webkit-progress-value {
-  background-color: #23d160;
+.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
+  color: #fff;
 }
 
-.progress.is-success::-moz-progress-bar {
-  background-color: #23d160;
+.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
+  background-color: #118fe4;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-success::-ms-fill {
+.file.is-success .file-cta {
   background-color: #23d160;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-success:indeterminate {
-  background-image: linear-gradient(to right, #23d160 30%, #dbdbdb 30%);
+.file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta {
+  background-color: #22c65b;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-warning::-webkit-progress-value {
-  background-color: #ffdd57;
+.file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
+  color: #fff;
 }
 
-.progress.is-warning::-moz-progress-bar {
-  background-color: #ffdd57;
+.file.is-success:active .file-cta, .file.is-success.is-active .file-cta {
+  background-color: #20bc56;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-warning::-ms-fill {
+.file.is-warning .file-cta {
   background-color: #ffdd57;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.progress.is-warning:indeterminate {
-  background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%);
+.file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta {
+  background-color: #ffdb4a;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.progress.is-danger::-webkit-progress-value {
-  background-color: #ff3860;
+.file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.progress.is-danger::-moz-progress-bar {
-  background-color: #ff3860;
+.file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta {
+  background-color: #ffd83d;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.progress.is-danger::-ms-fill {
+.file.is-danger .file-cta {
   background-color: #ff3860;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-danger:indeterminate {
-  background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%);
+.file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
+  background-color: #ff2b56;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-small {
-  height: 0.75rem;
+.file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
+  color: #fff;
 }
 
-.progress.is-medium {
-  height: 1.25rem;
+.file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
+  background-color: #ff1f4b;
+  border-color: transparent;
+  color: #fff;
 }
 
-.progress.is-large {
-  height: 1.5rem;
+.file.is-small {
+  font-size: 0.75rem;
 }
 
-@keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
+.file.is-medium {
+  font-size: 1.25rem;
 }
 
-.table {
-  background-color: white;
-  color: #363636;
+.file.is-medium .file-icon .fa {
+  font-size: 21px;
 }
 
-.table td,
-.table th {
-  border: 1px solid #dbdbdb;
-  border-width: 0 0 1px;
-  padding: 0.5em 0.75em;
-  vertical-align: top;
+.file.is-large {
+  font-size: 1.5rem;
 }
 
-.table td.is-white,
-.table th.is-white {
-  background-color: white;
-  border-color: white;
-  color: #0a0a0a;
+.file.is-large .file-icon .fa {
+  font-size: 28px;
 }
 
-.table td.is-black,
-.table th.is-black {
-  background-color: #0a0a0a;
-  border-color: #0a0a0a;
-  color: white;
+.file.has-name .file-cta {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.table td.is-light,
-.table th.is-light {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
-  color: #363636;
+.file.has-name .file-name {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
 
-.table td.is-dark,
-.table th.is-dark {
-  background-color: #363636;
-  border-color: #363636;
-  color: whitesmoke;
+.file.has-name.is-empty .file-cta {
+  border-radius: 4px;
 }
 
-.table td.is-primary,
-.table th.is-primary {
-  background-color: #00d1b2;
-  border-color: #00d1b2;
-  color: #fff;
+.file.has-name.is-empty .file-name {
+  display: none;
 }
 
-.table td.is-link,
-.table th.is-link {
-  background-color: #3273dc;
-  border-color: #3273dc;
-  color: #fff;
+.file.is-boxed .file-label {
+  flex-direction: column;
 }
 
-.table td.is-info,
-.table th.is-info {
-  background-color: #209cee;
-  border-color: #209cee;
-  color: #fff;
+.file.is-boxed .file-cta {
+  flex-direction: column;
+  height: auto;
+  padding: 1em 3em;
 }
 
-.table td.is-success,
-.table th.is-success {
-  background-color: #23d160;
-  border-color: #23d160;
-  color: #fff;
+.file.is-boxed .file-name {
+  border-width: 0 1px 1px;
 }
 
-.table td.is-warning,
-.table th.is-warning {
-  background-color: #ffdd57;
-  border-color: #ffdd57;
-  color: rgba(0, 0, 0, 0.7);
+.file.is-boxed .file-icon {
+  height: 1.5em;
+  width: 1.5em;
 }
 
-.table td.is-danger,
-.table th.is-danger {
-  background-color: #ff3860;
-  border-color: #ff3860;
-  color: #fff;
+.file.is-boxed .file-icon .fa {
+  font-size: 21px;
 }
 
-.table td.is-narrow,
-.table th.is-narrow {
-  white-space: nowrap;
-  width: 1%;
+.file.is-boxed.is-small .file-icon .fa {
+  font-size: 14px;
 }
 
-.table td.is-selected,
-.table th.is-selected {
-  background-color: #00d1b2;
-  color: #fff;
+.file.is-boxed.is-medium .file-icon .fa {
+  font-size: 28px;
 }
 
-.table td.is-selected a,
-.table td.is-selected strong,
-.table th.is-selected a,
-.table th.is-selected strong {
-  color: currentColor;
+.file.is-boxed.is-large .file-icon .fa {
+  font-size: 35px;
 }
 
-.table th {
-  color: #363636;
+.file.is-boxed.has-name .file-cta {
+  border-radius: 4px 4px 0 0;
 }
 
-.table th:not([align]) {
-  text-align: left;
+.file.is-boxed.has-name .file-name {
+  border-radius: 0 0 4px 4px;
+  border-width: 0 1px 1px;
 }
 
-.table tr.is-selected {
-  background-color: #00d1b2;
-  color: #fff;
+.file.is-centered {
+  justify-content: center;
 }
 
-.table tr.is-selected a,
-.table tr.is-selected strong {
-  color: currentColor;
+.file.is-fullwidth .file-label {
+  width: 100%;
 }
 
-.table tr.is-selected td,
-.table tr.is-selected th {
-  border-color: #fff;
-  color: currentColor;
+.file.is-fullwidth .file-name {
+  flex-grow: 1;
+  max-width: none;
 }
 
-.table thead {
-  background-color: transparent;
+.file.is-right {
+  justify-content: flex-end;
 }
 
-.table thead td,
-.table thead th {
-  border-width: 0 0 2px;
-  color: #363636;
+.file.is-right .file-cta {
+  border-radius: 0 4px 4px 0;
 }
 
-.table tfoot {
-  background-color: transparent;
+.file.is-right .file-name {
+  border-radius: 4px 0 0 4px;
+  border-width: 1px 0 1px 1px;
+  order: -1;
 }
 
-.table tfoot td,
-.table tfoot th {
-  border-width: 2px 0 0;
-  color: #363636;
+.file-label {
+  align-items: stretch;
+  display: flex;
+  cursor: pointer;
+  justify-content: flex-start;
+  overflow: hidden;
+  position: relative;
 }
 
-.table tbody {
-  background-color: transparent;
+.file-label:hover .file-cta {
+  background-color: #eeeeee;
+  color: #363636;
 }
 
-.table tbody tr:last-child td,
-.table tbody tr:last-child th {
-  border-bottom-width: 0;
+.file-label:hover .file-name {
+  border-color: #d5d5d5;
 }
 
-.table.is-bordered td,
-.table.is-bordered th {
-  border-width: 1px;
+.file-label:active .file-cta {
+  background-color: #e8e8e8;
+  color: #363636;
 }
 
-.table.is-bordered tr:last-child td,
-.table.is-bordered tr:last-child th {
-  border-bottom-width: 1px;
+.file-label:active .file-name {
+  border-color: #cfcfcf;
 }
 
-.table.is-fullwidth {
+.file-input {
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  top: 0;
   width: 100%;
 }
 
-.table.is-hoverable tbody tr:not(.is-selected):hover {
-  background-color: #fafafa;
-}
-
-.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
-  background-color: #fafafa;
+.file-cta,
+.file-name {
+  border-color: #dbdbdb;
+  border-radius: 4px;
+  font-size: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
+  white-space: nowrap;
 }
 
-.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
+.file-cta {
   background-color: whitesmoke;
+  color: #4a4a4a;
 }
 
-.table.is-narrow td,
-.table.is-narrow th {
-  padding: 0.25em 0.5em;
-}
-
-.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
-  background-color: #fafafa;
-}
-
-.table-container {
-  -webkit-overflow-scrolling: touch;
-  overflow: auto;
-  overflow-y: hidden;
-  max-width: 100%;
+.file-name {
+  border-color: #dbdbdb;
+  border-style: solid;
+  border-width: 1px 1px 1px 0;
+  display: block;
+  max-width: 16em;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
 }
 
-.tags {
+.file-icon {
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.tags .tag {
-  margin-bottom: 0.5rem;
+  height: 1em;
+  justify-content: center;
+  margin-right: 0.5em;
+  width: 1em;
 }
 
-.tags .tag:not(:last-child) {
-  margin-right: 0.5rem;
+.file-icon .fa {
+  font-size: 14px;
 }
 
-.tags:last-child {
-  margin-bottom: -0.5rem;
+.label {
+  color: #363636;
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
 }
 
-.tags:not(:last-child) {
-  margin-bottom: 1rem;
+.label:not(:last-child) {
+  margin-bottom: 0.5em;
 }
 
-.tags.are-medium .tag:not(.is-normal):not(.is-large) {
-  font-size: 1rem;
+.label.is-small {
+  font-size: 0.75rem;
 }
 
-.tags.are-large .tag:not(.is-normal):not(.is-medium) {
+.label.is-medium {
   font-size: 1.25rem;
 }
 
-.tags.is-centered {
-  justify-content: center;
+.label.is-large {
+  font-size: 1.5rem;
 }
 
-.tags.is-centered .tag {
-  margin-right: 0.25rem;
-  margin-left: 0.25rem;
+.help {
+  display: block;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
 }
 
-.tags.is-right {
-  justify-content: flex-end;
+.help.is-white {
+  color: white;
 }
 
-.tags.is-right .tag:not(:first-child) {
-  margin-left: 0.5rem;
+.help.is-black {
+  color: #0a0a0a;
 }
 
-.tags.is-right .tag:not(:last-child) {
-  margin-right: 0;
-}
-
-.tags.has-addons .tag {
-  margin-right: 0;
-}
-
-.tags.has-addons .tag:not(:first-child) {
-  margin-left: 0;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.tags.has-addons .tag:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.tag:not(body) {
-  align-items: center;
-  background-color: whitesmoke;
-  border-radius: 4px;
-  color: #4a4a4a;
-  display: inline-flex;
-  font-size: 0.75rem;
-  height: 2em;
-  justify-content: center;
-  line-height: 1.5;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  white-space: nowrap;
-}
-
-.tag:not(body) .delete {
-  margin-left: 0.25rem;
-  margin-right: -0.375rem;
-}
-
-.tag:not(body).is-white {
-  background-color: white;
-  color: #0a0a0a;
-}
-
-.tag:not(body).is-black {
-  background-color: #0a0a0a;
-  color: white;
+.help.is-light {
+  color: whitesmoke;
 }
 
-.tag:not(body).is-light {
-  background-color: whitesmoke;
+.help.is-dark {
   color: #363636;
 }
 
-.tag:not(body).is-dark {
-  background-color: #363636;
-  color: whitesmoke;
+.help.is-primary {
+  color: #00d1b2;
 }
 
-.tag:not(body).is-primary {
-  background-color: #00d1b2;
-  color: #fff;
+.help.is-link {
+  color: #3273dc;
 }
 
-.tag:not(body).is-link {
-  background-color: #3273dc;
-  color: #fff;
+.help.is-info {
+  color: #209cee;
 }
 
-.tag:not(body).is-info {
-  background-color: #209cee;
-  color: #fff;
+.help.is-success {
+  color: #23d160;
 }
 
-.tag:not(body).is-success {
-  background-color: #23d160;
-  color: #fff;
+.help.is-warning {
+  color: #ffdd57;
 }
 
-.tag:not(body).is-warning {
-  background-color: #ffdd57;
-  color: rgba(0, 0, 0, 0.7);
+.help.is-danger {
+  color: #ff3860;
 }
 
-.tag:not(body).is-danger {
-  background-color: #ff3860;
-  color: #fff;
+.field:not(:last-child) {
+  margin-bottom: 0.75rem;
 }
 
-.tag:not(body).is-normal {
-  font-size: 0.75rem;
+.field.has-addons {
+  display: flex;
+  justify-content: flex-start;
 }
 
-.tag:not(body).is-medium {
-  font-size: 1rem;
+.field.has-addons .control:not(:last-child) {
+  margin-right: -1px;
 }
 
-.tag:not(body).is-large {
-  font-size: 1.25rem;
+.field.has-addons .control:not(:first-child):not(:last-child) .button,
+.field.has-addons .control:not(:first-child):not(:last-child) .input,
+.field.has-addons .control:not(:first-child):not(:last-child) .select select {
+  border-radius: 0;
 }
 
-.tag:not(body) .icon:first-child:not(:last-child) {
-  margin-left: -0.375em;
-  margin-right: 0.1875em;
+.field.has-addons .control:first-child:not(:only-child) .button,
+.field.has-addons .control:first-child:not(:only-child) .input,
+.field.has-addons .control:first-child:not(:only-child) .select select {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.tag:not(body) .icon:last-child:not(:first-child) {
-  margin-left: 0.1875em;
-  margin-right: -0.375em;
+.field.has-addons .control:last-child:not(:only-child) .button,
+.field.has-addons .control:last-child:not(:only-child) .input,
+.field.has-addons .control:last-child:not(:only-child) .select select {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
 
-.tag:not(body) .icon:first-child:last-child {
-  margin-left: -0.375em;
-  margin-right: -0.375em;
+.field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered,
+.field.has-addons .control .input:not([disabled]):hover,
+.field.has-addons .control .input:not([disabled]).is-hovered,
+.field.has-addons .control .select select:not([disabled]):hover,
+.field.has-addons .control .select select:not([disabled]).is-hovered {
+  z-index: 2;
 }
 
-.tag:not(body).is-delete {
-  margin-left: 1px;
-  padding: 0;
-  position: relative;
-  width: 2em;
+.field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active,
+.field.has-addons .control .input:not([disabled]):focus,
+.field.has-addons .control .input:not([disabled]).is-focused,
+.field.has-addons .control .input:not([disabled]):active,
+.field.has-addons .control .input:not([disabled]).is-active,
+.field.has-addons .control .select select:not([disabled]):focus,
+.field.has-addons .control .select select:not([disabled]).is-focused,
+.field.has-addons .control .select select:not([disabled]):active,
+.field.has-addons .control .select select:not([disabled]).is-active {
+  z-index: 3;
 }
 
-.tag:not(body).is-delete::before, .tag:not(body).is-delete::after {
-  background-color: currentColor;
-  content: "";
-  display: block;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  transform-origin: center center;
+.field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover,
+.field.has-addons .control .input:not([disabled]):focus:hover,
+.field.has-addons .control .input:not([disabled]).is-focused:hover,
+.field.has-addons .control .input:not([disabled]):active:hover,
+.field.has-addons .control .input:not([disabled]).is-active:hover,
+.field.has-addons .control .select select:not([disabled]):focus:hover,
+.field.has-addons .control .select select:not([disabled]).is-focused:hover,
+.field.has-addons .control .select select:not([disabled]):active:hover,
+.field.has-addons .control .select select:not([disabled]).is-active:hover {
+  z-index: 4;
 }
 
-.tag:not(body).is-delete::before {
-  height: 1px;
-  width: 50%;
+.field.has-addons .control.is-expanded {
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
-.tag:not(body).is-delete::after {
-  height: 50%;
-  width: 1px;
+.field.has-addons.has-addons-centered {
+  justify-content: center;
 }
 
-.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
-  background-color: #e8e8e8;
+.field.has-addons.has-addons-right {
+  justify-content: flex-end;
 }
 
-.tag:not(body).is-delete:active {
-  background-color: #dbdbdb;
+.field.has-addons.has-addons-fullwidth .control {
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
-.tag:not(body).is-rounded {
-  border-radius: 290486px;
+.field.is-grouped {
+  display: flex;
+  justify-content: flex-start;
 }
 
-a.tag:hover {
-  text-decoration: underline;
+.field.is-grouped > .control {
+  flex-shrink: 0;
 }
 
-.title,
-.subtitle {
-  word-break: break-word;
+.field.is-grouped > .control:not(:last-child) {
+  margin-bottom: 0;
+  margin-right: 0.75rem;
 }
 
-.title em,
-.title span,
-.subtitle em,
-.subtitle span {
-  font-weight: inherit;
+.field.is-grouped > .control.is-expanded {
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
-.title sub,
-.subtitle sub {
-  font-size: 0.75em;
+.field.is-grouped.is-grouped-centered {
+  justify-content: center;
 }
 
-.title sup,
-.subtitle sup {
-  font-size: 0.75em;
+.field.is-grouped.is-grouped-right {
+  justify-content: flex-end;
 }
 
-.title .tag,
-.subtitle .tag {
-  vertical-align: middle;
+.field.is-grouped.is-grouped-multiline {
+  flex-wrap: wrap;
 }
 
-.title {
-  color: #363636;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1.125;
+.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {
+  margin-bottom: 0.75rem;
 }
 
-.title strong {
-  color: inherit;
-  font-weight: inherit;
+.field.is-grouped.is-grouped-multiline:last-child {
+  margin-bottom: -0.75rem;
 }
 
-.title + .highlight {
-  margin-top: -0.75rem;
+.field.is-grouped.is-grouped-multiline:not(:last-child) {
+  margin-bottom: 0;
 }
 
-.title:not(.is-spaced) + .subtitle {
-  margin-top: -1.25rem;
+@media screen and (min-width: 769px), print {
+  .field.is-horizontal {
+    display: flex;
+  }
 }
 
-.title.is-1 {
-  font-size: 3rem;
+.field-label .label {
+  font-size: inherit;
 }
 
-.title.is-2 {
-  font-size: 2.5rem;
+@media screen and (max-width: 768px) {
+  .field-label {
+    margin-bottom: 0.5rem;
+  }
 }
 
-.title.is-3 {
-  font-size: 2rem;
+@media screen and (min-width: 769px), print {
+  .field-label {
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-right: 1.5rem;
+    text-align: right;
+  }
+  .field-label.is-small {
+    font-size: 0.75rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-normal {
+    padding-top: 0.375em;
+  }
+  .field-label.is-medium {
+    font-size: 1.25rem;
+    padding-top: 0.375em;
+  }
+  .field-label.is-large {
+    font-size: 1.5rem;
+    padding-top: 0.375em;
+  }
 }
 
-.title.is-4 {
-  font-size: 1.5rem;
+.field-body .field .field {
+  margin-bottom: 0;
 }
 
-.title.is-5 {
-  font-size: 1.25rem;
+@media screen and (min-width: 769px), print {
+  .field-body {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
+  }
+  .field-body .field {
+    margin-bottom: 0;
+  }
+  .field-body > .field {
+    flex-shrink: 1;
+  }
+  .field-body > .field:not(.is-narrow) {
+    flex-grow: 1;
+  }
+  .field-body > .field:not(:last-child) {
+    margin-right: 0.75rem;
+  }
 }
 
-.title.is-6 {
+.control {
+  box-sizing: border-box;
+  clear: both;
   font-size: 1rem;
+  position: relative;
+  text-align: left;
 }
 
-.title.is-7 {
-  font-size: 0.75rem;
+.control.has-icons-left .input:focus ~ .icon,
+.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
+.control.has-icons-right .select:focus ~ .icon {
+  color: #7a7a7a;
 }
 
-.subtitle {
-  color: #4a4a4a;
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.25;
+.control.has-icons-left .input.is-small ~ .icon,
+.control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon,
+.control.has-icons-right .select.is-small ~ .icon {
+  font-size: 0.75rem;
 }
 
-.subtitle strong {
-  color: #363636;
-  font-weight: 600;
+.control.has-icons-left .input.is-medium ~ .icon,
+.control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon,
+.control.has-icons-right .select.is-medium ~ .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle:not(.is-spaced) + .title {
-  margin-top: -1.25rem;
+.control.has-icons-left .input.is-large ~ .icon,
+.control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon,
+.control.has-icons-right .select.is-large ~ .icon {
+  font-size: 1.5rem;
 }
 
-.subtitle.is-1 {
-  font-size: 3rem;
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+  color: #dbdbdb;
+  height: 2.25em;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 2.25em;
+  z-index: 4;
 }
 
-.subtitle.is-2 {
-  font-size: 2.5rem;
+.control.has-icons-left .input,
+.control.has-icons-left .select select {
+  padding-left: 2.25em;
 }
 
-.subtitle.is-3 {
-  font-size: 2rem;
+.control.has-icons-left .icon.is-left {
+  left: 0;
 }
 
-.subtitle.is-4 {
-  font-size: 1.5rem;
+.control.has-icons-right .input,
+.control.has-icons-right .select select {
+  padding-right: 2.25em;
 }
 
-.subtitle.is-5 {
-  font-size: 1.25rem;
+.control.has-icons-right .icon.is-right {
+  right: 0;
 }
 
-.subtitle.is-6 {
-  font-size: 1rem;
+.control.is-loading::after {
+  position: absolute !important;
+  right: 0.625em;
+  top: 0.625em;
+  z-index: 4;
 }
 
-.subtitle.is-7 {
+.control.is-loading.is-small:after {
   font-size: 0.75rem;
 }
 
-.heading {
-  display: block;
-  font-size: 11px;
-  letter-spacing: 1px;
-  margin-bottom: 5px;
-  text-transform: uppercase;
-}
-
-.highlight {
-  font-weight: 400;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0;
-}
-
-.highlight pre {
-  overflow: auto;
-  max-width: 100%;
+.control.is-loading.is-medium:after {
+  font-size: 1.25rem;
 }
 
-.number {
-  align-items: center;
-  background-color: whitesmoke;
-  border-radius: 290486px;
-  display: inline-flex;
-  font-size: 1.25rem;
-  height: 2em;
-  justify-content: center;
-  margin-right: 1.5rem;
-  min-width: 2.5em;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  vertical-align: top;
+.control.is-loading.is-large:after {
+  font-size: 1.5rem;
 }
 
 .breadcrumb {
index 2234322ab5645290def4b9c04ad8c66a23d9ee52..7490c00d86e11207478bc6d905371915d5f31f15 100644 (file)
@@ -4,7 +4,6 @@
 @import "button.sass"
 @import "container.sass"
 @import "content.sass"
-@import "form.sass"
 @import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
index 145cbc834e62f49077eeb9d4c5f3ee45c24cfa28..3122dc4c5e85ac9e18674ac4eef4700b56565f94 100644 (file)
@@ -1,604 +1 @@
-$input-color: $grey-darker !default
-$input-background-color: $white !default
-$input-border-color: $grey-lighter !default
-$input-height: $control-height !default
-$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
-
-$input-hover-color: $grey-darker !default
-$input-hover-border-color: $grey-light !default
-
-$input-focus-color: $grey-darker !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: rgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $grey-lighter !default
-$input-icon-active-color: $grey !default
-
-$input-radius: $radius !default
-
-$file-border-color: $border !default
-$file-radius: $radius !default
-
-$file-cta-background-color: $white-ter !default
-$file-cta-color: $grey-dark !default
-$file-cta-hover-color: $grey-darker !default
-$file-cta-active-color: $grey-darker !default
-
-$file-name-border-color: $border !default
-$file-name-border-style: solid !default
-$file-name-border-width: 1px 1px 1px 0 !default
-$file-name-max-width: 16em !default
-
-$label-color: $grey-darker !default
-$label-weight: $weight-bold !default
-
-$help-size: $size-small !default
-
-=input
-  @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  border-radius: $input-radius
-  color: $input-color
-  +placeholder
-    color: $input-placeholder-color
-  &:hover,
-  &.is-hovered
-    border-color: $input-hover-border-color
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
-  &[disabled],
-  fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
-    box-shadow: none
-    color: $input-disabled-color
-    +placeholder
-      color: $input-disabled-placeholder-color
-
-.input,
-.textarea
-  +input
-  box-shadow: $input-shadow
-  max-width: 100%
-  width: 100%
-  &[readonly]
-    box-shadow: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-fullwidth
-    display: block
-    width: 100%
-  &.is-inline
-    display: inline
-    width: auto
-
-.input
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
-  &.is-static
-    background-color: transparent
-    border-color: transparent
-    box-shadow: none
-    padding-left: 0
-    padding-right: 0
-
-.textarea
-  display: block
-  max-width: 100%
-  min-width: 100%
-  padding: 0.625em
-  resize: vertical
-  &:not([rows])
-    max-height: 600px
-    min-height: 120px
-  &[rows]
-    height: initial
-  // Modifiers
-  &.has-fixed-size
-    resize: none
-
-.checkbox,
-.radio
-  cursor: pointer
-  display: inline-block
-  line-height: 1.25
-  position: relative
-  input
-    cursor: pointer
-  &:hover
-    color: $input-hover-color
-  &[disabled],
-  fieldset[disabled] &
-    color: $input-disabled-color
-    cursor: not-allowed
-
-.radio
-  & + .radio
-    margin-left: 0.5em
-
-.select
-  display: inline-block
-  max-width: 100%
-  position: relative
-  vertical-align: top
-  &:not(.is-multiple)
-    height: $input-height
-  &:not(.is-multiple):not(.is-loading)
-    &::after
-      @extend %arrow
-      border-color: $input-arrow
-      right: 1.125em
-      z-index: 4
-  &.is-rounded
-    select
-      border-radius: $radius-rounded
-      padding-left: 1em
-  select
-    +input
-    cursor: pointer
-    display: block
-    font-size: 1em
-    max-width: 100%
-    outline: none
-    &::-ms-expand
-      display: none
-    &[disabled]:hover,
-    fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
-    &:not([multiple])
-      padding-right: 2.5em
-    &[multiple]
-      height: auto
-      padding: 0
-      option
-        padding: 0.5em 1em
-  // States
-  &:not(.is-multiple):not(.is-loading):hover
-    &::after
-      border-color: $input-hover-color
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &:not(:hover)::after
-        border-color: $color
-      select
-        border-color: $color
-        &:hover,
-        &.is-hovered
-          border-color: darken($color, 5%)
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-disabled
-    &::after
-      border-color: $input-disabled-color
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &.is-loading
-    &::after
-      @extend %loader
-      margin-top: 0
-      position: absolute
-      right: 0.625em
-      top: 0.625em
-      transform: none
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
-
-.file
-  @extend %unselectable
-  align-items: stretch
-  display: flex
-  justify-content: flex-start
-  position: relative
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      .file-cta
-        background-color: $color
-        border-color: transparent
-        color: $color-invert
-      &:hover,
-      &.is-hovered
-        .file-cta
-          background-color: darken($color, 2.5%)
-          border-color: transparent
-          color: $color-invert
-      &:focus,
-      &.is-focused
-        .file-cta
-          border-color: transparent
-          box-shadow: 0 0 0.5em rgba($color, 0.25)
-          color: $color-invert
-      &:active,
-      &.is-active
-        .file-cta
-          background-color: darken($color, 5%)
-          border-color: transparent
-          color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-    .file-icon
-      .fa
-        font-size: 21px
-  &.is-large
-    font-size: $size-large
-    .file-icon
-      .fa
-        font-size: 28px
-  // Modifiers
-  &.has-name
-    .file-cta
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-    .file-name
-      border-bottom-left-radius: 0
-      border-top-left-radius: 0
-    &.is-empty
-      .file-cta
-        border-radius: $file-radius
-      .file-name
-        display: none
-  &.is-boxed
-    .file-label
-      flex-direction: column
-    .file-cta
-      flex-direction: column
-      height: auto
-      padding: 1em 3em
-    .file-name
-      border-width: 0 1px 1px
-    .file-icon
-      height: 1.5em
-      width: 1.5em
-      .fa
-        font-size: 21px
-    &.is-small
-      .file-icon .fa
-        font-size: 14px
-    &.is-medium
-      .file-icon .fa
-        font-size: 28px
-    &.is-large
-      .file-icon .fa
-        font-size: 35px
-    &.has-name
-      .file-cta
-        border-radius: $file-radius $file-radius 0 0
-      .file-name
-        border-radius: 0 0 $file-radius $file-radius
-        border-width: 0 1px 1px
-  &.is-centered
-    justify-content: center
-  &.is-fullwidth
-    .file-label
-      width: 100%
-    .file-name
-      flex-grow: 1
-      max-width: none
-  &.is-right
-    justify-content: flex-end
-    .file-cta
-      border-radius: 0 $file-radius $file-radius 0
-    .file-name
-      border-radius: $file-radius 0 0 $file-radius
-      border-width: 1px 0 1px 1px
-      order: -1
-
-.file-label
-  align-items: stretch
-  display: flex
-  cursor: pointer
-  justify-content: flex-start
-  overflow: hidden
-  position: relative
-  &:hover
-    .file-cta
-      background-color: darken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
-    .file-name
-      border-color: darken($file-name-border-color, 2.5%)
-  &:active
-    .file-cta
-      background-color: darken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
-    .file-name
-      border-color: darken($file-name-border-color, 5%)
-
-.file-input
-  height: 100%
-  left: 0
-  opacity: 0
-  outline: none
-  position: absolute
-  top: 0
-  width: 100%
-
-.file-cta,
-.file-name
-  @extend %control
-  border-color: $file-border-color
-  border-radius: $file-radius
-  font-size: 1em
-  padding-left: 1em
-  padding-right: 1em
-  white-space: nowrap
-
-.file-cta
-  background-color: $file-cta-background-color
-  color: $file-cta-color
-
-.file-name
-  border-color: $file-name-border-color
-  border-style: $file-name-border-style
-  border-width: $file-name-border-width
-  display: block
-  max-width: $file-name-max-width
-  overflow: hidden
-  text-align: left
-  text-overflow: ellipsis
-
-.file-icon
-  align-items: center
-  display: flex
-  height: 1em
-  justify-content: center
-  margin-right: 0.5em
-  width: 1em
-  .fa
-    font-size: 14px
-
-.label
-  color: $label-color
-  display: block
-  font-size: $size-normal
-  font-weight: $label-weight
-  &:not(:last-child)
-    margin-bottom: 0.5em
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-  &.is-large
-    font-size: $size-large
-
-.help
-  display: block
-  font-size: $help-size
-  margin-top: 0.25rem
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      color: $color
-
-// Containers
-
-.field
-  &:not(:last-child)
-    margin-bottom: 0.75rem
-  // Modifiers
-  &.has-addons
-    display: flex
-    justify-content: flex-start
-    .control
-      &:not(:last-child)
-        margin-right: -1px
-      &:not(:first-child):not(:last-child)
-        .button,
-        .input,
-        .select select
-          border-radius: 0
-      &:first-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
-      &:last-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
-      .button,
-      .input,
-      .select select
-        &:not([disabled])
-          &:hover,
-          &.is-hovered
-            z-index: 2
-          &:focus,
-          &.is-focused,
-          &:active,
-          &.is-active
-            z-index: 3
-            &:hover
-              z-index: 4
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.has-addons-centered
-      justify-content: center
-    &.has-addons-right
-      justify-content: flex-end
-    &.has-addons-fullwidth
-      .control
-        flex-grow: 1
-        flex-shrink: 0
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      flex-shrink: 0
-      &:not(:last-child)
-        margin-bottom: 0
-        margin-right: 0.75rem
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.is-grouped-centered
-      justify-content: center
-    &.is-grouped-right
-      justify-content: flex-end
-    &.is-grouped-multiline
-      flex-wrap: wrap
-      & > .control
-        &:last-child,
-        &:not(:last-child)
-          margin-bottom: 0.75rem
-      &:last-child
-        margin-bottom: -0.75rem
-      &:not(:last-child)
-        margin-bottom: 0
-  &.is-horizontal
-    +tablet
-      display: flex
-
-.field-label
-  .label
-    font-size: inherit
-  +mobile
-    margin-bottom: 0.5rem
-  +tablet
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    margin-right: 1.5rem
-    text-align: right
-    &.is-small
-      font-size: $size-small
-      padding-top: 0.375em
-    &.is-normal
-      padding-top: 0.375em
-    &.is-medium
-      font-size: $size-medium
-      padding-top: 0.375em
-    &.is-large
-      font-size: $size-large
-      padding-top: 0.375em
-
-.field-body
-  .field .field
-    margin-bottom: 0
-  +tablet
-    display: flex
-    flex-basis: 0
-    flex-grow: 5
-    flex-shrink: 1
-    .field
-      margin-bottom: 0
-    & > .field
-      flex-shrink: 1
-      &:not(.is-narrow)
-        flex-grow: 1
-      &:not(:last-child)
-        margin-right: 0.75rem
-
-.control
-  box-sizing: border-box
-  clear: both //fixes the icon floating out of the input when help text is floated right
-  font-size: $size-normal
-  position: relative
-  text-align: left
-  // Modifiers
-  &.has-icons-left,
-  &.has-icons-right
-    .input,
-    .select
-      &:focus
-        & ~ .icon
-          color: $input-icon-active-color
-      &.is-small ~ .icon
-        font-size: $size-small
-      &.is-medium ~ .icon
-        font-size: $size-medium
-      &.is-large ~ .icon
-        font-size: $size-large
-    .icon
-      color: $input-icon-color
-      height: $input-height
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: $input-height
-      z-index: 4
-  &.has-icons-left
-    .input,
-    .select select
-      padding-left: $input-height
-    .icon.is-left
-      left: 0
-  &.has-icons-right
-    .input,
-    .select select
-      padding-right: $input-height
-    .icon.is-right
-      right: 0
-  &.is-loading
-    &::after
-      @extend %loader
-      position: absolute !important
-      right: 0.625em
-      top: 0.625em
-      z-index: 4
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
diff --git a/sass/form/_all.sass b/sass/form/_all.sass
new file mode 100644 (file)
index 0000000..d9a2b95
--- /dev/null
@@ -0,0 +1,8 @@
+@charset "utf-8"
+
+@import "shared.sass"
+@import "input-textarea.sass"
+@import "checkbox-radio.sass"
+@import "select.sass"
+@import "file.sass"
+@import "tools.sass"
diff --git a/sass/form/checkbox-radio.sass b/sass/form/checkbox-radio.sass
new file mode 100644 (file)
index 0000000..d9f3ff0
--- /dev/null
@@ -0,0 +1,21 @@
+%checkbox-radio
+  cursor: pointer
+  display: inline-block
+  line-height: 1.25
+  position: relative
+  input
+    cursor: pointer
+  &:hover
+    color: $input-hover-color
+  &[disabled],
+  fieldset[disabled] &
+    color: $input-disabled-color
+    cursor: not-allowed
+
+.checkbox
+  @extend %checkbox-radio
+
+.radio
+  @extend %checkbox-radio
+  & + .radio
+    margin-left: 0.5em
diff --git a/sass/form/file.sass b/sass/form/file.sass
new file mode 100644 (file)
index 0000000..b50a42e
--- /dev/null
@@ -0,0 +1,180 @@
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+.file
+  @extend %unselectable
+  align-items: stretch
+  display: flex
+  justify-content: flex-start
+  position: relative
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      .file-cta
+        background-color: $color
+        border-color: transparent
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: darken($color, 2.5%)
+          border-color: transparent
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          border-color: transparent
+          box-shadow: 0 0 0.5em rgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: darken($color, 5%)
+          border-color: transparent
+          color: $color-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+    .file-icon
+      .fa
+        font-size: 21px
+  &.is-large
+    font-size: $size-large
+    .file-icon
+      .fa
+        font-size: 28px
+  // Modifiers
+  &.has-name
+    .file-cta
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+    .file-name
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+    &.is-empty
+      .file-cta
+        border-radius: $file-radius
+      .file-name
+        display: none
+  &.is-boxed
+    .file-label
+      flex-direction: column
+    .file-cta
+      flex-direction: column
+      height: auto
+      padding: 1em 3em
+    .file-name
+      border-width: 0 1px 1px
+    .file-icon
+      height: 1.5em
+      width: 1.5em
+      .fa
+        font-size: 21px
+    &.is-small
+      .file-icon .fa
+        font-size: 14px
+    &.is-medium
+      .file-icon .fa
+        font-size: 28px
+    &.is-large
+      .file-icon .fa
+        font-size: 35px
+    &.has-name
+      .file-cta
+        border-radius: $file-radius $file-radius 0 0
+      .file-name
+        border-radius: 0 0 $file-radius $file-radius
+        border-width: 0 1px 1px
+  &.is-centered
+    justify-content: center
+  &.is-fullwidth
+    .file-label
+      width: 100%
+    .file-name
+      flex-grow: 1
+      max-width: none
+  &.is-right
+    justify-content: flex-end
+    .file-cta
+      border-radius: 0 $file-radius $file-radius 0
+    .file-name
+      border-radius: $file-radius 0 0 $file-radius
+      border-width: 1px 0 1px 1px
+      order: -1
+
+.file-label
+  align-items: stretch
+  display: flex
+  cursor: pointer
+  justify-content: flex-start
+  overflow: hidden
+  position: relative
+  &:hover
+    .file-cta
+      background-color: darken($file-cta-background-color, 2.5%)
+      color: $file-cta-hover-color
+    .file-name
+      border-color: darken($file-name-border-color, 2.5%)
+  &:active
+    .file-cta
+      background-color: darken($file-cta-background-color, 5%)
+      color: $file-cta-active-color
+    .file-name
+      border-color: darken($file-name-border-color, 5%)
+
+.file-input
+  height: 100%
+  left: 0
+  opacity: 0
+  outline: none
+  position: absolute
+  top: 0
+  width: 100%
+
+.file-cta,
+.file-name
+  @extend %control
+  border-color: $file-border-color
+  border-radius: $file-radius
+  font-size: 1em
+  padding-left: 1em
+  padding-right: 1em
+  white-space: nowrap
+
+.file-cta
+  background-color: $file-cta-background-color
+  color: $file-cta-color
+
+.file-name
+  border-color: $file-name-border-color
+  border-style: $file-name-border-style
+  border-width: $file-name-border-width
+  display: block
+  max-width: $file-name-max-width
+  overflow: hidden
+  text-align: left
+  text-overflow: ellipsis
+
+.file-icon
+  align-items: center
+  display: flex
+  height: 1em
+  justify-content: center
+  margin-right: 0.5em
+  width: 1em
+  .fa
+    font-size: 14px
diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass
new file mode 100644 (file)
index 0000000..da4315c
--- /dev/null
@@ -0,0 +1,60 @@
+%input-textarea
+  @extend %input
+  box-shadow: $input-shadow
+  max-width: 100%
+  width: 100%
+  &[readonly]
+    box-shadow: none
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-inline
+    display: inline
+    width: auto
+
+.input
+  @extend %input-textarea
+  &.is-rounded
+    border-radius: $radius-rounded
+    padding-left: 1em
+    padding-right: 1em
+  &.is-static
+    background-color: transparent
+    border-color: transparent
+    box-shadow: none
+    padding-left: 0
+    padding-right: 0
+
+.textarea
+  @extend %input-textarea
+  display: block
+  max-width: 100%
+  min-width: 100%
+  padding: 0.625em
+  resize: vertical
+  &:not([rows])
+    max-height: 600px
+    min-height: 120px
+  &[rows]
+    height: initial
+  // Modifiers
+  &.has-fixed-size
+    resize: none
diff --git a/sass/form/select.sass b/sass/form/select.sass
new file mode 100644 (file)
index 0000000..909b9d5
--- /dev/null
@@ -0,0 +1,85 @@
+.select
+  display: inline-block
+  max-width: 100%
+  position: relative
+  vertical-align: top
+  &:not(.is-multiple)
+    height: $input-height
+  &:not(.is-multiple):not(.is-loading)
+    &::after
+      @extend %arrow
+      border-color: $input-arrow
+      right: 1.125em
+      z-index: 4
+  &.is-rounded
+    select
+      border-radius: $radius-rounded
+      padding-left: 1em
+  select
+    @extend %input
+    cursor: pointer
+    display: block
+    font-size: 1em
+    max-width: 100%
+    outline: none
+    &::-ms-expand
+      display: none
+    &[disabled]:hover,
+    fieldset[disabled] &:hover
+      border-color: $input-disabled-border-color
+    &:not([multiple])
+      padding-right: 2.5em
+    &[multiple]
+      height: auto
+      padding: 0
+      option
+        padding: 0.5em 1em
+  // States
+  &:not(.is-multiple):not(.is-loading):hover
+    &::after
+      border-color: $input-hover-color
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &:not(:hover)::after
+        border-color: $color
+      select
+        border-color: $color
+        &:hover,
+        &.is-hovered
+          border-color: darken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
+  &.is-disabled
+    &::after
+      border-color: $input-disabled-color
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%
+  &.is-loading
+    &::after
+      @extend %loader
+      margin-top: 0
+      position: absolute
+      right: 0.625em
+      top: 0.625em
+      transform: none
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large
diff --git a/sass/form/shared.sass b/sass/form/shared.sass
new file mode 100644 (file)
index 0000000..d391955
--- /dev/null
@@ -0,0 +1,55 @@
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-height: $control-height !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
+$input-placeholder-color: rgba($input-color, 0.3) !default
+
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
+
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
+
+$input-radius: $radius !default
+
+=input
+  @extend %control
+  background-color: $input-background-color
+  border-color: $input-border-color
+  border-radius: $input-radius
+  color: $input-color
+  +placeholder
+    color: $input-placeholder-color
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border-color
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $input-disabled-background-color
+    border-color: $input-disabled-border-color
+    box-shadow: none
+    color: $input-disabled-color
+    +placeholder
+      color: $input-disabled-placeholder-color
+
+%input
+  +input
diff --git a/sass/form/tools.sass b/sass/form/tools.sass
new file mode 100644 (file)
index 0000000..32ee141
--- /dev/null
@@ -0,0 +1,205 @@
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+.label
+  color: $label-color
+  display: block
+  font-size: $size-normal
+  font-weight: $label-weight
+  &:not(:last-child)
+    margin-bottom: 0.5em
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
+.help
+  display: block
+  font-size: $help-size
+  margin-top: 0.25rem
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
+.field
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .control
+      &:not(:last-child)
+        margin-right: -1px
+      &:not(:first-child):not(:last-child)
+        .button,
+        .input,
+        .select select
+          border-radius: 0
+      &:first-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-right-radius: 0
+          border-top-right-radius: 0
+      &:last-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-left-radius: 0
+          border-top-left-radius: 0
+      .button,
+      .input,
+      .select select
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.has-addons-centered
+      justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+    &.has-addons-fullwidth
+      .control
+        flex-grow: 1
+        flex-shrink: 0
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .control
+      flex-shrink: 0
+      &:not(:last-child)
+        margin-bottom: 0
+        margin-right: 0.75rem
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+    &.is-grouped-multiline
+      flex-wrap: wrap
+      & > .control
+        &:last-child,
+        &:not(:last-child)
+          margin-bottom: 0.75rem
+      &:last-child
+        margin-bottom: -0.75rem
+      &:not(:last-child)
+        margin-bottom: 0
+  &.is-horizontal
+    +tablet
+      display: flex
+
+.field-label
+  .label
+    font-size: inherit
+  +mobile
+    margin-bottom: 0.5rem
+  +tablet
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 0
+    margin-right: 1.5rem
+    text-align: right
+    &.is-small
+      font-size: $size-small
+      padding-top: 0.375em
+    &.is-normal
+      padding-top: 0.375em
+    &.is-medium
+      font-size: $size-medium
+      padding-top: 0.375em
+    &.is-large
+      font-size: $size-large
+      padding-top: 0.375em
+
+.field-body
+  .field .field
+    margin-bottom: 0
+  +tablet
+    display: flex
+    flex-basis: 0
+    flex-grow: 5
+    flex-shrink: 1
+    .field
+      margin-bottom: 0
+    & > .field
+      flex-shrink: 1
+      &:not(.is-narrow)
+        flex-grow: 1
+      &:not(:last-child)
+        margin-right: 0.75rem
+
+.control
+  box-sizing: border-box
+  clear: both
+  font-size: $size-normal
+  position: relative
+  text-align: left
+  // Modifiers
+  &.has-icons-left,
+  &.has-icons-right
+    .input,
+    .select
+      &:focus
+        & ~ .icon
+          color: $input-icon-active-color
+      &.is-small ~ .icon
+        font-size: $size-small
+      &.is-medium ~ .icon
+        font-size: $size-medium
+      &.is-large ~ .icon
+        font-size: $size-large
+    .icon
+      color: $input-icon-color
+      height: $input-height
+      pointer-events: none
+      position: absolute
+      top: 0
+      width: $input-height
+      z-index: 4
+  &.has-icons-left
+    .input,
+    .select select
+      padding-left: $input-height
+    .icon.is-left
+      left: 0
+  &.has-icons-right
+    .input,
+    .select select
+      padding-right: $input-height
+    .icon.is-right
+      right: 0
+  &.is-loading
+    &::after
+      @extend %loader
+      position: absolute !important
+      right: 0.625em
+      top: 0.625em
+      z-index: 4
+    &.is-small:after
+      font-size: $size-small
+    &.is-medium:after
+      font-size: $size-medium
+    &.is-large:after
+      font-size: $size-large