@import "constants"; @import "colors"; .form { h1 { text-align: center; margin-bottom: 20px; } @mixin notice-text-style { font-size: 14px; color: $grey; } label { margin-bottom: $default-padding; display: block; font-weight: bold; .mandatory { color: $dark-red; } .notice { @include notice-text-style; display: block; margin-top: $default-spacer; } &.required { &::after { color: $dark-red; content: " *"; } } } .editable-champ { position: relative; .updated-at { @include notice-text-style; float: right; display: inline-block; margin-left: $default-spacer; visibility: hidden; } &:hover .updated-at, .updated-at.highlighted { visibility: visible; } .etablissement-titre { margin-bottom: 2 * $default-padding; } // Align checkboxes on the top-left side of the label &.editable-champ-checkbox, &.editable-champ-engagement { label { padding-left: 28px; } input[type=checkbox] { position: absolute; top: 1px; left: 0px; } } } .radios { label { display: inline; margin-left: $default-padding; &:first-child { margin-left: 0; } } } input[type=text]:not([data-address='true']), input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], textarea, select { display: block; border-radius: 4px; border: solid 1px $border-grey; margin-bottom: 2 * $default-padding; padding: $default-padding; &:disabled { background-color: $border-grey; } &.small { padding: $default-padding / 2; } &.small-margin { margin-bottom: $default-padding / 2; } } input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], textarea { width: 100%; } input[type=email], input[type=number], input[type=tel], { max-width: 500px; } input[type=checkbox], input[type=radio] { margin-left: 5px; margin-right: 4px; margin-bottom: 2 * $default-padding; } input[type=checkbox] { // Firefox tends to display checkbox controls smaller than other browsers. // Ensure a consistency of size between browsers. width: 16px; height: 16px; } input[type=date] { max-width: 180px; } input:invalid, textarea:invalid { box-shadow: none; } input.touched:invalid, textarea.touched:invalid { border: 1px solid $dark-red; box-shadow: 0px 0px 5px $dark-red; } select, .select2-selection { // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFFFFF; background-image: image-url("icons/chevron-down.svg"); background-repeat: no-repeat; background-size: 14px; background-position: right 10px center; padding-right: 4 * $default-spacer; &.small { padding-right: 3 * $default-spacer; } // CAUTION: IE hackery ahead &::-ms-expand { display: none; // remove default arrow in IE 10 and 11 */ } // target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background: none\9; } } } .select2 { min-width: 50%; } .select2-container { display: block; margin-bottom: 2 * $default-padding; &.select2-container--focus { .select2-selection { border-color: $border-grey; } } // scss-lint:disable SelectorFormat .select2-selection__rendered { padding: $default-padding; } .select2-selection__choice { background-color: #FFFFFF; } // scss-lint:enable } .twitter-typeahead { margin-bottom: 2 * $default-padding; } input.tt-input, input.tt-hint { border-radius: 4px; border: solid 1px $border-grey; padding: $default-padding; } input.tt-hint { color: $grey; } .datetime { input[type=date] { display: inline-block; } select { display: inline-block; } } .header-section { color: $blue; font-weight: bold; font-size: 20px; margin-bottom: 2 * $default-padding; } .explication-libelle { font-weight: bold; font-size: 20px; margin-bottom: $default-padding; } .explication { background-color: $light-grey; padding: $default-padding; margin-bottom: 2 * $default-padding; } .send-wrapper { text-align: right; .send { margin-bottom: $default-padding; } } .inline-champ { margin-left: $default-spacer; margin-right: $default-spacer; width: 100%; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } .pj-input { input[type=file] { margin: $default-padding 0 (2 * $default-padding); padding: 2px; } .piece-description { margin-bottom: $default-padding; } } }