catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less

   1 .adaptive_placeholder(@height, @radius, @margin: 0em, @border: 1px) {
   2   @borders: (@border * 2);
   3   box-sizing: border-box;
   4   width: 80%;
   5   height: ~"calc(@{height} + @{borders})";
   6   margin: @margin;
   7   padding: @margin;
   8   border: @border solid #00bafa;
   9   border-radius: @radius;
  10   background: #fff;
  11   resize: none;
  12   outline: none;
  13   &[required] {
  14     &:focus {
  15       border-color: #00bafa;
  16       + label {
  17         &[placeholder] {
  18           &:before {
  19             margin: 0;
  20             color: #00bafa;
  21           }
  22         }
  23       }
  24     }
  25     &:focus,
  26     &:valid {
  27       + label {
  28         &[placeholder] {
  29           &:before {
  30             transform: translate(0, (-1em)) scale(.9, .9);
  31           }
  32         }
  33       }
  34     }
  35     &:invalid {
  36       + label {
  37         &[placeholder] {
  38           &[alt] {
  39             &:before {
  40               content: attr(alt);
  41             }
  42           }
  43         }
  44       }
  45     }
  46     + label {
  47       &[placeholder] {
  48         display: block;
  49         pointer-events: none;
  50         line-height: @margin * 1.25;
  51         margin-top: ~"calc(-1em - @{borders})";
  52         margin-bottom: ~"calc((@{height} - @{margin}) + @{borders})";
  53         &:before {
  54           content: attr(placeholder);
  55           display: inline-block;
  56           margin: 0 ~"calc(@{margin} + @{borders})";
  57           padding: 0 2px;
  58           color: #00bafa;
  59           font-size: small;
  60           white-space: nowrap;
  61           transition: .3s ease-in-out;
  62
  63           background-image: linear-gradient(to bottom, #fff, #fff);
  64           background-size: 100% 5px;
  65           background-repeat: no-repeat;
  66           background-position: center;
  67         }
  68       }
  69     }
  70   }
  71 }
  72
  73 .gab-column-provider-form {
  74   margin: 5px
  75 }
  76
  77 .gab-column-provider-input {
  78   @height: 2em;
  79   &[type="text"] {
  80     .adaptive_placeholder(@height, (@height / 2));
  81   }
  82 }
  83
  84 .gab-column-provider-input.ng-valid[required], .gab-column-provider-input.ng-valid.required  {
  85   border-left: 5px solid #42bb48;
  86   border-right: 5px solid #42bb48;
  87 }
  88
  89 .gab-column-provider-input.ng-invalid:not(form)  {
  90   border-left: 5px solid #ff0511;
  91   border-right: 5px solid #ff0511;
  92 }