notification-admin/app/assets/stylesheets/tailwind/elements/forms.css at 86ca4bd1643da8d355ce692040151e21423c0630 · cds-snc/notification-admin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@layer components {
  /*! purgecss start ignore */
  fieldset.after-error-summary {
    margin-top: -15px;
  }
  @variant sm {
    fieldset.after-error-summary {
      margin-top: -30px;
    }
  }

  textarea {
    @apply block;
  }

  .form-label,
  .form-label-bold {
    padding-bottom: 2px;
    @apply block text-black;
  }
  .form-label {
    @apply mb-2 text-smaller leading-tight font-normal;
  }
  .form-label.heading-small {
    @apply text-smaller leading-tight font-bold mb-2 mt-0;
  }
  .form-label + .hint {
    margin-top: -5px;
    @apply block mb-2;
  }
  .form-label-bold {
    @apply font-bold;
  }

  .form-hint {
    margin-top: -2px;
    padding-bottom: 2px;
    @apply text-smaller leading-tight font-normal block text-gray-grey1;
  }
  .form-label .form-hint,
  .form-label-bold .form-hint {
    @apply mt-0 pb-0;
  }

  .input {
    border-color: #000;
    @apply border-solid border-2 py-3 px-2 text-smaller;
  }
  /* By default, form controls are 50% width for desktop,
     and 100% width for mobile
  */
  .form-control {
    padding: 5px 4px 4px;
    @apply box-border text-smaller leading-tight font-normal font-body w-full border-2 border-solid border-black;
  }
  @variant md {
    .form-control {
      @apply w-1/2;
    }
    .form-control.form-control-1-1 {
      @apply w-full;
    }
  }

  .form-control-5em {
    @apply w-full;
  }
  @variant md {
    .form-control-5em {
      width: 5em;
    }
  }

  input.form-control,
  textarea.form-control {
    -webkit-appearance: none;
    border-radius: 0;
  }
  textarea.form-control {
    @apply bg-none opacity-100;
  }

  option:active,
  option:checked,
  select:focus::-ms-value {
    @apply text-white bg-blue;
  }

  #add_template_by_template_type legend {
    font-size: 1.2em;
    @apply font-bold;
  }

  /*! purgecss end ignore */
}