public/assets/plugins/angular-material-form-builder/src/lib/index.scss

   1 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
   2
   3 $button-dim: 36px;
   4
   5 .main-view {
   6   .content {
   7     .builder,
   8     .view,
   9     .json {
  10       border-right: 1px solid #cccccc;
  11       height: 800px;
  12       overflow: auto;
  13     }
  14   }
  15 }
  16
  17 .builder-icon {
  18   min-height: $button-dim;
  19   min-width: $button-dim;
  20   height: $button-dim;
  21   width: $button-dim;
  22   line-height: 0;
  23 }
  24
  25 form-item {
  26   .option-item {
  27     min-height: 75px;
  28
  29     .md-button {
  30       @extend .builder-icon;
  31       line-height: 0;
  32       margin-top: 20px;
  33
  34       &.handle:active,
  35       &.handle:hover {
  36         cursor: move;
  37       }
  38     }
  39   }
  40
  41   .form-item-container {
  42     position: relative;
  43     padding-top: 30px;
  44
  45     .form-item-actions {
  46       position: absolute;
  47       right: 20px;
  48       top: 0;
  49     }
  50
  51     .md-button {
  52       @extend .builder-icon;
  53     }
  54   }
  55 }
  56
  57 form-view {
  58   .formItem-title {
  59     font-size: 18px;
  60   }
  61
  62   .formItem-content {
  63     font-size: 18px;
  64   }
  65
  66   .formItem-help-text {
  67     font-size: 14px;
  68     color: #6c6c6c;
  69   }
  70
  71   .matrix-container {
  72     overflow: auto;
  73
  74     .matrix {
  75       .matrix-row {
  76         border-bottom: 1px solid #4caf50;
  77       }
  78
  79       .matrix-cell {
  80         text-align: center;
  81         overflow: hidden;
  82       }
  83
  84       md-radio-button {
  85         .md-label {
  86           margin-left: 0;
  87           margin-right: 0;
  88         }
  89       }
  90
  91       md-radio-button,
  92       .md-switch-thumb {
  93         margin: 15px 0;
  94       }
  95     }
  96   }
  97 }
  98
  99 i.material-icons {
 100   position: absolute;
 101   top: 50%;
 102   left: 50%;
 103   transform: translate(-50%, -50%);
 104
 105   &.medium {
 106     font-size: 36px;
 107   }
 108 }
 109
 110 .md-button.upload-button {
 111   padding: 0 16px;
 112   height: 36px;
 113   md-icon {
 114     font-size: 16px;
 115   }
 116 }