-
-
+
+
{{formattedMin}}
+
-
{{symbol + max}}
-
+
{{formattedMax}}
diff --git a/src/lib/form/range-slider/range-slider.component.scss b/src/lib/form/range-slider/range-slider.component.scss
index d7b749bf..b33c7a42 100644
--- a/src/lib/form/range-slider/range-slider.component.scss
+++ b/src/lib/form/range-slider/range-slider.component.scss
@@ -1,66 +1,98 @@
+@use "sass:math";
@import "../../../styles/variables";
-$height: 30px;
+$thickness: 22px;
-.range-slider {
- display: flex;
+.rld {
+ &-range-slider {
+ display: flex;
+ align-items: flex-end;
- .rail {
- width: 100%;
- position: relative;
- min-height: $height;
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-basis: 72%;
- flex-grow: 1;
- }
+ * {
+ user-select: none;
+ }
+ }
- .slide {
- width: 100%;
- height: 10px;
- background: $reloadly-light-blue;
- border: none;
- border-radius: $input-radius * 2;
- }
+ &-rail {
+ width: 100%;
+ position: relative;
+ min-height: $thickness;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
- .knob {
- display: block;
- position: absolute;
- left: 0px;
- width: $height;
- height: $height;
- border-radius: 50%;
- background-color: darken($color: $reloadly-light-blue, $amount: 15);
- }
+ &-container {
+ position: relative;
+ flex-basis: 72%;
+ flex-grow: 1;
+ min-height: $thickness;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0 math.div($thickness, 4);
+ padding-top: $box-halo-width;
+ }
+ }
- .input {
- max-width: 120px;
- flex-basis: 20%;
- flex-shrink: 1;
- margin-left: $spacing-smallest;
- }
+ &-slide {
+ width: 100%;
+ height: 10px;
+ background: $reloadly-light-blue;
+ border: none;
+ border-radius: $input-radius * 2;
+ }
- .min-max {
- flex-basis: 4%;
- display: inline-flex;
- align-self: center;
- padding: 5px;
- font-weight: 450;
- }
+ &-knob {
+ display: block;
+ position: absolute;
+ left: 0px;
+ width: $thickness;
+ height: $thickness;
+ border-radius: 50%;
+ background-color: darken($color: $reloadly-light-blue, $amount: 15);
+ }
- &.disabled {
- .slide {
- background-color: $reloadly-disabled-color;
- }
+ &-range-input {
+ max-width: 80px;
+ margin-bottom: 2px;
+ }
- .knob {
- background-color: darken($color: $reloadly-disabled-color, $amount: 5);
- cursor: not-allowed;
- }
+ &-min-max {
+ flex-basis: 4%;
+ display: inline-flex;
+ padding: 0 5px;
+ font-weight: 450;
+ user-select: none;
+ line-height: 1;
- .input {
- @include disabled;
- }
- }
-}
\ No newline at end of file
+ &-min {
+ padding-left: 0;
+ }
+
+ &-max {
+ padding-right: 0;
+ }
+ }
+
+ &-disabled {
+ .rld-slide {
+ background-color: $reloadly-disabled-color;
+ }
+
+ .rld-knob {
+ background-color: darken($color: $reloadly-disabled-color, $amount: 5);
+ cursor: not-allowed;
+ }
+
+ .rld-input {
+ background-color: $reloadly-disabled-color;
+ border: 0;
+ box-shadow: none;
+ cursor: not-allowed;
+ }
+ }
+}
diff --git a/src/lib/form/range-slider/range-slider.component.ts b/src/lib/form/range-slider/range-slider.component.ts
index 1734b2ce..4e9c7313 100644
--- a/src/lib/form/range-slider/range-slider.component.ts
+++ b/src/lib/form/range-slider/range-slider.component.ts
@@ -6,10 +6,12 @@ import {
EventEmitter,
Inject,
Input,
+ OnChanges,
OnDestroy,
OnInit,
Output,
Renderer2,
+ SimpleChanges,
ViewChild
} from '@angular/core';
import { ReplaySubject, Subject, takeUntil } from 'rxjs';
@@ -19,26 +21,33 @@ import { ReplaySubject, Subject, takeUntil } from 'rxjs';
templateUrl: './range-slider.component.html',
styleUrls: ['./range-slider.component.scss']
})
-export class RangeSliderComponent implements OnInit, AfterViewInit, OnDestroy {
- @Input() min!: number;
- @Input() max!: number;
+export class RangeSliderComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+ @Input() set min(value: number) { this._min = Math.max(0, value) };
+ @Input() set max(value: number) { this._max = Math.max(this.min, value) };
@Input() symbol: string = '';
@Input() showInput: boolean = true;
- @Input() baseSize: number = 30;
@Input() disabled!: boolean;
@Input() fontSize: string = '16px';
- @Output() currentValue = new EventEmitter
();
+ @Input() showLabel: boolean = false;
+ @Input() set currentValue(value: number) { this.setCurrentValue(value, false) };
+ @Output() currentValueChange = new EventEmitter();
@Output() currentPercentage = new EventEmitter();
@ViewChild('range') range!: ElementRef;
@ViewChild('knob') knob!: ElementRef;
@ViewChild('input') input!: ElementRef;
+ public get min(): number { return this._min }
+ public get max(): number { return this._max }
+
private knobListeners = new Array<() => void>;
private windowListeners = new Array<() => void>;
private window;
- private value = new Subject<[value: number, percentage: number]>();
+ private _min = 0;
+ private _max = 0;
+ private value: number = 0;
+ private values = new Subject<[value: number, percentage: number, emitEvent: boolean]>();
private subs: ReplaySubject = new ReplaySubject(1);
constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {
@@ -46,10 +55,14 @@ export class RangeSliderComponent implements OnInit, AfterViewInit, OnDestroy {
}
ngOnInit(): void {
- this.value.pipe(takeUntil(this.subs))
+ this.values.pipe(takeUntil(this.subs))
.subscribe(currentValue => {
- this.currentValue.emit(currentValue[0]);
- this.currentPercentage.emit(currentValue[1]);
+ const [value, percentage, emitEvent] = currentValue;
+ this.value = value;
+ if (emitEvent) {
+ this.currentValueChange.emit(value);
+ this.currentPercentage.emit(percentage);
+ }
});
}
@@ -66,6 +79,15 @@ export class RangeSliderComponent implements OnInit, AfterViewInit, OnDestroy {
];
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes?.['currentValue']?.['currentValue'] && this.max) {
+ this.setCurrentValue(changes['currentValue']['currentValue'], false);
+ } else if ((changes?.['min']?.['currentValue'] || changes?.['max']?.['currentValue']) && this.value) {
+ this.setCurrentValue(this.value, false);
+ this.ensureKnobPositionFallback(this.value);
+ }
+ }
+
ngOnDestroy(): void {
this.windowListeners.forEach(eventEnder => eventEnder());
this.knobListeners.forEach(eventEnder => eventEnder());
@@ -74,17 +96,36 @@ export class RangeSliderComponent implements OnInit, AfterViewInit, OnDestroy {
}
public inputChanged(event: Event): void {
- const value = parseInt((event.target as HTMLInputElement).value) || 0;
+ this.setCurrentValue(parseInt((event.target as HTMLInputElement).value) || 0);
+ }
+
+ get formattedValue(): string {
+ return (this.symbol ? (this.symbol + ' ') : '') + (+this.value ?? '');
+ }
+
+ get formattedMin(): string {
+ return (this.symbol ?? '') + (+this.min);
+ }
+
+ get formattedMax(): string {
+ return (this.symbol ?? '') + (+this.max);
+ }
+
+ private setCurrentValue(value: number, emitEvent = true) {
const difference = this.max - this.min;
- const percentage = Math.round((value / difference) * 100);
- this.value.next([value, percentage]);
+ const mappedValue = Math.max(value, this.min) - this.min;
+ const percentage = Math.round((mappedValue / difference) * 100);
+ this.values.next([value, percentage, emitEvent]);
+ if (this.input?.nativeElement) this.renderer.setProperty(this.input.nativeElement, 'value', value);
this.moveSlider(percentage);
}
- private changeValue(percentage: number): void {
- const value = Math.round((percentage / 100) * this.max);
- this.value.next([value, percentage]);
- this.renderer.setProperty(this.input.nativeElement, 'value', value);
+ private setCurrentPercentage(percentage: number, emitEvent = true): void {
+ const difference = this.max - this.min;
+ const value = Math.round((percentage / 100) * difference) + this.min;
+ this.values.next([value, percentage, emitEvent]);
+ if (this.input?.nativeElement) this.renderer.setProperty(this.input.nativeElement, 'value', value);
+ this.moveSlider(percentage);
}
private enableSlide(event: Event): void {
@@ -112,28 +153,34 @@ export class RangeSliderComponent implements OnInit, AfterViewInit, OnDestroy {
xLength = event.touches[0].pageX - slider.getBoundingClientRect().left; // TODO test on touchscreen devices
}
- event.preventDefault();
- let percentage = this.clip(Math.round((xLength / slider.offsetWidth) * 100));
-
- this.window?.requestAnimationFrame(() => {
- this.moveSlider(percentage);
- });
- this.changeValue(percentage);
+ let percentage = this.clamp(Math.round((xLength / slider.clientWidth) * 100));
+ this.setCurrentPercentage(percentage);
}
}
- private clip(number: number, min = 0, max = 100): number {
+ private moveSlider(percentage: number): void {
+ percentage = this.clamp(percentage);
+ void this.range?.nativeElement.offsetWidth; // important for DOM reflow recalculation
+ this.window?.requestAnimationFrame(() => {
+ // @TODO sometimes, the browser calculates wrong client/offset-Width for range.nativeElement
+ // which is different from the value visible and calculated in dev tools inspect, even after a long time has elapsed
+ // this could be because of flex grow. This can cause the knob to go beyond the slider when the page is first loaded.
+ // don't forget to update slider.clientWidth on line 156 to offsetWidth if you'll be using offsetWidth
+ const sliderWidth = this.range?.nativeElement.clientWidth - this.knob?.nativeElement.clientWidth;
+ // @TODO check if void this.range?.nativeElement.offsetWidth; above fixes the issue
+ let x = Math.round((percentage / 100) * sliderWidth);
+ x = this.clamp(x, 0, sliderWidth);
+ if (this.knob?.nativeElement) this.knob.nativeElement.style.left = x + 'px';
+ });
+ }
+
+ private clamp(number: number, min = 0, max = 100): number {
if (number < min) return min;
if (number > max) return max;
- return number;
+ return number || 0;
}
- private moveSlider(percentage: number): void {
- percentage = this.clip(percentage);
- const sliderWidth = this.range.nativeElement.offsetWidth - this.knob.nativeElement.offsetWidth;
- let x = Math.round((percentage / 100) * sliderWidth);
- x = this.clip(x, 0, sliderWidth);
- this.knob.nativeElement.style.left = x + "px";
+ private ensureKnobPositionFallback(value: number): void {
+ setTimeout(() => this.setCurrentValue(value, false), 400);
}
-
}
diff --git a/src/lib/form/search-bar/search-bar.component.html b/src/lib/form/search-bar/search-bar.component.html
index f813239d..bf311668 100644
--- a/src/lib/form/search-bar/search-bar.component.html
+++ b/src/lib/form/search-bar/search-bar.component.html
@@ -1,8 +1,8 @@
diff --git a/src/lib/form/search-bar/search-bar.component.scss b/src/lib/form/search-bar/search-bar.component.scss
index 974bf313..924baac7 100644
--- a/src/lib/form/search-bar/search-bar.component.scss
+++ b/src/lib/form/search-bar/search-bar.component.scss
@@ -17,14 +17,14 @@
background: transparent;
flex-grow: 1;
font-weight: 450;
- font-size: $font-medium;
- color: $reloadly-black-8;
+ font-size: $font-size-s;
+ color: $reloadly-black-1;
outline: none;
&::placeholder {
- color: $reloadly-black-8;
+ color: $reloadly-black-1;
}
}
- .icon {
+ &_icon {
width: 12px;
height: 12px;
display: flex;
@@ -32,7 +32,8 @@
justify-content: center;
cursor: pointer;
svg {
- width: 12px;
+ width: 100%;
+ height: 100%;
line-height: 1;
}
}
diff --git a/src/lib/form/search-bar/search-bar.component.ts b/src/lib/form/search-bar/search-bar.component.ts
index 0ae8cc11..a45a67b5 100644
--- a/src/lib/form/search-bar/search-bar.component.ts
+++ b/src/lib/form/search-bar/search-bar.component.ts
@@ -1,16 +1,16 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
- selector: 'app-search-bar',
- templateUrl: './search-bar.component.html',
- styleUrls: ['./search-bar.component.scss']
+ selector: 'reloadly-search-bar',
+ templateUrl: './search-bar.component.html',
+ styleUrls: ['./search-bar.component.scss']
})
export class SearchBarComponent {
- @Input() placeholder:string = 'Search';
+ @Input() placeholder: string = 'Search';
@Input() size: 'small' | 'medium' | 'large' = 'medium';
@Input() query: string = '';
@Output() queryChange: EventEmitter = new EventEmitter();
- constructor() {}
-
+ constructor() { }
+
}
diff --git a/src/lib/reloadly-ui.module.ts b/src/lib/reloadly-ui.module.ts
index 7cf5a1e9..314a25db 100644
--- a/src/lib/reloadly-ui.module.ts
+++ b/src/lib/reloadly-ui.module.ts
@@ -1,9 +1,10 @@
import { NgModule } from '@angular/core';
import { ComponentsModule } from './components/components.module';
import { ReloadlyModal } from './components/modal/reloadly-modal';
+import { DirectivesModule } from './directives/directives.module';
@NgModule({
- imports: [ComponentsModule],
- exports: [ComponentsModule],
+ imports: [ComponentsModule, DirectivesModule],
+ exports: [ComponentsModule, DirectivesModule],
providers: [ReloadlyModal]
})
export class ReloadlyUiModule { }
diff --git a/src/public-api.ts b/src/public-api.ts
index cf740c32..9f1d41ce 100644
--- a/src/public-api.ts
+++ b/src/public-api.ts
@@ -5,10 +5,8 @@
//@TODO: please review this file, seems to me that some components are exported multi times. Ex: export * from component.module and then individual components also. Ideally, we would export from modules, component, containers, form..
import { SelectableItem } from './lib/models/selectable-item';
import { CardComponent } from './lib/containers/card/card.component';
-import { DateComponent } from './lib/components/date/date.component';
import { SearchBarComponent } from './lib/form/search-bar/search-bar.component';
import { MenuDirective } from './lib/components/menu/directives/menu.directive';
-import { OutsideClickDirective } from './lib/directives/outside-click.directive';
import { ButtonDirective } from './lib/components/button/directives/button.directive';
import { RangeSliderComponent } from './lib/form/range-slider/range-slider.component';
import { BadgeComponent, BadgeVariant } from './lib/components/badge/badge.component';
@@ -21,28 +19,30 @@ import { FormLabelComponent } from './lib/components/form-group/form-label/form-
import { FormGroupDirective } from './lib/components/form-group/directives/form-group.directive';
import { InputGroupDirective } from './lib/components/input-group/directives/input-group.directive';
import { ReloadlyQuickActionComponent } from './lib/components/quick-action/quick-action.component';
-import { BreadcrumbsComponent } from './lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component';
+import { ReloadlyBreadcrumbsComponent } from './lib/components/breadcrumb-group/breadcrumbs/breadcrumbs.component';
import { QuickAction, QuickActionInterface, QuickActionPosition, QuickActionType } from './lib/models/quick-action';
import { ReloadlyModalOutletComponent } from './lib/components/modal/reloadly-modal-outlet/reloadly-modal-outlet.component';
+import { ReloadlyAccordionItemContent } from './lib/components/accordion/directives/accordion-item-content.directive';
import { BreadcrumbItemComponent } from './lib/components/breadcrumb-group/breadcrumb-item/breadcrumb-item.component';
+import { ReloadlyExpandableTileComponent } from './lib/components/expandable-tile/expandable-tile.component';
import { DropdownConfig, SelectComponent, SelectOptionItem } from './lib/components/select/select.component';
+import { ReloadlyAccordionItem } from './lib/components/accordion/directives/accordion-item.directive';
import { InputLabelComponent } from './lib/components/input-group/input-label/input-label.component';
import { SelectionGridComponent } from './lib/containers/selection-grid/selectable-grid.component';
import { MenuDividerComponent } from './lib/components/menu/menu-divider/menu-divider.component';
import { MenuSectionComponent } from './lib/components/menu/menu-section/menu-section.component';
-import { EmptyStateComponent } from './lib/components/empty-state/empty-state.component';
+import { ReloadlyAccordionComponent } from './lib/components/accordion/accordion.component';
import { TooltipDirective } from './lib/components/tooltip/directive/tooltip.directive';
import { PaginationComponent } from './lib/components/pagination/pagination.component';
import { PreloaderComponent } from './lib/components/preloader/preloader.component';
import { SidebarComponent } from './lib/components/sidebar/sidebar.component';
import { TooltipComponent } from './lib/components/tooltip/tooltip.component';
-import { StepperComponent } from './lib/containers/stepper/stepper.component';
+import { ReloadlyStepperComponent } from './lib/containers/stepper/stepper.component';
import { StepComponent } from './lib/containers/stepper/step/step.component';
import { SwitchComponent } from './lib/components/switch/switch.component';
import { SelectableViewStyle } from './lib/enums/selectable-view-style';
import { SelectableViewType } from './lib/enums/selectable-view-type';
import { MenuComponent } from './lib/components/menu/menu.component';
-import { TagComponent } from './lib/components/tag/tag.component';
import { SvgComponent } from './lib/components/svg/svg.component';
import { TableDirective } from './lib/directives/table.directive';
export * from './lib/reloadly-ui.module';
@@ -50,7 +50,6 @@ export * from './lib/reloadly-ui.module';
export * from './lib/components/components.module';
export {
SvgComponent,
- TagComponent,
PaginationComponent,
SidebarComponent,
SwitchComponent,
@@ -62,12 +61,10 @@ export {
InputGroupDirective,
InputLabelComponent,
TableDirective,
- DateComponent,
PreloaderComponent,
DropdownConfig,
- BreadcrumbsComponent,
- BreadcrumbItemComponent,
- EmptyStateComponent
+ ReloadlyBreadcrumbsComponent,
+ BreadcrumbItemComponent
};
export * from './lib/form/form.module';
@@ -100,7 +97,7 @@ export * from './lib/containers/containers.module';
export {
CardComponent,
SelectionGridComponent,
- StepperComponent,
+ ReloadlyStepperComponent,
StepComponent,
};
@@ -111,8 +108,19 @@ export {
};
export * from './lib/directives/directives.module';
-export { OutsideClickDirective }
export * from './lib/components/quick-action/quick-action.module';
export { ReloadlyQuickActionComponent, ReloadlyQuickActionService };
export { QuickAction, QuickActionInterface, QuickActionPosition, QuickActionType };
+
+export * from './lib/components/accordion/accordion.module';
+export {
+ ReloadlyAccordionComponent,
+ ReloadlyAccordionItem,
+ ReloadlyAccordionItemContent
+};
+
+export * from './lib/components/expandable-tile/expandable-tile.module'
+export {
+ ReloadlyExpandableTileComponent
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
index facef3f3..09553bf8 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -119,32 +119,40 @@
color: $reloadly-violet;
box-shadow: 0px 1px 3px 1px RGB(0 0 0 / 15%),
0px 1px 2px 0px RGB(0 0 0 / 30%);
- background: linear-gradient(0deg,
+ background: linear-gradient(
+ 0deg,
rgba(103, 80, 164, 0.05),
- rgba(103, 80, 164, 0.05)),
+ rgba(103, 80, 164, 0.05)
+ ),
#fffbfe;
&:hover {
color: $reloadly-violet;
- background: linear-gradient(0deg,
+ background: linear-gradient(
+ 0deg,
rgba(103, 80, 164, 0.05),
- rgba(103, 80, 164, 0.05)),
+ rgba(103, 80, 164, 0.05)
+ ),
#fffbfe;
}
&:focus {
color: $reloadly-violet;
- background: linear-gradient(0deg,
+ background: linear-gradient(
+ 0deg,
rgba(103, 80, 164, 0.05),
- rgba(103, 80, 164, 0.05)),
+ rgba(103, 80, 164, 0.05)
+ ),
#fffbfe;
}
&:active {
color: $reloadly-violet;
- background: linear-gradient(0deg,
+ background: linear-gradient(
+ 0deg,
rgba(103, 80, 164, 0.05),
- rgba(103, 80, 164, 0.05)),
+ rgba(103, 80, 164, 0.05)
+ ),
#fffbfe;
box-shadow: none;
}
@@ -552,19 +560,32 @@
&.lg {
padding: 10px 20px;
- font-size: $font-regular;
+ font-size: $font-size-rg;
font-weight: 450;
}
&.xl {
padding: 12px 24px;
- font-size: $font-regular;
+ font-size: $font-size-rg;
+ font-weight: 450;
+ }
+
+ &.md {
+ padding: 8px 12px;
+ font-size: $font-size-rg;
+ font-weight: 450;
+ }
+
+ &.sm {
+ padding: 6px 10px;
+ font-size: $font-size-rg;
font-weight: 450;
}
&.xs {
padding: 4px 8px;
border-radius: 4px;
+ font-size: $font-size-s;
&.filled {
&:focus {
@@ -586,7 +607,7 @@
.menu-item {
color: #393c40;
- font-size: $font-medium;
+ font-size: $font-size-s;
font-weight: 450;
line-height: 20px;
display: flex;
diff --git a/src/styles/forms.scss b/src/styles/forms.scss
index 6f0cda1e..2fa3b888 100644
--- a/src/styles/forms.scss
+++ b/src/styles/forms.scss
@@ -1,200 +1,19 @@
$input-shadow: inset 0 0.0625em 0.125em RBG(10 10 10 / .05);
-@mixin input-base {
- appearance: none;
- border: $border-width solid $input-border-color;
- border-radius: $input-radius;
- line-height: 1;
- max-width: 100%;
- width: 100%;
- min-height: 1em;
- font-size: 1rem;
- color: $reloadly-black-4;
- padding: $spacing-smallest;
- padding-top: 12px;
- background-color: $background-color;
-
- &:focus,
- &:active {
- outline: none;
- }
+@mixin disabled-input {
+ background: $reloadly-form-disabled;
+ border: 1px solid $border-color;
+ cursor: not-allowed;
- &::placeholder {
- color: $reloadly-black-4;
+ * {
+ cursor: not-allowed !important;
}
}
-@mixin hover-effect {
- border-color: darken($color: $input-border-color, $amount: 10);
-}
-
form {
- width: 100%;
- padding: $spacing-smaller 0;
-
- .entry {
- max-width: 100%;
- width: 100%;
- display: block;
- margin: $spacing-small 1px;
-
- .label {
- display: block;
- margin: $spacing-smallest 0;
- font-weight: 450;
- font-size: $font-medium;
- color: $reloadly-black-2;
- }
-
- .legend {
- display: inline-block;
- margin: $spacing-smallest 0;
- font-weight: 450;
- }
- }
-
- fieldset.entry {
-
- .input,
- .select {
- margin-bottom: $spacing-smallest;
- }
-
- div.select {
- @include input-base;
- box-shadow: $input-shadow;
- padding: $spacing-smallest 0;
- display: inline-block;
- max-width: 100%;
- position: relative;
- vertical-align: top;
- min-height: 1em;
-
- &:hover,
- &:active,
- &:focus {
- @include hover-effect;
- }
-
- &.disabled {
- @include disabled;
-
- select {
- background-color: $input-disabled-background-color;
-
- &:disabled {
- @include disabled;
- }
- }
- }
-
- &::after {
- border: 3px solid transparent;
- border-radius: 2px;
- border-right: 0;
- border-top: 0;
- content: " ";
- display: block;
- height: 0.625em;
- margin-top: -0.4375em;
- pointer-events: none;
- position: absolute;
- z-index: 4;
- right: 1.25em;
- top: 50%;
- transform: rotate(-45deg);
- transform-origin: center;
- width: 0.625em;
- border-color: $text;
- }
-
- select {
- padding: 0 $spacing-smallest;
- width: 100%;
- border: none;
- cursor: pointer;
- display: block;
- font-size: 1em;
- max-width: 100%;
- outline: none;
- appearance: none;
- min-height: 25px;
- background-color: $background-color;
- color: inherit;
- }
- }
- }
-}
-
-.input,
-.textarea {
- @include input-base;
- box-shadow: $input-shadow;
-
- &:hover,
- &:active,
- &:focus {
- @include hover-effect;
- }
-
- &:active,
- &:focus {
- border-color: darken($color: $input-border-color, $amount: 10);
- box-shadow: 0 0 0 0.125em darken($color: $input-border-color, $amount: 10);
- }
-
- &:disabled {
- @include disabled;
- }
-
- &:read-only {
- box-shadow: none;
- }
-}
-
-.textarea {
- width: 100%;
- resize: vertical;
- display: block;
- min-height: 8em;
-}
-
-.button {
- &-primary {
- @include input-base;
- background: $reloadly-violet;
- padding: $button-padding;
- font-weight: 450;
- font-size: $font-regular;
- color: $reloadly-white;
- border: none;
- cursor: pointer;
- transition: ease all 0.4s;
-
- &:hover {
- background-color: $reloadly-violet-2;
- }
- }
-
- &-cancel {
- @include input-base;
- background: $reloadly-black-6;
- padding: $button-padding;
- font-weight: 450;
- font-size: $font-regular;
- color: $reloadly-white;
- border: none;
- cursor: pointer;
- transition: ease all 0.4s;
-
- &:hover {
- background-color: $reloadly-black-6-hover;
- }
- }
+ padding: $spacing-10 0;
}
-// Form Group styles
-
.form-container {
width: 100%;
display: flex;
@@ -208,7 +27,6 @@ form {
border-radius: 4px;
}
-// New Input fields
.input-group {
display: flex;
flex-flow: column;
@@ -221,20 +39,23 @@ form {
border-radius: 4px;
outline: none;
font-weight: 400;
- font-size: $font-medium;
+ font-size: $font-size-s;
line-height: 20px;
transition: all ease 0.4s;
- box-shadow: 0px 0px 0px 3px transparent;
- display: flex;
+ box-shadow: 0px 0px 0px $box-halo-width transparent;
align-items: center;
&::placeholder {
- color: $reloadly-black-13;
+ color: $reloadly-grey;
}
&:focus {
border: 1px solid $border-color;
- box-shadow: 0px 0px 0px 3px rgba(58, 151, 212, 0.36);
+ box-shadow: 0px 0px 0px $box-halo-width rgba(58, 151, 212, 0.36);
+ }
+
+ &:disabled, &[disabled] {
+ @include disabled-input();
}
}
@@ -251,20 +72,14 @@ form {
}
.disabled-input {
- background: $reloadly-form-disabled;
- border: 1px solid $border-color;
+ @include disabled-input();
border-radius: 4px;
- cursor: not-allowed;
&:focus {
border: 1px solid $border-color;
border-radius: 4px;
box-shadow: none;
}
-
- * {
- cursor: not-allowed !important;
- }
}
.error-input {
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 8e3c5bac..82ae4699 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,4 +1,5 @@
@import "variables";
@import "fonts";
@import "forms";
-@import "button";
\ No newline at end of file
+@import "button";
+@import "table";
diff --git a/src/styles/table.scss b/src/styles/table.scss
index b4ef538d..ec811f13 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -1,11 +1,9 @@
.reloadly-table {
min-width: 640px;
width: 100%;
-
@media (min-width: 48em) {
min-width: 1024px;
}
-
thead {
tr {
th {
@@ -15,25 +13,32 @@
text-transform: uppercase;
font-style: normal;
color: $reloadly-table-head-color !important;
+ padding: $spacing-8;
padding-bottom: 5px;
padding-top: 10px;
border-width: 0 0 1px !important;
border-color: $reloadly-table-border-color;
+ border: 1px solid $reloadly-table-border-color;
+ vertical-align: middle !important;
}
}
}
-
tbody {
tr {
td {
font-size: 14px;
line-height: 20px;
font-style: normal;
- padding-bottom: 5px;
- padding-top: 24px;
+ padding: $spacing-8;
border-width: 0 0 1px !important;
border-color: $reloadly-table-border-color;
+ border: 1px solid $reloadly-table-border-color;
color: $reloadly-table-body-color;
+ vertical-align: middle !important;
+ text-wrap: nowrap;
+ }
+ &:hover {
+ background: rgb(250, 250, 250);
}
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d461f1f7..230d3962 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,6 +3,7 @@ $reloadly-light-blue: #d4e5ff;
$reloadly-mint: #53ff98;
$reloadly-violet: #7700ff;
$reloadly-violet-2: #852af9;
+$reloadly-indigo: #635bff;
$reloadly-violet-3: #c49ffd;
$reloadly-violet-4: #00163a;
$reloadly-violet-5: #f6edff;
@@ -12,19 +13,15 @@ $reloadly-white: #ffffff;
$reloadly-black: #000000;
$reloadly-black-1: #334054;
$reloadly-black-2: #606d80;
-$reloadly-black-3: #606a7a;
+$reloadly-black-3: #50565b;
+$reloadly-black-3-hover: #3e4246;
$reloadly-black-4: #868d95;
$reloadly-black-5: #0000008f;
-$reloadly-black-6: #50565b;
-$reloadly-black-6-hover: #3e4246;
+$reloadly-black-6: #38456c;
$reloadly-black-7: #3c4247;
-$reloadly-black-8: #3c4257;
-$reloadly-black-9: #38456c;
-$reloadly-black-10: #6a7383;
-$reloadly-black-11: #687385;
-$reloadly-black-12: #a3acb9;
-$reloadly-black-13: #a3acba;
-$reloadly-black-14: #484649;
+$reloadly-danger: #df1b41;
+$reloadly-orange: #ed6704;
+
$reloadly-table-head-color: #1a1f36;
$reloadly-table-body-color: #6a7383;
$reloadly-table-border-color: #ebeef1;
@@ -35,83 +32,57 @@ $reloadly-filled-hover: #5b05c3;
$reloadly-filled-pressed: #9c79ff;
$reloadly-filled-disabled: #f1efff;
$reloadly-secondary-btn: #479cab;
-$reloadly-danger: #df1b41;
-$reloadly-orange-1: #ed6704;
$reloadly-form-disabled: #f6f8fa;
$primary: $reloadly-blue;
$link: $reloadly-violet;
-$background-color: #ffffff;
-$text: #50565b;
+$text-color: #50565b;
+$text-color-2: #232d3d;
+$text-color-grey: #697077;
$input-radius: 4px;
$border-color: #d5dbe1;
$input-border-color: $reloadly-light-blue;
-$input-hover-border-color: $input-border-color;
-$input-disabled-background-color: $reloadly-disabled-color;
$family-sans-serif: "Futura", "Century Gothic", "Corbel", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
-// ... then derived variables are imported and overwritten
-//@import "bulma/sass/utilities/derived-variables";
// other variables
$input-bg-color: #d5d9e0;
$container-bg-color: #f3ebff;
$border-width: 1px;
+$border-radius-l: 16px;
+$border-radius-md: 10px;
$box-bg-color: #f2f4f8;
-$card-border: 1px solid #d5d9e0;
-$text-primary-color: #232d3d;
-$brand-color: #7700ff;
-$grey-text-color: #697077;
$box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.08);
+$box-halo-width: 3px;
+$brand-color: $reloadly-violet;
+$card-border: 1px solid #d5d9e0;
$header-height: 38px;
-$spacing-small: 1rem;
-$spacing-smaller: 0.8rem;
-$spacing-smallest: 0.6rem;
-$spacing-tiny: 0.4rem;
-$spacing-big: 2rem;
-$spacing-huge: 6rem;
-$button-padding: 12px 24px;
-$padding-small: 1rem;
-$padding-huge: 6rem;
-$border-radius-l: 16px;
-$border-radius-md: 10px;
-$font-size-l: 24px;
-$font-size-md: 20px;
-$font-size-sm: 16px;
+
+$spacing-4: 4px;
+$spacing-6: 6px;
+$spacing-8: 8px;
+$spacing-10: 10px;
+$spacing-12: 12px;
+$spacing-16: 16px;
+$spacing-24: 24px;
+$spacing-32: 32px;
+$spacing-64: 64px;
+$spacing-100: 100px;
$form-box-padding-small: 2px 8px;
$form-box-padding-medium: 4px 8px;
$form-box-padding-large: 8px;
-$font-small: 12px;
-$font-medium: 14px;
-$font-regular: 16px;
-$font-big: 18px;
-$font-huge: 22px;
-$margin-4: 4px;
-$margin-8: 8px;
-$margin-10: 10px;
-$margin-16: 16px;
-$margin-32: 32px;
+$font-size-xs: 12px;
+$font-size-s: 14px;
+$font-size-rg: 16px;
+$font-size-l: 18px;
+$font-size-xl: 20px;
+$font-size-xxl: 24px;
-$padding-4: 4px;
-$padding-8: 8px;
-$padding-10: 10px;
-$padding-16: 16px;
-$padding-24: 24px;
-$padding-32: 32px;
-$padding-64: 64px;
-$padding-100: 100px;
$gradient: linear-gradient(65.58deg, rgba(0, 66, 255, 0.5) -11.84%, rgba(235, 0, 27, 0.5) 98.75%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
-@mixin disabled {
- background-color: $input-disabled-background-color;
- border: 0;
- box-shadow: none;
- cursor: not-allowed;
-}
-
@mixin drop-shadow {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-}
\ No newline at end of file
+}