ui_bibz 2.0.2 → 2.0.3

data/lib/ui_bibz/ui/core/notifications/badge.rb

@@ -16,11 +16,10 @@ module UiBibz::Ui::Core::Notifications
   # You can pass arguments in options attribute:
   # * +status+ - status of élement with symbol value:
   #   (+:primary+, +:secondary+, +:success+, +:danger+, +:warning+, +:info+, +:light+, +:dark+)
-  # * +glyph+ - Add glyph with name or hash options
-  #   * +name+ - String
-  #   * +size+ - Integer
-  #   * +type+ - Symbol
-  # * +type+ - Symbol
+  # * +glyph+ - [String | Hash] Add glyph with name or hash options
+  #   * +name+ - [String]
+  #   * +url+ - [String] Transform span to link
+  # * +type+ - [Symbol]
   #   (+:pill+, +:square+)
   #
   # ==== Signatures
@@ -56,11 +55,15 @@ module UiBibz::Ui::Core::Notifications
 
     # Render html tag
     def pre_render
-      content_tag :span, glyph_and_content_html, html_options
+      content_tag options[:url].nil? ? :span : :a, glyph_and_content_html, html_options
     end
 
   private
 
+    def component_html_options
+      super.merge(options[:url].nil? ? {} : { href: options[:url] })
+    end
+
     def component_html_classes
       ['badge', type]
     end

data/lib/ui_bibz/version.rb

@@ -1,3 +1,3 @@
 module UiBibz
-  VERSION = "2.0.2"
+  VERSION = "2.0.3"
 end

data/test/ui/core/boxes/card_test.rb

@@ -46,7 +46,7 @@ class CardTest < ActionView::TestCase
         link_to "Card link", '#', class: "card-link"
       end
     end
-    expected = "<div class=\"card\"><img class=\"card-img-top\" src=\"/assets/image.svg\" /><div class=\"card-body\">test</div><ul class=\"list-group-flush list-group\"><li class=\"list-group-item\">Cras justo odio</li><li class=\"list-group-item\">Dapibas ac facilisis in</li><li class=\"list-group-item\">vestibulum at eros</li></ul><div class=\"card-body\"><a class=\"card-link\" href=\"#\">Card link</a></div></div>"
+    expected = "<div class=\"card\"><img class=\"card-img-top\" src=\"/images/image.svg\" /><div class=\"card-body\">test</div><ul class=\"list-group-flush list-group\"><li class=\"list-group-item\">Cras justo odio</li><li class=\"list-group-item\">Dapibas ac facilisis in</li><li class=\"list-group-item\">vestibulum at eros</li></ul><div class=\"card-body\"><a class=\"card-link\" href=\"#\">Card link</a></div></div>"
 
     assert_equal expected, actual
   end
@@ -133,4 +133,17 @@ class CardTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
+  test 'card header tab group' do
+    actual = ui_card tap: true do |c|
+      c.header tap: true do |h|
+        h.tab_group tap: true do |cg|
+          cg.tab 'link1', url: '#link1'
+          cg.tab 'link2', url: '#link2'
+        end
+      end
+    end
+    expected = "<div class=\"card\"><div class=\"card-header\"><ul class=\"nav nav-tabs card-header-tabs\"><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#link1\">link1</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#link2\">link2</a></li></ul></div></div>"
+
+    assert_equal expected, actual
+  end
 end

data/test/ui/core/forms/choices/checkbox_field_test.rb

@@ -4,7 +4,7 @@ class CheckboxFieldTest < ActionView::TestCase
 
     test 'checkbox_field' do
       actual = UiBibz::Ui::Core::Forms::Choices::CheckboxField.new('John', { value: 1, status: :primary, type: :circle }).render
