Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_custom-forms.scss 7.48 KiB
1 
//
2 
// Custom forms
3 
// --------------------------------------------------
4
5
6 
// Embedded icons from Open Iconic.
7 
// Released under MIT and copyright 2014 Waybury.
8 
// http://useiconic.com/open
9
10
11 
// Checkboxes and radios
12 
//
13 
// Base class takes care of all the key behavioral aspects.
14
15 
.c-input {
16 
  position: relative;
17 
  display: inline;
18 
  padding-left: 1.5rem;
19 
  color: #555;
20 
  cursor: pointer;
21
22 
  > input {
23 
    position: absolute;
24 
    z-index: -1; // Put the input behind the label so it doesn't overlay text
25 
    opacity: 0;
26
27 
    &:focus ~ .c-indicator {
28 
      @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
29 
    }
30
31 
    &:checked ~ .c-indicator {
32 
      color: #fff;
33 
      background-color: #0074d9;
34 
      @include box-shadow(none);
35 
    }
36
37 
    &:active ~ .c-indicator {
38 
      color: #fff;
39 
      background-color: #84c6ff;
40 
      @include box-shadow(none);
41 
    }
42 
  }
43
44 
  + .c-input {
45 
    margin-left: 1rem;
46 
  }
47 
}
48
49 
// Custom indicator
50 
//
51 
// Generates a shadow element to create our makeshift checkbox/radio background.
52
53 
.c-indicator {
54 
  position: absolute;
55 
  top: 0;
56 
  left: 0;
57 
  display: block;
58 
  width: 1rem;
59 
  height: 1rem;
60 
  font-size: 65%;
61 
  line-height: 1rem;
62 
  color: #eee;
63 
  text-align: center;
64 
  user-select: none;
65 
  background-color: #eee;
66 
  background-repeat: no-repeat;
67 
  background-position: center center;
68 
  background-size: 50% 50%;
69 
  @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
70 
}
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// Checkboxes // // Tweak just a few things for checkboxes. .c-checkbox { .c-indicator { border-radius: .25rem; } input:checked ~ .c-indicator { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); } input:indeterminate ~ .c-indicator { background-color: #0074d9; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); @include box-shadow(none); } } // Radios // // Tweak just a few things for radios. .c-radio { .c-indicator { border-radius: 50%; } input:checked ~ .c-indicator { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); } } // Layout options // // By default radios and checkboxes are `inline-block` with no additional spacing // set. Use these optional classes to tweak the layout. .c-inputs-stacked { .c-input { display: inline; &:after { display: block; margin-bottom: .25rem; content: ""; } + .c-input { margin-left: 0; } } } // Select // // Replaces the browser default select with a custom one. .select { position: relative; display: inline-block; color: #555; > select { display: inline-block; width: 100%;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
padding: .5rem 2.25rem .5rem 1rem; margin: 0; line-height: 1.5; color: #555; cursor: pointer; background-color: #eee; border: 0; border-radius: .25rem; outline: 0; -webkit-appearance: none; appearance: none; &:focus { box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; // Undo the Firefox inner focus ring &:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } } &:active { color: #fff; background-color: #0074d9; } // Hide the arrow in IE10 and up &::-ms-expand { display: none; } } // Dropdown arrow &:after { position: absolute; top: 50%; right: 1.25rem; display: inline-block; width: 0; height: 0; margin-top: -.15rem; pointer-events: none; content: ""; border-top: .35rem solid; border-right: .35rem solid transparent; border-bottom: .35rem solid transparent; border-left: .35rem solid transparent; } } // Hover state .select select { @include hover { background-color: #ddd; } } // Media query to target Firefox only @-moz-document url-prefix() { // Firefox hack to hide the arrow .select select { padding-right: 1rem; text-indent: 0.01px; text-overflow: ""; } // <option> elements inherit styles from <select>, so reset them. .select option {
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
background-color: #fff; } } // IE9 hack to hide the arrow @media screen and (min-width:0\0) { .select select { z-index: 1; padding: .5rem 1.5rem .5rem 1rem; } .select:after { z-index: 5; } .select:before { position: absolute; top: 0; right: 1rem; bottom: 0; z-index: 2; display: block; width: 1.5rem; content: ""; background-color: #eee; } .select select { @include hover-focus-active { color: #555; background-color: #eee; } } } // File // // Custom file input. .file { position: relative; display: inline-block; height: 2.5rem; cursor: pointer; } .file input { min-width: 14rem; margin: 0; filter: alpha(opacity=0); opacity: 0; } .file-custom { position: absolute; top: 0; right: 0; left: 0; z-index: 5; height: 2.5rem; padding: .5rem 1rem; line-height: 1.5; color: #555; user-select: none; background-color: #fff; border: .075rem solid #ddd; border-radius: .25rem; box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05); } .file-custom:after { content: "Choose file..."; } .file-custom:before { position: absolute;
281282283284285286287288289290291292293294295296297298299300
top: -.075rem; right: -.075rem; bottom: -.075rem; z-index: 6; display: block; height: 2.5rem; padding: .5rem 1rem; line-height: 1.5; color: #555; content: "Browse"; background-color: #eee; border: .075rem solid #ddd; border-radius: 0 .25rem .25rem 0; } // Focus state .file input:focus ~ .file-custom { box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; }