ecomp-portal-FE-common/client/app/styles/select2.less

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  37  */
  38  .select2-drop {
  39     //position: absolute;
  40     border-radius: 0 0 2px 2px;
  41
  42     outline: none;
  43 }
  44
  45 .select2-container {
  46     margin-right: 8px;
  47
  48
  49     .select2-choice {
  50         border-color: @portalLGray;
  51         border-radius: 2px;
  52         background-image: none;
  53         height: 32px;
  54         width: 100%;
  55     }
  56
  57     &.select2-dropdown-open {
  58         .select2-choice {
  59             border-color: @portalBlue;
  60         }
  61         .select2-choice .select2-arrow b:after,
  62         &.select2-container-disabled .select2-choice .select2-arrow b:after,
  63         .select2-choice .select2-arrow b:after {
  64             .arrow_up;
  65         }
  66     }
  67
  68     .select2-choice .select2-arrow b:after,
  69     &.select2-container-disabled .select2-choice .select2-arrow b:after,
  70     .select2-choice .select2-arrow b:after {
  71         .arrow_down;
  72         height: 10px;
  73         width: 10px;
  74         top: 12px;
  75         right: 10px;
  76         content: '';
  77     }
  78     .select2-chosen, .select2-container input {
  79         line-height: 32px;
  80     }
  81 }
  82
  83 .select2-results {
  84     border-radius: 0 0 2px 2px;
  85     margin: -13px 0 0 0;
  86     .select2-result {
  87         &:first-child {
  88             margin-top: 14px;
  89         }
  90         &:hover {
  91             background-color: @funcBkgGray;
  92         }
  93     }
  94
  95     .select2-result-label {
  96         outline: none;
  97     }
  98 }
  99
 100 .select2-drop-above {
 101     &.select2-drop {
 102         border-radius: 2px 2px 0 0;
 103     }
 104
 105     &.select2-dropdown-open .select2-choice {
 106         border-radius: 0 0 2px 2px !important;
 107         background: @portalWhite;
 108     }
 109 }
 110
 111 .select2-dropdown-open {
 112     .select2-choice {
 113         border-color: @portalLGray;
 114
 115         .select2-arrow b:after {
 116
 117         }
 118     }
 119 }
 120
 121 .select2-drop-active {
 122     border-color: @portalBlue;
 123 }
 124 //.select2-container {
 125 //    margin: 0;
 126 //    position: relative;
 127 //    display: block;
 128 //    .a14r;
 129 //
 130 //    &.ng-invalid.ng-touched {
 131 //        .select2-choice {
 132 //            border: 1px solid @err;
 133 //        }
 134 //    }
 135 //
 136 //    &.select2-container-active.ng-invalid.ng-touched {
 137 //        .select2-choice {
 138 //            border: 1px solid @c;
 139 //        }
 140 //    }
 141 //
 142 //    .select2-choice {
 143 //        display: block;
 144 //        padding: 10px 0 6px 8px;
 145 //        overflow: hidden;
 146 //        position: relative;
 147 //        border: 1px solid @o;
 148 //        text-decoration: none;
 149 //        cursor: pointer;
 150 //
 151 //        & > .select2-chosen {
 152 //            margin-right: 33px;
 153 //            display: block;
 154 //            overflow: hidden;
 155 //            white-space: nowrap;
 156 //            text-overflow: ellipsis;
 157 //        }
 158 //
 159 //        .select2-arrow {
 160 //            display: inline-block;
 161 //            width: 33px;
 162 //            height: 100%;
 163 //            position: absolute;
 164 //            right: 0;
 165 //            top: 0;
 166 //            //border-left: 1px solid @s;;
 167 //            //border-radius: 0 4px 4px 0;
 168 //            display: flex;
 169 //            align-items: center;
 170 //            justify-content: center;
 171 //
 172 //            b {
 173 //                display: block;
 174 //                //.spr_dropdown_arrow; //fix this
 175 //            }
 176 //        }
 177 //    }
 178 //
 179 //    .select2-drop-active {
 180 //        border: 1px solid @c;
 181 //        border-top: none;
 182 //        position: absolute;
 183 //        top: 32px;
 184 //        left: 0;
 185 //        width: 100%;
 186 //        .bg_f;
 187 //        z-index: 100;
 188 //    }
 189 //
 190 //    .select2-search {
 191 //        display: inline-block;
 192 //        width: 100%;
 193 //        min-height: 30px;
 194 //        margin: 0;
 195 //        padding-left: 4px;
 196 //        padding-right: 4px;
 197 //        position: relative;
 198 //        z-index: 10000;
 199 //        white-space: nowrap;
 200 //
 201 //        input {
 202 //            width: 100%;
 203 //            height: auto !important;
 204 //            min-height: 26px;
 205 //            padding: 4px 20px 4px 5px;
 206 //            margin: 0;
 207 //            outline: 0;
 208 //            border: 1px solid @o;
 209 //            &:focus {
 210 //                border: 1px solid @o;
 211 //            }
 212 //            border-radius: 2px;
 213 //            box-shadow: none;
 214 //        }
 215 //    }
 216 //
 217 //}
 218 /////
 219 //
 220 //.select2-container-active .select2-choice,
 221 //.select2-container-active .select2-choices {
 222 //    border: 1px solid @c;
 223 //    outline: none;
 224 //    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
 225 //}
 226 //
 227 //.select2-dropdown-open {
 228 //    .select2-choice {
 229 //        border-bottom-color: transparent;
 230 //        box-shadow: 0 1px 0 #fff inset;
 231 //        border-bottom-left-radius: 0;
 232 //        border-bottom-right-radius: 0;
 233 //
 234 //        .select2-arrow {
 235 //            background: transparent;
 236 //            border-left: none;
 237 //            filter: none;
 238 //        }
 239 //    }
 240 //    .select2-results {
 241 //        max-height: 200px;
 242 //        padding: 0 0 0 4px;
 243 //        margin: 4px 4px 4px 0;
 244 //        position: relative;
 245 //        overflow-x: hidden;
 246 //        overflow-y: auto;
 247 //        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 248 //
 249 //        li.select2-result-with-children > .select2-result-label {
 250 //            font-weight: bold;
 251 //        }
 252 //
 253 //        .select2-result-label {
 254 //            padding: 3px 7px 4px;
 255 //            margin: 0;
 256 //            cursor: pointer;
 257 //        }
 258 //
 259 //        .select2-highlighted {
 260 //            background: @c;
 261 //            color: @f;
 262 //        }
 263 //    }
 264 //}
 265 //.select2-display-none {
 266 //    display: none;
 267 //}