-      expected = "<div class=\"abc-checkbox-primary checkbox abc-checkbox abc-checkbox-circle\"><input type=\"checkbox\" name=\"John\" id=\"John\" value=\"1\" class=\"styled\" /><label for=\"John\">John</label></div>"
+      expected = "<div class=\"abc-checkbox-primary form-check abc-checkbox abc-checkbox-circle\"><input type=\"checkbox\" name=\"John\" id=\"John\" value=\"1\" class=\"form-check-input\" /><label class=\"form-check-label\" for=\"John\">John</label></div>"
 
       assert_equal expected, actual
     end

data/test/ui/core/forms/choices/choice_group_test.rb

@@ -8,7 +8,7 @@ class ChoiceGroupTest < ActionView::TestCase
       bc.choice 'Checkbox 1'
       bc.choice 'Checkbox 2', state: :active
     end
-    expected = "<div data-toggle=\"buttons\" class=\"btn-group button-choice\"><label class=\"btn-secondary btn checkbox\"><input type=\"checkbox\" autocomplete=\"off\" />Checkbox 1</label><label class=\"active btn-secondary btn checkbox\" aria-pressed=\"true\"><input type=\"checkbox\" autocomplete=\"off\" checked=\"checked\" />Checkbox 2</label></div>"
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group button-choice btn-group-toggle\"><label class=\"btn-secondary btn checkbox\"><input type=\"checkbox\" autocomplete=\"off\" />Checkbox 1</label><label class=\"active btn-secondary btn checkbox\" aria-pressed=\"true\"><input type=\"checkbox\" autocomplete=\"off\" checked=\"checked\" />Checkbox 2</label></div>"
 
     assert_equal expected, actual
   end
@@ -18,7 +18,7 @@ class ChoiceGroupTest < ActionView::TestCase
       bc.choice 'Radio 1'
       bc.choice 'Radio 2', state: :active
     end
-    expected = "<div data-toggle=\"buttons\" class=\"btn-group button-choice\"><label class=\"btn-secondary btn radio\"><input type=\"radio\" autocomplete=\"off\" />Radio 1</label><label class=\"active btn-secondary btn radio\" aria-pressed=\"true\"><input type=\"radio\" autocomplete=\"off\" checked=\"checked\" />Radio 2</label></div>"
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group button-choice btn-group-toggle\"><label class=\"btn-secondary btn radio\"><input type=\"radio\" autocomplete=\"off\" />Radio 1</label><label class=\"active btn-secondary btn radio\" aria-pressed=\"true\"><input type=\"radio\" autocomplete=\"off\" checked=\"checked\" />Radio 2</label></div>"
 
     assert_equal expected, actual
   end
@@ -28,7 +28,7 @@ class ChoiceGroupTest < ActionView::TestCase
       bc.choice 'Radio 1', glyph: 'diamond', status: :primary
       bc.choice 'Radio 2', state: :active
     end
-    expected = "<div data-toggle=\"buttons\" class=\"btn-group btn-group-lg button-choice\"><label class=\"btn-outline-primary btn btn-lg radio\"><input type=\"radio\" autocomplete=\"off\" /><i class=\"glyph fas fa-diamond\"></i>  Radio 1</label><label class=\"active btn-outline-secondary btn btn-lg radio\" aria-pressed=\"true\"><input type=\"radio\" autocomplete=\"off\" checked=\"checked\" />Radio 2</label></div>"
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group btn-group-lg button-choice btn-group-toggle\"><label class=\"btn-outline-primary btn btn-lg radio\"><input type=\"radio\" autocomplete=\"off\" /><i class=\"glyph fas fa-diamond\"></i>  Radio 1</label><label class=\"active btn-outline-secondary btn btn-lg radio\" aria-pressed=\"true\"><input type=\"radio\" autocomplete=\"off\" checked=\"checked\" />Radio 2</label></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/lists/list_group_test.rb

@@ -4,20 +4,20 @@ class ListGroupTest < ActionView::TestCase
   include UiBibz::Helpers::Ui::CoreHelper
 
   test 'list_group with link' do
-    actual = ui_list_group(type: :link) do |lg|
+    actual = ui_list_group(tag_type: :a) do |lg|
       lg.list 'Momo', { status: :success, url: '#momo' }
       lg.list({ tap: true, active: true, url: '#state' }) do |l|
         l.header 'My title'
         l.body   'My body'
       end
     end
