@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/layout/_forms.scss

@@ -0,0 +1,911 @@
+/* FORMS */
+
+select option {
+    color: $text-color !important;
+}
+
+textarea {
+    resize: none;
+    min-height: 70px;
+    border: 1px solid white;
+    font-size: 14px;
+    padding: 7px 8px;
+    width: 100%;
+    -webkit-appearance: none;
+    outline: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+
+    &:hover {
+        border: 1px solid $lightest-grey;
+    }
+
+    &:focus {
+        border-color: $light-grey;
+        -webkit-appearance: none;
+        outline: none;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        border: 1px solid $lighter-grey;
+    }
+
+    &::-webkit-input-placeholder {
+        font-style: italic !important;
+    }
+
+    &:-moz-placeholder /* Firefox 18- */ {
+        font-style: italic !important;
+    }
+
+    &::-moz-placeholder /* Firefox 19+ */ {
+        font-style: italic !important;
+    }
+
+    &:-ms-input-placeholder {
+        font-style: italic !important;
+    }
+}
+
+
+.form-group {
+    margin-bottom: 30px;
+    position: relative;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &:empty {
+        margin: 0 !important;
+    }
+
+    &.nlc {
+        &:last-child {
+            margin-bottom: 30px;
+        }
+    }
+}
+
+
+.modal-body {
+    .form-group {
+        margin-bottom: 30px;
+    }
+
+    form.course-update-type > .form-group:first-child {
+        margin-bottom: 20px;
+
+        .form-group {
+            margin-bottom: 0px;
+        }
+    }
+
+}
+
+
+.input-group-btn {
+    padding-left: 10px;
+    
+    &:first-child>.btn {
+        margin-right: -2px;
+    }
+}
+
+.input-group .form-control {
+    font-size: $font-std;
+}
+
+/* .input-group {
+    line-height: 30px;
+} */
+
+.select-dropdown::before {
+    content: "\f0dc ";
+    font-family: FontAwesome;
+}
+
+/* Form control */
+
+.form-control {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+    padding-right: 0px;
+    padding-left: 0px;
+    border-radius: 0;
+    -webkit-border-radius: 0px;
+    -webkit-appearance: none;
+    border-color: $lighter-grey;
+    color: $text-color;
+    height: auto;
+    font-size: $font-std;
+
+    &:focus, &:hover {
+        @include transition(all .1s ease-in-out);              
+        border-color: $accent-color;
+        box-shadow: inset 0 -1px 0 $accent-color;
+    }
+
+    .list-search-custom & {
+        &:hover {
+            border-color: $lighter-grey;
+            box-shadow: none;       
+        }
+    }
+
+    &.header-form-item {
+        font-size: 12px;
+        display: inline-block;
+        width: 100px;
+        margin: 0px 5px 0px 0px;
+    }
+
+    &.transparent {
+        background: transparent;
+        margin-top: -5px;    
+    }
+
+}
+
+.form-control.error {
+    border-width: 0 0 1px 0;
+    border-color: $red;
+    border-style: solid;
+    box-shadow: inset 0 -1px 0 $red;
+
+    &:focus {
+        border-color: $accent-color;
+        box-shadow: inset 0 -1px 0 $accent-color;
+    }
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  background: inherit;
+  border-style: dotted;
+  opacity: 0.7;
+}
+
+h1 input.form-control {
+    font-size: 30px;
+    font-weight: 700;
+}
+
+h2 input.form-control {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+
+
+.form-horizontal .control-label {
+  text-align: left;
+}
+
+
+select.form-control,
+c-datepicker input {
+    cursor: pointer;
+}
+
+.form-control:focus, .single-line:focus {
+    border-color: $accent-color !important;
+    outline: none;
+}
+
+.has-success .form-control,
+.has-error .form-control {
+    box-shadow: none;
+}
+
+.has-success .form-control {
+    border-color: $accent-color;
+}
+
+.has-warning .form-control {
+    border-color: $mustard;
+}
+
+.has-error .form-control {
+    border-color: $red;
+}
+
+.has-success .control-label {
+    color: $accent-color;
+}
+
+.has-warning .control-label {
+    color: $mustard;
+}
+
+.has-error .control-label {
+    color: $red;
+}
+
+.form-control-inline {
+    padding: 0px !important;
+    border: none !important;
+
+    &:focus {
+        border-color: none;
+        box-shadow: none;
+    }
+}
+
+input[placeholder] {
+    font-size: $font-std;
+}
+
+
+/* Input addon */
+
+.input-group-addon {
+    border: 0;
+    border-radius: 0;
+    color: inherit;
+    line-height: 1;
+    text-align: center;
+    background-color: inherit;
+    font-size: $font-std;
+
+    &.btn-right {
+        padding: 0 0 0 12px;
+    }
+
+    &.left {
+        padding: 6px 12px 6px 0;
+    }
+
+    &.right {
+        padding: 6px 0 6px 12px;
+    }
+
+    &.addon-text {
+        font-size: 85%;
+        @extend .text-muted;
+        padding: 6px 0 6px 12px;
+    }
+
+    h2 {
+        margin: 0;
+    }
+}
+
+
+/* ON/OFF switch label */
+
+.onoffswitch-label {
+  border: 2px solid $accent-color;
+}
+
+.onoffswitch-inner:before {
+  background-color: $accent-color;
+}
+
+.onoffswitch-switch {
+  border: 2px solid $accent-color;
+}
+
+.onoffswitch-inner:after {
+  color: $grey;
+}
+
+
+/* YES/NO switch label */
+
+.yesnoswitch {
+    .onoffswitch-inner:before {
+        content: "YES";
+    }
+
+    .onoffswitch-inner:after {
+        content: "NO";
+    }
+}
+
+
+
+/* Labels */
+
+.label {
+    font-weight:700;
+    font-family: $font-stack;
+    font-size: 85%;
+
+    h3 {
+        margin: 0;
+        font-weight: 700;
+    }
+
+}
+
+.roomtitle span.label,
+.i-checks2 span.label{
+    margin-left: 6px;
+}
+
+.inline-label {
+    float: left;
+    clear: left;
+    line-height: 34px;
+    margin-right: 10px;
+}
+
+.label-group {
+    line-height: 30px;
+}
+
+label .small {
+    display: block;
+    font-weight: normal;
+    font-style: italic;
+}
+
+.fw-label {
+    display: inline-block;
+    padding: 1em .6em;
+    width: 100%;
+}
+
+
+/* ichecks */
+
+.i-checks {
+
+    label {
+        font-weight: normal;
+        margin-bottom: 0 !important;
+        cursor: pointer;
+    }
+
+    &:last-child label {
+        margin-bottom: 0;
+    }
+
+    span {
+        padding-left: 5px;
+        padding-top: 2px
+
+        table & {
+            padding-top: 0 !important;
+        }        
+    }
+
+    //checkboxes that may have a longer description
+    .checkbox,
+    .description {
+        display: table-cell;
+    }
+}
+
+.uncheck .icheckbox_square-steelblue.checked {
+        background-position: -240px 0;
+    }
+
+div.i-checks {
+    margin-bottom: 10px;
+}
+
+span.i-checks {
+    margin-right: 20px;
+}
+
+.i-checks-group div.i-checks:last-child {
+    margin-bottom: 0px;
+}
+
+.icheckbox_square-steelblue {
+    margin-right: 8px;
+}
+
+.table .icheckbox_square-steelblue {
+    margin-right: 0px;
+}
+
+ .i-checks2 {
+
+    label {
+        font-weight: normal;
+        /*line-height: 1em;*/
+        margin-bottom: 5px !important;
+        margin-top: 5px !important;
+        //margin-left: 30px;
+    
+        .icheckbox_square-steelblue {
+            //margin-left: -30px;    
+            margin-right: 5px;
+        }
+        table td & {
+        //    margin: 0 !important;
+        }
+    }
+}
+
+.agile-list .i-checks2 label {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+}
+
+.wizard-sub-checkbox .i-checks2 .icheckbox_square-steelblue  {
+        margin-right: 2px;
+    }
+
+.checkbox-container {
+    background: white;
+    padding: 5px 8px 5px 5px;
+    font-size: 14px;
+    color: lighten($grey, 20%);
+    cursor: pointer;
+
+    .icheckbox_square-red {
+       margin-right: 5px;
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    &:hover {
+        color: $red;
+    }
+}
+
+/* Form group */
+
+.form-group {
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.sub-form-groups {
+    background-color: $hover-grey;
+    border: 1px solid $lightest-grey;
+    padding: 5px;
+
+    .form-group {
+        border-bottom: 1px solid $lightest-grey;
+        padding-bottom: 10px;
+    }
+}
+
+
+.input-inline { //input-group
+    position: relative;
+    display: table;
+    border-collapse: separate;
+
+    .input-inline-text { //input-group-btn
+        position: relative;
+        white-space: nowrap;
+        vertical-align: middle;
+        display: table-cell;
+        width: 1%;
+
+        span {
+            position: relative;
+
+            &.right {
+                padding-left: 10px;
+            }
+
+            &.left {
+                padding-right: 10px;
+            }
+        }
+    }
+
+    .form-control {
+        display: table-cell;
+        position: relative;
+        z-index: 2;
+        float: left;
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+}
+
+
+
+.list-search-custom {
+    width: auto;
+    overflow: hidden;
+    position: relative;
+
+    label {
+        position: absolute;
+        left: 14px;
+        top: 6px;
+        font-size: 18px;
+        color: darken($lightest-grey, 25%);
+        z-index: 2;
+    }
+
+    .search-clear {
+        text-decoration: none;
+        position: absolute;
+        font-size: 18px;
+        right: 11px;
+        top: 6px;
+        color: darken($lightest-grey, 25%);
+
+        &:hover {
+             color: darken($lightest-grey, 40%);
+        }
+    }
+
+    input {
+
+        &.form-control {
+            background-color: darken($lightest-grey, 2%);
+            border-radius: 2px;
+            border: medium none;
+            font-size: $font-std;
+            height: 38px;
+            margin: 0;
+            z-index: 2000;
+            padding: 1px 45px;
+
+            &:focus {
+                border: 0;
+                box-shadow: none;
+            }
+        }
+
+        &.form-control.darker {
+            background-color: #FFF;
+        }
+    }
+
+}
+
+.input-group .search-clear,
+.page-search .search-clear {
+    top: 6px;
+    right: 0;
+}
+
+input {
+    .clear-option {
+        padding-right: 30px;
+    }
+}
+
+
+/* Select2 */
+
+.select2-container .select2-selection--single {
+    height: 34px !important;
+
+    .select2-selection__rendered {
+        padding-top: 2px;
+        padding-left: 4px;
+    }
+}
+
+
+.select2-container--default .select2-selection--single {
+    border-radius: 0 !important;
+    border: none !important;
+    border-bottom: 1px solid #CCC !important;
+}
+
+
+.select2-container:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+    border: none !important;
+    border-bottom: 1px solid #CCC !important;
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+    &:focus {
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+}
+
+.select2-container--default.select2-container--disabled .select2-selection--single {
+    background: none;
+
+    &:focus {
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+}
+
+/* In page search */
+
+.page-search {
+    background-color: darken($lightest-grey, 4%);
+    display: table;
+    padding: 5px 10px;
+    border-radius: 2px;
+
+    .input-group-addon {
+        background-color: darken($lightest-grey, 4%);
+    }
+
+    input,
+    input:focus,
+    input:active,
+    input:hover {
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+
+/* x-editable custom styles */
+
+.editableform {
+
+    .control-group {
+        line-height: inherit !important;
+        width: 100%;
+    }
+
+    .editable-input {
+        font-size: $font-std;
+        width: 100%;
+
+        textarea {
+            border: 1px solid $lightest-grey;
+            font-size: $font-std;
+            padding: 7px 8px;
+
+             &:focus {
+                border: 1px solid $lighter-grey !important;
+                box-shadow: none !important;
+            }
+        }
+
+        textarea.input-large {
+            width: 100%;
+        }
+
+        select {
+            padding: 0;
+            cursor: pointer;
+        }
+
+    }
+
+    .editable-buttons {
+        position: absolute;
+        right: 0;
+        margin-top: 3px;
+        margin-left: 0;
+        display: block;
+
+        button {
+            font-size: 14px;
+        }
+    }
+
+    .editable-buttons-bottom {
+        z-index: 1;
+    }
+
+}
+
+.transparent-editable {
+    .form-control {
+        color: inherit;
+        background: none !important;
+    }
+}
+
+div.editable {
+    padding: 7px 8px;
+    border: 1px solid white !important;
+
+    &:hover {
+        border: 1px solid $lighter-grey !important;
+    }
+
+    ul {
+        margin-bottom: 0 !important;
+        padding-left: 25px !important;
+    }
+}
+
+div.editable-onwhite {
+    padding: 7px 8px;
+    border: 1px solid $lighter-grey !important;
+
+    &:hover,
+    &:visited {
+        border: 1px solid $accent-color !important;
+
+    }
+
+    ul {
+        margin-bottom: 0 !important;
+        padding-left: 25px !important;
+    }
+}
+
+.editable-container.editable-inline,
+.editableform-loading,
+.editableform .form-control {
+    min-width: 150px !important;
+    width: inherit;
+}
+
+.editable-container .editable-error-block {
+    max-width: inherit;
+    font-size: 16px;
+    font-weight: 300;
+}
+
+.editable-container.editable-inline {
+    width: 100% !important;
+}
+
+/*
+ .editable-pre-wrapped {
+    padding: 7px 8px;
+
+    &:hover {
+        border: 1px solid $lightest-grey;
+    }
+} */
+
+.editable-click, a.editable-click, a.editable-click:hover {
+    border-bottom: 1px solid $lighter-grey !important;
+    font-weight: normal !important;
+}
+
+h2, h1 {
+  .editable-click, a.editable-click, a.editable-click:hover {
+    font-weight: inherit !important;
+    font-size: inherit !important;
+  }
+}
+
+.editable-empty, .editable-empty:hover, .editable-empty:focus {
+    color: darken($light-grey, 20%) !important;
+}
+
+span.editable-click {
+    padding: 5px 0;
+    border-bottom: 1px solid #fff !important;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+        border-bottom: 1px solid $lighter-grey !important;
+        line-height: 30px;
+
+
+        &:after {
+            content: "\00a0\00a0\f040";
+            font-family: FontAwesome;
+            color: $light-grey;
+        }
+    }
+}
+
+.editable-click.editable-disabled,
+.editable-click.editable-disabled:hover {
+    border-bottom: none !important;
+    outline:none !important;
+
+    &:after {
+        content: "";
+    }
+}
+
+
+/* select2 custom styles */
+
+.select2-container .select2-selection--single .select2-selection__rendered {
+    padding: 0 !important;
+}
+
+.select2-container .select2-selection--single {
+    height: 30px !important;
+}
+
+.select2 {
+    width: 100% !important;
+    outline: none !important;
+}
+
+.select2 .select2-container .select2-container--default,
+.select2 .select2-container .select2-container--default .select2-container--below,
+.select2-selection .select2-selection--single,
+.select2-container--default .select2-selection--single,
+.select2-selection__rendered,
+.selection {
+    outline: none !important;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: $text-color !important;
+}
+
+/* bootstrap date picker custom styles */
+
+.datepicker td.active,
+.datepicker span.active.active,
+.datepicker span.active:hover.active {
+        background-color: $accent-color !important;
+        background-image: none !important;
+}
+
+.datepicker-dropdown {
+    overflow: hidden !important;
+}
+
+.datepicker .dropdown-menu {
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+}
+
+
+/* Accordion filter */
+
+.ibox-filter {
+    label { 
+        font-weight: normal; 
+    }
+
+    .font-bold {
+        font-weight: bold;
+    }
+}
+
+
+/* Select2 styling */
+
+.editable-clear-x {
+    display: none !important;
+}
+
+.select2-chosen {
+    background: none !important;
+}
+
+.select2-container .select2-choice {
+    border: 0px !important;
+    border-radius: 1px solid $grey;
+    background: none !important;
+}
+
+
+.select2-drop {
+    border: none;
+}
+
+.select2-drop-active {
+    border: none;
+}
+
+.select2-container .select2-choice .select2-arrow {
+    border: 0px !important;
+    background: none !important;
+    background-image: none !important;
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+
+.select2-results .select2-result-label {
+    padding: 8px;
+}