flat-ui-sass 2.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (122) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +18 -0
  3. data/.gitmodules +3 -0
  4. data/Gemfile +4 -0
  5. data/LICENSE.txt +22 -0
  6. data/README.md +256 -0
  7. data/Rakefile +14 -0
  8. data/app/helpers/flat_ui/rails/icon_helper.rb +60 -0
  9. data/bin/fui_convert +9 -0
  10. data/flat-ui-sass.gemspec +28 -0
  11. data/lib/flat-ui-sass.rb +98 -0
  12. data/lib/flat-ui-sass/cli.rb +56 -0
  13. data/lib/flat-ui-sass/engine.rb +13 -0
  14. data/lib/flat-ui-sass/sass_functions.rb +56 -0
  15. data/lib/flat-ui-sass/version.rb +4 -0
  16. data/lib/tasks/converter.rb +99 -0
  17. data/lib/tasks/converter/filesystem.rb +16 -0
  18. data/lib/tasks/converter/flat_ui_fonts_conversion.rb +19 -0
  19. data/lib/tasks/converter/flat_ui_images_conversion.rb +19 -0
  20. data/lib/tasks/converter/flat_ui_js_conversion.rb +28 -0
  21. data/lib/tasks/converter/flat_ui_less_conversion.rb +328 -0
  22. data/lib/tasks/converter/logger.rb +61 -0
  23. data/lib/tasks/flat-ui-sass.rake +8 -0
  24. data/templates/project/_variables.scss.erb +5 -0
  25. data/templates/project/manifest.rb +57 -0
  26. data/templates/project/styles.scss +4 -0
  27. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.eot +0 -0
  28. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.svg +140 -0
  29. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.ttf +0 -0
  30. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.woff +0 -0
  31. data/vendor/assets/images/flat-ui/icons/png/Book.png +0 -0
  32. data/vendor/assets/images/flat-ui/icons/png/Calendar.png +0 -0
  33. data/vendor/assets/images/flat-ui/icons/png/Chat.png +0 -0
  34. data/vendor/assets/images/flat-ui/icons/png/Clipboard.png +0 -0
  35. data/vendor/assets/images/flat-ui/icons/png/Compas.png +0 -0
  36. data/vendor/assets/images/flat-ui/icons/png/Gift-Box.png +0 -0
  37. data/vendor/assets/images/flat-ui/icons/png/Infinity-Loop.png +0 -0
  38. data/vendor/assets/images/flat-ui/icons/png/Mail.png +0 -0
  39. data/vendor/assets/images/flat-ui/icons/png/Map.png +0 -0
  40. data/vendor/assets/images/flat-ui/icons/png/Pensils.png +0 -0
  41. data/vendor/assets/images/flat-ui/icons/png/Pocket.png +0 -0
  42. data/vendor/assets/images/flat-ui/icons/png/Retina-Ready.png +0 -0
  43. data/vendor/assets/images/flat-ui/icons/png/Toilet-Paper.png +0 -0
  44. data/vendor/assets/images/flat-ui/icons/png/Watches.png +0 -0
  45. data/vendor/assets/images/flat-ui/icons/svg/book.svg +1 -0
  46. data/vendor/assets/images/flat-ui/icons/svg/calendar.svg +1 -0
  47. data/vendor/assets/images/flat-ui/icons/svg/chat.svg +1 -0
  48. data/vendor/assets/images/flat-ui/icons/svg/clipboard.svg +1 -0
  49. data/vendor/assets/images/flat-ui/icons/svg/clocks.svg +9 -0
  50. data/vendor/assets/images/flat-ui/icons/svg/compas.svg +1 -0
  51. data/vendor/assets/images/flat-ui/icons/svg/gift-box.svg +1 -0
  52. data/vendor/assets/images/flat-ui/icons/svg/loop.svg +5 -0
  53. data/vendor/assets/images/flat-ui/icons/svg/mail.svg +1 -0
  54. data/vendor/assets/images/flat-ui/icons/svg/map.svg +1 -0
  55. data/vendor/assets/images/flat-ui/icons/svg/paper-bag.svg +1 -0
  56. data/vendor/assets/images/flat-ui/icons/svg/pencils.svg +1 -0
  57. data/vendor/assets/images/flat-ui/icons/svg/retina.svg +1 -0
  58. data/vendor/assets/images/flat-ui/icons/svg/toilet-paper.svg +1 -0
  59. data/vendor/assets/images/flat-ui/login/icon.png +0 -0
  60. data/vendor/assets/images/flat-ui/login/imac-2x.png +0 -0
  61. data/vendor/assets/images/flat-ui/login/imac.png +0 -0
  62. data/vendor/assets/images/flat-ui/switch/mask-square.png +0 -0
  63. data/vendor/assets/images/flat-ui/switch/mask.png +0 -0
  64. data/vendor/assets/images/flat-ui/tile/ribbon-2x.png +0 -0
  65. data/vendor/assets/images/flat-ui/tile/ribbon.png +0 -0
  66. data/vendor/assets/images/flat-ui/todo/done-2x.png +0 -0
  67. data/vendor/assets/images/flat-ui/todo/done.png +0 -0
  68. data/vendor/assets/images/flat-ui/todo/search-2x.png +0 -0
  69. data/vendor/assets/images/flat-ui/todo/search.png +0 -0
  70. data/vendor/assets/images/flat-ui/todo/todo-2x.png +0 -0
  71. data/vendor/assets/images/flat-ui/todo/todo.png +0 -0
  72. data/vendor/assets/images/flat-ui/video/fullscreen-2x.png +0 -0
  73. data/vendor/assets/images/flat-ui/video/fullscreen.png +0 -0
  74. data/vendor/assets/images/flat-ui/video/pause-2x.png +0 -0
  75. data/vendor/assets/images/flat-ui/video/pause.png +0 -0
  76. data/vendor/assets/images/flat-ui/video/play-2x.png +0 -0
  77. data/vendor/assets/images/flat-ui/video/play.png +0 -0
  78. data/vendor/assets/images/flat-ui/video/poster.jpg +0 -0
  79. data/vendor/assets/images/flat-ui/video/volume-full-2x.png +0 -0
  80. data/vendor/assets/images/flat-ui/video/volume-full.png +0 -0
  81. data/vendor/assets/images/flat-ui/video/volume-off-2x.png +0 -0
  82. data/vendor/assets/images/flat-ui/video/volume-off.png +0 -0
  83. data/vendor/assets/javascripts/flat-ui.js +2 -0
  84. data/vendor/assets/javascripts/flat-ui/flatui-checkbox.js +112 -0
  85. data/vendor/assets/javascripts/flat-ui/flatui-radio.js +139 -0
  86. data/vendor/assets/stylesheets/flat-ui.scss +1 -0
  87. data/vendor/assets/stylesheets/flat-ui/_mixins.scss +878 -0
  88. data/vendor/assets/stylesheets/flat-ui/_spaces.scss +172 -0
  89. data/vendor/assets/stylesheets/flat-ui/_variables.scss +509 -0
  90. data/vendor/assets/stylesheets/flat-ui/flat-ui.scss +45 -0
  91. data/vendor/assets/stylesheets/flat-ui/modules/_button-groups.scss +110 -0
  92. data/vendor/assets/stylesheets/flat-ui/modules/_buttons.scss +151 -0
  93. data/vendor/assets/stylesheets/flat-ui/modules/_caret.scss +30 -0
  94. data/vendor/assets/stylesheets/flat-ui/modules/_checkbox-and-radio.scss +143 -0
  95. data/vendor/assets/stylesheets/flat-ui/modules/_code.scss +49 -0
  96. data/vendor/assets/stylesheets/flat-ui/modules/_dropdown.scss +223 -0
  97. data/vendor/assets/stylesheets/flat-ui/modules/_footer.scss +76 -0
  98. data/vendor/assets/stylesheets/flat-ui/modules/_forms.scss +188 -0
  99. data/vendor/assets/stylesheets/flat-ui/modules/_glyphicons.scss +135 -0
  100. data/vendor/assets/stylesheets/flat-ui/modules/_input-groups.scss +153 -0
  101. data/vendor/assets/stylesheets/flat-ui/modules/_input-icons.scss +72 -0
  102. data/vendor/assets/stylesheets/flat-ui/modules/_local-fonts.scss +69 -0
  103. data/vendor/assets/stylesheets/flat-ui/modules/_login.scss +111 -0
  104. data/vendor/assets/stylesheets/flat-ui/modules/_navbar.scss +876 -0
  105. data/vendor/assets/stylesheets/flat-ui/modules/_pager.scss +51 -0
  106. data/vendor/assets/stylesheets/flat-ui/modules/_pagination.scss +166 -0
  107. data/vendor/assets/stylesheets/flat-ui/modules/_palette.scss +71 -0
  108. data/vendor/assets/stylesheets/flat-ui/modules/_progress-bars.scss +34 -0
  109. data/vendor/assets/stylesheets/flat-ui/modules/_scaffolding.scss +64 -0
  110. data/vendor/assets/stylesheets/flat-ui/modules/_select.scss +145 -0
  111. data/vendor/assets/stylesheets/flat-ui/modules/_share.scss +44 -0
  112. data/vendor/assets/stylesheets/flat-ui/modules/_slider.scss +105 -0
  113. data/vendor/assets/stylesheets/flat-ui/modules/_switch.scss +150 -0
  114. data/vendor/assets/stylesheets/flat-ui/modules/_tagsinput.scss +121 -0
  115. data/vendor/assets/stylesheets/flat-ui/modules/_thumbnails.scss +38 -0
  116. data/vendor/assets/stylesheets/flat-ui/modules/_tile.scss +54 -0
  117. data/vendor/assets/stylesheets/flat-ui/modules/_todo.scss +110 -0
  118. data/vendor/assets/stylesheets/flat-ui/modules/_tooltip.scss +56 -0
  119. data/vendor/assets/stylesheets/flat-ui/modules/_type.scss +208 -0
  120. data/vendor/assets/stylesheets/flat-ui/modules/_typeahead.scss +41 -0
  121. data/vendor/assets/stylesheets/flat-ui/modules/_video.scss +458 -0
  122. metadata +251 -0