-    expected = "<ul class=\"list-group\"><li href=\"#momo\" class=\"list-group-item-success list-group-item\">Momo</li><li href=\"#state\" class=\"list-group-item flex-column align-items-start\"><div class=\"d-flex w-100 justify-content-between\"><h5 class=\"mb-1\">My title</h5><small></small></div><p class=\"mb-1\">My body</p><small></small></li></ul>"
+    expected = "<div class=\"list-group\"><a href=\"#momo\" class=\"list-group-item-success list-group-item list-group-item-action\">Momo</a><li href=\"#state\" class=\"list-group-item flex-column align-items-start\"><div class=\"d-flex w-100 justify-content-between\"><h5 class=\"mb-1\">My title</h5><small></small></div><p class=\"mb-1\">My body</p><small></small></li></div>"
 
     assert_equal expected, actual
   end
 
   test 'list_group' do
-    actual = ui_list_group(type: :link) do |lg|
+    actual = ui_list_group do |lg|
       lg.list 'Lulu'
       lg.list 'state'
     end
@@ -26,4 +26,34 @@ class ListGroupTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
+  test 'list with a tag' do
+    actual = ui_list_group(tag_type: :a) do |lg|
+      lg.list 'Lulu'
+      lg.list 'state'
+    end
+    expected = "<div class=\"list-group\"><a class=\"list-group-item list-group-item-action\">Lulu</a><a class=\"list-group-item list-group-item-action\">state</a></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'list with a li' do
+    actual = ui_list_group(tag_type: :li) do |lg|
+      lg.list 'Lulu'
+      lg.list 'state'
+    end
+    expected = "<ul class=\"list-group\"><li class=\"list-group-item\">Lulu</li><li class=\"list-group-item\">state</li></ul>"
+
+    assert_equal expected, actual
+  end
+
+  test 'list with a button' do
+    actual = ui_list_group(tag_type: :button) do |lg|
+      lg.list 'Lulu'
+      lg.list 'state'
+    end
+    expected = "<div class=\"list-group\"><button class=\"list-group-item list-group-item-action\">Lulu</button><button class=\"list-group-item list-group-item-action\">state</button></div>"
+
+    assert_equal expected, actual
+  end
+
 end

data/test/ui/core/navigations/breadcrumb_test.rb

@@ -8,7 +8,7 @@ class BreadcrumbTest < ActionView::TestCase
       b.link 'Home', url: '#home', glyph: 'home'
       b.link 'state', { url: '#state', state: :active }
     end
-    expected = "<ol class=\"breadcrumb\"><li class=\"breadcrumb-item\"><a href=\"#home\"><i class=\"glyph fas fa-home\"></i>  Home</a></li><li class=\"active breadcrumb-item\"><a href=\"#state\">state</a></li></ol>"
+    expected = "<nav arial-label=\"breadcrumb\"><ol class=\"breadcrumb\"><li class=\"breadcrumb-item\"><a href=\"#home\"><i class=\"glyph fas fa-home\"></i>  Home</a></li><li class=\"active breadcrumb-item\"><a href=\"#state\">state</a></li></ol></nav>"
 
     assert_equal expected, actual
   end
@@ -25,8 +25,8 @@ class BreadcrumbTest < ActionView::TestCase
 
   test 'breadcrumb with store' do
     users    = create_list(:user, 3)
-    actual   = ui_breadcrumb(store: users, link_label: :name_fr, link_url: user_path(:id))
-    expected = "<ol class=\"breadcrumb\"><li class=\"breadcrumb-item\"><a href=\"/users/1/\">Name fr</a></li><li class=\"breadcrumb-item\"><a href=\"/users/2/\">Name fr</a></li><li class=\"breadcrumb-item\">Name fr</li></ol>"
+    actual   = ui_breadcrumb(users, link_label: :name_fr, link_url: user_path(:id))
+    expected = "<nav arial-label=\"breadcrumb\"><ol class=\"breadcrumb\"><li class=\"breadcrumb-item\"><a href=\"/users/1/\">Name fr</a></li><li class=\"breadcrumb-item\"><a href=\"/users/2/\">Name fr</a></li><li class=\"breadcrumb-item\" aria-current=\"page\">Name fr</li></ol></nav>"
 
     assert_equal expected, actual
   end

