gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 @import "../default/theme.less";
   2
   3 @padding-normal: 0px 16px;
   4 @padding-sm: 0px 14px;
   5 @padding-xs: 0px 12px;
   6 @min-width-normal: 80px;
   7 @min-width-sm: 60px;
   8 @min-width-xs: 60px;
   9 @btn-margin-right: 10px;
  10 @btn-margin-right-sm: 5px;
  11 @btn-margin-right-xs: 5px;
  12 @btn-border-height: 1px;
  13
  14 .border-min-width(@min-width, 14px) {
  15         min-width: @min-width + 8px;
  16 }
  17
  18 .border-min-width(@min-width, 12px) {
  19         min-width: @min-width;
  20 }
  21
  22 .background-color-white-color-disabled (@color) when (@color = #fff) {
  23         color: @disabled-text-color;
  24   background-color: @common-color;
  25         border-color: #e9e9e9;
  26 }
  27
  28 .background-color-white-color-disabled (@color) when not (@color = #fff) {
  29         border-color: @color;
  30         background-color: @color;
  31         opacity: @opacity-disable;
  32 }
  33
  34 .plx-btn {
  35         font-family: @font-family;
  36         color: @common-textcolor;
  37         .border-min-width(@min-width-normal, @font-size);
  38         letter-spacing: 1px;
  39         padding: @padding-normal;
  40         height: @btn-height;
  41         font-size: @font-size;
  42         cursor: pointer;
  43         text-align: center;
  44         white-space: nowrap;
  45         margin-right: @btn-margin-right;
  46         vertical-align: middle;
  47         border: @btn-border-height solid @border-color-base;
  48         background-color: @common-color;
  49         border-radius: @radius;
  50         line-height: @btn-height - @btn-border-height * 2;
  51         &:hover,
  52         &:disabled,
  53         &[disabled],
  54         &:focus,
  55         &:active {
  56                 outline: none;
  57                 background-image: none;
  58                 filter: none;
  59                 -webkit-box-shadow: none;
  60                 -moz-box-shadow: none;
  61                 box-shadow: none;
  62                 text-shadow: none;
  63         }
  64         &:hover,
  65         &:focus {
  66     color: @btn-common-color-text-hover;
  67     border-color: @btn-common-color-border-hover;
  68                 background-color: @common-color-hover;
  69         }
  70         &:active {
  71     color: @btn-common-color-text-click;
  72     border-color: @btn-common-color-border-click;
  73                 background-color: @common-color-click;
  74         }
  75         &:disabled,
  76         &[disabled] {
  77                 .background-color-white-color-disabled(@common-color);
  78         }
  79         &:disabled:hover,
  80         &[disabled]:hover,
  81         &:disabled:focus,
  82         &[disabled]:focus {
  83                 .background-color-white-color-disabled(@common-color);
  84                 cursor: not-allowed;
  85         }
  86         & .plx-btn-icon {
  87                         font-size: 16px;
  88                         vertical-align: text-top;
  89                         margin-right: 3px;
  90         }
  91 }
  92
  93 .plx-btn-primary {
  94         background-color: @primary-color;
  95         color: @scene-textcolor;
  96         border-color: @primary-color;
  97         &:hover,
  98         &:focus {
  99     color: @scene-textcolor;
 100                 background-color: @primary-color-hover;
 101                 border-color: @primary-color-hover;
 102         }
 103         &:active {
 104     color: @scene-textcolor;
 105                 background-color: @primary-color-click;
 106                 border-color: @primary-color-click;
 107         }
 108         &:disabled,
 109         &[disabled],
 110         &:disabled:hover,
 111         &[disabled]:hover,
 112         &:disabled:focus,
 113         &[disabled]:focus {
 114                 color: @scene-textcolor;
 115                 .background-color-white-color-disabled(@primary-color);
 116         }
 117 }
 118
 119 .plx-btn-guide {
 120         background-color: @guide-color;
 121         color: @scene-textcolor;
 122         border-color: @guide-color;
 123         &:hover,
 124         &:focus {
 125     color: @scene-textcolor;
 126                 background-color: @primary-color-guide-hover;
 127                 border-color: @primary-color-guide-hover;
 128         }
 129         &:active {
 130     color: @scene-textcolor;
 131                 background-color: @primary-color-guide-click;
 132                 border-color: @primary-color-guide-click;
 133         }
 134         &:disabled,
 135         &[disabled],
 136         &:disabled:hover,
 137         &[disabled]:hover,
 138         &:disabled:focus,
 139         &[disabled]:focus {
 140                 color: @scene-textcolor;
 141                 .background-color-white-color-disabled(@guide-color);
 142         }
 143 }
 144
 145 .plx-btn-table {
 146         color: @text-color;
 147 }
 148
 149 .plx-btn-error {
 150         background-color: @error-color;
 151         color: @scene-textcolor;
 152         border-color: @error-color;
 153         &:hover,
 154         &:focus {
 155     color: @scene-textcolor;
 156                 background-color: @error-color-hover;
 157                 border-color: @error-color-hover;
 158         }
 159         &:active {
 160     color: @scene-textcolor;
 161                 background-color: @error-color-click;
 162                 border-color: @error-color-click;
 163         }
 164         &:disabled,
 165         &[disabled],
 166         &:disabled:hover,
 167         &[disabled]:hover,
 168         &:disabled:focus,
 169         &[disabled]:focus {
 170                 color: @scene-textcolor;
 171                 .background-color-white-color-disabled(@error-color);
 172         }
 173 }
 174
 175 .plx-btn-sm {
 176         height: @btn-height-sm;
 177         padding: @padding-sm;
 178         .border-min-width(@min-width-sm, @font-size);
 179         margin-right: @btn-margin-right-sm;
 180         line-height: @btn-height-sm - @btn-border-height * 2;
 181 }
 182
 183 .plx-btn-xs{
 184         height: @btn-height-xs;
 185         padding: @padding-xs;
 186         .border-min-width(@min-width-xs, @font-size);
 187         margin-right: @btn-margin-right-xs;
 188         line-height: @btn-height-xs - @btn-border-height * 2;
 189 }
 190
 191 .plx-btn.dropdown-toggle {
 192         margin-right: 0;
 193         outline: none !important;
 194         background-image: none !important;
 195         filter: none;
 196         -webkit-box-shadow: none;
 197         -moz-box-shadow: none;
 198         box-shadow: none;
 199         text-shadow: none;
 200 }
 201
 202 .plx-btn.dropdown-toggle::after {
 203         margin-left: 16px;
 204         border-top: 4px solid;
 205         border-right: 4px solid transparent;
 206         border-left: 4px solid transparent;
 207         color: darken(@border-color-base, 10%);
 208         margin-bottom: 1px;
 209 }
 210
 211 .plx-btn-sm.dropdown-toggle::after {
 212         margin-left: 14px;
 213 }
 214
 215 .plx-btn-xs.dropdown-toggle::after {
 216         margin-left: 12px;
 217 }
 218
 219 .plx-btn+.dropdown-menu {
 220         margin: 0;
 221         padding: 0;
 222         border: 0;
 223         min-width: 100%;
 224         font-size: @font-size;
 225         border-radius: @radius;
 226         .shadow;
 227         & .dropdown-item {
 228                 background-color: @component-bg;
 229                 color: @text-color;
 230                 font-size: @font-size;
 231                 padding: @padding-normal;
 232                 height: 30px;
 233                 cursor: pointer;
 234                 &:hover,
 235                 &:focus,
 236                 &:active{
 237                         outline: none;
 238                         background-color: @hover-bg-color;
 239                 }
 240                 &:disabled,
 241                 &[disabled] {
 242                         color: @disabled-text-color;
 243                 }
 244                 &:disabled:hover,
 245                 &[disabled]:hover,
 246                 &:disabled:focus,
 247                 &[disabled]:focus {
 248                         cursor: not-allowed;
 249                         background-color: @component-bg;
 250                 }
 251         }
 252 }
 253
 254 .plx-btn-sm+.dropdown-menu .dropdown-item {
 255         padding: @padding-sm;
 256 }
 257 .plx-btn-xs+.dropdown-menu .dropdown-item {
 258         padding: @padding-xs;
 259 }
 260
 261 .plx-btn-more {
 262         display: inline-block;
 263         margin-right: @btn-margin-right;
 264 }
 265
 266 .plx-btn-more-sm {
 267         margin-right: @btn-margin-right-sm;
 268 }
 269
 270 .plx-btn-more-xs {
 271         margin-right: @btn-margin-right-xs;
 272 }