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

   1 @import "../default/theme.less";
   2
   3 .plx-radio-container {
   4         font-size: 0;
   5         position: relative;
   6 }
   7
   8 .plx-radio {
   9         position: absolute;
  10         z-index: -1;
  11         opacity: 0;
  12         & + .radio-substitute {
  13                 position: relative;
  14                 display: inline-block;
  15                 cursor: pointer;
  16                 height: @checkbox-size;
  17                 width: @checkbox-size;
  18                 border: 1px solid @border-color-base;
  19                 border-radius: @checkbox-size;
  20                 vertical-align: middle;
  21         }
  22         &:hover + .radio-substitute,
  23         &:focus + .radio-substitute {
  24                 border-color: @primary-color;
  25                 outline: none;
  26                 background-image: none;
  27                 -webkit-box-shadow: none;
  28                 -moz-box-shadow: none;
  29                 box-shadow: none;
  30                 text-shadow: none;
  31         }
  32         &:checked + .radio-substitute {
  33                 .radio-boder-checked-width(@font-size);
  34         }
  35         &:disabled + .radio-substitute,
  36         &[disabled] + .radio-substitute {
  37                 border-color: @border-color-base;
  38                 background-color: @input-bg-color-disabled;
  39                 cursor: not-allowed;
  40         }
  41         &:checked [disabled] + .radio-substitute {
  42                 border-color: @border-color-split;
  43                 background-color: @border-color-split;
  44                 cursor: not-allowed;
  45         }
  46         & + .radio-substitute + span {
  47                 font-weight: normal;
  48                 font-size: @font-size;
  49                 cursor: pointer;
  50                 vertical-align: middle;
  51                 .font-padding(@font-size);
  52         }
  53         &:disabled + .radio-substitute + span,
  54         &[disabled] + .radio-substitute + span {
  55                 cursor: not-allowed;
  56         }
  57 }
  58
  59 .radio-boder-checked-width(12px) {
  60         border: 4px solid @primary-color;
  61 }
  62
  63 .radio-boder-checked-width(14px) {
  64         border: 5px solid @primary-color;
  65 }
  66
  67 .font-padding(12px) {
  68         padding-left: 6px;
  69 }
  70
  71 .font-padding(14px) {
  72         padding-left: 10px;
  73 }
  74
  75 /*radio-group*/
  76
  77 @radio-group-border-height: 1px;
  78 @padding-normal: 0px 16px;
  79 @padding-sm: 0px 14px;
  80 @min-width-normal: 80px;
  81 @min-width-sm: 60px;
  82
  83 .border-min-width(@min-width, 14px) {
  84         min-width: @min-width + 8px;
  85 }
  86
  87 .border-min-width(@min-width, 12px) {
  88         min-width: @min-width;
  89 }
  90
  91 .btn.dropdown-toggle,
  92 .btn-group .btn.dropdown-toggle,
  93 .btn:hover,
  94 .btn:disabled,
  95 .btn[disabled],
  96 .btn:focus,
  97 .btn:active,
  98 .btn.active {
  99         outline: none !important;
 100         background-image: none !important;
 101         filter: none;
 102         -webkit-box-shadow: none;
 103         -moz-box-shadow: none;
 104         box-shadow: none;
 105         text-shadow: none;
 106 }
 107
 108 .plx-radio-group {
 109         cursor: pointer;
 110         font-size: @font-size;
 111         height: @btn-height;
 112         background-color: @common-color;
 113         border: @radio-group-border-height solid @border-color-base;
 114         color: @text-color;
 115         border-radius: @radius;
 116         padding: @padding-normal;
 117         .border-min-width(@min-width-normal, @font-size);
 118         transition: none;
 119         &:hover,
 120         &:focus,
 121         &:active {
 122                 outline: none;
 123                 background-image: none;
 124                 filter: none;
 125                 -webkit-box-shadow: none;
 126                 -moz-box-shadow: none;
 127                 box-shadow: none;
 128                 text-shadow: none;
 129         }
 130
 131   &:hover,
 132   &:focus {
 133     color: @btn-common-color-text-hover;
 134     border-color: @btn-common-color-border-hover;
 135     background-color: @common-color-hover;
 136   }
 137   &:active {
 138     color: @btn-common-color-text-click;
 139     border-color: @btn-common-color-border-click;
 140     background-color: @common-color-click;
 141   }
 142         &.active {
 143                 background-color: @primary-color;
 144                 color: @scene-textcolor;
 145                 border-color: @primary-color;
 146         }
 147         & > span {
 148                 line-height: @btn-height - @radio-group-border-height * 2;
 149         }
 150 }
 151
 152 .plx-radio-group-sm {
 153         height: @btn-height-sm;
 154         padding: @padding-sm;
 155         .border-min-width(@min-width-sm, @font-size);
 156         & > span {
 157                 line-height: @btn-height-sm - @radio-group-border-height * 2;
 158         }
 159 }