debian-mirror-gitlab/app/assets/stylesheets/framework/forms.scss

277 lines
4.3 KiB
SCSS
Raw Normal View History

2015-04-26 12:48:37 +05:30
textarea {
resize: vertical;
}
2016-04-02 18:10:28 +05:30
input {
border-radius: $border-radius-base;
}
2014-09-02 18:07:02 +05:30
input[type='text'].danger {
2017-08-17 22:00:37 +05:30
background: $input-danger-bg !important;
2018-11-20 20:47:30 +05:30
border-color: $red-400;
2017-08-17 22:00:37 +05:30
text-shadow: 0 1px 1px $white-light;
2014-09-02 18:07:02 +05:30
}
.datetime-controls {
select {
width: 100px;
}
}
.form-actions {
2015-12-23 02:04:40 +05:30
margin-top: 0;
margin-bottom: -$gl-padding;
padding: $gl-padding;
2017-08-17 22:00:37 +05:30
background-color: $gray-light;
2015-04-26 12:48:37 +05:30
border-top: 1px solid $border-color;
}
2014-09-02 18:07:02 +05:30
label {
&.inline-label {
margin: 0;
}
2016-06-02 11:05:42 +05:30
2018-11-18 11:00:15 +05:30
&.label-bold {
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-bold;
2016-06-02 11:05:42 +05:30
}
2014-09-02 18:07:02 +05:30
}
2019-02-15 15:39:39 +05:30
.label-wrapper {
display: block;
margin: 0;
}
.form-label {
@extend label;
}
2018-11-08 19:23:39 +05:30
.form-control-label {
@extend .col-md-2;
}
2014-09-02 18:07:02 +05:30
.inline-input-group {
width: 250px;
}
.custom-form-control {
width: 150px;
}
2018-11-08 19:23:39 +05:30
@include media-breakpoint-up(sm) {
2014-09-02 18:07:02 +05:30
.custom-form-control {
width: 150px;
}
}
/* Medium devices (desktops, 992px and up) */
2018-11-08 19:23:39 +05:30
@include media-breakpoint-up(md) {
2014-09-02 18:07:02 +05:30
.custom-form-control {
width: 170px;
}
}
/* Large devices (large desktops, 1200px and up) */
2018-11-08 19:23:39 +05:30
@include media-breakpoint-up(lg) {
2014-09-02 18:07:02 +05:30
.custom-form-control {
width: 200px;
}
}
2017-08-17 22:00:37 +05:30
.help-form .form-group {
margin-left: 0;
margin-right: 0;
2018-11-08 19:23:39 +05:30
.form-control-label {
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-bold;
2017-08-17 22:00:37 +05:30
padding-top: 4px;
}
.form-control {
height: 29px;
background: $white-light;
2018-11-18 11:00:15 +05:30
font-family: $monospace-font;
2017-08-17 22:00:37 +05:30
}
2018-11-08 19:23:39 +05:30
.input-group-prepend .btn,
.input-group-append .btn {
2017-08-17 22:00:37 +05:30
padding: 3px $gl-btn-padding;
background-color: $gray-light;
border: 1px solid $border-color;
}
.text-block {
line-height: 0.8;
padding-top: 9px;
code {
line-height: 1.8;
}
img {
margin-right: $gl-padding;
}
}
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2017-08-17 22:00:37 +05:30
padding: 0 $gl-padding;
2018-11-08 19:23:39 +05:30
.form-control-label,
2017-08-17 22:00:37 +05:30
.text-block {
padding-left: 0;
}
}
}
2014-09-02 18:07:02 +05:30
.fieldset-form fieldset {
margin-bottom: 20px;
}
.form-control {
@include box-shadow(none);
2016-11-03 12:29:30 +05:30
border-radius: 2px;
padding: $gl-vert-padding $gl-input-padding;
2018-11-08 19:23:39 +05:30
&.input-short {
width: $input-short-width;
@include media-breakpoint-up(md) {
width: $input-short-md-width;
}
}
}
2016-06-02 11:05:42 +05:30
.select-wrapper {
position: relative;
2017-09-10 17:25:29 +05:30
.fa-chevron-down {
2016-06-02 11:05:42 +05:30
position: absolute;
2017-09-10 17:25:29 +05:30
font-size: 10px;
2016-06-02 11:05:42 +05:30
right: 10px;
2017-09-10 17:25:29 +05:30
top: 12px;
2016-06-02 11:05:42 +05:30
color: $gray-darkest;
pointer-events: none;
}
}
.select-control {
padding-left: 10px;
padding-right: 10px;
-webkit-appearance: none;
2017-09-10 17:25:29 +05:30
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
2016-06-02 11:05:42 +05:30
}
.form-control-inline {
display: inline;
2014-09-02 18:07:02 +05:30
}
2015-04-26 12:48:37 +05:30
.wiki-content {
margin-top: 35px;
}
2015-10-24 18:46:33 +05:30
2018-11-08 19:23:39 +05:30
.form-group .form-control-label,
.form-group .form-control-label-full-width {
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-normal;
2015-10-24 18:46:33 +05:30
}
.form-control::-webkit-input-placeholder {
2018-11-20 20:47:30 +05:30
color: $gl-text-color-tertiary;
2015-10-24 18:46:33 +05:30
}
.input-group {
2015-12-23 02:04:40 +05:30
.select2-container {
display: table-cell;
2018-03-27 19:54:05 +05:30
max-width: 180px;
2015-12-23 02:04:40 +05:30
}
2016-11-03 12:29:30 +05:30
2018-11-08 19:23:39 +05:30
.input-group-prepend,
.input-group-append {
2017-08-17 22:00:37 +05:30
background-color: $input-group-addon-bg;
2015-10-24 18:46:33 +05:30
}
2016-11-03 12:29:30 +05:30
2018-11-08 19:23:39 +05:30
.input-group-prepend:not(:first-child):not(:last-child),
.input-group-append:not(:first-child):not(:last-child) {
2015-12-23 02:04:40 +05:30
border-left: 0;
border-right: 0;
}
}
2018-11-08 19:23:39 +05:30
.form-text.text-muted {
2015-12-23 02:04:40 +05:30
margin-bottom: 0;
2018-03-17 18:26:18 +05:30
margin-top: #{$grid-size / 2};
2015-10-24 18:46:33 +05:30
}
2016-11-03 12:29:30 +05:30
.gl-field-error {
2017-08-17 22:00:37 +05:30
color: $red-500;
2016-11-03 12:29:30 +05:30
}
2017-08-17 22:00:37 +05:30
.gl-show-field-errors {
2018-11-20 20:47:30 +05:30
.form-control:not(textarea) {
2018-11-08 19:23:39 +05:30
height: 34px;
}
2017-08-17 22:00:37 +05:30
.gl-field-success-outline {
border: 1px solid $green-600;
&:focus {
box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
border: 0 none;
}
}
.gl-field-error-outline {
border: 1px solid $red-500;
&:focus {
box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
border: 0 none;
}
}
.gl-field-success-message {
color: $green-600;
}
.gl-field-error-message {
color: $red-500;
}
.gl-field-hint {
color: $gl-text-color;
}
}
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2017-08-17 22:00:37 +05:30
.remember-me {
.remember-me-checkbox {
margin-top: 0;
}
}
}
2018-11-08 19:23:39 +05:30
.input-icon-wrapper {
position: relative;
.input-icon-right {
position: absolute;
right: 0.8em;
top: 50%;
transform: translateY(-50%);
2019-03-02 22:35:43 +05:30
color: $gray-600;
2018-11-08 19:23:39 +05:30
}
}
2019-02-15 15:39:39 +05:30
.input-md {
max-width: $input-md-width;
width: 100%;
}
2018-11-08 19:23:39 +05:30
.input-lg {
2019-02-15 15:39:39 +05:30
max-width: $input-lg-width;
2018-11-08 19:23:39 +05:30
width: 100%;
}