data/test/ui/core/navigations/tab_group_test.rb

@@ -8,7 +8,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: "#profile", selector: 'profile'
       n.tab 'Messages', url: "#messages", selector: 'messages'
     end
-    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"active nav-link\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#messages\">Messages</a></li></ul>"
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#messages\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -19,7 +19,18 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: "#profile", selector: 'profile'
       n.tab 'Messages', url: "#messages", selector: 'messages'
     end
-    expected = "<nav class=\"nav nav-tabs\"><a class=\"active nav-link\" href=\"#Home\">Home</a><a class=\"nav-link\" href=\"#profile\">Profile</a><a class=\"nav-link\" href=\"#messages\">Messages</a></nav>"
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#messages\">Messages</a></li></ul>"
+
+    assert_equal expected, actual
+  end
+
+  test 'tag_type' do
+    actual = ui_tab_group tag_type: :span do |n|
+      n.tab 'Home', state: :active, url: "#Home", selector: 'home'
+      n.tab 'Profile', url: "#profile", selector: 'profile'
+      n.tab 'Messages', url: "#messages", selector: 'messages'
+    end
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><span class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</span></li><li class=\"nav-item\"><span class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</span></li><li class=\"nav-item\"><span class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</span></li></ul>"
 
     assert_equal expected, actual
   end
@@ -30,7 +41,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: "#profile", selector: 'profile', label: 16
       n.tab 'Messages', url: "#messages", selector: 'messages', state: :disabled
     end
-    expected = "<ul class=\"nav nav-tabs justify-content-end\"><li class=\"nav-item\"><a class=\"active nav-link\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"disabled nav-link\" href=\"#messages\">Messages</a></li></ul>"
+    expected = "<ul class=\"nav nav-tabs justify-content-end\"><li class=\"nav-item\"><a class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#messages\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -41,7 +52,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: "#profile", selector: 'profile', label: 16
       n.tab 'Messages', url: "#messages", selector: 'messages', state: :disabled
     end
-    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"active nav-link\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"disabled nav-link\" href=\"#messages\">Messages</a></li></ul>"
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\" href=\"#messages\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end

data/test/ui/core/notifications/badge_test.rb

@@ -9,6 +9,13 @@ class BadgeTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
+  test 'badge with url' do
+    actual   = ui_badge 'state', url: 'http://example.com'
+    expected = "<a class=\"badge-default badge\" href=\"http://example.com\">state</a>"
+
+    assert_equal expected, actual
+  end
+
   test 'badge pill' do
     actual   = ui_badge 'state', status: :success, type: :pill, glyph: 'pencil'
     expected = "<span class=\"badge-success badge badge-pill\"><i class=\"glyph fas fa-pencil\"></i>  state</span>"

data/ui_bibz.gemspec

@@ -34,7 +34,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'haml-rails'
   s.add_dependency 'sass-rails', '>= 5.0.0'
   s.add_dependency 'font-awesome-sass'
-  s.add_dependency 'bootstrap', '4.0.0'
+  s.add_dependency 'bootstrap', '~> 4.1.0'
 
   # Development gems
   s.add_development_dependency "simple_form"

data/vendor/assets/stylesheets/awesome-bootstrap-checkbox.css

