Initial Commit
Co-authored-by: Subin <subinthattaparambil@gmail.com> Co-authored-by: Manoj <manojmj92@gmail.com> Co-authored-by: Nithin <webofnithin@gmail.com>
This commit is contained in:
Pranav Raj Sreepuram
87
app/javascript/src/assets/scss/_animations.scss
Normal file
87
app/javascript/src/assets/scss/_animations.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
|
||||
/* Enter and leave animations can use different */
|
||||
/* durations and timing functions. */
|
||||
.slide-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-cubic);
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
@include transition(all .3s $ease-out-cubic);
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.slide-fade-enter {
|
||||
transform: translateX($space-micro);
|
||||
}
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX($space-medium);
|
||||
}
|
||||
|
||||
.conversations-list-enter-active, .conversations-list-leave-active {
|
||||
@include transition(all .25s $ease-out-cubic);
|
||||
}
|
||||
.conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateX($space-medium);
|
||||
}
|
||||
|
||||
.menu-list-enter-active, .menu-list-leave-active {
|
||||
@include transition(all .2s $ease-out-cubic);
|
||||
}
|
||||
.menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateX($space-medium);
|
||||
}
|
||||
|
||||
.slide-up-enter-active {
|
||||
@include transition(all .3s $ease-in-cubic);
|
||||
}
|
||||
|
||||
.slide-up-leave-active {
|
||||
@include transition(all .3s $ease-out-cubic);
|
||||
}
|
||||
|
||||
.slide-up-enter, .slide-up-leave-to
|
||||
/* .slide-fade-leave-active for <2.1.8 */ {
|
||||
transform: translateY(-$space-medium);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-slide-enter-active, .menu-slide-leave-active {
|
||||
@include transition(all .15s $ease-in-cubic);
|
||||
}
|
||||
|
||||
.menu-slide-enter, .menu-slide-leave-to
|
||||
/* .slide-fade-leave-active for <2.1.8 */ {
|
||||
@include transform(translateY($space-small));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.toast-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-sine);
|
||||
}
|
||||
.toast-fade-leave-active {
|
||||
@include transition(all .1s $ease-out-sine);
|
||||
}
|
||||
.toast-fade-enter, .toast-fade-leave-to
|
||||
/* .toast-fade-leave-active for <2.1.8 */ {
|
||||
@include transform(translateY(-$space-small));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.modal-fade-enter-active {
|
||||
@include transition(all .3s $ease-in-sine);
|
||||
}
|
||||
|
||||
.modal-fade-leave-active {
|
||||
@include transition(all .1s $ease-out-sine);
|
||||
}
|
||||
|
||||
.modal-fade-enter, .modal-fade-leave-to
|
||||
/* .slide-fade-leave-active for <2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
31
app/javascript/src/assets/scss/_foundation-custom.scss
Normal file
31
app/javascript/src/assets/scss/_foundation-custom.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.button {
|
||||
font-weight: $font-weight-medium;
|
||||
font-family: $body-font-family;
|
||||
|
||||
&.round {
|
||||
border-radius: 1000px;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.grey-btn {
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
max-width: 15rem;
|
||||
padding: $space-smaller $space-small;
|
||||
border-radius: $space-smaller;
|
||||
font-size: $font-size-mini;
|
||||
}
|
||||
649
app/javascript/src/assets/scss/_foundation-settings.scss
Normal file
649
app/javascript/src/assets/scss/_foundation-settings.scss
Normal file
@@ -0,0 +1,649 @@
|
||||
// Foundation for Sites Settings
|
||||
// -----------------------------
|
||||
//
|
||||
// Table of Contents:
|
||||
//
|
||||
// 1. Global
|
||||
// 2. Breakpoints
|
||||
// 3. The Grid
|
||||
// 4. Base Typography
|
||||
// 5. Typography Helpers
|
||||
// 6. Abide
|
||||
// 7. Accordion
|
||||
// 8. Accordion Menu
|
||||
// 9. Badge
|
||||
// 10. Breadcrumbs
|
||||
// 11. Button
|
||||
// 12. Button Group
|
||||
// 13. Callout
|
||||
// 14. Card
|
||||
// 15. Close Button
|
||||
// 16. Drilldown
|
||||
// 17. Dropdown
|
||||
// 18. Dropdown Menu
|
||||
// 19. Forms
|
||||
// 20. Label
|
||||
// 21. Media Object
|
||||
// 22. Menu
|
||||
// 23. Meter
|
||||
// 24. Off-canvas
|
||||
// 25. Orbit
|
||||
// 26. Pagination
|
||||
// 27. Progress Bar
|
||||
// 28. Responsive Embed
|
||||
// 29. Reveal
|
||||
// 30. Slider
|
||||
// 31. Switch
|
||||
// 32. Table
|
||||
// 33. Tabs
|
||||
// 34. Thumbnail
|
||||
// 35. Title Bar
|
||||
// 36. Tooltip
|
||||
// 37. Top Bar
|
||||
|
||||
@import "~foundation-sites/scss/util/util";
|
||||
|
||||
// 1. Global
|
||||
// ---------
|
||||
|
||||
$global-font-size: 10px;
|
||||
$global-width: 100%;
|
||||
$global-lineheight: 1.5;
|
||||
$foundation-palette: (
|
||||
primary: $color-woot,
|
||||
secondary: #777,
|
||||
success: #13ce66,
|
||||
warning: #ffc82c,
|
||||
alert: #ff4949
|
||||
);
|
||||
$light-gray: #c0ccda;
|
||||
$medium-gray: #8492a6;
|
||||
$dark-gray: $color-gray;
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
$body-background: $white;
|
||||
$body-font-color: $color-body;
|
||||
$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
$body-antialiased: true;
|
||||
$global-margin: $space-one;
|
||||
$global-padding: $space-one;
|
||||
$global-weight-normal: normal;
|
||||
$global-weight-bold: bold;
|
||||
$global-radius: 0;
|
||||
$global-text-direction: ltr;
|
||||
$global-flexbox: false;
|
||||
$print-transparent-backgrounds: true;
|
||||
|
||||
@include add-foundation-colors;
|
||||
|
||||
// 2. Breakpoints
|
||||
// --------------
|
||||
|
||||
$breakpoints: (
|
||||
small: 0,
|
||||
medium: 640px,
|
||||
large: 1024px,
|
||||
xlarge: 1200px,
|
||||
xxlarge: 1440px
|
||||
);
|
||||
$print-breakpoint: large;
|
||||
$breakpoint-classes: (small medium large);
|
||||
|
||||
// 3. The Grid
|
||||
// -----------
|
||||
|
||||
$grid-row-width: $global-width;
|
||||
$grid-column-count: 12;
|
||||
$grid-column-gutter: (
|
||||
small: $zero,
|
||||
medium: $zero
|
||||
);
|
||||
$grid-column-align-edge: true;
|
||||
$block-grid-max: 8;
|
||||
|
||||
// 4. Base Typography
|
||||
// ------------------
|
||||
|
||||
$header-font-family: $body-font-family;
|
||||
$header-font-weight: $global-weight-normal;
|
||||
$header-font-style: normal;
|
||||
$font-family-monospace: $body-font-family;
|
||||
$header-color: $color-heading;
|
||||
$header-lineheight: 1.4;
|
||||
$header-margin-bottom: 0.5rem;
|
||||
$header-styles: (
|
||||
small: (
|
||||
"h1": (
|
||||
"font-size": 24
|
||||
),
|
||||
"h2": (
|
||||
"font-size": 20
|
||||
),
|
||||
"h3": (
|
||||
"font-size": 19
|
||||
),
|
||||
"h4": (
|
||||
"font-size": 18
|
||||
),
|
||||
"h5": (
|
||||
"font-size": 17
|
||||
),
|
||||
"h6": (
|
||||
"font-size": 16
|
||||
)
|
||||
),
|
||||
medium: (
|
||||
"h1": (
|
||||
"font-size": 48
|
||||
),
|
||||
"h2": (
|
||||
"font-size": 40
|
||||
),
|
||||
"h3": (
|
||||
"font-size": 31
|
||||
),
|
||||
"h4": (
|
||||
"font-size": 25
|
||||
),
|
||||
"h5": (
|
||||
"font-size": 20
|
||||
),
|
||||
"h6": (
|
||||
"font-size": 16
|
||||
)
|
||||
)
|
||||
);
|
||||
$header-text-rendering: optimizeLegibility;
|
||||
$small-font-size: 80%;
|
||||
$header-small-font-color: $medium-gray;
|
||||
$paragraph-lineheight: 1.6;
|
||||
$paragraph-margin-bottom: 1rem;
|
||||
$paragraph-text-rendering: optimizeLegibility;
|
||||
$code-color: $black;
|
||||
$code-font-family: $font-family-monospace;
|
||||
$code-font-weight: $global-weight-normal;
|
||||
$code-background: $light-gray;
|
||||
$code-border: 1px solid $medium-gray;
|
||||
$code-padding: rem-calc(2 5 1);
|
||||
$anchor-color: $primary-color;
|
||||
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
|
||||
$anchor-text-decoration: none;
|
||||
$anchor-text-decoration-hover: none;
|
||||
$hr-width: $global-width;
|
||||
$hr-border: 1px solid $medium-gray;
|
||||
$hr-margin: rem-calc(20) auto;
|
||||
$list-lineheight: $paragraph-lineheight;
|
||||
$list-margin-bottom: $paragraph-margin-bottom;
|
||||
$list-style-type: disc;
|
||||
$list-style-position: outside;
|
||||
$list-side-margin: 1.25rem;
|
||||
$list-nested-side-margin: 1.25rem;
|
||||
$defnlist-margin-bottom: 1rem;
|
||||
$defnlist-term-weight: $global-weight-bold;
|
||||
$defnlist-term-margin-bottom: 0.3rem;
|
||||
$blockquote-color: $dark-gray;
|
||||
$blockquote-padding: rem-calc(9 20 0 19);
|
||||
$blockquote-border: 1px solid $medium-gray;
|
||||
$cite-font-size: rem-calc(13);
|
||||
$cite-color: $dark-gray;
|
||||
$cite-pseudo-content: "\2014 \0020";
|
||||
$keystroke-font: $font-family-monospace;
|
||||
$keystroke-color: $black;
|
||||
$keystroke-background: $light-gray;
|
||||
$keystroke-padding: rem-calc(2 4 0);
|
||||
$keystroke-radius: $global-radius;
|
||||
$abbr-underline: 1px dotted $black;
|
||||
|
||||
// 5. Typography Helpers
|
||||
// ---------------------
|
||||
|
||||
$lead-font-size: $global-font-size * 1.25;
|
||||
$lead-lineheight: 1.6;
|
||||
$subheader-lineheight: 1.4;
|
||||
$subheader-color: $dark-gray;
|
||||
$subheader-font-weight: $global-weight-normal;
|
||||
$subheader-margin-top: 0.2rem;
|
||||
$subheader-margin-bottom: 0.5rem;
|
||||
$stat-font-size: 2.5rem;
|
||||
|
||||
// 6. Abide
|
||||
// --------
|
||||
|
||||
$abide-inputs: true;
|
||||
$abide-labels: true;
|
||||
$input-background-invalid: get-color(alert);
|
||||
$form-label-color-invalid: get-color(alert);
|
||||
$input-error-color: get-color(alert);
|
||||
$input-error-font-size: rem-calc(12);
|
||||
$input-error-font-weight: $global-weight-bold;
|
||||
|
||||
// 7. Accordion
|
||||
// ------------
|
||||
|
||||
$accordion-background: $white;
|
||||
$accordion-plusminus: true;
|
||||
$accordion-title-font-size: rem-calc(12);
|
||||
$accordion-item-color: $primary-color;
|
||||
$accordion-item-background-hover: $light-gray;
|
||||
$accordion-item-padding: 1.25rem 1rem;
|
||||
$accordion-content-background: $white;
|
||||
$accordion-content-border: 1px solid $light-gray;
|
||||
$accordion-content-color: $body-font-color;
|
||||
$accordion-content-padding: 1rem;
|
||||
|
||||
// 8. Accordion Menu
|
||||
// -----------------
|
||||
|
||||
$accordionmenu-arrows: true;
|
||||
$accordionmenu-arrow-color: $primary-color;
|
||||
$accordionmenu-arrow-size: 6px;
|
||||
|
||||
// 9. Badge
|
||||
// --------
|
||||
|
||||
$badge-background: $primary-color;
|
||||
$badge-color: $white;
|
||||
$badge-color-alt: $black;
|
||||
$badge-palette: $foundation-palette;
|
||||
$badge-padding: 0.3em;
|
||||
$badge-minwidth: 2.1em;
|
||||
$badge-font-size: 0.6rem;
|
||||
|
||||
// 10. Breadcrumbs
|
||||
// ---------------
|
||||
|
||||
$breadcrumbs-margin: 0 0 $global-margin 0;
|
||||
$breadcrumbs-item-font-size: rem-calc(11);
|
||||
$breadcrumbs-item-color: $primary-color;
|
||||
$breadcrumbs-item-color-current: $black;
|
||||
$breadcrumbs-item-color-disabled: $medium-gray;
|
||||
$breadcrumbs-item-margin: 0.75rem;
|
||||
$breadcrumbs-item-uppercase: true;
|
||||
$breadcrumbs-item-slash: true;
|
||||
|
||||
// 11. Button
|
||||
// ----------
|
||||
|
||||
$button-padding: $space-one $space-two;
|
||||
$button-margin: 0 0 $global-margin 0;
|
||||
$button-fill: solid;
|
||||
$button-background: $primary-color;
|
||||
$button-background-hover: scale-color($button-background, $lightness: -15%);
|
||||
$button-color: $white;
|
||||
$button-color-alt: $white;
|
||||
$button-radius: $global-radius;
|
||||
$button-sizes: (
|
||||
tiny: $font-size-micro,
|
||||
small: $font-size-mini,
|
||||
default: $font-size-default,
|
||||
large: $font-size-large
|
||||
);
|
||||
$button-palette: $foundation-palette;
|
||||
$button-opacity-disabled: 0.25;
|
||||
$button-background-hover-lightness: -20%;
|
||||
$button-hollow-hover-lightness: -50%;
|
||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
||||
|
||||
// 12. Button Group
|
||||
// ----------------
|
||||
|
||||
$buttongroup-margin: 1rem;
|
||||
$buttongroup-spacing: 1px;
|
||||
$buttongroup-child-selector: ".button";
|
||||
$buttongroup-expand-max: 6;
|
||||
$buttongroup-radius-on-each: true;
|
||||
|
||||
// 13. Callout
|
||||
// -----------
|
||||
|
||||
$callout-background: $white;
|
||||
$callout-background-fade: 85%;
|
||||
$callout-border: 1px solid rgba($black, 0.25);
|
||||
$callout-margin: 0 0 1rem 0;
|
||||
$callout-padding: 1rem;
|
||||
$callout-font-color: $body-font-color;
|
||||
$callout-font-color-alt: $body-background;
|
||||
$callout-radius: $global-radius;
|
||||
$callout-link-tint: 30%;
|
||||
|
||||
// 14. Card
|
||||
// --------
|
||||
|
||||
$card-background: $white;
|
||||
$card-font-color: $body-font-color;
|
||||
$card-divider-background: $light-gray;
|
||||
$card-border: 1px solid $light-gray;
|
||||
$card-shadow: none;
|
||||
$card-border-radius: $global-radius;
|
||||
$card-padding: $global-padding;
|
||||
$card-margin: $global-margin;
|
||||
|
||||
// 15. Close Button
|
||||
// ----------------
|
||||
|
||||
$closebutton-position: right top;
|
||||
$closebutton-offset-horizontal: (
|
||||
small: 0.66rem,
|
||||
medium: 1rem
|
||||
);
|
||||
$closebutton-offset-vertical: (
|
||||
small: 0.33em,
|
||||
medium: 0.5rem
|
||||
);
|
||||
$closebutton-size: (
|
||||
small: 1.5em,
|
||||
medium: 2em
|
||||
);
|
||||
$closebutton-lineheight: 1;
|
||||
$closebutton-color: $dark-gray;
|
||||
$closebutton-color-hover: $black;
|
||||
|
||||
// 16. Drilldown
|
||||
// -------------
|
||||
|
||||
$drilldown-transition: transform 0.15s linear;
|
||||
$drilldown-arrows: true;
|
||||
$drilldown-arrow-color: $primary-color;
|
||||
$drilldown-arrow-size: 6px;
|
||||
$drilldown-background: $white;
|
||||
|
||||
// 17. Dropdown
|
||||
// ------------
|
||||
|
||||
$dropdown-padding: 1rem;
|
||||
$dropdown-background: $body-background;
|
||||
$dropdown-border: 1px solid $medium-gray;
|
||||
$dropdown-font-size: 1rem;
|
||||
$dropdown-width: 300px;
|
||||
$dropdown-radius: $global-radius;
|
||||
$dropdown-sizes: (
|
||||
tiny: 100px,
|
||||
small: 200px,
|
||||
large: 400px
|
||||
);
|
||||
|
||||
// 18. Dropdown Menu
|
||||
// -----------------
|
||||
|
||||
$dropdownmenu-arrows: true;
|
||||
$dropdownmenu-arrow-color: $anchor-color;
|
||||
$dropdownmenu-arrow-size: 6px;
|
||||
$dropdownmenu-min-width: 200px;
|
||||
$dropdownmenu-background: $white;
|
||||
$dropdownmenu-border: 1px solid $medium-gray;
|
||||
|
||||
// 19. Forms
|
||||
// ---------
|
||||
|
||||
$fieldset-border: 1px solid $light-gray;
|
||||
$fieldset-padding: $space-two;
|
||||
$fieldset-margin: $space-one $zero;
|
||||
$legend-padding: rem-calc(0 3);
|
||||
$form-spacing: $space-normal;
|
||||
$helptext-color: $header-color;
|
||||
$helptext-font-size: $font-size-small;
|
||||
$helptext-font-style: italic;
|
||||
$input-prefix-color: $header-color;
|
||||
$input-prefix-background: $light-gray;
|
||||
$input-prefix-border: 1px solid $light-gray;
|
||||
$input-prefix-padding: 1rem;
|
||||
$form-label-color: $header-color;
|
||||
$form-label-font-size: rem-calc(14);
|
||||
$form-label-font-weight: $font-weight-medium;
|
||||
$form-label-line-height: 1.8;
|
||||
$select-background: $white;
|
||||
$select-triangle-color: $dark-gray;
|
||||
$select-radius: $global-radius;
|
||||
$input-color: $header-color;
|
||||
$input-placeholder-color: $light-gray;
|
||||
$input-font-family: inherit;
|
||||
$input-font-size: $font-size-default;
|
||||
$input-font-weight: $global-weight-normal;
|
||||
$input-background: $white;
|
||||
$input-background-focus: $white;
|
||||
$input-background-disabled: $light-gray;
|
||||
$input-border: 1px solid $light-gray;
|
||||
$input-border-focus: 1px solid lighten($primary-color, 15%);
|
||||
$input-shadow: 0;
|
||||
$input-shadow-focus: 0;
|
||||
$input-cursor-disabled: not-allowed;
|
||||
$input-transition: border-color 0.25s ease-in-out;
|
||||
$input-number-spinners: true;
|
||||
$input-radius: $global-radius;
|
||||
$form-button-radius: $global-radius;
|
||||
|
||||
// 20. Label
|
||||
// ---------
|
||||
|
||||
$label-background: $primary-color;
|
||||
$label-color: $white;
|
||||
$label-color-alt: $black;
|
||||
$label-palette: $foundation-palette;
|
||||
$label-font-size: $font-size-micro;
|
||||
$label-padding: $space-micro $space-smaller;
|
||||
$label-radius: $space-micro;
|
||||
|
||||
// 21. Media Object
|
||||
// ----------------
|
||||
|
||||
$mediaobject-margin-bottom: $global-margin;
|
||||
$mediaobject-section-padding: $global-padding;
|
||||
$mediaobject-image-width-stacked: 100%;
|
||||
|
||||
// 22. Menu
|
||||
// --------
|
||||
|
||||
$menu-margin: 0;
|
||||
$menu-margin-nested: $space-medium;
|
||||
$menu-item-padding: $space-one;
|
||||
$menu-item-color-active: $white;
|
||||
$menu-item-background-active: $color-background;
|
||||
$menu-icon-spacing: 0.25rem;
|
||||
$menu-item-background-hover: $light-gray;
|
||||
$menu-border: $light-gray;
|
||||
|
||||
// 23. Meter
|
||||
// ---------
|
||||
|
||||
$meter-height: 1rem;
|
||||
$meter-radius: $global-radius;
|
||||
$meter-background: $medium-gray;
|
||||
$meter-fill-good: $success-color;
|
||||
$meter-fill-medium: $warning-color;
|
||||
$meter-fill-bad: $alert-color;
|
||||
|
||||
// 24. Off-canvas
|
||||
// --------------
|
||||
|
||||
$offcanvas-size: 250px;
|
||||
$offcanvas-vertical-size: 250px;
|
||||
$offcanvas-background: $light-gray;
|
||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
|
||||
$offcanvas-push-zindex: 1;
|
||||
$offcanvas-overlap-zindex: 10;
|
||||
$offcanvas-reveal-zindex: 1;
|
||||
$offcanvas-transition-length: 0.5s;
|
||||
$offcanvas-transition-timing: ease;
|
||||
$offcanvas-fixed-reveal: true;
|
||||
$offcanvas-exit-background: rgba($white, 0.25);
|
||||
$maincontent-class: "off-canvas-content";
|
||||
|
||||
// 25. Orbit
|
||||
// ---------
|
||||
|
||||
$orbit-bullet-background: $medium-gray;
|
||||
$orbit-bullet-background-active: $dark-gray;
|
||||
$orbit-bullet-diameter: 1.2rem;
|
||||
$orbit-bullet-margin: 0.1rem;
|
||||
$orbit-bullet-margin-top: 0.8rem;
|
||||
$orbit-bullet-margin-bottom: 0.8rem;
|
||||
$orbit-caption-background: rgba($black, 0.5);
|
||||
$orbit-caption-padding: 1rem;
|
||||
$orbit-control-background-hover: rgba($black, 0.5);
|
||||
$orbit-control-padding: 1rem;
|
||||
$orbit-control-zindex: 10;
|
||||
|
||||
// 26. Pagination
|
||||
// --------------
|
||||
|
||||
$pagination-font-size: rem-calc(14);
|
||||
$pagination-margin-bottom: $global-margin;
|
||||
$pagination-item-color: $black;
|
||||
$pagination-item-padding: rem-calc(3 10);
|
||||
$pagination-item-spacing: rem-calc(1);
|
||||
$pagination-radius: $global-radius;
|
||||
$pagination-item-background-hover: $light-gray;
|
||||
$pagination-item-background-current: $primary-color;
|
||||
$pagination-item-color-current: $white;
|
||||
$pagination-item-color-disabled: $medium-gray;
|
||||
$pagination-ellipsis-color: $black;
|
||||
$pagination-mobile-items: false;
|
||||
$pagination-mobile-current-item: false;
|
||||
$pagination-arrows: true;
|
||||
|
||||
// 27. Progress Bar
|
||||
// ----------------
|
||||
|
||||
$progress-height: 1rem;
|
||||
$progress-background: $medium-gray;
|
||||
$progress-margin-bottom: $global-margin;
|
||||
$progress-meter-background: $primary-color;
|
||||
$progress-radius: $global-radius;
|
||||
|
||||
// 28. Responsive Embed
|
||||
// --------------------
|
||||
|
||||
$responsive-embed-margin-bottom: rem-calc(16);
|
||||
$responsive-embed-ratios: (
|
||||
default: 4 by 3,
|
||||
widescreen: 16 by 9
|
||||
);
|
||||
|
||||
// 29. Reveal
|
||||
// ----------
|
||||
|
||||
$reveal-background: $white;
|
||||
$reveal-width: 600px;
|
||||
$reveal-max-width: $global-width;
|
||||
$reveal-padding: $global-padding;
|
||||
$reveal-border: 1px solid $medium-gray;
|
||||
$reveal-radius: $global-radius;
|
||||
$reveal-zindex: 1005;
|
||||
$reveal-overlay-background: rgba($black, 0.45);
|
||||
|
||||
// 30. Slider
|
||||
// ----------
|
||||
|
||||
$slider-width-vertical: 0.5rem;
|
||||
$slider-transition: all 0.2s ease-in-out;
|
||||
$slider-height: 0.5rem;
|
||||
$slider-background: $light-gray;
|
||||
$slider-fill-background: $medium-gray;
|
||||
$slider-handle-height: 1.4rem;
|
||||
$slider-handle-width: 1.4rem;
|
||||
$slider-handle-background: $primary-color;
|
||||
$slider-opacity-disabled: 0.25;
|
||||
$slider-radius: $global-radius;
|
||||
|
||||
// 31. Switch
|
||||
// ----------
|
||||
|
||||
$switch-background: $light-gray;
|
||||
$switch-background-active: $primary-color;
|
||||
$switch-height: $space-two;
|
||||
$switch-height-tiny: $space-slab;
|
||||
$switch-height-small: $space-normal;
|
||||
$switch-height-large: $space-large;
|
||||
$switch-radius: $space-large;
|
||||
$switch-margin: $global-margin;
|
||||
$switch-paddle-background: $white;
|
||||
$switch-paddle-offset: $space-micro;
|
||||
$switch-paddle-radius: $space-large;
|
||||
$switch-paddle-transition: all 0.15s ease-out;
|
||||
|
||||
// 32. Table
|
||||
// ---------
|
||||
|
||||
$table-background: transparent;
|
||||
$table-color-scale: 5%;
|
||||
$table-border: 1px solid smart-scale($color-heading, $table-color-scale);
|
||||
$table-padding: rem-calc(8 10 10);
|
||||
$table-hover-scale: 2%;
|
||||
$table-row-hover: darken($table-background, $table-hover-scale);
|
||||
$table-row-stripe-hover: darken(
|
||||
$table-background,
|
||||
$table-color-scale + $table-hover-scale
|
||||
);
|
||||
$table-is-striped: false;
|
||||
$table-striped-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-stripe: even;
|
||||
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
|
||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
|
||||
$table-foot-background: smart-scale($table-background, $table-color-scale);
|
||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
|
||||
$table-head-font-color: $body-font-color;
|
||||
$table-foot-font-color: $body-font-color;
|
||||
$show-header-for-stacked: false;
|
||||
|
||||
// 33. Tabs
|
||||
// --------
|
||||
|
||||
$tab-margin: 0;
|
||||
|
||||
$tab-background: transparent;
|
||||
$tab-background-active: transparent;
|
||||
$tab-item-font-size: $font-size-small;
|
||||
$tab-item-background-hover: transparent;
|
||||
$tab-item-padding: $space-one $zero;
|
||||
$tab-color: $primary-color;
|
||||
$tab-active-color: $primary-color;
|
||||
$tab-expand-max: 6;
|
||||
$tab-content-background: transparent;
|
||||
$tab-content-border: transparent;
|
||||
$tab-content-color: foreground($tab-background, $primary-color);
|
||||
$tab-content-padding: 1rem;
|
||||
|
||||
// 34. Thumbnail
|
||||
// -------------
|
||||
|
||||
$thumbnail-border: solid 4px $white;
|
||||
$thumbnail-margin-bottom: $global-margin;
|
||||
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
|
||||
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
|
||||
$thumbnail-transition: box-shadow 200ms ease-out;
|
||||
$thumbnail-radius: $global-radius;
|
||||
|
||||
// 35. Title Bar
|
||||
// -------------
|
||||
|
||||
$titlebar-background: $black;
|
||||
$titlebar-color: $white;
|
||||
$titlebar-padding: 0.5rem;
|
||||
$titlebar-text-font-weight: bold;
|
||||
$titlebar-icon-color: $white;
|
||||
$titlebar-icon-color-hover: $medium-gray;
|
||||
$titlebar-icon-spacing: 0.25rem;
|
||||
|
||||
// 36. Tooltip
|
||||
// -----------
|
||||
|
||||
$has-tip-font-weight: $global-weight-bold;
|
||||
$has-tip-border-bottom: dotted 1px $dark-gray;
|
||||
$tooltip-background-color: $black;
|
||||
$tooltip-color: $white;
|
||||
$tooltip-padding: 0.75rem;
|
||||
$tooltip-font-size: $font-size-mini;
|
||||
$tooltip-pip-width: 0.75rem;
|
||||
$tooltip-pip-height: $tooltip-pip-width * 0.866;
|
||||
$tooltip-radius: $global-radius;
|
||||
|
||||
// 37. Top Bar
|
||||
// -----------
|
||||
|
||||
$topbar-padding: 0.5rem;
|
||||
$topbar-background: $light-gray;
|
||||
$topbar-submenu-background: $topbar-background;
|
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
$topbar-input-width: 200px;
|
||||
$topbar-unstack-breakpoint: medium;
|
||||
58
app/javascript/src/assets/scss/_helper-classes.scss
Normal file
58
app/javascript/src/assets/scss/_helper-classes.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
.bg-light {
|
||||
@include background-light;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
}
|
||||
|
||||
.bottom-space-fix {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
@include full-height();
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@include color-spinner();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $space-medium;
|
||||
height: $space-medium;
|
||||
padding: $zero $space-medium;
|
||||
vertical-align: middle;
|
||||
|
||||
&.message {
|
||||
padding: $space-normal;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: $space-slab;
|
||||
background: $color-white;
|
||||
border-radius: $space-large;
|
||||
@include elegent-shadow;
|
||||
|
||||
&:before {
|
||||
margin-top: -$space-slab;
|
||||
margin-left: -$space-slab;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: $space-normal;
|
||||
height: $space-normal;
|
||||
|
||||
&:before {
|
||||
width: $space-normal;
|
||||
height: $space-normal;
|
||||
margin-top: -$space-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input, textarea {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
79
app/javascript/src/assets/scss/_layout.scss
Normal file
79
app/javascript/src/assets/scss/_layout.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-wrapper {
|
||||
@include full-height;
|
||||
@include flex-weight(1);
|
||||
width: 100%;
|
||||
}
|
||||
.app-root {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
}
|
||||
.app-content {
|
||||
@include flex;
|
||||
}
|
||||
|
||||
.view-box {
|
||||
@include full-height;
|
||||
height: 100vh;
|
||||
@include margin(0);
|
||||
@include space-between-column;
|
||||
}
|
||||
|
||||
.view-panel {
|
||||
@include flex-weight(1);
|
||||
@include flex-direction(column);
|
||||
@include margin($zero);
|
||||
@include padding($space-normal);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
overflow: scroll;
|
||||
@include padding($space-normal);
|
||||
.btn-fixed-right-top {
|
||||
position: fixed;
|
||||
top: $space-small;
|
||||
right: $space-small;
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $color-woot;
|
||||
font-size: $font-size-default;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-right: $space-normal;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
vertical-align: text-bottom;
|
||||
margin-right: $space-smaller;
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
.button-spinner {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.no-items-error-message {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
max-width: $space-mega;
|
||||
@include padding($space-one);
|
||||
}
|
||||
}
|
||||
206
app/javascript/src/assets/scss/_mixins.scss
Normal file
206
app/javascript/src/assets/scss/_mixins.scss
Normal file
@@ -0,0 +1,206 @@
|
||||
//borders
|
||||
@mixin border-nil() {
|
||||
border-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@mixin thin-border($color) {
|
||||
border: 1px solid $color;
|
||||
}
|
||||
|
||||
@mixin custom-border-bottom($size, $color) {
|
||||
border-bottom: $size solid $color;
|
||||
}
|
||||
|
||||
@mixin custom-border-top($size, $color) {
|
||||
border-top: $size solid $color;
|
||||
}
|
||||
|
||||
@mixin border-normal() {
|
||||
border: 1px solid $color-border;
|
||||
}
|
||||
@mixin border-normal-left() {
|
||||
border-left: 1px solid $color-border;
|
||||
}
|
||||
@mixin border-normal-top() {
|
||||
border-top: 1px solid $color-border;
|
||||
}
|
||||
@mixin border-normal-right() {
|
||||
border-right: 1px solid $color-border;
|
||||
}
|
||||
@mixin border-normal-bottom() {
|
||||
border-bottom: 1px solid $color-border;
|
||||
}
|
||||
|
||||
@mixin border-light() {
|
||||
border: 1px solid $color-border-light;
|
||||
}
|
||||
@mixin border-light-left() {
|
||||
border-left: 1px solid $color-border-light;
|
||||
}
|
||||
@mixin border-light-top() {
|
||||
border-top: 1px solid $color-border-light;
|
||||
}
|
||||
@mixin border-light-right() {
|
||||
border-right: 1px solid $color-border-light;
|
||||
}
|
||||
@mixin border-light-bottom() {
|
||||
border-bottom: 1px solid $color-border-light;
|
||||
}
|
||||
|
||||
// background
|
||||
@mixin background-gray() {
|
||||
background: $color-background;
|
||||
}
|
||||
|
||||
@mixin background-light() {
|
||||
background: $color-background-light;
|
||||
}
|
||||
|
||||
@mixin background-white() {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
// input form
|
||||
@mixin ghost-input() {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// flex-layout
|
||||
@mixin space-between() {
|
||||
@include display(flex);
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
@mixin space-between-column() {
|
||||
@include space-between;
|
||||
@include flex-direction(column);
|
||||
}
|
||||
@mixin space-between-row() {
|
||||
@include space-between;
|
||||
@include flex-direction(row);
|
||||
}
|
||||
|
||||
@mixin flex-shrink() {
|
||||
flex: flex-grid-column(shrink);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@mixin flex-weight($value) {
|
||||
// Grab flex-grow for older browsers.
|
||||
$flex-grow: nth($value, 1);
|
||||
|
||||
// 2009
|
||||
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||
|
||||
// 2011 (IE 10), 2012
|
||||
@include prefixer(flex, $value, webkit moz ms spec);
|
||||
}
|
||||
|
||||
// full height
|
||||
@mixin full-height() {
|
||||
height: 100%;
|
||||
// COmmenting because unneccessary scroll is apprearing on some pages eg: settings/agents / inboxes
|
||||
}
|
||||
@mixin round-corner() {
|
||||
border-radius: 1000px;
|
||||
}
|
||||
|
||||
@mixin scroll-on-hover() {
|
||||
@include transition(all .4s $ease-in-out-cubic);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin horizontal-scroll() {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@mixin elegent-shadow() {
|
||||
box-shadow: 0 10px 25px 0 rgba(49,49,93,0.15);
|
||||
}
|
||||
|
||||
@mixin elegant-card() {
|
||||
@include elegent-shadow;
|
||||
border-radius: $space-small;
|
||||
}
|
||||
|
||||
@mixin color-spinner() {
|
||||
@keyframes spinner {
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $space-medium;
|
||||
height: $space-medium;
|
||||
margin-top: -$space-one;
|
||||
margin-left: -$space-one;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.7);
|
||||
border-top-color: lighten($color-woot, 10%);
|
||||
animation: spinner .9s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------------
|
||||
// arrows
|
||||
// --------------------------------------------------------
|
||||
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
|
||||
// $color: hex, rgb or rbga
|
||||
// $size: px or em
|
||||
// @example
|
||||
// .element{
|
||||
// @include arrow(top, #000, 50px);
|
||||
// }
|
||||
@mixin arrow($direction, $color, $size){
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
content: '';
|
||||
|
||||
@if $direction == 'top' {
|
||||
border-left: $size solid transparent;
|
||||
border-right: $size solid transparent;
|
||||
border-bottom: $size solid $color;
|
||||
} @else if $direction == 'right' {
|
||||
border-top: $size solid transparent;
|
||||
border-bottom: $size solid transparent;
|
||||
border-left: $size solid $color;
|
||||
} @else if $direction == 'bottom' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
border-left: $size solid transparent;
|
||||
} @else if $direction == 'left' {
|
||||
border-top: $size solid transparent;
|
||||
border-right: $size solid $color;
|
||||
border-bottom: $size solid transparent;
|
||||
} @else if $direction == 'top-left' {
|
||||
border-top: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
} @else if $direction == 'top-right' {
|
||||
border-top: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
} @else if $direction == 'bottom-left' {
|
||||
border-bottom: $size solid $color;
|
||||
border-right: $size solid transparent;
|
||||
} @else if $direction == 'bottom-right' {
|
||||
border-bottom: $size solid $color;
|
||||
border-left: $size solid transparent;
|
||||
}
|
||||
}
|
||||
27
app/javascript/src/assets/scss/_typography.scss
Normal file
27
app/javascript/src/assets/scss/_typography.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.page-title {
|
||||
font-size: $font-size-big;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: $font-size-medium;
|
||||
}
|
||||
|
||||
.sub-block-title {
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
.text-block-title {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
82
app/javascript/src/assets/scss/_variables.scss
Normal file
82
app/javascript/src/assets/scss/_variables.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
// Font sizes
|
||||
$font-size-nano: 0.8rem;
|
||||
$font-size-micro: 1.0rem;
|
||||
$font-size-mini: 1.2rem;
|
||||
$font-size-small: 1.4rem;
|
||||
$font-size-default: 1.6rem;
|
||||
$font-size-medium: 1.8rem;
|
||||
$font-size-large: 2.2rem;
|
||||
$font-size-big: 2.4rem;
|
||||
$font-size-bigger: 3.0rem;
|
||||
$font-size-mega: 3.4rem;
|
||||
$font-size-giga: 4.0rem;
|
||||
|
||||
// spaces
|
||||
$zero: 0rem;
|
||||
$space-micro: 0.2rem;
|
||||
$space-smaller: 0.4rem;
|
||||
$space-small: 0.8rem;
|
||||
$space-one: 1rem;
|
||||
$space-slab: 1.2rem;
|
||||
$space-normal: 1.6rem;
|
||||
$space-two: 2.0rem;
|
||||
$space-medium: 2.4rem;
|
||||
$space-large: 3.2rem;
|
||||
$space-larger: 4.8rem;
|
||||
$space-jumbo: 6.4rem;
|
||||
$space-mega: 10.0rem;
|
||||
|
||||
// font-weight
|
||||
$font-weight-feather: 100;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-black: 700;
|
||||
|
||||
//Navbar
|
||||
$nav-bar-width: 23rem;
|
||||
$header-height: 5.6rem;
|
||||
|
||||
// Woot Logo
|
||||
$woot-logo-width: 20rem;
|
||||
$woot-logo-height: 8rem;
|
||||
$woot-logo-padding: $space-large $space-large $space-large $space-large;
|
||||
|
||||
// Colors
|
||||
$color-woot: #1f93ff;
|
||||
$color-gray: #6E6F73;
|
||||
$color-light-gray: #999A9B;
|
||||
$color-border: #E0E6ED;
|
||||
$color-border-light: #f0f4f5;
|
||||
$color-background: #EFF2F7;
|
||||
$color-background-light: #F9FAFC;
|
||||
$color-white: #FFFFFF;
|
||||
$color-body: #3C4858;
|
||||
$color-heading: #1F2D3D;
|
||||
$color-modal-header: #f1f1f1;
|
||||
// Thumbnail
|
||||
$thumbnail-radius: 4rem;
|
||||
|
||||
// chat-header
|
||||
$conv-header-height: 4rem;
|
||||
|
||||
// login
|
||||
|
||||
// Inbox List
|
||||
|
||||
$inbox-thumb-size: 4.8rem;
|
||||
|
||||
|
||||
// Spinner
|
||||
$spinkit-spinner-color: $color-white !default;
|
||||
$spinkit-spinner-margin: 0 0 0 1.6rem !default;
|
||||
$spinkit-size: 1.6rem !default;
|
||||
|
||||
// Snackbar default
|
||||
$woot-snackbar-bg: #323232;
|
||||
$woot-snackbar-button: #ffeb3b;
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
30
app/javascript/src/assets/scss/_woot.scss
Normal file
30
app/javascript/src/assets/scss/_woot.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@import 'typography';
|
||||
@import 'layout';
|
||||
@import 'animations';
|
||||
|
||||
@import 'foundation-custom';
|
||||
@import 'widgets/search-box';
|
||||
@import 'widgets/conv-header';
|
||||
@import 'widgets/thumbnail';
|
||||
@import 'widgets/conversation-card';
|
||||
@import 'widgets/conversation-view';
|
||||
@import 'widgets/reply-box';
|
||||
@import 'widgets/tabs';
|
||||
@import 'widgets/login';
|
||||
@import 'widgets/emojiinput';
|
||||
@import 'widgets/woot-tables';
|
||||
@import 'widgets/sidemenu';
|
||||
@import 'widgets/forms';
|
||||
@import 'widgets/buttons';
|
||||
@import 'widgets/snackbar';
|
||||
@import 'widgets/modal';
|
||||
@import 'widgets/states';
|
||||
@import 'widgets/report';
|
||||
@import 'widgets/billing';
|
||||
@import 'widgets/status-bar';
|
||||
|
||||
@import 'views/settings/inbox';
|
||||
@import 'views/settings/channel';
|
||||
@import 'views/signup';
|
||||
|
||||
@import 'plugins/multiselect';
|
||||
9
app/javascript/src/assets/scss/app.scss
Normal file
9
app/javascript/src/assets/scss/app.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import '~bourbon/app/assets/stylesheets/bourbon';
|
||||
@import 'variables';
|
||||
@import '~spinkit/scss/spinners/7-three-bounce';
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css');
|
||||
@import 'foundation-settings';
|
||||
@import 'mixins';
|
||||
@import 'helper-classes';
|
||||
@import '~foundation-sites/assets/foundation-flex';
|
||||
@import 'woot';
|
||||
27
app/javascript/src/assets/scss/plugins/_multiselect.scss
Normal file
27
app/javascript/src/assets/scss/plugins/_multiselect.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
// @import '~vue-multiselect/dist/vue-multiselect.min.css';
|
||||
.multiselect {
|
||||
min-height: 38px;
|
||||
margin-bottom: $space-normal;
|
||||
|
||||
> .multiselect__tags {
|
||||
padding-top: $zero;
|
||||
min-height: 38px;
|
||||
border-radius: 0;
|
||||
border: 1px solid $light-gray;
|
||||
@include margin(0);
|
||||
|
||||
.multiselect__tag {
|
||||
margin-top: $space-smaller;
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
@include ghost-input;
|
||||
margin-bottom: $zero;
|
||||
@include padding($zero);
|
||||
}
|
||||
.multiselect__single {
|
||||
@include padding($space-small);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
91
app/javascript/src/assets/scss/views/_signup.scss
Normal file
91
app/javascript/src/assets/scss/views/_signup.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
.signup {
|
||||
// margin-top: $space-larger*1.2;
|
||||
|
||||
.signup__hero {
|
||||
margin-bottom: $space-larger*1.5;
|
||||
|
||||
.hero__logo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
margin-top: $space-large;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.hero__sub {
|
||||
font-size: $font-size-medium;
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.signup__features {
|
||||
list-style-type: none;
|
||||
font-size: $font-size-medium;
|
||||
|
||||
> li {
|
||||
padding: $space-slab;
|
||||
|
||||
> i {
|
||||
margin-right: $space-two;
|
||||
font-size: $font-size-large;
|
||||
|
||||
&.beer {
|
||||
color: #dfb63b;
|
||||
}
|
||||
|
||||
&.report {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
&.canned {
|
||||
color: #1cad22;
|
||||
}
|
||||
|
||||
&.uptime {
|
||||
color: #a753b5;
|
||||
}
|
||||
|
||||
&.secure {
|
||||
color: #607d8b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signup-box {
|
||||
@include elegant-card;
|
||||
padding: $space-large $space-large;
|
||||
label {
|
||||
font-size: $font-size-default;
|
||||
color: $color-gray;
|
||||
|
||||
input {
|
||||
padding: $space-slab;
|
||||
height: $space-larger;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
.error {
|
||||
font-size: $font-size-small
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sigin__footer {
|
||||
padding: $space-medium;
|
||||
font-size: $font-size-default;
|
||||
|
||||
> a {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.accept-terms {
|
||||
font-size: $font-size-mini;
|
||||
text-align: center;
|
||||
@include margin($zero);
|
||||
a {
|
||||
font-size: $font-size-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
app/javascript/src/assets/scss/views/settings/channel.scss
Normal file
48
app/javascript/src/assets/scss/views/settings/channel.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.channels {
|
||||
margin-top: $space-medium;
|
||||
.inactive {
|
||||
@include filter(grayscale(100%));
|
||||
}
|
||||
.channel {
|
||||
@include flex;
|
||||
@include padding($space-normal $zero);
|
||||
@include margin($zero);
|
||||
@include background-white;
|
||||
@include border-light;
|
||||
@include flex-direction(column);
|
||||
cursor: pointer;
|
||||
border-right-color: $color-white;
|
||||
@include transition(all 0.200s ease-in);
|
||||
|
||||
&:last-child {
|
||||
@include border-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primary-color;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
@include margin($space-normal auto);
|
||||
}
|
||||
|
||||
.channel__title{
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
color: $color-body;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
242
app/javascript/src/assets/scss/views/settings/inbox.scss
Normal file
242
app/javascript/src/assets/scss/views/settings/inbox.scss
Normal file
@@ -0,0 +1,242 @@
|
||||
// Conversation header - Light BG
|
||||
.settings-header {
|
||||
@include padding($space-small $space-normal);
|
||||
@include background-white;
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include border-normal-bottom;
|
||||
height: $header-height;
|
||||
min-height: $header-height;
|
||||
// Resolve Button
|
||||
.button {
|
||||
@include margin(0);
|
||||
}
|
||||
|
||||
// User thumbnail and text
|
||||
.page-title {
|
||||
@include flex;
|
||||
@include flex-align($x: center, $y: middle);
|
||||
@include margin($zero);
|
||||
> span {
|
||||
@include padding($zero $space-small $zero $space-small);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wizard-box {
|
||||
.item {
|
||||
@include padding($space-normal $space-normal $space-normal $space-medium);
|
||||
position: relative;
|
||||
@include background-light;
|
||||
cursor: pointer;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: $color-border;
|
||||
top: $space-normal;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: $zero;
|
||||
height: $space-normal;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&:before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
height: $zero;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
// left: 1px;
|
||||
// @include background-white;
|
||||
// @include border-light;
|
||||
// border-right: 0;
|
||||
h3 {
|
||||
color: $color-woot;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: $color-woot;
|
||||
}
|
||||
}
|
||||
|
||||
&.over {
|
||||
|
||||
&:after {
|
||||
background: $color-woot;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: $color-woot;
|
||||
}
|
||||
|
||||
&+.item {
|
||||
&:before {
|
||||
background: $color-woot;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-default;
|
||||
padding-left: $space-medium;
|
||||
line-height: 1;
|
||||
color: $color-body;
|
||||
|
||||
.completed {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
color: $color-light-gray;
|
||||
padding-left: $space-medium;
|
||||
margin: 0;
|
||||
}
|
||||
.step {
|
||||
position: absolute;
|
||||
left: $space-normal;
|
||||
top: $space-normal;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
background: $color-border;
|
||||
border-radius: 20px;
|
||||
width: $space-normal;
|
||||
height: $space-normal;
|
||||
text-align: center;
|
||||
line-height: $space-normal;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
|
||||
i {
|
||||
font-size: $font-size-micro;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-body {
|
||||
@include background-white;
|
||||
@include padding($space-medium);
|
||||
@include border-light;
|
||||
@include full-height();
|
||||
}
|
||||
.inoboxes-list {
|
||||
// @include margin(auto);
|
||||
// @include background-white;
|
||||
// @include border-light;
|
||||
// width: 50%;
|
||||
|
||||
.inbox-item {
|
||||
@include margin($space-normal);
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
@include padding($space-normal $space-normal);
|
||||
@include border-light-bottom();
|
||||
flex-direction: column;
|
||||
background: $color-white;
|
||||
cursor: pointer;
|
||||
width: 20%;
|
||||
float: left;
|
||||
min-height: 10rem;
|
||||
&:last-child {
|
||||
margin-bottom: $zero;
|
||||
@include border-nil;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include background-gray;
|
||||
.arrow {
|
||||
opacity: 1;
|
||||
@include transform(translateX($space-small));
|
||||
}
|
||||
}
|
||||
.switch {
|
||||
align-self: center;
|
||||
margin-right: $space-normal;
|
||||
margin-bottom: $zero;
|
||||
}
|
||||
|
||||
.item--details {
|
||||
@include padding($space-normal $zero);
|
||||
.item--name {
|
||||
font-size: $font-size-large;
|
||||
line-height: 1;
|
||||
}
|
||||
.item--sub {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
align-self: center;
|
||||
font-size: $font-size-small;
|
||||
color: $medium-gray;
|
||||
opacity: .7;
|
||||
@include transform(translateX(0px));
|
||||
@include transition(opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-modal {
|
||||
width: 60%;
|
||||
height: 80%;
|
||||
.delete-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
@include justify-content(space-between);
|
||||
@include padding($space-normal $space-large);
|
||||
a {
|
||||
margin-left: $space-normal;
|
||||
}
|
||||
}
|
||||
.code-wrapper {
|
||||
@include margin($space-medium);
|
||||
|
||||
.title {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
.code {
|
||||
max-height: $space-mega;
|
||||
overflow: scroll;
|
||||
white-space: nowrap;
|
||||
@include padding($space-one);
|
||||
background: $color-background;
|
||||
code {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agent-wrapper {
|
||||
@include margin($space-medium);
|
||||
.title {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-init {
|
||||
text-align: center;
|
||||
padding-top: 30%;
|
||||
p {
|
||||
@include padding($space-medium);
|
||||
}
|
||||
> a > img {
|
||||
width: $space-larger*5;
|
||||
}
|
||||
}
|
||||
65
app/javascript/src/assets/scss/widgets/_billing.scss
Normal file
65
app/javascript/src/assets/scss/widgets/_billing.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.billing {
|
||||
@include full-height;
|
||||
.row {
|
||||
@include full-height;
|
||||
}
|
||||
.billing__stats {
|
||||
@include flex;
|
||||
}
|
||||
.billing__form {
|
||||
@include thin-border($color-border-light);
|
||||
@include margin($zero -$space-micro);
|
||||
@include full-height;
|
||||
background: $color-white;
|
||||
iframe {
|
||||
border: 0;
|
||||
@include full-height;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.account-row {
|
||||
@include flex-grid-column(3, $space-medium);
|
||||
@include padding($space-normal);
|
||||
background: $color-white;
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
// @include thin-border($color-border-light);
|
||||
// @include margin(-$space-micro $zero);
|
||||
font-size: $font-size-small;
|
||||
.title {
|
||||
font-weight: $font-weight-medium;
|
||||
color: $color-heading;
|
||||
}
|
||||
.value {
|
||||
font-size: $font-size-mega;
|
||||
font-weight: $font-weight-light;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-locked {
|
||||
@include background-gray;
|
||||
@include margin(0);
|
||||
.lock-message{
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
div {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
img {
|
||||
width: 10rem;
|
||||
@include margin($space-normal);
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
app/javascript/src/assets/scss/widgets/_buttons.scss
Normal file
30
app/javascript/src/assets/scss/widgets/_buttons.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.button {
|
||||
&.icon {
|
||||
padding-left: $space-normal;
|
||||
padding-right: $space-normal;
|
||||
i {
|
||||
padding-right: $space-one;
|
||||
}
|
||||
}
|
||||
|
||||
&.nice {
|
||||
border-radius: $space-smaller;
|
||||
}
|
||||
|
||||
&.hollow {
|
||||
&.link {
|
||||
border-color: transparent;
|
||||
padding-left: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .icon {
|
||||
font-size: $font-size-mini;
|
||||
margin-right: $space-smaller;
|
||||
}
|
||||
}
|
||||
64
app/javascript/src/assets/scss/widgets/_conv-header.scss
Normal file
64
app/javascript/src/assets/scss/widgets/_conv-header.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
// Conversation header - Light BG
|
||||
.conv-header {
|
||||
@include padding($space-small $space-normal);
|
||||
@include background-white;
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include border-normal-bottom;
|
||||
// Resolve Button
|
||||
.button {
|
||||
@include margin(0);
|
||||
@include flex;
|
||||
}
|
||||
|
||||
.multiselect-box {
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include margin(0 $space-small);
|
||||
@include border-light;
|
||||
border-radius: $space-smaller;
|
||||
margin-right: $space-normal;
|
||||
|
||||
&:before {
|
||||
line-height: 3.8rem;
|
||||
font-size: $font-size-default;
|
||||
padding-left: $space-slab;
|
||||
padding-right: $space-smaller;
|
||||
color: $medium-gray;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
margin: 0;
|
||||
|
||||
.multiselect__tags {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User thumbnail and text
|
||||
.user {
|
||||
@include flex;
|
||||
@include flex-align($x: center, $y: middle);
|
||||
.user--name {
|
||||
@include margin(0);
|
||||
font-size: $font-size-medium;
|
||||
margin-left: $space-slab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.resolve--button {
|
||||
> .icon {
|
||||
padding-right: $space-small;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
padding: 0 $space-one;
|
||||
margin-right: $space-smaller;
|
||||
&:before {
|
||||
border-top-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.conversation {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
@include padding($space-normal $zero $zero $space-normal);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: $color-background;
|
||||
}
|
||||
|
||||
.conversation--details {
|
||||
@include margin($zero $zero $zero $space-one);
|
||||
@include border-light-bottom;
|
||||
@include padding($zero $zero $space-slab $zero);
|
||||
}
|
||||
.conversation--user {
|
||||
font-size: $font-size-small;
|
||||
margin-bottom: $zero;
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
top: $space-micro;
|
||||
left: $space-micro;
|
||||
max-width: $space-jumbo;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--message {
|
||||
height: $space-medium;
|
||||
margin: $zero;
|
||||
font-size: $font-size-small;
|
||||
line-height: $space-medium;
|
||||
font-weight: $font-weight-light;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $color-body;
|
||||
width: 27rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.conversation--meta {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: $space-normal;
|
||||
top: $space-normal;
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
|
||||
.unread {
|
||||
$unread-size: $space-two - $space-micro;
|
||||
display: none;
|
||||
height: $unread-size;
|
||||
min-width: $unread-size;
|
||||
background: darken($success-color, 3%);
|
||||
text-align: center;
|
||||
padding: 0 $space-smaller;
|
||||
line-height: $unread-size;
|
||||
color: $color-white;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-mini;
|
||||
margin-left: auto;
|
||||
@include round-corner;
|
||||
margin-top: $space-smaller;
|
||||
}
|
||||
.timestamp {
|
||||
font-size: $font-size-mini;
|
||||
color: $dark-gray;
|
||||
line-height: $space-normal;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $font-size-micro;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.unread-chat {
|
||||
.unread {
|
||||
display: inline-block;
|
||||
}
|
||||
.conversation--message {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
.conversation--user {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
310
app/javascript/src/assets/scss/widgets/_conversation-view.scss
Normal file
310
app/javascript/src/assets/scss/widgets/_conversation-view.scss
Normal file
@@ -0,0 +1,310 @@
|
||||
.conversations-sidebar {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
|
||||
.chat-list__top {
|
||||
@include padding($space-normal $zero $space-small $zero);
|
||||
.page-title {
|
||||
float: left;
|
||||
margin-bottom: $zero;
|
||||
margin-left: $space-normal;
|
||||
}
|
||||
|
||||
.status--filter {
|
||||
float: right;
|
||||
width: auto;
|
||||
font-size: $font-size-mini;
|
||||
@include padding($zero null $zero $space-normal);
|
||||
@include border-light;
|
||||
@include round-corner;
|
||||
@include margin($space-smaller $space-slab $zero $zero);
|
||||
background-color: $color-background;
|
||||
height: $space-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.conversations-list {
|
||||
@include flex-weight(1);
|
||||
@include scroll-on-hover;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.emojione {
|
||||
height: $font-size-medium;
|
||||
width: $font-size-medium;
|
||||
}
|
||||
|
||||
.conversation-wrap {
|
||||
@include background-gray;
|
||||
@include margin(0);
|
||||
@include border-normal-left;
|
||||
.current-chat{
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
div {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
img {
|
||||
width: 10rem;
|
||||
@include margin($space-normal);
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.conv-empty-state {
|
||||
@include flex;
|
||||
@include full-height;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-panel {
|
||||
@include flex;
|
||||
@include flex-weight(1);
|
||||
@include flex-direction(column);
|
||||
@include margin($zero);
|
||||
overflow-y: scroll;
|
||||
// FIrefox flexbox fix
|
||||
height: 100%;
|
||||
|
||||
> li {
|
||||
@include flex;
|
||||
@include flex-shrink;
|
||||
@include margin($zero $zero $space-smaller);
|
||||
|
||||
&:first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
|
||||
&.unread--toast {
|
||||
span {
|
||||
margin: $space-one auto;
|
||||
padding: $space-smaller $space-two;
|
||||
font-size: $font-size-mini;
|
||||
font-weight: $font-weight-medium;
|
||||
@include elegant-card;
|
||||
@include round-corner;
|
||||
background: $color-woot;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
text-align: left;
|
||||
max-width: 50rem;
|
||||
word-wrap: break-word;
|
||||
.aplayer {
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
.bubble {
|
||||
background: $white;
|
||||
color: $color-heading;
|
||||
margin-right: auto;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&+.right {
|
||||
margin-top: $space-one;
|
||||
.bubble {
|
||||
border-top-right-radius: $space-small;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right {
|
||||
@include flex-align(right, null);
|
||||
|
||||
.wrap {
|
||||
text-align: right;
|
||||
margin-right: $space-small;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
&.is-private {
|
||||
background: lighten($warning-color, 32%);
|
||||
color: $color-heading;
|
||||
position: relative;
|
||||
padding-right: $space-large;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: $space-smaller + $space-micro;
|
||||
right: $space-one;
|
||||
bottom: 0;
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&+.left {
|
||||
margin-top: $space-one;
|
||||
.bubble {
|
||||
border-top-left-radius: $space-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@include margin($zero $space-normal);
|
||||
max-width: 69%;
|
||||
|
||||
.sender--name {
|
||||
font-size: $font-size-mini;
|
||||
margin-bottom: $space-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.sender--thumbnail {
|
||||
width: $space-slab;
|
||||
height: $space-slab;
|
||||
@include round-corner();
|
||||
margin-right: $space-one;
|
||||
margin-top: $space-micro;
|
||||
}
|
||||
.activity-wrap {
|
||||
@include flex;
|
||||
@include margin($space-small auto);
|
||||
@include padding($space-smaller $space-normal);
|
||||
@include flex-align($x: center, $y: null);
|
||||
font-size: $font-size-small;
|
||||
background: lighten($warning-color, 32%);
|
||||
border-radius: $space-smaller;
|
||||
|
||||
p {
|
||||
margin-bottom: $zero;
|
||||
color: $color-heading;
|
||||
|
||||
.ion-person {
|
||||
margin-right: $space-small;
|
||||
font-size: $font-size-default;
|
||||
top: $space-micro;
|
||||
position: relative;
|
||||
color: $color-body;
|
||||
}
|
||||
|
||||
.message-text__wrap {
|
||||
position: relative;
|
||||
}
|
||||
.message-text {
|
||||
&:after {
|
||||
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
@include padding($space-smaller $space-one);
|
||||
@include margin($zero);
|
||||
background: #c7e3ff;
|
||||
color: $color-heading;
|
||||
border-radius: $space-small;
|
||||
font-size: $font-size-small;
|
||||
box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: $space-small;
|
||||
bottom: $space-smaller;
|
||||
}
|
||||
.message-text__wrap {
|
||||
position: relative;
|
||||
}
|
||||
.message-text {
|
||||
&:after {
|
||||
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.audio {
|
||||
.time {
|
||||
margin-top: -$space-two;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
@include flex;
|
||||
@include justify-content(center);
|
||||
@include align-items(flex-end);
|
||||
text-align: center;
|
||||
img {
|
||||
max-height: 30rem;
|
||||
max-width: 20rem;
|
||||
@include padding($space-small);
|
||||
}
|
||||
.time {
|
||||
white-space: nowrap;
|
||||
margin-left: -$space-large;
|
||||
}
|
||||
.modal-image {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
.map {
|
||||
@include flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
img {
|
||||
max-height: 30rem;
|
||||
max-width: 20rem;
|
||||
@include padding($space-small);
|
||||
}
|
||||
.time {
|
||||
white-space: nowrap;
|
||||
margin-top: -$space-two;
|
||||
margin-left: -$space-smaller;
|
||||
@include padding($space-small);
|
||||
}
|
||||
.locname {
|
||||
font-weight: $font-weight-medium;
|
||||
padding: $space-smaller;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-left: $space-slab;
|
||||
text-align: right;
|
||||
font-size: $font-size-micro;
|
||||
color: $color-gray;
|
||||
position: absolute;
|
||||
bottom: -$space-micro;
|
||||
right: -$space-micro;
|
||||
font-style: italic;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
106
app/javascript/src/assets/scss/widgets/_emojiinput.scss
Normal file
106
app/javascript/src/assets/scss/widgets/_emojiinput.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.emoji-dialog {
|
||||
width: 28.6rem;
|
||||
height: 20rem;
|
||||
background: $color-white;
|
||||
box-sizing: content-box;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: -22rem;
|
||||
right: 0;
|
||||
padding-bottom: $space-two;
|
||||
@include elegant-card;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: -$space-slab;
|
||||
right: $space-two;
|
||||
@include arrow(bottom, $color-white, $space-slab);
|
||||
}
|
||||
|
||||
.emojione {
|
||||
@include margin($zero);
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.emoji-row {
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
height: 180px;
|
||||
@include padding($space-small);
|
||||
padding-bottom: 0;
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.emojione{
|
||||
margin: 0.6rem;
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
.emoji-dialog-header {
|
||||
@include padding($zero $space-smaller);
|
||||
background-color: $light-gray;
|
||||
border-top-left-radius: $space-small;
|
||||
border-top-right-radius: $space-small;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding-top: $space-smaller;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: 3.4rem;
|
||||
text-align: center;
|
||||
@include padding($space-small $space-small);
|
||||
cursor: pointer;
|
||||
|
||||
img, svg {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
border-top-left-radius: $space-small;
|
||||
border-top-right-radius: $space-small;
|
||||
|
||||
img,
|
||||
svg {
|
||||
-webkit-filter: grayscale(0);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.emoji-category-title {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $color-heading;
|
||||
text-transform: capitalize;
|
||||
margin: 0;
|
||||
}
|
||||
.emoji-category-heading-decoration {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.emoji-dialog .emoji-category-header > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.emoji-dialog .emoji-row
|
||||
.emoji-dialog .emoji-row .emoji:hover {
|
||||
background: #F5F7F9;
|
||||
}
|
||||
31
app/javascript/src/assets/scss/widgets/_forms.scss
Normal file
31
app/javascript/src/assets/scss/widgets/_forms.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.error {
|
||||
#{$all-text-inputs},
|
||||
.multiselect > .multiselect__tags {
|
||||
@include thin-border( darken(get-color(alert), 25%));
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
.message {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: -$space-normal;
|
||||
margin-bottom: $space-one;
|
||||
color: darken(get-color(alert), 25%);
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
textarea,
|
||||
input {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
font-size: $font-size-small;
|
||||
color: $color-heading;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
62
app/javascript/src/assets/scss/widgets/_login.scss
Normal file
62
app/javascript/src/assets/scss/widgets/_login.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.auth-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Outside login wrapper
|
||||
.login {
|
||||
@include full-height;
|
||||
overflow-y: scroll;
|
||||
padding-top: $space-larger*1.2;
|
||||
|
||||
.login__hero {
|
||||
margin-bottom: $space-larger;
|
||||
|
||||
.hero__logo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
margin-top: $space-larger;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.hero__sub {
|
||||
font-size: $font-size-medium;
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Login box
|
||||
.login-box {
|
||||
@include background-white;
|
||||
@include border-normal;
|
||||
@include border-top-radius($space-smaller);
|
||||
@include border-right-radius($space-smaller);
|
||||
@include border-bottom-radius($space-smaller);
|
||||
@include border-left-radius($space-smaller);
|
||||
@include elegant-card;
|
||||
padding: $space-large $space-large;
|
||||
label {
|
||||
font-size: $font-size-default;
|
||||
color: $color-gray;
|
||||
|
||||
input {
|
||||
padding: $space-slab;
|
||||
height: $space-larger;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
.error {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sigin__footer {
|
||||
padding: $space-medium;
|
||||
font-size: $font-size-default;
|
||||
|
||||
> a {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
app/javascript/src/assets/scss/widgets/_modal.scss
Normal file
92
app/javascript/src/assets/scss/widgets/_modal.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9990;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 60rem;
|
||||
max-height: 100%;
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
background-color: $color-white;
|
||||
|
||||
.modal--close {
|
||||
font-size: $font-size-large;
|
||||
position: absolute;
|
||||
right: $space-normal;
|
||||
top: $space-small;
|
||||
cursor: pointer;
|
||||
color: $color-heading;
|
||||
}
|
||||
|
||||
.page-top-bar {
|
||||
background: $color-modal-header;
|
||||
text-align: center;
|
||||
@include padding($space-large $space-medium);
|
||||
img {
|
||||
max-height: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
@include padding($zero);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-medium;
|
||||
color: $color-woot;
|
||||
font-weight: $font-weight-normal;
|
||||
@include padding($space-small $zero $zero $zero);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
@include padding($zero);
|
||||
@include margin($zero);
|
||||
}
|
||||
|
||||
form {
|
||||
align-self: center;
|
||||
@include padding($space-medium $space-larger $space-small);
|
||||
a {
|
||||
@include padding($space-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: center);
|
||||
@include padding($space-small $zero $space-medium $zero);
|
||||
button {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-item {
|
||||
@include padding($space-normal);
|
||||
button {
|
||||
@include margin($zero);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modal-enter, .modal-leave {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
143
app/javascript/src/assets/scss/widgets/_reply-box.scss
Normal file
143
app/javascript/src/assets/scss/widgets/_reply-box.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
.reply-box {
|
||||
margin: $space-normal;
|
||||
margin-top: 0;
|
||||
border-bottom: 0;
|
||||
@include elegant-card;
|
||||
@include transition(height 2s $ease-in-out-cubic);
|
||||
max-height: $space-jumbo*2;
|
||||
|
||||
.reply-box__top {
|
||||
@include flex;
|
||||
@include flex-align($x: left, $y: middle);
|
||||
@include padding($space-one $space-normal);
|
||||
@include background-white;
|
||||
@include margin(0);
|
||||
position: relative;
|
||||
border-top-left-radius: $space-small;
|
||||
border-top-right-radius: $space-small;
|
||||
|
||||
.canned {
|
||||
@include elegant-card;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 24rem;
|
||||
left: 0;
|
||||
border-top: $space-small solid $color-white;
|
||||
border-bottom: $space-small solid $color-white;
|
||||
max-height: 14rem;
|
||||
overflow: scroll;
|
||||
.active {
|
||||
a {
|
||||
background: $color-woot;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
border-bottom-left-radius: $space-small;
|
||||
border-bottom-right-radius: $space-small;
|
||||
}
|
||||
|
||||
&.is-private {
|
||||
background: lighten($warning-color, 38%);
|
||||
|
||||
> input {
|
||||
background: lighten($warning-color, 38%);
|
||||
}
|
||||
}
|
||||
|
||||
> .icon {
|
||||
font-size: $font-size-medium;
|
||||
color: $medium-gray;
|
||||
margin-right: $space-small;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: $color-woot;
|
||||
}
|
||||
}
|
||||
> textarea {
|
||||
@include ghost-input();
|
||||
@include margin(0);
|
||||
resize: none;
|
||||
background: transparent;
|
||||
// Override min-height : 50px in foundation
|
||||
//
|
||||
min-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-box__bottom {
|
||||
@include background-light;
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include border-light-top;
|
||||
border-bottom-left-radius: $space-small;
|
||||
border-bottom-right-radius: $space-small;
|
||||
|
||||
.tabs {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
|
||||
.tabs-title {
|
||||
margin: 0;
|
||||
@include transition(background .2s $ease-in-out-cubic);
|
||||
@include transition(color .2s $ease-in-out-cubic);
|
||||
|
||||
a {
|
||||
padding: $space-one $space-two;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $space-small;
|
||||
&.is-active {
|
||||
@include border-light-right;
|
||||
border-left: 0;
|
||||
a {
|
||||
border-bottom-left-radius: $space-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-private {
|
||||
&.is-active {
|
||||
background: lighten($warning-color, 38%);
|
||||
a {
|
||||
border-bottom-color: darken($warning-color, 15%);
|
||||
color: darken($warning-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
@include background-white;
|
||||
margin-top: -1px;
|
||||
@include border-light-left;
|
||||
@include border-light-right;
|
||||
}
|
||||
|
||||
.message-length {
|
||||
float: right;
|
||||
a {
|
||||
font-size: $font-size-mini;
|
||||
}
|
||||
}
|
||||
.message-error {
|
||||
color: $input-error-color;
|
||||
}
|
||||
}
|
||||
|
||||
.send-button {
|
||||
height: 3.6rem;
|
||||
border-bottom-right-radius: $space-small;
|
||||
padding-top: $space-small;
|
||||
padding-right: $space-two;
|
||||
padding-left: $space-two;
|
||||
|
||||
.icon {
|
||||
margin-left: $space-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
app/javascript/src/assets/scss/widgets/_report.scss
Normal file
51
app/javascript/src/assets/scss/widgets/_report.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.report-card {
|
||||
@include padding($space-normal $space-small $space-normal $space-two);
|
||||
@include margin($zero);
|
||||
@include background-light;
|
||||
cursor: pointer;
|
||||
@include custom-border-top(3px, transparent);
|
||||
&.active {
|
||||
@include custom-border-top(3px, $color-woot);
|
||||
@include background-white;
|
||||
.heading,
|
||||
.metric {
|
||||
color: $color-woot;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
@include margin($zero);
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $color-heading;
|
||||
}
|
||||
.metric {
|
||||
font-size: $font-size-bigger;
|
||||
font-weight: $font-weight-feather;
|
||||
}
|
||||
.desc {
|
||||
@include margin($zero);
|
||||
font-size: $font-size-small;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.report-bar {
|
||||
@include margin(-1px $zero);
|
||||
@include background-white;
|
||||
@include border-light;
|
||||
@include padding($space-small $space-medium);
|
||||
.chart-container {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
@include flex-align(center, middle);
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
.empty-state {
|
||||
@include margin($space-jumbo);
|
||||
font-size: $font-size-default;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
app/javascript/src/assets/scss/widgets/_search-box.scss
Normal file
15
app/javascript/src/assets/scss/widgets/_search-box.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.search {
|
||||
@include flex;
|
||||
@include flex-align($x: left, $y: middle);
|
||||
@include padding($space-one $space-normal);
|
||||
@include flex-shrink;
|
||||
@include transition(all .3s $ease-in-out-quad);
|
||||
> .icon {
|
||||
font-size: $font-size-medium;
|
||||
color: $medium-gray;
|
||||
}
|
||||
> input {
|
||||
@include ghost-input();
|
||||
@include margin(0);
|
||||
}
|
||||
}
|
||||
120
app/javascript/src/assets/scss/widgets/_sidemenu.scss
Normal file
120
app/javascript/src/assets/scss/widgets/_sidemenu.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
.side-menu {
|
||||
i {
|
||||
min-width: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
width: $nav-bar-width;
|
||||
z-index: 1024 - 1;
|
||||
overflow-x: hidden;
|
||||
@include border-normal-right;
|
||||
@include background-white;
|
||||
@include full-height;
|
||||
@include margin(0);
|
||||
@include space-between-column;
|
||||
|
||||
//logo
|
||||
.logo {
|
||||
img {
|
||||
// width: $woot-logo-width;
|
||||
// height: $woot-logo-height;
|
||||
@include padding($woot-logo-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
@include flex-weight(1);
|
||||
padding: 0 $space-medium - $space-one;
|
||||
@include scroll-on-hover;
|
||||
|
||||
a {
|
||||
color: $color-gray;
|
||||
font-size: $font-size-default;
|
||||
border-radius: $space-smaller;
|
||||
&:before {
|
||||
margin-right: $space-slab;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: $font-size-medium;
|
||||
color: $color-gray;
|
||||
margin-top: $space-medium;
|
||||
> span {
|
||||
margin-left: auto;
|
||||
}
|
||||
& + ul > li > a{
|
||||
@include padding($space-micro null);
|
||||
line-height: $global-lineheight;
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bottom-nav
|
||||
.bottom-nav {
|
||||
@include flex;
|
||||
@include space-between-column;
|
||||
@include padding($space-one $space-normal $space-one $space-one);
|
||||
@include flex-direction(column);
|
||||
@include border-normal-top;
|
||||
position: relative;
|
||||
|
||||
.current-user {
|
||||
@include flex;
|
||||
@include flex-direction(row);
|
||||
cursor: pointer;
|
||||
|
||||
.current-user--thumbnail {
|
||||
width: $space-large;
|
||||
height: $space-large;
|
||||
@include round-corner();
|
||||
}
|
||||
.current-user--data {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
.current-user--name {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-medium;
|
||||
margin-bottom: $zero;
|
||||
margin-left: $space-one;
|
||||
margin-top: $space-micro;
|
||||
line-height: 1;
|
||||
}
|
||||
.current-user--role {
|
||||
font-size: $font-size-mini;
|
||||
margin-left: $space-one;
|
||||
margin-bottom: $zero;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
.current-user--options {
|
||||
margin-left: auto;
|
||||
font-size: $font-size-big;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
@include elegant-card;
|
||||
top: -160%;
|
||||
left: 18%;
|
||||
width: 80%;
|
||||
@include border-light;
|
||||
z-index: 999;
|
||||
visibility: visible;
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: -$space-slab;
|
||||
right: $space-slab;
|
||||
@include arrow(bottom, $color-white, $space-slab);
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-bottom: 2px solid $medium-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
app/javascript/src/assets/scss/widgets/_snackbar.scss
Normal file
46
app/javascript/src/assets/scss/widgets/_snackbar.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
.ui-snackbar-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
top: $space-normal;
|
||||
left: $space-normal;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-snackbar {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
min-width: 24rem;
|
||||
max-width: 40rem;
|
||||
min-height: 3rem;
|
||||
background-color: $woot-snackbar-bg;
|
||||
@include padding($space-slab $space-medium);
|
||||
@include border-top-radius($space-micro);
|
||||
@include border-right-radius($space-micro);
|
||||
@include border-bottom-radius($space-micro);
|
||||
@include border-left-radius($space-micro);
|
||||
margin-bottom: $space-small;
|
||||
|
||||
// box-shadow: 0 1px 3px alpha(black, 0.12), 0 1px 2px alpha(black, 0.24);
|
||||
}
|
||||
|
||||
.ui-snackbar-text {
|
||||
font-size: $font-size-small;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.ui-snackbar-action {
|
||||
margin-left: auto;
|
||||
padding-left: 3rem;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: $font-size-small;
|
||||
text-transform: uppercase;
|
||||
color: $woot-snackbar-button;
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
}
|
||||
}
|
||||
39
app/javascript/src/assets/scss/widgets/_states.scss
Normal file
39
app/javascript/src/assets/scss/widgets/_states.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.loading-state {
|
||||
padding: $space-jumbo $space-smaller;
|
||||
.message {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: $color-gray;
|
||||
}
|
||||
.spinner {
|
||||
float: none;
|
||||
top: -$space-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
// EMPTY STATES
|
||||
.empty-state {
|
||||
padding: $space-jumbo $space-smaller;
|
||||
.title,
|
||||
.message {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-giga;
|
||||
font-weight: $font-weight-feather;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: $space-medium;
|
||||
}
|
||||
}
|
||||
31
app/javascript/src/assets/scss/widgets/_status-bar.scss
Normal file
31
app/javascript/src/assets/scss/widgets/_status-bar.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.status-bar {
|
||||
@include flex;
|
||||
@include flex-direction(column);
|
||||
@include flex-align($x: center, $y: middle);
|
||||
background: lighten($warning-color, 36%);
|
||||
// @include elegant-card();
|
||||
@include margin($zero);
|
||||
@include padding($space-normal $space-smaller);
|
||||
|
||||
.message {
|
||||
font-weight: $font-weight-medium;
|
||||
margin-bottom: $zero;
|
||||
}
|
||||
|
||||
.button {
|
||||
@include margin($space-smaller $zero $zero);
|
||||
padding: $space-small $space-normal;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: lighten($alert-color, 30%);
|
||||
|
||||
.button {
|
||||
@include button-style($alert-color, darken($alert-color, 7%), $color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: lighten($warning-color, 36%);
|
||||
}
|
||||
}
|
||||
50
app/javascript/src/assets/scss/widgets/_tabs.scss
Normal file
50
app/javascript/src/assets/scss/widgets/_tabs.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.tabs {
|
||||
border-width: 0;
|
||||
@include padding($zero $space-normal);
|
||||
@include border-normal-bottom;
|
||||
|
||||
.tabs-title {
|
||||
@include margin($zero $space-one);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover,
|
||||
&:focus{
|
||||
a {
|
||||
color: darken($medium-gray, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $medium-gray;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-size: $font-size-small;
|
||||
@include position(relative, 1px null null null);
|
||||
@include transition(all .15s $ease-in-out-cubic);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
color: $color-woot;
|
||||
border-bottom-color: $color-woot;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab chat type
|
||||
&.tab--chat-type {
|
||||
@include flex;
|
||||
|
||||
.tabs-title {
|
||||
a {
|
||||
font-size: $font-size-default;
|
||||
padding-top: $space-slab;
|
||||
padding-bottom: $space-slab;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
app/javascript/src/assets/scss/widgets/_thumbnail.scss
Normal file
14
app/javascript/src/assets/scss/widgets/_thumbnail.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.user-thumbnail-box {
|
||||
position: relative;
|
||||
@include flex-shrink;
|
||||
.user-thumbnail {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.source-badge {
|
||||
position: absolute;
|
||||
height: $space-slab;
|
||||
width: $space-slab;
|
||||
right: $zero;
|
||||
bottom: -$space-micro/2;
|
||||
}
|
||||
}
|
||||
50
app/javascript/src/assets/scss/widgets/_woot-tables.scss
Normal file
50
app/javascript/src/assets/scss/widgets/_woot-tables.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
table {
|
||||
font-size: $font-size-small;
|
||||
border-spacing: 0;
|
||||
thead {
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
@include padding($space-one $space-small);
|
||||
border-bottom: 1px solid $color-border-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woot-table {
|
||||
|
||||
tr {
|
||||
.show-if-hover {
|
||||
opacity: 0;
|
||||
@include transition(all .2s $ease-in-out-cubic);
|
||||
}
|
||||
&:hover {
|
||||
.show-if-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agent-name {
|
||||
font-weight: $font-weight-medium;
|
||||
display: block;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.woot-thumbnail {
|
||||
border-radius: 50%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.button-wrapper {
|
||||
min-width: 20rem;
|
||||
@include flex;
|
||||
@include flex-align(left, null);
|
||||
@include flex-direction(row);
|
||||
}
|
||||
.button {
|
||||
@include margin($zero);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user