LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Initial Commit

Browse Source 
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
2019-08-14 15:18:44 +05:30
commit 2a34255e0b
537 changed files with 27318 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/javascript/src/assets/scss/widgets/_billing.scss Normal file
View 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
View 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
View 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;
}
}
}

89
app/javascript/src/assets/scss/widgets/_conversation-card.scss Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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);
}
}