@@ -1,60 +1,58 @@
-.checkbox {
-  padding-left: 20px;
-}
-.checkbox label {
-  display: inline-block;
-  vertical-align: middle;
+@charset "UTF-8";
+.abc-checkbox {
+  cursor: default;
+  padding-left: 4px; }
+.abc-checkbox label {
+  cursor: pointer;
+  display: inline;
+  vertical-align: top;
   position: relative;
-  padding-left: 5px;
-}
-.checkbox label::before {
+  padding-left: 5px; }
+.abc-checkbox label::before {
+  cursor: pointer;
   content: "";
   display: inline-block;
   position: absolute;
   width: 17px;
   height: 17px;
+  top: 2px;
   left: 0;
-  margin-left: -20px;
-  border: 1px solid #cccccc;
+  margin-left: -1.25rem;
+  border: 1px solid #ced4da;
   border-radius: 3px;
   background-color: #fff;
-  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-}
-.checkbox label::after {
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
+.abc-checkbox label::after {
+  cursor: pointer;
   display: inline-block;
   position: absolute;
   width: 16px;
   height: 16px;
   left: 0;
-  top: 0;
-  margin-left: -20px;
+  top: 2px;
+  margin-left: -1.25rem;
   padding-left: 3px;
   padding-top: 1px;
   font-size: 11px;
-  color: #555555;
-  line-height: 1.4;
-}
-.checkbox input[type="checkbox"],
-.checkbox input[type="radio"] {
-  opacity: 0;
-  z-index: 1;
+  color: #495057; }
+.abc-checkbox input[type="checkbox"],
+.abc-checkbox input[type="radio"] {
+  position: static;
+  margin-left: 0;
   cursor: pointer;
-}
-.checkbox input[type="checkbox"]:focus + label::before,
-.checkbox input[type="radio"]:focus + label::before {
+  opacity: 0;
+  z-index: 1; }
+.abc-checkbox input[type="checkbox"]:focus + label::before,
+.abc-checkbox input[type="radio"]:focus + label::before {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.checkbox input[type="checkbox"]:checked + label::after,
-.checkbox input[type="radio"]:checked + label::after {
+  outline-offset: -2px; }
+.abc-checkbox input[type="checkbox"]:checked + label::after,
+.abc-checkbox input[type="radio"]:checked + label::after {
   font-family: "FontAwesome";
-  content: "\f00c";
-}
-.checkbox input[type="checkbox"]:indeterminate + label::after,
-.checkbox input[type="radio"]:indeterminate + label::after {
+  content: ""; }
+.abc-checkbox input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox input[type="radio"]:indeterminate + label::after {
   display: block;
   content: "";
   width: 10px;
@@ -62,266 +60,196 @@
   background-color: #555555;
   border-radius: 2px;
   margin-left: -16.5px;
-  margin-top: 7px;
-}
-.checkbox input[type="checkbox"]:disabled,
-.checkbox input[type="radio"]:disabled {
-  cursor: not-allowed;
-}
-.checkbox input[type="checkbox"]:disabled + label,
-.checkbox input[type="radio"]:disabled + label {
-  opacity: 0.65;
-}
-.checkbox input[type="checkbox"]:disabled + label::before,
-.checkbox input[type="radio"]:disabled + label::before {
-  background-color: #eeeeee;
-  cursor: not-allowed;
-}
-.checkbox.checkbox-circle label::before {
-  border-radius: 50%;
-}
-.checkbox.checkbox-inline {
-  margin-top: 0;
-}
-
-.checkbox-primary input[type="checkbox"]:checked + label::before,
-.checkbox-primary input[type="radio"]:checked + label::before {
-  background-color: #337ab7;
-  border-color: #337ab7;
-}
-.checkbox-primary input[type="checkbox"]:checked + label::after,
-.checkbox-primary input[type="radio"]:checked + label::after {
-  color: #fff;
-}
-
-.checkbox-danger input[type="checkbox"]:checked + label::before,
-.checkbox-danger input[type="radio"]:checked + label::before {
-  background-color: #d9534f;
-  border-color: #d9534f;
-}
-.checkbox-danger input[type="checkbox"]:checked + label::after,
-.checkbox-danger input[type="radio"]:checked + label::after {
-  color: #fff;
-}
-
-.checkbox-info input[type="checkbox"]:checked + label::before,
-.checkbox-info input[type="radio"]:checked + label::before {
-  background-color: #5bc0de;
-  border-color: #5bc0de;
-}
-.checkbox-info input[type="checkbox"]:checked + label::after,
-.checkbox-info input[type="radio"]:checked + label::after {
-  color: #fff;
-}
-
-.checkbox-warning input[type="checkbox"]:checked + label::before,
-.checkbox-warning input[type="radio"]:checked + label::before {
-  background-color: #f0ad4e;
-  border-color: #f0ad4e;
-}
-.checkbox-warning input[type="checkbox"]:checked + label::after,
-.checkbox-warning input[type="radio"]:checked + label::after {
-  color: #fff;
-}
-
-.checkbox-success input[type="checkbox"]:checked + label::before,
-.checkbox-success input[type="radio"]:checked + label::before {
-  background-color: #5cb85c;
-  border-color: #5cb85c;
-}
-.checkbox-success input[type="checkbox"]:checked + label::after,
-.checkbox-success input[type="radio"]:checked + label::after {
-  color: #fff;
-}
-
-.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
-.checkbox-primary input[type="radio"]:indeterminate + label::before {
-  background-color: #337ab7;
-  border-color: #337ab7;
-}
-
-.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
-.checkbox-primary input[type="radio"]:indeterminate + label::after {
-  background-color: #fff;
-}
-
-.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
-.checkbox-danger input[type="radio"]:indeterminate + label::before {
-  background-color: #d9534f;
-  border-color: #d9534f;
-}
-
-.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
-.checkbox-danger input[type="radio"]:indeterminate + label::after {
-  background-color: #fff;
-}
-
-.checkbox-info input[type="checkbox"]:indeterminate + label::before,
-.checkbox-info input[type="radio"]:indeterminate + label::before {
-  background-color: #5bc0de;
-  border-color: #5bc0de;
-}
-
-.checkbox-info input[type="checkbox"]:indeterminate + label::after,
-.checkbox-info input[type="radio"]:indeterminate + label::after {
-  background-color: #fff;
-}
-
-.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
-.checkbox-warning input[type="radio"]:indeterminate + label::before {
-  background-color: #f0ad4e;
-  border-color: #f0ad4e;
-}
-
-.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
-.checkbox-warning input[type="radio"]:indeterminate + label::after {
-  background-color: #fff;
-}
-
-.checkbox-success input[type="checkbox"]:indeterminate + label::before,
-.checkbox-success input[type="radio"]:indeterminate + label::before {
-  background-color: #5cb85c;
-  border-color: #5cb85c;
-}
-
-.checkbox-success input[type="checkbox"]:indeterminate + label::after,
-.checkbox-success input[type="radio"]:indeterminate + label::after {
-  background-color: #fff;
-}
-
-.radio {
-  padding-left: 20px;
-}
-.radio label {
-  display: inline-block;
-  vertical-align: middle;
+  margin-top: 7px; }
+.abc-checkbox input[type="checkbox"]:disabled + label,
+.abc-checkbox input[type="radio"]:disabled + label {
+  opacity: 0.65; }
+.abc-checkbox input[type="checkbox"]:disabled + label::before,
+.abc-checkbox input[type="radio"]:disabled + label::before {
+  background-color: #e9ecef;
+  cursor: not-allowed; }
+.abc-checkbox input[type="checkbox"]:disabled + label::after,
+.abc-checkbox input[type="radio"]:disabled + label::after {
+  cursor: not-allowed; }
+.abc-checkbox.abc-checkbox-circle label::before {
+  border-radius: 50%; }
+.abc-checkbox.checkbox-inline {
+  margin-top: 0; }
+
+.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
+.abc-checkbox-primary input[type="radio"]:checked + label::before {
+  background-color: #007bff;
+  border-color: #007bff; }
+.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
+.abc-checkbox-primary input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-danger input[type="checkbox"]:checked + label::before,
+.abc-checkbox-danger input[type="radio"]:checked + label::before {
+  background-color: #dc3545;
+  border-color: #dc3545; }
+.abc-checkbox-danger input[type="checkbox"]:checked + label::after,
+.abc-checkbox-danger input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-info input[type="checkbox"]:checked + label::before,
+.abc-checkbox-info input[type="radio"]:checked + label::before {
+  background-color: #17a2b8;
+  border-color: #17a2b8; }
+.abc-checkbox-info input[type="checkbox"]:checked + label::after,
+.abc-checkbox-info input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-warning input[type="checkbox"]:checked + label::before,
+.abc-checkbox-warning input[type="radio"]:checked + label::before {
+  background-color: #ffc107;
+  border-color: #ffc107; }
+.abc-checkbox-warning input[type="checkbox"]:checked + label::after,
+.abc-checkbox-warning input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-success input[type="checkbox"]:checked + label::before,
+.abc-checkbox-success input[type="radio"]:checked + label::before {
+  background-color: #28a745;
+  border-color: #28a745; }
+.abc-checkbox-success input[type="checkbox"]:checked + label::after,
+.abc-checkbox-success input[type="radio"]:checked + label::after {
+  color: #fff; }
+
+.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #007bff;
+  border-color: #007bff; }
+.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #dc3545;
+  border-color: #dc3545; }
+.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #17a2b8;
+  border-color: #17a2b8; }
+.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #ffc107;
+  border-color: #ffc107; }
+.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #28a745;
+  border-color: #28a745; }
+.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff; }
+
+.abc-radio {
+  cursor: default;
+  padding-left: 4px; }
+.abc-radio label {
+  cursor: pointer;
+  display: inline;
+  vertical-align: top;
   position: relative;
-  padding-left: 5px;
-}
-.radio label::before {
+  padding-left: 5px; }
+.abc-radio label::before {
+  cursor: pointer;
   content: "";
   display: inline-block;
   position: absolute;
   width: 17px;
   height: 17px;
+  top: 2px;
   left: 0;
   margin-left: -20px;
-  border: 1px solid #cccccc;
+  border: 1px solid #ced4da;
   border-radius: 50%;
   background-color: #fff;
-  -webkit-transition: border 0.15s ease-in-out;
-  -o-transition: border 0.15s ease-in-out;
-  transition: border 0.15s ease-in-out;
-}
-.radio label::after {
+  transition: border 0.15s ease-in-out; }
+.abc-radio label::after {
+  cursor: pointer;
   display: inline-block;
   position: absolute;
   content: " ";
   width: 11px;
   height: 11px;
   left: 3px;
-  top: 3px;
+  top: 5px;
   margin-left: -20px;
   border-radius: 50%;
-  background-color: #555555;
-  -webkit-transform: scale(0, 0);
-  -ms-transform: scale(0, 0);
-  -o-transform: scale(0, 0);
+  background-color: #495057;
   transform: scale(0, 0);
-  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-}
-.radio input[type="radio"] {
-  opacity: 0;
-  z-index: 1;
+  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
+.abc-radio input[type="radio"] {
+  position: static;
+  margin-left: 0;
   cursor: pointer;
-}
-.radio input[type="radio"]:focus + label::before {
+  opacity: 0;
+  z-index: 1; }
+.abc-radio input[type="radio"]:focus + label::before {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.radio input[type="radio"]:checked + label::after {
-  -webkit-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  -o-transform: scale(1, 1);
-  transform: scale(1, 1);
-}
-.radio input[type="radio"]:disabled {
-  cursor: not-allowed;
-}
-.radio input[type="radio"]:disabled + label {
-  opacity: 0.65;
-}
-.radio input[type="radio"]:disabled + label::before {
-  cursor: not-allowed;
-}
-.radio.radio-inline {
-  margin-top: 0;
-}
-
-.radio-primary input[type="radio"] + label::after {
-  background-color: #337ab7;
-}
-.radio-primary input[type="radio"]:checked + label::before {
-  border-color: #337ab7;
-}
-.radio-primary input[type="radio"]:checked + label::after {
-  background-color: #337ab7;
-}
-
-.radio-danger input[type="radio"] + label::after {
-  background-color: #d9534f;
-}
-.radio-danger input[type="radio"]:checked + label::before {
-  border-color: #d9534f;
-}
-.radio-danger input[type="radio"]:checked + label::after {
-  background-color: #d9534f;
-}
-
-.radio-info input[type="radio"] + label::after {
-  background-color: #5bc0de;
-}
-.radio-info input[type="radio"]:checked + label::before {
-  border-color: #5bc0de;
-}
-.radio-info input[type="radio"]:checked + label::after {
-  background-color: #5bc0de;
-}
-
-.radio-warning input[type="radio"] + label::after {
-  background-color: #f0ad4e;
-}
-.radio-warning input[type="radio"]:checked + label::before {
-  border-color: #f0ad4e;
-}
-.radio-warning input[type="radio"]:checked + label::after {
-  background-color: #f0ad4e;
-}
-
-.radio-success input[type="radio"] + label::after {
-  background-color: #5cb85c;
-}
-.radio-success input[type="radio"]:checked + label::before {
-  border-color: #5cb85c;
-}
-.radio-success input[type="radio"]:checked + label::after {
-  background-color: #5cb85c;
-}
-
-input[type="checkbox"].styled:checked + label:after,
-input[type="radio"].styled:checked + label:after {
-  font-family: 'FontAwesome';
-  content: "\f00c";
-}
-input[type="checkbox"] .styled:checked + label::before,
-input[type="radio"] .styled:checked + label::before {
-  color: #fff;
-}
-input[type="checkbox"] .styled:checked + label::after,
-input[type="radio"] .styled:checked + label::after {
-  color: #fff;
-}
+  outline-offset: -2px; }
+.abc-radio input[type="radio"]:checked + label::after {
+  transform: scale(1, 1); }
+.abc-radio input[type="radio"]:disabled + label {
+  opacity: 0.65; }
+.abc-radio input[type="radio"]:disabled + label::before {
+  cursor: not-allowed; }
+.abc-radio input[type="radio"]:disabled + label::after {
+  cursor: not-allowed; }
+.abc-radio.radio-inline {
+  margin-top: 0; }
+
+.abc-radio-primary input[type="radio"] + label::after {
+  background-color: #007bff; }
+.abc-radio-primary input[type="radio"]:checked + label::before {
+  border-color: #007bff; }
+.abc-radio-primary input[type="radio"]:checked + label::after {
+  background-color: #007bff; }
+
+.abc-radio-danger input[type="radio"] + label::after {
+  background-color: #dc3545; }
+.abc-radio-danger input[type="radio"]:checked + label::before {
+  border-color: #dc3545; }
+.abc-radio-danger input[type="radio"]:checked + label::after {
+  background-color: #dc3545; }
+
+.abc-radio-info input[type="radio"] + label::after {
+  background-color: #17a2b8; }
+.abc-radio-info input[type="radio"]:checked + label::before {
+  border-color: #17a2b8; }
+.abc-radio-info input[type="radio"]:checked + label::after {
+  background-color: #17a2b8; }
+
+.abc-radio-warning input[type="radio"] + label::after {
+  background-color: #ffc107; }
+.abc-radio-warning input[type="radio"]:checked + label::before {
+  border-color: #ffc107; }
+.abc-radio-warning input[type="radio"]:checked + label::after {
+  background-color: #ffc107; }
+
+.abc-radio-success input[type="radio"] + label::after {
+  background-color: #28a745; }
+.abc-radio-success input[type="radio"]:checked + label::before {
+  border-color: #28a745; }
+.abc-radio-success input[type="radio"]:checked + label::after {
+  background-color: #28a745; }
+
+label .was-validated .form-check-input:invalid .abc-checkbox:before, label
+.was-validated .form-check-input:invalid .abc-radio:before, label .form-check-input.is-invalid .abc-checkbox:before, label
+.form-check-input.is-invalid .abc-radio:before {
+  border-color: #dc3545; }