at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
.rw-autocomplete {
|
||||
& .rw-select {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
.rw-btn {
|
||||
position: relative;
|
||||
color: $btn-color;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
outline: none; // these are never individually focusable
|
||||
|
||||
.rw-state-readonly &,
|
||||
.rw-state-disabled & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-btn-select {
|
||||
@include opacity(.75);
|
||||
transition: opacity 150ms ease-in;
|
||||
|
||||
&:hover,
|
||||
.rw-state-focus &,
|
||||
:hover > & {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
.rw-btn-primary {
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
line-height: 2em;
|
||||
|
||||
&:hover {
|
||||
background-color: $state-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-btn-select[disabled],
|
||||
.rw-btn-primary[disabled],
|
||||
fieldset[disabled] .rw-btn-select,
|
||||
fieldset[disabled] .rw-btn-primary, {
|
||||
@include state-disabled();
|
||||
@include opacity(.65);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
|
||||
|
||||
.rw-calendar-popup {
|
||||
right: auto;
|
||||
min-width: 0;
|
||||
width: 18em;
|
||||
}
|
||||
|
||||
.rw-calendar {
|
||||
border-radius: $border-radius;
|
||||
background-color: $calendar-bg;
|
||||
border: $widget-border 1px solid;
|
||||
overflow: hidden;
|
||||
|
||||
&.rw-popup {
|
||||
border-color: $popup-border;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-calendar-now {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rw-calendar-btn-left,
|
||||
.rw-calendar-btn-right {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.rw-calendar-btn-view {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.rw-calendar-footer {
|
||||
border-top: 1px solid $input-border;
|
||||
}
|
||||
|
||||
.rw-calendar-grid {
|
||||
outline: none;
|
||||
height: 200 / 14em;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
background-color: $calendar-bg;
|
||||
}
|
||||
|
||||
.rw-head-cell {
|
||||
text-align: $calendar-cell-align;
|
||||
border-bottom: 1px solid $input-border;
|
||||
padding: $calendar-cell-padding;
|
||||
}
|
||||
|
||||
.rw-cell {
|
||||
color: $calendar-cell-color;
|
||||
border-radius: $calendar-cell-border-radius;
|
||||
cursor: pointer;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
padding: $calendar-cell-padding;
|
||||
|
||||
&:hover {
|
||||
@include state-hover($calendar-cell-bg-hover, $calendar-cell-border-hover, $calendar-cell-color-hover);
|
||||
}
|
||||
|
||||
&.rw-state-focus {
|
||||
@include state-focus($calendar-cell-bg-focus, $calendar-cell-border-focus, $calendar-cell-color-focus);
|
||||
}
|
||||
|
||||
&.rw-state-selected {
|
||||
@include state-select($calendar-cell-bg-select, $calendar-cell-border-select, $calendar-cell-color-select);
|
||||
}
|
||||
|
||||
&.rw-state-disabled {
|
||||
@include disabled-color($btn-color);
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-calendar-month & {
|
||||
text-align: $calendar-cell-align;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-cell-off-range {
|
||||
color: lighten($btn-color, 40%)
|
||||
}
|
||||
|
||||
|
||||
.rw-calendar-transition-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rw-calendar-transition {
|
||||
transition: transform 300ms;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rw-calendar-transition-top {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.rw-calendar-transition-bottom {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.rw-calendar-transition-right {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.rw-calendar-transition-left {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.rw-calendar-transition-entering,
|
||||
.rw-calendar-transition-entered {
|
||||
&.rw-calendar-transition-top,
|
||||
&.rw-calendar-transition-bottom {
|
||||
transform: translateY(0);
|
||||
}
|
||||
&.rw-calendar-transition-right,
|
||||
&.rw-calendar-transition-left {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.rw-calendar-transition-exiting {
|
||||
&.rw-calendar-transition-top {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
&.rw-calendar-transition-bottom {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
&.rw-calendar-transition-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
&.rw-calendar-transition-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
.rw-dropdown-list-autofill {
|
||||
@extend .rw-input;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rw-dropdown-list {
|
||||
|
||||
.rw-select,
|
||||
.rw-select .rw-btn {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-dropdown-list-input {
|
||||
background-color: transparent;
|
||||
vertical-align: middle;
|
||||
padding-inline-end: 0;
|
||||
|
||||
/* ellipsis */
|
||||
& {
|
||||
max-width: 1px; // very hacky to force ellipsis
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rw-rtl & {
|
||||
padding-inline-end: $input-padding-horizontal;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-filter-input {
|
||||
@extend .rw-input;
|
||||
@extend .rw-widget-input;
|
||||
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
padding-inline-end: 0;
|
||||
|
||||
.rw-rtl {
|
||||
padding-inline-end: $input-padding-horizontal;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.rw-select,
|
||||
.rw-btn {
|
||||
@include opacity(0.75);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
> .rw-select {
|
||||
&,
|
||||
&:active,
|
||||
&:hover {
|
||||
background: none;
|
||||
cursor: initial;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'RwWidgets';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url('#{$font-path}/rw-widgets.eot?v=#{$version}');
|
||||
src: url('#{$font-path}/rw-widgets.eot?#iefix&v=#{$version}') format('embedded-opentype'),
|
||||
url('#{$font-path}/rw-widgets.woff?v=#{$version}') format('woff'),
|
||||
url('#{$font-path}/rw-widgets.ttf?v=#{$version}') format('truetype'),
|
||||
url('#{$font-path}/rw-widgets.svg?v=#{$version}#fontawesomeregular') format('svg');
|
||||
}
|
||||
|
||||
|
||||
.rw-i {
|
||||
display: inline-block;
|
||||
color: $icon-color;
|
||||
font-family: RwWidgets;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.rw-i-caret-down:before { content: '\e803'; }
|
||||
.rw-i-caret-up:before { content: '\e800'; }
|
||||
.rw-i-chevron-left:before { content: '\f104'; }
|
||||
.rw-i-chevron-right:before { content: '\f105'; }
|
||||
|
||||
.rw-i-clock-o:before { content:'\e805'; }
|
||||
.rw-i-calendar:before { content: '\e804'; }
|
||||
.rw-i-search:before { content: '\e801'; }
|
||||
@@ -0,0 +1,60 @@
|
||||
.rw-list {
|
||||
@include unstyled-list();
|
||||
font-size: $list-font-size;
|
||||
outline: 0;
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.rw-list-option {
|
||||
user-select: none;
|
||||
color: $list-text-color;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.rw-state-focus {
|
||||
@include state-focus($list-bg-focus, $list-border-focus, $list-color-focus);
|
||||
&:hover {
|
||||
@include state-focus($list-bg-focus, $list-border-focus, $list-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:hover.rw-state-focus {
|
||||
@include state-hover($list-bg-hover, $list-border-hover, $list-color-hover);
|
||||
}
|
||||
|
||||
&.rw-state-selected {
|
||||
@include state-select($list-bg-select, $list-border-select, $list-color-select);
|
||||
}
|
||||
|
||||
fieldset[disabled] &,
|
||||
&.rw-state-disabled,
|
||||
&.rw-state-readonly {
|
||||
@include state-disabled();
|
||||
@include disabled-color($list-text-color);
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rw-list-empty,
|
||||
.rw-list-option,
|
||||
.rw-list-optgroup {
|
||||
padding: $list-padding-vertical $list-padding-horizontal;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.rw-list-optgroup {
|
||||
font-weight: bold;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.rw-list-option-create {
|
||||
border-top: 1px $widget-border solid;
|
||||
//padding-top: 0.357em;
|
||||
//margin-top: 0.357em;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
|
||||
@mixin border-box() {
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: alpha(opacity=#{$opacity-ie});
|
||||
}
|
||||
|
||||
@mixin unstyled-list() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@mixin select-container($padding) {
|
||||
padding-inline-end: $padding;
|
||||
|
||||
> .rw-select {
|
||||
width: $padding;
|
||||
}
|
||||
|
||||
&.rw-rtl {
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin state-hover($bg: $state-bg-hover, $border-color: $state-border-hover, $color: $state-color-hover) {
|
||||
background-color: $bg;
|
||||
border-color: $border-color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@mixin state-select($bg: $state-bg-select, $border-color: $state-border-select, $color: $state-color-select) {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $bg;
|
||||
border-color: $border-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin state-focus($bg: $state-bg-focus, $border-color: $state-border-focus, $color: $state-color-focus) {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $bg;
|
||||
border-color: $border-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin state-disabled() {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@mixin disabled-color($color) {
|
||||
color: lighten($color, 40%);
|
||||
filter: alpha(opacity=7);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
|
||||
}
|
||||
|
||||
@mixin height-calc($total, $minus) {
|
||||
height: calc(#{$total} - #{$minus});
|
||||
|
||||
/** ie8 fallback **/
|
||||
margin-top: -#{$minus}\9;
|
||||
height: #{$total}\9;
|
||||
/** --- **/
|
||||
}
|
||||
|
||||
@mixin make-btn-state($hover-color: $btn-bg-hover, $active-shadow: $btn-active-box-shadow) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $btn-bg-hover;
|
||||
|
||||
.rw-i {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $btn-active-box-shadow;
|
||||
}
|
||||
|
||||
.rw-state-disabled &,
|
||||
.rw-state-readonly &,
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: not-allowed;
|
||||
background-color: inherit;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
|
||||
.rw-i {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.rw-multiselect {
|
||||
cursor: text;
|
||||
|
||||
.rw-input-reset {
|
||||
@include height-calc($input-height, $input-border-width * 2);
|
||||
|
||||
border-width: 0;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
padding: 0 $input-padding-horizontal;
|
||||
}
|
||||
|
||||
& .rw-select {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rw-multiselect-taglist {
|
||||
@include unstyled-list();
|
||||
display: inline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rw-multiselect-tag {
|
||||
display: inline-table;
|
||||
color: $multiselect-tag-color;
|
||||
padding: 0 $multiselect-tag-padding-inline-end 0 $multiselect-tag-padding-inline-start;
|
||||
margin-inline-start: $multiselect-tag-gutter;
|
||||
margin-top: $multiselect-tag-gutter;
|
||||
height: $multiselect-tag-height;
|
||||
border-radius: $multiselect-tag-border-radius;
|
||||
background-color: $multiselect-tag-bg;
|
||||
border: 1px solid $multiselect-tag-border;
|
||||
cursor: default;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
|
||||
& > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rw-rtl & {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: $multiselect-tag-gutter;
|
||||
padding: 0 $multiselect-tag-padding-inline-start 0 $multiselect-tag-padding-inline-end;
|
||||
}
|
||||
|
||||
&.rw-state-focus {
|
||||
@include state-focus();
|
||||
}
|
||||
|
||||
&.rw-state-readonly,
|
||||
&.rw-state-disabled,
|
||||
.rw-state-readonly &,
|
||||
.rw-state-disabled &,
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.rw-state-disabled,
|
||||
.rw-state-disabled &,
|
||||
fieldset[disabled] & {
|
||||
@include opacity(0.65);
|
||||
}
|
||||
|
||||
fieldset[disabled] & {
|
||||
@include state-disabled();
|
||||
}
|
||||
}
|
||||
|
||||
.rw-multiselect-tag-btn {
|
||||
color: $multiselect-tag-color;
|
||||
margin-inline-start: 0.25em;
|
||||
|
||||
.rw-rtl & {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
// Normalize.css
|
||||
.rw-btn,
|
||||
.rw-input-reset {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
background-image: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.rw-btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
select.rw-input {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
html input[type="button"].rw-input {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea.rw-input {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
button[disabled].rw-input,
|
||||
fieldset[disabled] .rw-input,
|
||||
html input[disabled].rw-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.rw-input::-moz-focus-inner,
|
||||
input.rw-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* -------------- */
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
.rw-number-picker {
|
||||
$half-width: $input-height / 2;
|
||||
|
||||
.rw-btn {
|
||||
@include make-btn-state();
|
||||
@include height-calc($half-width, $input-border-width);
|
||||
|
||||
line-height: $half-width;
|
||||
line-height: calc(#{$half-width} - #{$input-border-width});
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .rw-select {
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
|
||||
.rw-popup-container {
|
||||
position: absolute;
|
||||
z-index: $popup-zindex;
|
||||
top: 100%;
|
||||
left: -$popup-box-shadow-offset;
|
||||
right: -$popup-box-shadow-offset;
|
||||
|
||||
&.rw-dropup {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.rw-state-focus & {
|
||||
z-index: $popup-zindex-focused;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup-transition {
|
||||
// the offsets allows for drop shadow to not be clipped by the container
|
||||
width: 100%;
|
||||
margin-bottom: $popup-box-shadow-offset;
|
||||
padding: 0 $popup-box-shadow-offset;
|
||||
|
||||
.rw-dropup > & {
|
||||
margin-bottom: 0;
|
||||
margin-top: $popup-box-shadow-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup {
|
||||
@include border-top-radius(0);
|
||||
@include border-bottom-radius($popup-border-radius);
|
||||
|
||||
box-shadow: $popup-box-shadow;
|
||||
border: $popup-border 1px solid;
|
||||
background: $popup-bg;
|
||||
|
||||
.rw-dropup & {
|
||||
@include border-bottom-radius(0);
|
||||
@include border-top-radius($popup-border-radius);
|
||||
|
||||
box-shadow: $popup-box-shadow-up;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup-transition {
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.rw-popup-transition-entering {
|
||||
overflow: hidden;
|
||||
|
||||
& .rw-popup-transition {
|
||||
transform: translateY(0);
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup-transition-exiting {
|
||||
& .rw-popup-transition {
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup-transition-exiting,
|
||||
.rw-popup-transition-exited {
|
||||
overflow: hidden;
|
||||
|
||||
& .rw-popup-transition {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.rw-dropup .rw-popup-transition {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.rw-popup-transition-exited {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import "variables";
|
||||
//
|
||||
@import "mixins";
|
||||
@import "normalize";
|
||||
@import "icons";
|
||||
//
|
||||
//@import "./button.scss";
|
||||
@import "widget";
|
||||
@import "list";
|
||||
@import "dropdown-list";
|
||||
@import "number-picker";
|
||||
//@import "./calendar.scss";
|
||||
@import "select-list";
|
||||
@import "multiselect";
|
||||
//@import "./autocomplete.scss";
|
||||
//
|
||||
@import "popup";
|
||||
@import "state";
|
||||
@@ -0,0 +1,53 @@
|
||||
.rw-select-list {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
.rw-list {
|
||||
max-height: none;
|
||||
font-size: $font-size; // use widget font-size
|
||||
}
|
||||
}
|
||||
|
||||
.rw-select-list-label {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
cursor: inherit;
|
||||
padding-inline-start: 20px;
|
||||
margin: 0;
|
||||
|
||||
.rw-rtl & {
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input.rw-select-list-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: 0.1em /9;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
cursor: inherit;
|
||||
|
||||
.rw-rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-loading-mask {
|
||||
content: '';
|
||||
background: $img-busy-lg no-repeat center;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-radius: $input-border-radius;
|
||||
|
||||
@include opacity(0.7);
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
.rw-state-disabled {
|
||||
@include state-disabled();
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
|
||||
|
||||
$gray-base: #000 !default;
|
||||
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
|
||||
$gray-dark: lighten($gray-base, 20%) !default; // #333
|
||||
$gray: lighten($gray-base, 33.5%) !default; // #555
|
||||
$gray-light: lighten($gray-base, 46.7%) !default; // #777
|
||||
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
|
||||
|
||||
$font-size: 1em !default;
|
||||
$font-family: inherit !default;
|
||||
$text-color: $gray-dark !default;
|
||||
|
||||
$version: "4.1.0" !default;
|
||||
// updated with ../fonts to fix react-scripts@3.3.0 before it was component/react-widgets/*
|
||||
$font-path: "components/react-widgets/fonts" !default; // for referencing Bootstrap CDN font files directly
|
||||
$img-path: "components/react-widgets/img" !default;
|
||||
$img-busy: url('#{$img-path}/loading.gif') !default;
|
||||
$img-busy-lg: url("#{$img-path}/loader-big.gif") !default;
|
||||
|
||||
$widget-bg: $input-bg !default;
|
||||
$widget-border: $input-border-color !default;
|
||||
|
||||
|
||||
|
||||
$icon-color: $gray-700 !default;
|
||||
|
||||
//
|
||||
// Widget States
|
||||
//
|
||||
$state-bg-select: $primary !default;
|
||||
$state-border-select: $state-bg-select !default;
|
||||
$state-color-select: $white !default;
|
||||
|
||||
$state-bg-hover: $dropdown-link-hover-bg !default;
|
||||
$state-border-hover: $dropdown-link-hover-bg !default;
|
||||
$state-color-hover: $dropdown-link-hover-color !default;
|
||||
|
||||
$state-bg-focus: $dropdown-link-active-bg !default;
|
||||
$state-border-focus: $dropdown-link-active-bg !default;
|
||||
$state-color-focus: $dropdown-link-hover-bg !default;
|
||||
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
$btn-bg: $white !default;
|
||||
$btn-color: $text-color !default;
|
||||
$btn-border: $gray-400 !default;
|
||||
|
||||
$btn-bg-hover: $state-bg-hover !default;
|
||||
$btn-border-hover: $state-border-hover !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
|
||||
|
||||
$select-btn-bg: $btn-bg !default;
|
||||
$select-btn-color: $btn-color !default;
|
||||
$select-btn-border: $btn-border !default;
|
||||
|
||||
$select-btn-bg-hover: $btn-bg-hover !default;
|
||||
$select-btn-border-hover: $btn-border-hover !default;
|
||||
$select-btn-active-box-shadow: $btn-active-box-shadow !default;
|
||||
|
||||
//
|
||||
// Picker inputs
|
||||
//
|
||||
$input-color: $gray !default;
|
||||
$input-padding-horizontal: 0.857em !default;
|
||||
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
|
||||
|
||||
$input-bg: $widget-bg !default;
|
||||
$input-color-placeholder: #999 !default;
|
||||
|
||||
$input-border: $widget-border !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-border-radius: $border-radius !default;
|
||||
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
$input-border-disabled: $input-border !default;
|
||||
|
||||
$input-bg-hover: $gray-lighter !default;
|
||||
$input-border-hover: $input-border !default;
|
||||
|
||||
$input-bg-focus: $input-bg !default;
|
||||
$input-border-focus: $state-border-focus !default;
|
||||
|
||||
$input-focus-color: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6) !default;
|
||||
$input-focus-box-shadow: 0 0 8px $input-focus-color !default;
|
||||
|
||||
$input-bg-color-autofill: rgb(250, 255, 189) !default;
|
||||
$input-color-autofill: rgb(0, 0, 0) !default;
|
||||
//
|
||||
// List
|
||||
//
|
||||
$list-font-size: $font-size !default;
|
||||
|
||||
$list-bg-hover: $state-bg-hover !default;
|
||||
$list-border-hover: $state-border-hover !default;
|
||||
$list-color-hover: $state-color-hover !default;
|
||||
|
||||
$list-bg-focus: $state-bg-focus !default;
|
||||
$list-border-focus: $state-border-focus !default;
|
||||
$list-color-focus: $state-color-focus !default;
|
||||
|
||||
$list-bg-select: $state-bg-select !default;
|
||||
$list-border-select: $state-border-select !default;
|
||||
$list-color-select: $state-color-select !default;
|
||||
|
||||
$list-text-color: $text-color !default;
|
||||
$list-padding-vertical: $dropdown-item-padding-y !default;
|
||||
$list-padding-horizontal: $dropdown-item-padding-x !default;
|
||||
|
||||
//
|
||||
// Popup
|
||||
//
|
||||
$popup-bg: $widget-bg !default;
|
||||
$popup-border: $widget-border !default;
|
||||
$popup-border-radius: $border-radius-sm !default;
|
||||
$popup-box-shadow-offset: 6px !default;
|
||||
$popup-box-shadow: $box-shadow-default !default;
|
||||
$popup-box-shadow-up: $box-shadow-default-inverse !default;
|
||||
|
||||
$popup-zindex: 1005 !default;
|
||||
$popup-zindex-focused: $popup-zindex + 1 !default;
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Calendar
|
||||
//
|
||||
$calendar-bg: $widget-bg !default;
|
||||
$calendar-cell-align: center !default;
|
||||
$calendar-cell-padding: .25em !default;
|
||||
$calendar-cell-color: $btn-color !default;
|
||||
$calendar-cell-border-radius: $input-border-radius !default;
|
||||
|
||||
$calendar-cell-bg-hover: $state-bg-hover !default;
|
||||
$calendar-cell-border-hover: $state-border-hover !default;
|
||||
$calendar-cell-color-hover: $state-color-hover !default;
|
||||
|
||||
$calendar-cell-bg-focus: $state-bg-focus !default;
|
||||
$calendar-cell-border-focus: $state-border-focus !default;
|
||||
$calendar-cell-color-focus: $state-color-focus !default;
|
||||
|
||||
$calendar-cell-bg-select: $state-bg-select !default;
|
||||
$calendar-cell-border-select: $state-border-select !default;
|
||||
$calendar-cell-color-select: $state-color-select !default;
|
||||
|
||||
|
||||
//
|
||||
// Multiselect
|
||||
//
|
||||
$multiselect-gutter-pt: 0.115 !default;
|
||||
$multiselect-tag-padding-inline-start: 0.35em !default;
|
||||
$multiselect-tag-padding-inline-end: 0.35em !default;
|
||||
$multiselect-tag-color: $dropdown-link-color !default;
|
||||
$multiselect-tag-border: darken($dropdown-link-hover-bg, 15%) !default;
|
||||
$multiselect-tag-bg: $dropdown-link-hover-bg !default;
|
||||
$multiselect-tag-height-pt: 1 - ($multiselect-gutter-pt * 2) !default;
|
||||
$multiselect-tag-gutter: calc(#{$input-height / 5} - #{$input-border-width}) !default;
|
||||
$multiselect-tag-height: ($input-height / 1.5) !default;
|
||||
$multiselect-tag-border-radius: $border-radius-sm !default;
|
||||
|
||||
$multiselect-tag-bg-hover: $state-bg-hover !default;
|
||||
$multiselect-tag-border-hover: $state-border-hover !default;
|
||||
$multiselect-tag-color-hover: $state-color-hover !default;
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
/* for debugging */
|
||||
// *:focus {
|
||||
// outline: 1px red solid !important;
|
||||
// }
|
||||
|
||||
@keyframes react-widgets-autofill-start {
|
||||
from {
|
||||
/**/
|
||||
}
|
||||
to {
|
||||
/**/
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes react-widgets-autofill-cancel {
|
||||
from {
|
||||
/**/
|
||||
}
|
||||
to {
|
||||
/**/
|
||||
}
|
||||
}
|
||||
|
||||
.rw-sr {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.rw-widget {
|
||||
@include border-box();
|
||||
|
||||
border: none;
|
||||
color: $text-color;
|
||||
font-size: $font-size;
|
||||
font-family: $font-family;
|
||||
outline: none;
|
||||
position: relative;
|
||||
|
||||
// ensure that the "chrome" is the same width as the actual container
|
||||
& > .rw-widget-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-widget-container {
|
||||
background-color: $input-bg;
|
||||
border: $input-border $input-border-width solid;
|
||||
border-radius: $input-border-radius;
|
||||
|
||||
&.rw-state-focus,
|
||||
.rw-state-focus > & {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $input-bg-focus;
|
||||
border-color: $input-border-focus;
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.rw-state-readonly,
|
||||
.rw-state-readonly > & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.rw-state-disabled,
|
||||
.rw-state-disabled > &,
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
@include state-disabled();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rw-widget-picker {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-collapse: separate;
|
||||
display: inline-table;
|
||||
height: $input-height;
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
& > .rw-select {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rw-open > & {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
.rw-open-up > & {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
fieldset[disabled] &,
|
||||
.rw-state-disabled > & {
|
||||
background-color: $input-bg-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-select {
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
width: 1.9em;
|
||||
}
|
||||
|
||||
.rw-state-readonly &,
|
||||
.rw-state-disabled & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-select-bordered {
|
||||
@include make-btn-state($select-btn-bg-hover);
|
||||
|
||||
border: none;
|
||||
border-left: $input-border 1px solid;
|
||||
|
||||
.rw-rtl & {
|
||||
border-right: $input-border 1px solid;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.rw-input-reset {
|
||||
@include placeholder();
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.rw-input {
|
||||
@extend .rw-input-reset;
|
||||
|
||||
color: $input-color;
|
||||
padding: 0 $input-padding-horizontal;
|
||||
background-color: $input-bg;
|
||||
|
||||
&[type='text']::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
@include state-disabled();
|
||||
opacity: 1;
|
||||
background-color: $input-bg-disabled;
|
||||
border-color: $input-border-disabled;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-i.rw-loading {
|
||||
display: block;
|
||||
background: $img-busy no-repeat center;
|
||||
min-width: 16px;
|
||||
width: 1.9em;
|
||||
height: 16px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.rw-placeholder {
|
||||
color: $input-color-placeholder;
|
||||
}
|
||||
|
||||
// https://github.com/klarna/ui/blob/master/Field/styles.scss
|
||||
.rw-detect-autofill {
|
||||
&:-webkit-autofill {
|
||||
animation-name: react-widgets-autofill-start;
|
||||
|
||||
// Make the backgound color become yellow _really slowly_
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
&:not(:-webkit-autofill) {
|
||||
animation-name: react-widgets-autofill-cancel;
|
||||
}
|
||||
}
|
||||
|
||||
.rw-webkit-autofill .rw-widget-container,
|
||||
.rw-input:-webkit-autofill {
|
||||
background-color: $input-bg-color-autofill !important;
|
||||
background-image: none !important;
|
||||
color: $input-color-autofill !important;
|
||||
}
|
||||
|
||||
//input inset
|
||||
.rw-widget-input {
|
||||
box-shadow: $input-box-shadow;
|
||||
}
|
||||
|
||||
.rw-widget-input.rw-state-focus {
|
||||
box-shadow: #{$input-focus-box-shadow}, #{$input-box-shadow};
|
||||
}
|
||||
Reference in New Issue
Block a user