BookStack Code Mirror - bookstack/blob - resources/assets/sass/_forms.scss

   1
   2 .input-base {
   3   background-color: #FFF;
   4   border-radius: 3px;
   5   border: 1px solid #CCC;
   6   display: inline-block;
   7   font-size: $fs-s;
   8   font-family: $text;
   9   padding: $-xs;
  10   color: #222;
  11   width: 250px;
  12   max-width: 100%;
  13   //-webkit-appearance:none;
  14   &.neg, &.invalid {
  15     border: 1px solid $negative;
  16   }
  17   &.pos, &.valid {
  18     border: 1px solid $positive;
  19   }
  20   &.disabled, &[disabled] {
  21     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
  22   }
  23 }
  24
  25 label {
  26   display: block;
  27   line-height: 1.4em;
  28   font-size: 0.94em;
  29   font-weight: 500;
  30   color: #666;
  31   padding-bottom: 2px;
  32   margin-bottom: 0.2em;
  33 }
  34
  35 label.radio, label.checkbox {
  36   font-weight: 400;
  37   input[type="radio"], input[type="checkbox"] {
  38     margin-right: $-xs;
  39   }
  40 }
  41
  42 label + p.small {
  43   margin-bottom: 0.8em;
  44 }
  45
  46 input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], select, textarea {
  47   @extend .input-base;
  48 }
  49
  50 .form-group {
  51   margin-bottom: $-s;
  52 }
  53
  54 .form-group {
  55   .text-pos, .text-neg {
  56     padding: $-xs 0;
  57   }
  58 }
  59
  60 .inline-input-style {
  61   border: 2px dotted #BBB;
  62   display: block;
  63   width: 100%;
  64   padding: $-xs $-s;
  65 }
  66
  67 .title-input .input {
  68   width: 100%;
  69 }
  70
  71 .title-input label, .description-input label{
  72   margin-top: $-m;
  73   color: #666;
  74 }
  75
  76 .title-input input[type="text"] {
  77   @extend h1;
  78   @extend .inline-input-style;
  79   margin-top: 0;
  80   padding-right: 0;
  81   width: 100%;
  82   color: #444;
  83 }
  84
  85 .title-input.page-title {
  86   font-size: 0.8em;
  87   .input {
  88     border: 0;
  89     margin-bottom: -1px;
  90   }
  91   input[type="text"] {
  92     max-width: 840px;
  93     margin: 0 auto;
  94     border: none;
  95   }
  96 }
  97
  98 .page-title input {
  99   display: block;
 100   width: 100%;
 101   font-size: 1.4em;
 102 }
 103
 104 .description-input textarea {
 105   @extend .inline-input-style;
 106   font-size: $fs-m;
 107   color: #666;
 108   width: 100%;
 109 }
 110
 111 .search-box {
 112   button {
 113     background-color: transparent;
 114     border: none;
 115     color: $primary;
 116     padding: 0;
 117     margin: 0;
 118     cursor: pointer;
 119     margin-left: $-s;
 120   }
 121   button[type="submit"] {
 122     margin-left: -$-l;
 123   }
 124   input {
 125     padding-right: $-l;
 126     width: 300px;
 127   }
 128 }