mirror of https://github.com/ColorlibHQ/AdminLTE
enhanced radio button group with `bg-*`
- added active override for .btn.bg-* - added radio button group demo in pages/UI/buttons.htmlpull/2256/head
parent
8c18a36f6e
commit
0fd72b8837
|
@ -314,10 +314,13 @@
|
|||
color: darken(color-yiq($color), 7.5%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($color, 10%) !important;
|
||||
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%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: darken(color-yiq($color), 10%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1917,6 +1917,42 @@
|
|||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.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>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue