mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
304 lines
7.6 KiB
SCSS
304 lines
7.6 KiB
SCSS
$form-check-input-checked-color: #fff;
|
|
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
|
|
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
|
|
|
|
.form{
|
|
&__floating-footer{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 220px;
|
|
right: 0;
|
|
background: #fff;
|
|
padding: 14px 16px;
|
|
border-top: 1px solid #ececec;
|
|
}
|
|
}
|
|
|
|
// Form
|
|
.bp3-label{
|
|
color: #353535;
|
|
font-weight: 400;
|
|
|
|
.required{
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.#{$ns}-input{
|
|
box-shadow: 0 0 0 transparent;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
color: #333;
|
|
|
|
&:focus,
|
|
&.bp3-active{
|
|
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
|
|
border-color: #80bdff;
|
|
}
|
|
}
|
|
|
|
.#{$ns}-form-group{
|
|
margin-bottom: 20px;
|
|
|
|
&.#{$ns}-intent-danger{
|
|
select{
|
|
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
|
|
0 0 0 0 rgba(2, 2, 2, 0),
|
|
inset 0 0 0 1px #db3737,
|
|
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
|
|
inset 0 1px 1px rgba(16, 22, 26, 0.2);
|
|
}
|
|
|
|
.bp3-input{
|
|
border-color: rgb(219, 55, 55);
|
|
box-shadow: 0 0 0 0 transparent;
|
|
|
|
&:focus{
|
|
box-shadow: 0 0 0 0.2rem rgba(219, 55, 55, 0.25);
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}-label{
|
|
margin-bottom: 6px;
|
|
|
|
.#{$ns}-icon-info-circle{
|
|
margin-left: 3px;
|
|
position: relative;
|
|
top: -1px;
|
|
color: #A1B2C5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}-button:not([class*=".#{$ns}-intent-"]) {
|
|
background-image: none;
|
|
}
|
|
|
|
.#{$ns}-html-select select,
|
|
.#{$ns}-select select{
|
|
background-image: none;
|
|
border-radius: 0;
|
|
|
|
&,
|
|
&:hover{
|
|
background: #fff;
|
|
box-shadow: 0 0 0;
|
|
border: 1px solid #ced4da;
|
|
}
|
|
&:focus{
|
|
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
|
|
border-color: #80bdff;
|
|
}
|
|
}
|
|
|
|
.bp3-datepicker-caption select{
|
|
|
|
&,
|
|
&:hover{
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.form-group--select-list{
|
|
|
|
.#{$ns}-icon-caret-down{
|
|
color: #8D8D8D;
|
|
}
|
|
|
|
&.bp3-fill{
|
|
width: 100%;
|
|
}
|
|
|
|
&.bp3-intent-danger{
|
|
.bp3-button:not(.bp3-minimal){
|
|
border-color: #db3737;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@mixin control-checked-colors($selector: ":checked") {
|
|
input#{$selector} ~ .#{$ns}-control-indicator {
|
|
box-shadow: none;
|
|
background-color: $control-checked-background-color;
|
|
color: $white;
|
|
}
|
|
|
|
&:hover input#{$selector} ~ .#{$ns}-control-indicator {
|
|
box-shadow: none;
|
|
background-color: $control-checked-background-color-hover;
|
|
border-color: $control-checked-background-color-active;
|
|
}
|
|
|
|
input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
|
|
box-shadow: none;
|
|
background-color: $control-checked-background-color-active;
|
|
border-color: $control-checked-background-color-active;
|
|
}
|
|
|
|
input:disabled#{$selector} ~ .#{$ns}-control-indicator {
|
|
box-shadow: none;
|
|
background: rgba($control-checked-background-color, 0.5);
|
|
}
|
|
}
|
|
|
|
///@extend
|
|
.#{$ns}-control {
|
|
|
|
input:checked ~ .#{$ns}-control-indicator {
|
|
box-shadow: 0 0 0 transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
&:hover input:checked ~ .#{$ns}-control-indicator {
|
|
box-shadow: 0 0 0 transparent;
|
|
background-color: transparent;
|
|
}
|
|
input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
|
|
box-shadow: 0 0 0 transparent;
|
|
background: transparent;
|
|
}
|
|
input:disabled:checked ~ .#{$ns}-control-indicator {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
&.#{$ns}-disabled {
|
|
cursor: not-allowed;
|
|
color: $pt-text-color-disabled;
|
|
}
|
|
|
|
&.#{$ns}-inline {
|
|
display: inline-block;
|
|
margin-right: $pt-grid-size * 2;
|
|
}
|
|
|
|
.#{$ns}-control-indicator {
|
|
box-shadow: 0 0 0 transparent;
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
|
|
&::before {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&:hover .#{$ns}-control-indicator {
|
|
background-color: transparent;
|
|
}
|
|
|
|
input:not(:disabled):active ~ .#{$ns}-control-indicator {
|
|
box-shadow: 0 0 0 transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
/*
|
|
Checkbox
|
|
|
|
Markup:
|
|
<label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
|
|
<input type="checkbox" {{:modifier}} />
|
|
<span class="#{$ns}-control-indicator"></span>
|
|
Checkbox
|
|
</label>
|
|
|
|
:checked - Checked
|
|
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
|
|
:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
|
|
<code>input.indeterminate = true</code>.
|
|
.#{$ns}-align-right - Right-aligned indicator
|
|
.#{$ns}-large - Large
|
|
|
|
Styleguide checkbox
|
|
*/
|
|
|
|
&.#{$ns}-checkbox {
|
|
&:hover input:indeterminate ~ .#{$ns}-control-indicator {
|
|
// box-shadow: 0 0 0 transparent;
|
|
}
|
|
|
|
@mixin indicator-inline-icon($icon) {
|
|
&::before {
|
|
// embed SVG icon image as backgroud-image above gradient.
|
|
// the SVG image content is inlined into the CSS, so use this sparingly.
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@include control-checked-colors(":checked");
|
|
|
|
// make :indeterminate look like :checked _for Checkbox only_
|
|
@include control-checked-colors(":indeterminate");
|
|
|
|
.#{$ns}-control-indicator {
|
|
border: 1px solid #c6c6c6;
|
|
border-radius: $pt-border-radius;
|
|
}
|
|
input:checked ~ .#{$ns}-control-indicator {
|
|
background-image: escape-svg($form-check-input-checked-bg-image);
|
|
border-color: #137cbd;
|
|
background-color: #137cbd;
|
|
}
|
|
input:indeterminate ~ .#{$ns}-control-indicator {
|
|
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
|
border-color: #137cbd;
|
|
background-color: #137cbd;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Radio
|
|
|
|
Markup:
|
|
<label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
|
|
<input type="radio" name="docs-radio-regular" {{:modifier}} />
|
|
<span class="#{$ns}-control-indicator"></span>
|
|
Radio
|
|
</label>
|
|
|
|
:checked - Selected
|
|
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
|
|
.#{$ns}-align-right - Right-aligned indicator
|
|
.#{$ns}-large - Large
|
|
|
|
Styleguide radio
|
|
*/
|
|
&.#{$ns}-radio {
|
|
|
|
|
|
.#{$ns}-control-indicator{
|
|
border: 2px solid #cecece;
|
|
|
|
&::before{
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
}
|
|
|
|
input:checked ~ .#{$ns}-control-indicator{
|
|
border-color: #137cbd;
|
|
|
|
&::before {
|
|
background-image: radial-gradient(#137cbd 40%, transparent 40%);
|
|
}
|
|
}
|
|
|
|
input:checked:disabled ~ .#{$ns}-control-indicator::before {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
input:focus ~ .#{$ns}-control-indicator {
|
|
-moz-outline-radius: $control-indicator-size;
|
|
}
|
|
}
|
|
} |