Fixed input prepend and append

[bootswatch] / flatly / bootswatch.less

// Flatness by Jenil (www.jgog.in)
// Bootswatch 2.3.2
// -----------------------------------------------------


// TYPOGRAPHY
// --------------------------------------------------

@import url("http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic");

h1 {
        font-size: 48px;
        font-weight: 900;
}

h2 {
        font-size: 36px;
        font-weight: 700;
}

h3 {
        font-size: 28px;
        font-weight: 700;
}

h4 {
        font-size: 24px;
        font-weight: 500;
}

h5 {
        font-size: 16px;
        font-weight: 500;
}

h6 {
        font-size: 13px;
        font-weight: 500;
        text-transform: none;
}

p {
        margin-bottom: 1em;
}

// SCAFFOLDING
// --------------------------------------------------

.page-header {
        border-bottom: none;
}


// NAVBAR
// --------------------------------------------------

.navbar {

        .brand {

                text-shadow: none;

                &:hover {
                        color: @linkColorHover;
                }
        }

        .navbar-inner {
                .box-shadow(none);
        }

        .nav > li > a {
                text-shadow: none;
        }

        .nav > .active > a,
        .nav > .active > a:hover,
        .nav > .active > a:focus {
                .box-shadow(none);
        }

        .navbar-search .search-query {
                border: none;
                .box-shadow(none);
                line-height: normal;
        }

        .btn-navbar {
                background-image: none;
                .box-shadow(none);
        }

        .btn, .btn-group {
                margin-top: 6px;
        }

        &-inverse {

                .brand:hover {
                        color: @blueDark;
                }

                .navbar-search .search-query {
                        border-color: transparent;
                        .box-shadow(none);
                        line-height: normal;
                        color: @textColor;

                        &:focus {               
                                padding: 4px 14px;
                                color: @textColor;
                        }
                }
        }
}

div.subnav {

        border-color: transparent;
        background-image: none;
        background-color: @grayLighter;
        .box-shadow(none);

        &-fixed {
                top: @navbarHeight;
        }

        .nav > li > a {
                border-color: transparent;
                .box-shadow(none);
                color: @textColor;
        }

        .nav > .active > a,
        .nav > .active > a:hover {
                border-color: transparent;
                background-color: darken(@grayLighter, 10%);
                .box-shadow(none);
                color: @textColor;
        }
}

// NAVIGATION
// --------------------------------------------------

.nav-list {

        & > li > a,
        & > .active > a,
        .nav-header {
                text-shadow: none;
        }

        .divider {
                background: none;
                border-bottom: 2px solid @dropdownDividerBottom;
        }
}

.nav-pills {

        .open .dropdown-toggle {
                background-color: @blueDark;
        }
}

.pagination {

        ul {

                .box-shadow(none);

                & > li > a {
                        background-color: @green;
                        border-color: transparent;
                        color: @white;

                        &:hover {
                                background-color: lighten(@green, 10%);
                        }
                }

                & > .active > a,
                & > .active > a:hover {
                        background-color: @paginationActiveBackground;
                        color: @textColor;
                }

                & > .disabled > a,
                & > .disabled > a:hover {
                        background-color: lighten(@green, 10%);
                        color: @white;
                }
        }
}

.pager {

        li > a,
        li > span {
                background-color: @green;
                border: none;
                color: @white;

                &:hover {
                        background-color: lighten(@green, 10%);
                }
        }

        .disabled > a,
        .disabled > span,
        .disabled > a:hover,
        .disabled > span:hover {
                background-color: lighten(@green, 10%);
                color: @white;
        }
}

.breadcrumb {

        & > li {
                text-shadow: none;
        }
}

// BUTTONS
// --------------------------------------------------

.btn {
        padding: 9px 20px;
        border: none;
        background-image: none;
        color: @white;
        text-decoration: none;
        text-shadow: none;
        .box-shadow(none);
        -webkit-transition: 0.25s;
        -moz-transition: 0.25s;
        transition: 0.25s;

        &:hover,
        &:focus {
                color: white;
                -webkit-transition: 0.25s;
                -moz-transition: 0.25s;
                transition: 0.25s;
        }

        &:active,
        &.active {
                .box-shadow(none);
                color: rgba(255, 255, 255, 0.75);
        }

        &.disabled,
        &[disabled] {
                color: white;
        }

        &-large {
                padding: @paddingLarge;
        }

        &-small {
                padding: @paddingSmall;
        }

        &-mini {
                padding: @paddingMini;
        }
}

// TABLES
// -----------------------------------------------------



// FORMS
// --------------------------------------------------

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
        padding: 7px 6px;
        border: 2px solid #dce4ec;
        text-indent: 1px;
        .border-radius(@inputBorderRadius);
        .box-shadow(none);
        .placeholder(#acb6c0);

        &:focus {
                border-color: #1abc9c;
                .box-shadow(none);

        }
}

.input-prepend {

  .add-on:first-child,
  .btn:first-child {
    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }
}

.input-append {

  input,
  select,
  .uneditable-input {

    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);

    + .btn-group .btn:last-child {
      .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    }
  }

  .add-on:last-child,
  .btn:last-child,
  .btn-group:last-child > .dropdown-toggle {
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
}

.input-prepend,
.input-append {

  input,
  select,
  .uneditable-input {
    .border-radius(0);
    + .btn-group .btn {
      .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    }
  }

  .add-on:first-child,
  .btn:first-child {
    .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  }

  .add-on:last-child,
  .btn:last-child {
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  }
}

.input-append,
.input-prepend {

        .add-on {
                padding: 9px 5px;
                text-shadow: none;
                border: none;
        }
}

.control-group.error,
.control-group.error input:focus,
.control-group.error textarea:focus {
                border-color: #e74c3c;
                .box-shadow(none);
}

.control-group.success,
.control-group.success input:focus,
.control-group.success textarea:focus {
                border-color: #2ecc71;
                .box-shadow(none);
}

.control-group.warning,
.control-group.warning input:focus,
.control-group.warning textarea:focus {
                border-color: #f1c40f;
                .box-shadow(none);
}

.control-group.info,
.control-group.info input:focus,
.control-group.info textarea:focus {
                border-color: #3498db;
                .box-shadow(none);
}

input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
        background-color: #eaeded;
        border-color: transparent;
        color: #cad2d3;
        cursor: default;
}

input[type="file"]{
        line-height: 16px;
}

legend {
        border-bottom: none;
        color: @textColor;
}

.form-actions {
        border-top: none;
        .border-radius(@baseBorderRadius);
        background-color: darken(@grayLighter, 5%);
}

// DROPDOWNS
// --------------------------------------------------


// ALERTS, LABELS, BADGES
// --------------------------------------------------

.alert {
        background-color: @orange;
        color: @white;
        text-shadow: none;

        h1, h2, h3, h4, h5, h6 {
                color: @white;
        }

        &-error {
                background-color: @red;
        }

        &-success {
                background-color: @green;
        }

        &-info {
                background-color: @blue;
        }
}

.label {
        padding: 6px 10px;
        text-shadow: none;
}

.badge {
        padding: 6px 10px;
        .border-radius(@borderRadiusLarge);
        text-shadow: none;
}


// MISC
// --------------------------------------------------

.well {
        border: none;
        .box-shadow(none);

}

.progress {

        background: @grayLighter;
        border-radius: 32px;
        height: 12px;
        .box-shadow(none);

        .bar {
                background-color: @blueDark;
                background-image: none;
                .box-shadow(none);
        }

        .bar + .bar {
                .box-shadow(none);
        }

        &-striped .bar {
                #gradient > .striped(@blueDark);
        }

        &-success .bar,
        &-success.progress-striped .bar,
        .bar-success {
                background-color: @green;
        }

        &-warning .bar,
        &-warning.progress-striped .bar,
        .bar-warning {
                background-color: @yellow;
        }

        &-danger .bar,
        &-danger.progress-striped .bar,
        .bar-danger {
                background-color: @red;
        }

        &-info .bar,
        &-info.progress-striped .bar,
        .bar-info {
                background-color: @blue;
        }
}

.tooltip {

        &.in {
                opacity: 1;
        }
}

.popover {
        color: @white;

        &-title {
                border-bottom: 2px solid @dropdownDividerBottom;
        }
}

.modal {

        &-header {
                background-color: @navbarBackground;
                border-bottom: none;
                color: @white;
        }

        &-footer {
                background-color: @grayLighter;
                border-top: none;
                .box-shadow(none);
        }
}

.close {
        text-shadow: none;
}

// MEDIA QUERIES
// --------------------------------------------------

@media (max-width: 767px) {
        
        div.subnav {

                .nav > li:first-child > a,
                .nav > li + li > a {
                        border-color: transparent;

                        &:hover {
                                background-color: darken(@grayLighter, 10%);
                        }
                }
                
                .nav > li:last-child > a {
                        border-radius: 0 0 4px 4px;
                }
        }

        .input-append,
        .input-prepend {

                .add-on,.btn {
                        padding: 5px;
                }
        }
}

@media (max-width: 979px) {

        .navbar {

                .nav-collapse .nav > li > a {
                        color: @white;

                        &:hover {
                                background-color: @green;
                        }
                }

        }
}