@@ -0,0 +1,45 @@
1
+ // Flat UI main stylesheet that aggregates all modules
2
+
3
+ // Flat-UI-Icons
4
+ @import "flat-ui/modules/glyphicons";
5
+
6
+ // Utility mixins for greater good
7
+ @import "flat-ui/mixins";
8
+
9
+ @import "flat-ui/modules/scaffolding";
10
+
11
+ // Modules
12
+ @import "flat-ui/modules/type";
13
+ @import "flat-ui/modules/code";
14
+ @import "flat-ui/modules/thumbnails";
15
+ @import "flat-ui/modules/buttons";
16
+ @import "flat-ui/modules/button-groups";
17
+ @import "flat-ui/modules/caret";
18
+ @import "flat-ui/modules/select";
19
+ @import "flat-ui/modules/forms";
20
+ @import "flat-ui/modules/input-icons";
21
+ @import "flat-ui/modules/input-groups";
22
+ @import "flat-ui/modules/checkbox-and-radio";
23
+ @import "flat-ui/modules/navbar";
24
+ @import "flat-ui/modules/tagsinput";
25
+ @import "flat-ui/modules/typeahead";
26
+ @import "flat-ui/modules/progress-bars";
27
+ @import "flat-ui/modules/slider";
28
+ @import "flat-ui/modules/pager";
29
+ @import "flat-ui/modules/pagination";
30
+ @import "flat-ui/modules/tooltip";
31
+ @import "flat-ui/modules/dropdown";
32
+ @import "flat-ui/modules/switch";
33
+ @import "flat-ui/modules/share";
34
+
35
+ // Examples
36
+ @import "flat-ui/modules/palette";
37
+ @import "flat-ui/modules/tile";
38
+ @import "flat-ui/modules/todo";
39
+ @import "flat-ui/modules/video";
40
+ @import "flat-ui/modules/login";
41
+
42
+ @import "flat-ui/modules/footer";
43
+
44
+ // Spaces
45
+ @import "flat-ui/spaces";
@@ -0,0 +1,110 @@
1
+ //
2
+ // Button groups
3
+ // --------------------------------------------------
4
+
5
+ // Button carets
6
+ //
7
+ // Match the button text color to the arrow/caret for indicating dropdown-ness.
8
+
9
+ .caret {
10
+ .btn-default & {
11
+ border-top-color: $btn-default-color;
12
+ }
13
+ .btn-primary &,
14
+ .btn-success &,
15
+ .btn-warning &,
16
+ .btn-danger &,
17
+ .btn-info & {
18
+ border-top-color: $inverse;
19
+ }
20
+ }
21
+ .dropup {
22
+ & .btn-default .caret {
23
+ border-bottom-color: $btn-default-color;
24
+ }
25
+ .btn-primary,
26
+ .btn-success,
27
+ .btn-warning,
28
+ .btn-danger,
29
+ .btn-info {
30
+ .caret {
31
+ border-bottom-color: $inverse;
32
+ }
33
+ }
34
+ }
35
+
36
+ // Sizing
37
+ //
38
+ // Remix the default button sizing classes into new ones for easier manipulation.
39
+
40
+ .btn-group-xs > .btn { @extend .btn-xs; }
41
+ .btn-group-sm > .btn { @extend .btn-sm; }
42
+ .btn-group-lg > .btn { @extend .btn-lg; }
43
+ .btn-group-gh > .btn { @extend .btn-hg; }
44
+
45
+
46
+ .btn-group {
47
+ > .btn {
48
+ & + .btn {
49
+ margin-left: 0;
50
+ }
51
+ & + .dropdown-toggle {
52
+ border-left: 2px solid fade($brand-primary, 15%);
53
+ padding-left: 12px;
54
+ padding-right: 12px;
55
+
56
+ .caret {
57
+ margin-left: 3px;
58
+ margin-right: 3px;
59
+ }
60
+ }
61
+ &.btn-gh + .dropdown-toggle {
62
+ .caret {
63
+ margin-left: 7px;
64
+ margin-right: 7px;
65
+ }
66
+ }
67
+ &.btn-sm + .dropdown-toggle {
68
+ .caret {
69
+ margin-left: 0;
70
+ margin-right: 0;
71
+ }
72
+ }
73
+ }
74
+ }
75
+
76
+ .dropdown-toggle {
77
+ .caret {
78
+ margin-left: 8px;
79
+ }
80
+ }
81
+
82
+ .btn-group > .btn,
83
+ .btn-group > .dropdown-menu,
84
+ .btn-group > .popover {
85
+ font-weight: 400;
86
+ }
87
+
88
+ .btn-group:focus .dropdown-toggle {
89
+ outline: none;
90
+ @include transition(.25s);
91
+ }
92
+
93
+ // The clickable button for toggling the menu
94
+ // Remove the gradient and set the same inset shadow as the :active state
95
+ .btn-group.open .dropdown-toggle {
96
+ color: fade($btn-default-color, 75%);
97
+ @include box-shadow(none);
98
+ }
99
+
100
+ // Other button locations
101
+ // Button with icon inside
102
+ .btn-toolbar .btn {
103
+ &.active {
104
+ color: $btn-default-color;
105
+ }
106
+ > [class^="fui-"] {
107
+ font-size: $icon-normal;
108
+ margin: 0 1px;
109
+ }
110
+ }
@@ -0,0 +1,151 @@
1
+ //
2
+ // Buttons
3
+ // --------------------------------------------------
4
+
5
+ // Base styles
6
+ // --------------------------------------------------
7
+ .btn {
8
+ border: none;
9
+ font-size: $btn-font-size-base;
10
+ font-weight: $btn-font-weight;
11
+ line-height: $btn-line-height-base;
12
+ border-radius: $border-radius-base;
13
+ padding: 10px 15px;
14
+ -webkit-font-smoothing: subpixel-antialiased;
15
+ @include transition(border .25s linear, color .25s linear, background-color .25s linear);
16
+
17
+
18
+ &:hover,
19
+ &:focus {
20
+ outline: none;
21
+ color: $btn-default-color;
22
+ }
23
+
24
+ &:active,
25
+ &.active {
26
+ outline: none;
27
+ @include box-shadow(none);
28
+ }
29
+
30
+ &.disabled,
31
+ &[disabled],
32
+ fieldset[disabled] & {
33
+ background-color: $btn-link-disabled-color;
34
+ color: fade($btn-default-color, 75%);
35
+ @include opacity(.7);
36
+ }
37
+
38
+ // Button icons
39
+ // --------------------------------------------------
40
+ > [class^="fui-"] {
41
+ margin: 0 1px;
42
+ position: relative;
43
+ line-height: 1;
44
+ top: 1px;
45
+
46
+ // [converter] extracted .btn-hg& to .btn-hg> [class^="fui-"]
47
+ }
48
+
49
+ // [converter] extracted .btn-xs& to .btn-xs> [class^="fui-"]
50
+ .btn-hg> [class^="fui-"] {
51
+ top: 2px;
52
+ }
53
+
54
+ .btn-xs> [class^="fui-"] {
55
+ font-size: 11px;
56
+ top: 0;
57
+ }
58
+ }
59
+
60
+ // Alternate buttons
61
+ // --------------------------------------------------
62
+ .btn-default {
63
+ @include button-variant($btn-default-color, $btn-default-bg, $btn-hover-bg, $btn-active-bg);
64
+ }
65
+ .btn-primary {
66
+ @include button-variant($btn-default-color, $brand-secondary, $btn-primary-hover-bg, $btn-primary-active-bg);
67
+ }
68
+ .btn-info {
69
+ @include button-variant($btn-default-color, $brand-info, $btn-info-hover-bg, $btn-info-active-bg);
70
+ }
71
+ .btn-danger {
72
+ @include button-variant($btn-default-color, $brand-danger, $btn-danger-hover-bg, $btn-danger-active-bg);
73
+ }
74
+ .btn-success {
75
+ @include button-variant($btn-default-color, $brand-success, $btn-success-hover-bg, $btn-success-active-bg);
76
+ }
77
+ .btn-warning {
78
+ @include button-variant($btn-default-color, $brand-warning, $btn-warning-hover-bg, $btn-warning-active-bg);
79
+ }
80
+ .btn-inverse {
81
+ @include button-variant($btn-default-color, $brand-primary, $btn-inverse-hover-bg, $btn-inverse-active-bg);
82
+ }
83
+ .btn-embossed {
84
+ @include box-shadow(inset 0 -2px 0 fade(black, 15%));
85
+
86
+ &.active,
87
+ &:active {
88
+ @include box-shadow(inset 0 2px 0 fade(black, 15%));
89
+ }
90
+ }
91
+ .btn-wide {
92
+ min-width: 140px;
93
+ padding-left: 30px;
94
+ padding-right: 30px;
95
+ }
96
+
97
+
98
+ // Link buttons
99
+ // -------------------------
100
+
101
+ // Make a button look and behave like a link
102
+ .btn-link {
103
+ color: $link-color;
104
+
105
+ &:hover,
106
+ &:focus {
107
+ color: $link-hover-color;
108
+ text-decoration: underline;
109
+ background-color: transparent;
110
+ }
111
+ &[disabled],
112
+ fieldset[disabled] & {
113
+ &:hover,
114
+ &:focus {
115
+ color: $btn-link-disabled-color;
116
+ text-decoration: none;
117
+ }
118
+ }
119
+ }
120
+
121
+
122
+ // Button sizes
123
+ // --------------------------------------------------
124
+
125
+ .btn-hg {
126
+ @include button-size(13px, 20px, $btn-font-size-hg, $btn-line-height-hg, $border-radius-large);
127
+ }
128
+ .btn-lg {
129
+ @include button-size(10px, 19px, $btn-font-size-lg, $btn-line-height-lg, $border-radius-large);
130
+ }
131
+ .btn-sm {
132
+ @include button-size(9px, 13px, $btn-font-size-sm, $btn-line-height-sm, $border-radius-base);
133
+ }
134
+ .btn-xs {
135
+ @include button-size(6px, 9px, $btn-font-size-xs, $btn-line-height-xs, $border-radius-small);
136
+ }
137
+
138
+
139
+ // Button tip
140
+ .btn-tip {
141
+ font-weight: 300;
142
+ padding-left: 10px;
143
+ font-size: 92%;
144
+ }
145
+
146
+ // Block button
147
+ // --------------------------------------------------
148
+
149
+ .btn-block {
150
+ white-space: normal;
151
+ }
@@ -0,0 +1,30 @@
1
+ //
2
+ // Caret
3
+ // --------------------------------------------------
4
+
5
+ .caret {
6
+ border-width: 8px 6px;
7
+ border-bottom-color: $brand-primary;
8
+ border-top-color: $brand-primary;
9
+ border-style: solid;
10
+ border-bottom-style: none;
11
+ @include transition(.25s);
12
+ @include scale(1.001);
13
+ }
14
+
15
+ @mixin caret($color: $brand-primary) {
16
+ border-bottom-color: $color;
17
+ border-top-color: $color;
18
+ }
19
+
20
+ .dropup .caret,
21
+ .dropup .btn-lg .caret,
22
+ .navbar-fixed-bottom .dropdown .caret {
23
+ border-bottom-width: 8px;
24
+ }
25
+
26
+ .btn-lg .caret {
27
+ border-top-width: 8px;
28
+ border-right-width: 6px;
29
+ border-left-width: 6px;
30
+ }
@@ -0,0 +1,143 @@
1
+ //
2
+ // Checkbox & Radio
3
+ // --------------------------------------------------
4
+
5
+ .checkbox,
6
+ .radio {
7
+ margin-bottom: 12px;
8
+ padding-left: 32px;
9
+ position: relative;
10
+ @include transition(color .25s linear);
11
+ font-size: ceil($component-font-size-base * 0.933); // ~14px
12
+ line-height: 1.5; // 21px;
13
+
14
+ input {
15
+ outline: none !important;
16
+ display: none;
17
+ }
18
+
19
+ // Replace icons
20
+ // --------------------------------------------------
21
+ .icons {
22
+ color: $gray-light;
23
+ display: block;
24
+ height: 20px;
25
+ left: 0;
26
+ position: absolute;
27
+ top: 0;
28
+ width: 20px;
29
+ text-align: center;
30
+ line-height: 21px;
31
+ font-size: 20px;
32
+ cursor: pointer;
33
+ @include transition(color .25s linear);
34
+
35
+ .first-icon,
36
+ .second-icon {
37
+ display: inline-table;
38
+ position: absolute;
39
+ left: 0;
40
+ top: 0;
41
+ background-color: transparent;
42
+ margin: 0;
43
+ @include opacity(1);
44
+ }
45
+ .second-icon {
46
+ @include opacity(0);
47
+ }
48
+ }
49
+
50
+ // Alternate States
51
+ // --------------------------------------------------
52
+
53
+ // Hover State
54
+ &:hover {
55
+ @include transition(color .25s linear);
56
+
57
+ .first-icon {
58
+ @include opacity(0);
59
+ }
60
+ .second-icon {
61
+ @include opacity(1);
62
+ }
63
+ }
64
+
65
+ // Checked State
66
+ &.checked {
67
+ color: $brand-secondary;
68
+
69
+ .first-icon {
70
+ @include opacity(0);
71
+ }
72
+ .second-icon {
73
+ @include opacity(1);
74
+ color: $brand-secondary;
75
+ @include transition(color .25s linear);
76
+ }
77
+ }
78
+
79
+ // Disabled state
80
+ &.disabled {
81
+ cursor: default;
82
+ color: mix($gray-light, white, 38%);
83
+
84
+ .icons {
85
+ color: mix($gray-light, white, 38%);
86
+ }
87
+ .first-icon {
88
+ @include opacity(1);
89
+ }
90
+ .second-icon {
91
+ @include opacity(0);
92
+ }
93
+ &.checked {
94
+ .icons {
95
+ color: mix($gray-light, white, 38%);
96
+ }
97
+ .first-icon {
98
+ @include opacity(0);
99
+ }
100
+ .second-icon {
101
+ @include opacity(1);
102
+ color: mix($gray-light, white, 38%);
103
+ }
104
+ }
105
+ }
106
+
107
+ // Alternate Color
108
+ // --------------------------------------------------
109
+
110
+ // Primary
111
+ &.primary {
112
+ .icons {
113
+ color: $brand-primary;
114
+ }
115
+ // Checked State
116
+ &.checked {
117
+ color: $brand-secondary;
118
+
119
+ .icons {
120
+ color: $brand-secondary;
121
+ }
122
+ }
123
+ // Disabled state
124
+ &.disabled {
125
+ cursor: default;
126
+ color: $gray-light;
127
+
128
+ .icons {
129
+ color: $gray-light;
130
+ }
131
+ &.checked {
132
+ .icons {
133
+ color: $gray-light;
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
139
+
140
+ .radio + .radio,
141
+ .checkbox + .checkbox {
142
+ margin-top: 10px;
143
+ }