concise.css/scss/layout/_forms.scss at master · pspeter3/concise.css · 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
96
97
98
99
100
101
102
103
@if $use-forms == true {
  //------------------------------------
  //  FORMS
  //------------------------------------
  input {
    &[type="checkbox"],
    &[type="file"],
    &[type="image"],
    &[type="radio"] {
      background: auto;
      border: auto;
      height: auto;
      width: auto;
    }
  }

  input[disabled],
  select[disabled],
  textarea[disabled] {
    background-color: #f6f6f6;
    cursor: not-allowed;
  }

  label { display: block; }

  textarea { height: auto; }


  @if $use-form-styles == true {
    // Form styling
    .form {
      input,
      select,
      textarea {
        border: 1px solid $object-ui-color;
        height: 37px;
        padding: 5px;
        width: 100%;

        @include vendor(box-sizing, border-box, official);

        @include breakpoint(extra-small) {
          & { width: 300px; }
        }
      }

      textarea { height: auto; }

      @include breakpoint(extra-small) {
        input[type="submit"] {
          display: block;
          width: auto;
        }
      }

      input:focus,
      select:focus,
      textarea:focus,
      button:focus,
      [contenteditable="true"]:focus { outline: 1px solid darken($object-ui-color, 15%); }

      fieldset {
        border: 1px solid $object-ui-color;
        padding: 10px 25px;

        legend {
          font-weight: bold;
          @include font-size(13px);
          padding: 0 10px;
        }
      }
    }


    // Block-level form items
    .form-item { display: block; }


    // Inline Form
    .form-inline {
      label { width: auto; }

      @include breakpoint(small) {
        label {
          display: inline-block;
          width: 100px;
        }

        textarea { width: auto; }
      }
    }


    // Placeholder text
    ::-webkit-input-placeholder { color: $placeholder-color; }

    :-ms-input-placeholder { color: $placeholder-color; }

    ::-moz-placeholder { color: $placeholder-color; }

    :-moz-placeholder { color: $placeholder-color; }
  }
}