github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

enhanced radio button group with `bg-*` 

- added active override for .btn.bg-*
- added radio button group demo in pages/UI/buttons.html
pull/2256/head
REJack 2019-09-09 15:07:23 +02:00
parent 8c18a36f6e
commit 0fd72b8837
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
2 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/scss/_mixins.scss
View File

@ -314,10 +314,13 @@
color: darken(color-yiq($color), 7.5%); color: darken(color-yiq($color), 7.5%);
} }
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
&:active, &:active,
&.active { &.active {
background-color: darken($color, 10%) !important;
border-color: darken($color, 12.5%); border-color: darken($color, 12.5%);
color: darken(color-yiq($color), 10%); color: color-yiq(darken($color, 10%));
} }
} }
} }
@ -344,11 +347,13 @@
color: darken(color-yiq($color), 7.5%); color: darken(color-yiq($color), 7.5%);
} }
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
&:active, &:active,
&.active { &.active {
@include bg-gradient-variant('&', darken($color, 10%)); @include bg-gradient-variant('&', darken($color, 10%));
border-color: darken($color, 12.5%); border-color: darken($color, 12.5%);
color: darken(color-yiq($color), 10%); color: color-yiq(darken($color, 10%));
} }
} }
} }

36
pages/UI/buttons.html
View File

@ -1917,6 +1917,42 @@
<!-- /.card-body --> <!-- /.card-body -->
</div> </div>
<!-- /.card --> <!-- /.card -->
<!-- Radio Buttons -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Radio Button Group</h3>
</div>
<div class="card-body table-responsive pad">
<p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn bg-olive active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn bg-olive">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn bg-olive">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div> </div>
<!-- /.col --> <!-- /.col -->
</div> </div>