(
About BubbleIQ
- - BubbleIQ -{' '} - helps companies streamline their support workflow by connecting - helpdesk systems (Zendesk, Salesforce) to real-time chat tools - (Slack, Drift). This allows companies to provide better support - and a high-touch relationship with their customers. + BubbleIQ helps companies streamline their support workflow by + connecting helpdesk systems (Zendesk, Salesforce) to real-time + chat tools (Slack, Drift). This allows companies to provide better + support and a high-touch relationship with their customers.
Fletcher Richman serves as the CEO of BubbleIQ, which three diff --git a/src/pages/customers/index.jsx b/src/pages/customers/index.jsx index 2b210ee6f..9847c758c 100644 --- a/src/pages/customers/index.jsx +++ b/src/pages/customers/index.jsx @@ -166,7 +166,10 @@ const CustomersPage = ({
- 
+
diff --git a/src/pages/help/index.jsx b/src/pages/help/index.jsx
index d8b0445b4..2a0614371 100644
--- a/src/pages/help/index.jsx
+++ b/src/pages/help/index.jsx
@@ -49,7 +49,7 @@ class HelpPage extends React.Component {
+
diff --git a/src/pages/help/index.jsx b/src/pages/help/index.jsx
index d8b0445b4..2a0614371 100644
--- a/src/pages/help/index.jsx
+++ b/src/pages/help/index.jsx
@@ -49,7 +49,7 @@ class HelpPage extends React.Component {
Knowledge Base
-
diff --git a/src/scss/_components/_alert.scss b/src/scss/_components/_alert.scss
index 89819d9bf..5fa472db8 100644
--- a/src/scss/_components/_alert.scss
+++ b/src/scss/_components/_alert.scss
@@ -3,11 +3,11 @@
.alert {
&.alert-danger {
border-color: $danger;
- background: rgba($danger, .25);
+ background: rgba($danger, 0.25);
}
&.alert-brand {
border-color: $bridesmaid;
- background: rgba($bridesmaid, .25);
+ background: rgba($bridesmaid, 0.25);
color: darken($bridesmaid, 30%);
}
}
diff --git a/src/scss/_components/_bootstrap-override.scss b/src/scss/_components/_bootstrap-override.scss
index 051fcbe27..4ec95d81a 100755
--- a/src/scss/_components/_bootstrap-override.scss
+++ b/src/scss/_components/_bootstrap-override.scss
@@ -19,17 +19,17 @@
.row {
@include respond-to(xs) {
- >[class^="col-sm"] {
+ > [class^='col-sm'] {
&:not(:last-child) {
margin-bottom: 20px;
}
}
- >[class^="col-md"] {
+ > [class^='col-md'] {
&:not(:last-child) {
margin-bottom: 20px;
}
}
- >[class^="col-lg"] {
+ > [class^='col-lg'] {
&:not(:last-child) {
margin-bottom: 20px;
}
@@ -70,12 +70,13 @@
@include respond-to(xs-min) {
display: flex;
flex-wrap: wrap;
- &:before, &:after {
+ &:before,
+ &:after {
content: none;
}
}
- >[class^="col"] {
- >[class^="col-sm"] {
+ > [class^='col'] {
+ > [class^='col-sm'] {
float: none;
}
}
@@ -95,21 +96,23 @@ label {
}
.label-primary {
- border: 1px solid #4080FE;
- color: #4080FE;
- background: rgba(255,255,255,0.75);
+ border: 1px solid #4080fe;
+ color: #4080fe;
+ background: rgba(255, 255, 255, 0.75);
}
// Navigation
@media only screen and (min-width: 767px) {
- .navbar-nav>li>a {
+ .navbar-nav > li > a {
padding: 8px 15px;
margin-top: 16px;
}
}
-.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+.nav .open > a,
+.nav .open > a:focus,
+.nav .open > a:hover {
border-radius: $border-radius;
background-color: #f8fafa;
}
@@ -120,19 +123,20 @@ label {
}
}
-.navbar-nav>li>a:focus, .navbar-nav>li>a:hover {
+.navbar-nav > li > a:focus,
+.navbar-nav > li > a:hover {
background: #f8fafa;
border-radius: $border-radius;
}
.dropdown-menu {
- box-shadow: 0 4px 9px rgba(0,0,0,.05125);
+ box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05125);
border: 1px solid #eaeaea;
- >li>a {
+ > li > a {
color: #111;
padding: 5px 15px;
-
+
&:hover {
background: #f8fafa !important;
}
@@ -150,4 +154,4 @@ label {
.table-striped tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_buttons.scss b/src/scss/_components/_buttons.scss
index 3e45155c0..23c0ab83d 100755
--- a/src/scss/_components/_buttons.scss
+++ b/src/scss/_components/_buttons.scss
@@ -9,7 +9,8 @@
&.btn-danger {
background: $danger;
border-color: $danger;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-color: darken($danger, 7%);
border-color: darken($danger, 10%);
}
@@ -18,7 +19,8 @@
background: $white;
border-color: $danger;
color: $danger;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background: $danger;
border-color: $danger;
color: $white;
@@ -28,9 +30,10 @@
border-color: darken($bridesmaid, 30%);
background: white;
color: darken($bridesmaid, 30%);
- &:hover, &:focus {
+ &:hover,
+ &:focus {
border-color: darken($bridesmaid, 40%);
- background: rgba($bridesmaid, .25);
+ background: rgba($bridesmaid, 0.25);
color: darken($bridesmaid, 40%);
}
}
@@ -38,7 +41,8 @@
background: transparent;
border-color: $danger;
color: $danger;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-color: $danger;
border-color: $danger;
color: white;
@@ -47,7 +51,8 @@
&.btn-primary {
background: $primary;
border-color: $primary;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background-color: lighten($primary, 10%);
border-color: lighten($primary, 10%);
}
@@ -65,7 +70,7 @@
padding-top: 4px;
padding-bottom: 4px;
}
- &+.btn {
+ & + .btn {
margin-left: 10px;
}
&.btn-input-group {
@@ -79,24 +84,24 @@
}
.btn-secondary {
- background: #FFFFFF;
- border: 1px solid rgba(33,150,243,0.20);
- box-shadow: 0 6px 13px -6px rgba(33,150,243,0.25);
+ background: #ffffff;
+ border: 1px solid rgba(33, 150, 243, 0.2);
+ box-shadow: 0 6px 13px -6px rgba(33, 150, 243, 0.25);
border-radius: $border-radius;
font-weight: 500;
font-size: 13px;
- color: #2196F3;
+ color: #2196f3;
text-align: center;
transition: all 0.3s ease;
&:hover {
- border: 1px solid rgba(33,150,243,0.40);
- box-shadow: 0 6px 17px -3px rgba(33,150,243,0.20);
- color: #2196F3;
+ border: 1px solid rgba(33, 150, 243, 0.4);
+ box-shadow: 0 6px 17px -3px rgba(33, 150, 243, 0.2);
+ color: #2196f3;
}
}
.btn-lg {
padding: 10px 18px;
font-size: 105%;
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_callouts.scss b/src/scss/_components/_callouts.scss
index 58dea475c..1a2577236 100644
--- a/src/scss/_components/_callouts.scss
+++ b/src/scss/_components/_callouts.scss
@@ -1,56 +1,56 @@
.bs-callout {
- padding: 20px;
- margin: 20px 0;
- border: 0px solid transparent;
- border-left-width: 5px;
- background: #f8fafa;
+ padding: 20px;
+ margin: 20px 0;
+ border: 0px solid transparent;
+ border-left-width: 5px;
+ background: #f8fafa;
}
.bs-callout h4 {
- margin-top: 0;
- margin-bottom: 5px;
+ margin-top: 0;
+ margin-bottom: 5px;
}
.bs-callout p:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.bs-callout code {
- border-radius: $border-radius;
+ border-radius: $border-radius;
}
-.bs-callout+.bs-callout {
- margin-top: -5px;
+.bs-callout + .bs-callout {
+ margin-top: -5px;
}
.bs-callout-default {
- border-left-color: #777;
+ border-left-color: #777;
}
.bs-callout-default h4 {
- color: #777;
+ color: #777;
}
.bs-callout-primary {
- border-left-color: $primary;
+ border-left-color: $primary;
}
.bs-callout-primary h4 {
- color: #428bca;
+ color: #428bca;
}
.bs-callout-success {
- border-left-color: #5cb85c;
+ border-left-color: #5cb85c;
}
.bs-callout-success h4 {
- color: #5cb85c;
+ color: #5cb85c;
}
.bs-callout-danger {
- border-left-color: #d9534f;
+ border-left-color: #d9534f;
}
.bs-callout-danger h4 {
- color: #d9534f;
+ color: #d9534f;
}
.bs-callout-warning {
- border-left-color: #f0ad4e;
+ border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
- color: #f0ad4e;
+ color: #f0ad4e;
}
.bs-callout-info {
- border-left-color: #5bc0de;
+ border-left-color: #5bc0de;
}
.bs-callout-info h4 {
- color: #5bc0de;
-}
\ No newline at end of file
+ color: #5bc0de;
+}
diff --git a/src/scss/_components/_card.scss b/src/scss/_components/_card.scss
index 2bd06fb64..30a7c4f57 100755
--- a/src/scss/_components/_card.scss
+++ b/src/scss/_components/_card.scss
@@ -12,7 +12,7 @@ $card-hover-color: $hoki;
}
.card--blue {
- background: rgba(233,242,255,.6);
+ background: rgba(233, 242, 255, 0.6);
}
.card--yellow {
@@ -35,7 +35,7 @@ $card-hover-color: $hoki;
}
.card--customer {
- transition: all .25s ease;
+ transition: all 0.25s ease;
margin-bottom: 30px;
padding: 25px !important;
transform: scale(0.95, 0.95);
@@ -54,7 +54,7 @@ $card-hover-color: $hoki;
border-radius: $border-radius;
&:hover {
- box-shadow: 0 2px 20px rgba(0,0,0,.05125);
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05125);
transform: scale(0.96, 0.96);
}
}
@@ -80,7 +80,8 @@ $card-hover-color: $hoki;
flex-basis: 50%;
margin-bottom: 20px;
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
color: inherit;
.card__item-brand {
border: 1px solid $primary;
@@ -96,7 +97,7 @@ $card-hover-color: $hoki;
}
.card__item-brand {
@include transition(250ms);
- box-shadow: 0 4px 9px rgba(0,0,0,.05125);
+ box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05125);
border: 1px solid #eaeaea;
border-radius: $border-radius;
padding: 30px;
diff --git a/src/scss/_components/_carousel.scss b/src/scss/_components/_carousel.scss
index 8c73dc67b..baa460ede 100755
--- a/src/scss/_components/_carousel.scss
+++ b/src/scss/_components/_carousel.scss
@@ -32,7 +32,10 @@
background-image: linear-gradient(180deg, #fff 0, #dadee0);
border-radius: 5px 5px 0 0;
position: relative;
- box-shadow: inset 0 1px 0 rgba(52, 60, 69, .2), inset 1px 0 0 rgba(52, 60, 69, .2), inset -1px 0 0 rgba(52, 60, 69, .2);
+ box-shadow:
+ inset 0 1px 0 rgba(52, 60, 69, 0.2),
+ inset 1px 0 0 rgba(52, 60, 69, 0.2),
+ inset -1px 0 0 rgba(52, 60, 69, 0.2);
}
.browser-toolbar__btns {
position: absolute;
@@ -47,8 +50,9 @@
border-radius: 12px;
margin: 0 18px;
border: 1px solid #f8ac02;
- &:before, &:after {
- content: "";
+ &:before,
+ &:after {
+ content: '';
display: block;
width: 12px;
height: 12px;
@@ -60,7 +64,6 @@
background: #fc5959;
left: 0;
border: 1px solid #fb3131;
-
}
&:after {
background: #36cf40;
@@ -69,8 +72,6 @@
}
}
-
-
.carousel__logo-holder {
width: 72px;
margin-bottom: 10px;
@@ -96,103 +97,102 @@
/* Slider */
.slick-slider {
- position: relative;
- display: block;
- box-sizing: border-box;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -ms-touch-action: pan-y;
- touch-action: pan-y;
- -webkit-tap-highlight-color: transparent;
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
}
.slick-list {
- position: relative;
- overflow: hidden;
- display: block;
- margin: 0;
- padding: 0;
+ position: relative;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
- &:focus {
- outline: none;
- }
+ &:focus {
+ outline: none;
+ }
- &.dragging {
- cursor: pointer;
- cursor: hand;
- }
+ &.dragging {
+ cursor: pointer;
+ cursor: hand;
+ }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
}
.slick-track {
- position: relative;
- left: 0;
- top: 0;
- display: block;
+ position: relative;
+ left: 0;
+ top: 0;
+ display: block;
- &:before,
- &:after {
- content: "";
- display: table;
- }
+ &:before,
+ &:after {
+ content: '';
+ display: table;
+ }
- &:after {
- clear: both;
- }
+ &:after {
+ clear: both;
+ }
- .slick-loading & {
- visibility: hidden;
- }
+ .slick-loading & {
+ visibility: hidden;
+ }
}
.slick-slide {
- float: left;
- height: 100%;
- min-height: 1px;
- [dir="rtl"] & {
- float: right;
- }
- img {
- display: block;
- }
- &.slick-loading img {
- display: none;
- }
-
+ float: left;
+ height: 100%;
+ min-height: 1px;
+ [dir='rtl'] & {
+ float: right;
+ }
+ img {
+ display: block;
+ }
+ &.slick-loading img {
display: none;
+ }
- &.dragging img {
- pointer-events: none;
- }
+ display: none;
- .slick-initialized & {
- display: block;
- }
+ &.dragging img {
+ pointer-events: none;
+ }
- .slick-loading & {
- visibility: hidden;
- }
+ .slick-initialized & {
+ display: block;
+ }
- .slick-vertical & {
- display: block;
- height: auto;
- border: 1px solid transparent;
- }
+ .slick-loading & {
+ visibility: hidden;
+ }
+
+ .slick-vertical & {
+ display: block;
+ height: auto;
+ border: 1px solid transparent;
+ }
}
.slick-arrow.slick-hidden {
- display: none;
+ display: none;
}
-
@charset "UTF-8";
// Default Variables
@@ -202,193 +202,197 @@
// "\2192" outputs ascii character "→"
// "\2022" outputs ascii character "•"
-$slick-font-path: "./fonts/" !default;
-$slick-font-family: "slick" !default;
-$slick-loader-path: "./" !default;
+$slick-font-path: './fonts/' !default;
+$slick-font-family: 'slick' !default;
+$slick-loader-path: './' !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
-$slick-prev-character: "\2190" !default;
-$slick-next-character: "\2192" !default;
-$slick-dot-character: "\2022" !default;
+$slick-prev-character: '\2190' !default;
+$slick-next-character: '\2192' !default;
+$slick-dot-character: '\2022' !default;
$slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;
@function slick-image-url($url) {
- @if function-exists(image-url) {
- @return image-url($url);
- }
- @else {
- @return url($slick-loader-path + $url);
- }
+ @if function-exists(image-url) {
+ @return image-url($url);
+ } @else {
+ @return url($slick-loader-path + $url);
+ }
}
@function slick-font-url($url) {
- @if function-exists(font-url) {
- @return font-url($url);
- }
- @else {
- @return url($slick-font-path + $url);
- }
+ @if function-exists(font-url) {
+ @return font-url($url);
+ } @else {
+ @return url($slick-font-path + $url);
+ }
}
/* Slider */
.slick-list {
- .slick-loading & {
- background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
- }
+ .slick-loading & {
+ background: #fff slick-image-url('ajax-loader.gif') center center no-repeat;
+ }
}
/* Icons */
-@if $slick-font-family == "slick" {
- @font-face {
- font-family: "slick";
- src: slick-font-url("slick.eot");
- src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
- font-weight: normal;
- font-style: normal;
- }
+@if $slick-font-family == 'slick' {
+ @font-face {
+ font-family: 'slick';
+ src: slick-font-url('slick.eot');
+ src:
+ slick-font-url('slick.eot?#iefix') format('embedded-opentype'),
+ slick-font-url('slick.woff') format('woff'),
+ slick-font-url('slick.ttf') format('truetype'),
+ slick-font-url('slick.svg#slick') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
}
/* Arrows */
.slick-prev,
.slick-next {
- position: absolute;
- display: block;
- height: 28px;
- width: 28px;
- line-height: 0px;
- font-size: 0px;
- cursor: pointer;
- background: transparent;
- color: transparent;
- top: 50%;
- -webkit-transform: translate(0, -50%);
- -ms-transform: translate(0, -50%);
- transform: translate(0, -50%);
- padding: 0;
- border: none;
+ position: absolute;
+ display: block;
+ height: 28px;
+ width: 28px;
+ line-height: 0px;
+ font-size: 0px;
+ cursor: pointer;
+ background: transparent;
+ color: transparent;
+ top: 50%;
+ -webkit-transform: translate(0, -50%);
+ -ms-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ padding: 0;
+ border: none;
+ outline: none;
+ background: #e8e8e8;
+ border-radius: 50%;
+ z-index: 100;
+ &:hover,
+ &:focus {
outline: none;
background: #e8e8e8;
- border-radius: 50%;
- z-index: 100;
- &:hover, &:focus {
- outline: none;
- background: #e8e8e8;
- color: transparent;
- &:before {
- opacity: 1;
- }
- }
- &.slick-disabled:before {
- opacity: $slick-opacity-not-active;
- }
+ color: transparent;
&:before {
- font-size: 20px;
- line-height: 1;
- color: #565656;
- opacity: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ opacity: 1;
}
+ }
+ &.slick-disabled:before {
+ opacity: $slick-opacity-not-active;
+ }
+ &:before {
+ font-size: 20px;
+ line-height: 1;
+ color: #565656;
+ opacity: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
}
.slick-prev {
- left: -25px;
- font-family: $font-icon;
- @include respond-to(sm) {
- left: 0;
- }
- @extend .fa, .fa-angle-left;
- [dir="rtl"] & {
- left: auto;
- right: -25px;
- }
- &:before {
- margin-left: -2px;
- }
+ left: -25px;
+ font-family: $font-icon;
+ @include respond-to(sm) {
+ left: 0;
+ }
+ @extend .fa, .fa-angle-left;
+ [dir='rtl'] & {
+ left: auto;
+ right: -25px;
+ }
+ &:before {
+ margin-left: -2px;
+ }
}
.slick-next {
- right: -25px;
- @include respond-to(sm) {
- right: 0;
- }
- @extend .fa, .fa-angle-right;
- [dir="rtl"] & {
- left: -25px;
- right: auto;
- }
- &:before {
- margin-right: -2px;
- }
+ right: -25px;
+ @include respond-to(sm) {
+ right: 0;
+ }
+ @extend .fa, .fa-angle-right;
+ [dir='rtl'] & {
+ left: -25px;
+ right: auto;
+ }
+ &:before {
+ margin-right: -2px;
+ }
}
/* Dots */
.slick-dotted.slick-slider {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
.slick-dots {
- position: absolute;
- bottom: -25px;
- list-style: none;
- display: block;
- text-align: center;
+ position: absolute;
+ bottom: -25px;
+ list-style: none;
+ display: block;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ li {
+ position: relative;
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ margin: 0 5px;
padding: 0;
- margin: 0;
- width: 100%;
- li {
- position: relative;
- display: inline-block;
- height: 20px;
- width: 20px;
- margin: 0 5px;
- padding: 0;
- cursor: pointer;
- button {
- border: 0;
- background: transparent;
- display: block;
- height: 20px;
- width: 20px;
- outline: none;
- line-height: 0px;
- font-size: 0px;
- color: transparent;
- padding: 5px;
- cursor: pointer;
- &:hover, &:focus {
- outline: none;
- &:before {
- opacity: $slick-opacity-on-hover;
- }
- }
- &:before {
- position: absolute;
- top: 0;
- left: 0;
- content: $slick-dot-character;
- width: 20px;
- height: 20px;
- font-family: $slick-font-family;
- font-size: $slick-dot-size;
- line-height: 20px;
- text-align: center;
- color: $slick-dot-color;
- opacity: $slick-opacity-not-active;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- }
- &.slick-active button:before {
- color: $slick-dot-color-active;
- opacity: $slick-opacity-default;
+ cursor: pointer;
+ button {
+ border: 0;
+ background: transparent;
+ display: block;
+ height: 20px;
+ width: 20px;
+ outline: none;
+ line-height: 0px;
+ font-size: 0px;
+ color: transparent;
+ padding: 5px;
+ cursor: pointer;
+ &:hover,
+ &:focus {
+ outline: none;
+ &:before {
+ opacity: $slick-opacity-on-hover;
}
+ }
+ &:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: $slick-dot-character;
+ width: 20px;
+ height: 20px;
+ font-family: $slick-font-family;
+ font-size: $slick-dot-size;
+ line-height: 20px;
+ text-align: center;
+ color: $slick-dot-color;
+ opacity: $slick-opacity-not-active;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
}
+ &.slick-active button:before {
+ color: $slick-dot-color-active;
+ opacity: $slick-opacity-default;
+ }
+ }
}
diff --git a/src/scss/_components/_forms.scss b/src/scss/_components/_forms.scss
index 4561b766a..9756b1d55 100755
--- a/src/scss/_components/_forms.scss
+++ b/src/scss/_components/_forms.scss
@@ -1,66 +1,66 @@
/* FORMS */
$field-border: $legaloblolly;
-$field-bg: rgba($legaloblolly, .5);
+$field-bg: rgba($legaloblolly, 0.5);
$field-color: $white;
$field-fs: 16px;
$placeholder-color: $white;
$placeholder-opacity: 0;
.form-control {
- -webkit-appearance:none;
- -moz-appearance:none;
- border-radius: 0;
- border: none;
- border-bottom: 2px solid $field-border;
- background: #fff;
- color: $primary;
- box-shadow: none;
- font-size: 17px;
- padding: 7px 5px;
- font-weight: 500;
- line-height: 1.5;
- height: auto;
- &:focus {
- box-shadow: 0 0 0 2px #c8e5fd !important;
- border-color: $primary;
- @include custom-placeholder-opacity($opacity: $placeholder-opacity);
- }
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ border-radius: 0;
+ border: none;
+ border-bottom: 2px solid $field-border;
+ background: #fff;
+ color: $primary;
+ box-shadow: none;
+ font-size: 17px;
+ padding: 7px 5px;
+ font-weight: 500;
+ line-height: 1.5;
+ height: auto;
+ &:focus {
+ box-shadow: 0 0 0 2px #c8e5fd !important;
+ border-color: $primary;
+ @include custom-placeholder-opacity($opacity: $placeholder-opacity);
+ }
}
.form-control--white {
- background: $white;
- color: $primary;
- @include custom-placeholder($color: $primary, $font-size: $field-fs);
- &:focus {
- border-color: $primary;
- }
+ background: $white;
+ color: $primary;
+ @include custom-placeholder($color: $primary, $font-size: $field-fs);
+ &:focus {
+ border-color: $primary;
+ }
}
.form-group {
- &:last-child {
- margin-bottom: 0;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.input-lg {
- height: 60px;
- border-radius: 0 !important;
+ height: 60px;
+ border-radius: 0 !important;
}
.form-group--search {
- &:before {
- font-family: $font-icon;
- @extend .fa, .fa-search;
- position: absolute;
- left: 35px;
- transform: translateY(-50%);
- top: 50%;
- z-index: 2;
- }
- .search-box {
- position: relative;
- z-index: 1; // Fix for issue #230
- }
- .form-control {
- padding-left: 50px;
- }
+ &:before {
+ font-family: $font-icon;
+ @extend .fa, .fa-search;
+ position: absolute;
+ left: 35px;
+ transform: translateY(-50%);
+ top: 50%;
+ z-index: 2;
+ }
+ .search-box {
+ position: relative;
+ z-index: 1; // Fix for issue #230
+ }
+ .form-control {
+ padding-left: 50px;
+ }
}
diff --git a/src/scss/_components/_from-to.scss b/src/scss/_components/_from-to.scss
index b96ec12ee..af633893d 100755
--- a/src/scss/_components/_from-to.scss
+++ b/src/scss/_components/_from-to.scss
@@ -8,7 +8,7 @@
display: inline-block;
max-width: 175px;
vertical-align: middle;
- &+.from-to-holder__item {
+ & + .from-to-holder__item {
margin-left: 220px;
@include respond-to(xs) {
margin-left: 100px;
@@ -38,5 +38,4 @@
.from-to-holder__title {
font-size: 18px;
font-weight: 500;
-;
}
diff --git a/src/scss/_components/_kb.scss b/src/scss/_components/_kb.scss
index 761705508..71bd1ea8f 100644
--- a/src/scss/_components/_kb.scss
+++ b/src/scss/_components/_kb.scss
@@ -39,7 +39,10 @@ code {
border: 1px solid #f5ecef;
display: inline-block;
line-height: 20px;
- font-family: Source Code Pro, Menlo, monospace;
+ font-family:
+ Source Code Pro,
+ Menlo,
+ monospace;
}
pre {
diff --git a/src/scss/_components/_list.scss b/src/scss/_components/_list.scss
index 249fcb6ff..d016b7792 100755
--- a/src/scss/_components/_list.scss
+++ b/src/scss/_components/_list.scss
@@ -2,8 +2,8 @@
.list-bullet {
@extend .list-unstyled;
- >li {
- position: relative;;
+ > li {
+ position: relative;
padding-left: 15px;
&:before {
position: absolute;
diff --git a/src/scss/_components/_mixins.scss b/src/scss/_components/_mixins.scss
index b758bd142..76b1d810b 100755
--- a/src/scss/_components/_mixins.scss
+++ b/src/scss/_components/_mixins.scss
@@ -2,63 +2,77 @@
// Different devices resolutions
@mixin respond-to($media) {
@if $media == xs-phone {
- @media only screen and (max-width: 550px) { @content; }
+ @media only screen and (max-width: 550px) {
+ @content;
+ }
}
@if $media == xs {
- @media only screen and (max-width: $screen-xs-max) { @content; }
+ @media only screen and (max-width: $screen-xs-max) {
+ @content;
+ }
}
@if $media == xs-min {
- @media only screen and (min-width: $screen-xs-max) { @content; }
- }
- @else if $media == sm {
- @media only screen and (max-width: $screen-sm-max) { @content; }
+ @media only screen and (min-width: $screen-xs-max) {
+ @content;
+ }
+ } @else if $media == sm {
+ @media only screen and (max-width: $screen-sm-max) {
+ @content;
+ }
+ } @else if $media == sm-min {
+ @media only screen and (min-width: $screen-sm-max) {
+ @content;
+ }
+ } @else if $media == md {
+ @media only screen and (max-width: $screen-md-max) {
+ @content;
+ }
+ } @else if $media == md-min {
+ @media only screen and (min-width: $screen-md-max) {
+ @content;
+ }
+ } @else if $media == lg {
+ @media only screen and (min-width: $screen-lg-min) {
+ @content;
+ }
}
- @else if $media == sm-min {
- @media only screen and (min-width: $screen-sm-max) { @content; }
+}
+
+// Placeholder text
+@mixin custom-placeholder(
+ $color: $placeholder-color,
+ $font-size: $placeholder-font-size
+) {
+ &:-moz-placeholder {
+ color: $color;
+ font-size: $font-size;
}
- @else if $media == md {
- @media only screen and (max-width: $screen-md-max) { @content; }
+ &::-moz-placeholder {
+ color: $color;
+ font-size: $font-size;
}
- @else if $media == md-min {
- @media only screen and (min-width: $screen-md-max) { @content; }
+ &:-ms-input-placeholder {
+ color: $color;
+ font-size: $font-size;
}
- @else if $media == lg {
- @media only screen and (min-width: $screen-lg-min) { @content; }
+ &::-webkit-input-placeholder {
+ color: $color;
+ font-size: $font-size;
}
}
-// Placeholder text
-@mixin custom-placeholder($color: $placeholder-color, $font-size: $placeholder-font-size) {
- &:-moz-placeholder {
- color: $color;
- font-size: $font-size;
- }
- &::-moz-placeholder {
- color: $color;
- font-size: $font-size;
- }
- &:-ms-input-placeholder {
- color: $color;
- font-size: $font-size;
- }
- &::-webkit-input-placeholder {
- color: $color;
- font-size: $font-size;
- }
-}
-
//Placeholder opacity
@mixin custom-placeholder-opacity($opacity: $placeholder-opacity) {
- &:-moz-placeholder {
- opacity: $opacity;
- }
- &::-moz-placeholder {
- opacity: $opacity;
- }
- &:-ms-input-placeholder {
- opacity: $opacity;
- }
- &::-webkit-input-placeholder {
- opacity: $opacity;
- }
+ &:-moz-placeholder {
+ opacity: $opacity;
+ }
+ &::-moz-placeholder {
+ opacity: $opacity;
+ }
+ &:-ms-input-placeholder {
+ opacity: $opacity;
+ }
+ &::-webkit-input-placeholder {
+ opacity: $opacity;
+ }
}
diff --git a/src/scss/_components/_page-about.scss b/src/scss/_components/_page-about.scss
index 729cc1f11..44dd093f1 100644
--- a/src/scss/_components/_page-about.scss
+++ b/src/scss/_components/_page-about.scss
@@ -13,4 +13,4 @@
margin: 0 auto;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_page-casestudy.scss b/src/scss/_components/_page-casestudy.scss
index 8754e1e4b..798843940 100644
--- a/src/scss/_components/_page-casestudy.scss
+++ b/src/scss/_components/_page-casestudy.scss
@@ -21,14 +21,15 @@
background: $mutted-soft;
}
- td, th {
+ td,
+ th {
padding: 15px;
}
}
.section-case-study {
h4 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.profile-image {
@@ -43,12 +44,11 @@
font-style: italic;
background-color: $mutted-soft;
border-radius: $border-radius;
- font-family: "Courier";
+ font-family: 'Courier';
transition: all 0.13s ease-in-out;
border-left: 5px solid $small-blue;
&:hover {
-
}
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_page-community.scss b/src/scss/_components/_page-community.scss
index 8370a6848..d2351f092 100644
--- a/src/scss/_components/_page-community.scss
+++ b/src/scss/_components/_page-community.scss
@@ -1,5 +1,4 @@
.section__os--hero {
-
h1 {
margin-top: 150px;
}
@@ -33,13 +32,13 @@
.contributor-pics {
margin: 5px;
img {
- border-radius: 50%
+ border-radius: 50%;
}
}
.contributor-card {
text-align: center;
- box-shadow: 0 4px 9px rgba(0,0,0,.05125);
+ box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05125);
border: 1px solid #eaeaea;
border-radius: $border-radius;
margin: 15px;
@@ -50,4 +49,4 @@
.section__os--contributor-list {
overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_page-contact.scss b/src/scss/_components/_page-contact.scss
index c42ec3a70..87415c263 100644
--- a/src/scss/_components/_page-contact.scss
+++ b/src/scss/_components/_page-contact.scss
@@ -6,4 +6,4 @@
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_page-customers.scss b/src/scss/_components/_page-customers.scss
index b55faaf59..1e907c09b 100644
--- a/src/scss/_components/_page-customers.scss
+++ b/src/scss/_components/_page-customers.scss
@@ -1,5 +1,5 @@
.featured-customer {
- box-shadow: 0 4px 9px rgba(0,0,0,.05125);
+ box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05125);
border: 1px solid #eaeaea;
border-radius: $border-radius;
margin-bottom: 25px;
@@ -13,7 +13,7 @@
margin-top: 0;
small {
- background: #4080FE;
+ background: #4080fe;
color: #fff;
font-weight: 600;
font-size: 14px;
diff --git a/src/scss/_components/_page-index.scss b/src/scss/_components/_page-index.scss
index 541cbb2d9..0400f26d8 100644
--- a/src/scss/_components/_page-index.scss
+++ b/src/scss/_components/_page-index.scss
@@ -16,7 +16,6 @@
}
}
-
section.subscribe {
padding: 75px 0;
@@ -42,4 +41,4 @@ section.subscribe {
width: 100%;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_page-price.scss b/src/scss/_components/_page-price.scss
index 32a7b7e82..ed702cbef 100755
--- a/src/scss/_components/_page-price.scss
+++ b/src/scss/_components/_page-price.scss
@@ -19,8 +19,10 @@
margin: 0;
}
- &:hover, &:active, &.active {
- box-shadow: 0 6px 18px -5px rgba(175,175,175,.5);
+ &:hover,
+ &:active,
+ &.active {
+ box-shadow: 0 6px 18px -5px rgba(175, 175, 175, 0.5);
}
}
@@ -104,17 +106,19 @@
font-weight: 500;
padding: 0.3em 2em;
text-transform: uppercase;
- background: #2196F3;
+ background: #2196f3;
border-radius: $border-radius;
}
}
- &:hover, &:active, &.active {
+ &:hover,
+ &:active,
+ &.active {
.pricing-charge {
- color: darken(#2196F3, 5%);
+ color: darken(#2196f3, 5%);
}
- box-shadow: 0 6px 18px -5px rgba(175,175,175,.5);
+ box-shadow: 0 6px 18px -5px rgba(175, 175, 175, 0.5);
}
}
diff --git a/src/scss/_components/_page-product.scss b/src/scss/_components/_page-product.scss
index 6fd947fc1..58165309c 100644
--- a/src/scss/_components/_page-product.scss
+++ b/src/scss/_components/_page-product.scss
@@ -1,5 +1,5 @@
.browser-container {
- box-shadow: 0 6px 18px -5px rgba(175,175,175,0.50);
+ box-shadow: 0 6px 18px -5px rgba(175, 175, 175, 0.5);
width: 720px;
img {
@@ -9,4 +9,4 @@
.visualize-dashboards-illustrated {
margin-top: 75px;
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_panel.scss b/src/scss/_components/_panel.scss
index ebf4380b0..fa421b5f4 100644
--- a/src/scss/_components/_panel.scss
+++ b/src/scss/_components/_panel.scss
@@ -6,7 +6,8 @@
color: $scorpion;
display: block;
padding: 5px;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
color: $primary;
background: $wild-sand;
}
diff --git a/src/scss/_components/_popover.scss b/src/scss/_components/_popover.scss
index 6b6096b54..84d7c3522 100755
--- a/src/scss/_components/_popover.scss
+++ b/src/scss/_components/_popover.scss
@@ -1,11 +1,11 @@
.popover {
border-radius: $border-radius;
- background: rgba(255,255,255,0.95);
+ background: rgba(255, 255, 255, 0.95);
text-align: center;
border: none;
- box-shadow: 0 3px 15px -2px rgba(175,175,175,.5);
+ box-shadow: 0 3px 15px -2px rgba(175, 175, 175, 0.5);
.arrow {
border: none;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_reset.scss b/src/scss/_components/_reset.scss
index 6cbe7578d..02bb988d0 100755
--- a/src/scss/_components/_reset.scss
+++ b/src/scss/_components/_reset.scss
@@ -1,96 +1,101 @@
/* RESET STYLES */
* {
- &:hover, &:focus, &:active {
- outline: none !important;
- }
+ &:hover,
+ &:focus,
+ &:active {
+ outline: none !important;
+ }
}
-a:hover, a:focus, a:visited {
- text-decoration: none;
- outline: none;
- outline-offset: 0;
+a:hover,
+a:focus,
+a:visited {
+ text-decoration: none;
+ outline: none;
+ outline-offset: 0;
}
-ol, ul {
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
+ol,
+ul {
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
}
.relative {
- position: relative;
+ position: relative;
}
.z-index {
- position: relative;
- z-index: 10;
+ position: relative;
+ z-index: 10;
}
.block {
- display: block;
+ display: block;
}
.inline-block {
- display: inline-block;
+ display: inline-block;
}
.full-width {
- width: 100%;
- display: block;
+ width: 100%;
+ display: block;
}
.overflow {
- overflow: hidden;
+ overflow: hidden;
}
.push-xs-down {
- @include respond-to(xs) {
- margin-bottom: 20px;
- }
+ @include respond-to(xs) {
+ margin-bottom: 20px;
+ }
}
.push-sm-down {
- @include respond-to(sm) {
- margin-bottom: 20px;
- }
+ @include respond-to(sm) {
+ margin-bottom: 20px;
+ }
}
.img--has-shadow {
- border: none;
- box-shadow: 0 6px 18px -5px rgba(175,175,175,.5);
+ border: none;
+ box-shadow: 0 6px 18px -5px rgba(175, 175, 175, 0.5);
}
.img-content {
- @extend .img-responsive, .center-block;
- &:not(:last-child) {
- margin-bottom: 25px;
- }
+ @extend .img-responsive, .center-block;
+ &:not(:last-child) {
+ margin-bottom: 25px;
+ }
}
.content-item {
- &:not(:last-child) {
- margin-bottom: 50px;
- @include respond-to(xs) {
- margin-bottom: 25px;
- }
- }
+ &:not(:last-child) {
+ margin-bottom: 50px;
+ @include respond-to(xs) {
+ margin-bottom: 25px;
+ }
+ }
}
.content-item-sm {
- margin-bottom: 25px;
+ margin-bottom: 25px;
}
.text-center-xs {
- @include respond-to(xs) {
- text-align: center;
- }
+ @include respond-to(xs) {
+ text-align: center;
+ }
}
.box {
- padding: 25px;
- &:not(:first-child) {
- margin-top: 25px;
- }
- &:not(:last-child) {
- margin-bottom: 25px;
- }
- @include respond-to(xs) {
- padding: 20px;
- }
+ padding: 25px;
+ &:not(:first-child) {
+ margin-top: 25px;
+ }
+ &:not(:last-child) {
+ margin-bottom: 25px;
+ }
+ @include respond-to(xs) {
+ padding: 20px;
+ }
}
.box--mutted {
- background: $mutted;
+ background: $mutted;
}
diff --git a/src/scss/_components/_search_results.scss b/src/scss/_components/_search_results.scss
index 94b05b27b..a4910203a 100644
--- a/src/scss/_components/_search_results.scss
+++ b/src/scss/_components/_search_results.scss
@@ -1,15 +1,16 @@
.algolia__result-highlight {
- background-color: #daeeff;
+ background-color: #daeeff;
}
.underline-link-holder {
- a {
- color: $primary;
- //border-bottom: 1px solid $primary;
- transition: all 0.25s cubic-bezier(0.2, 1, 0.4, 1);
- &:hover, &:focus {
- color: $primary;
- background-color: #daeeff;
- }
+ a {
+ color: $primary;
+ //border-bottom: 1px solid $primary;
+ transition: all 0.25s cubic-bezier(0.2, 1, 0.4, 1);
+ &:hover,
+ &:focus {
+ color: $primary;
+ background-color: #daeeff;
}
+ }
}
diff --git a/src/scss/_components/_section.scss b/src/scss/_components/_section.scss
index b4155fc6e..c8f15551e 100755
--- a/src/scss/_components/_section.scss
+++ b/src/scss/_components/_section.scss
@@ -71,7 +71,7 @@
.browser-image {
margin-top: 25px;
- box-shadow: 0 6px 18px -5px rgba(175,175,175,0.50);
+ box-shadow: 0 6px 18px -5px rgba(175, 175, 175, 0.5);
}
.section__open-source {
@@ -121,9 +121,9 @@
.section__more-features {
.feature-container {
- background: rgba(255,255,255,0.20);
- border: 1px solid rgba(102,136,153,0.18);
- box-shadow: 0 5px 9px -1px #EBF2FF;
+ background: rgba(255, 255, 255, 0.2);
+ border: 1px solid rgba(102, 136, 153, 0.18);
+ box-shadow: 0 5px 9px -1px #ebf2ff;
border-radius: $border-radius;
width: 30%;
float: left;
@@ -139,7 +139,6 @@
}
}
-
.section__integrations {
p {
margin-bottom: 70px;
@@ -151,7 +150,7 @@
.integrations-container {
padding: 50px;
- box-shadow: 0 8px 25px 0 rgba(155,155,155,0.15);
+ box-shadow: 0 8px 25px 0 rgba(155, 155, 155, 0.15);
border-radius: $border-radius;
h2 {
@@ -167,7 +166,7 @@
.section__databricks {
text-align: left;
padding-top: 50px;
- background-color: #F8FAFA;
+ background-color: #f8fafa;
@media (min-width: 768px) {
text-align: center;
}
@@ -180,20 +179,15 @@
@media (min-width: 768px) {
img {
width: 419px;
- }
+ }
}
}
-
-
-
-
-
#customers-illustrated {
width: 75%;
}
-#open-source-illustrated {
+#open-source-illustrated {
width: 100%;
}
@@ -201,7 +195,8 @@
width: 256px;
}
-#write-query-illustrated, #visualize-illustrated {
+#write-query-illustrated,
+#visualize-illustrated {
width: 90%;
}
@@ -211,11 +206,6 @@
}
}
-
-
-
-
-
// Optimization
/* Large devices (large desktops, 1200px and down) */
@@ -306,7 +296,8 @@
}
}
- .highlight-p, .highlight-ul li {
+ .highlight-p,
+ .highlight-ul li {
font-size: 16px;
line-height: 1.5;
}
@@ -396,15 +387,17 @@
width: 100%;
}
- #visualize-illustrated, #write-query-illustrated {
+ #visualize-illustrated,
+ #write-query-illustrated {
width: 75%;
}
-
+
.section--users {
text-align: center;
}
- .highlight-p, .highlight-ul li {
+ .highlight-p,
+ .highlight-ul li {
font-size: 14px;
line-height: 1.5;
}
@@ -412,7 +405,7 @@
.section__integrations p {
margin-bottom: 25px;
}
-
+
.footer__item--other {
clear: both;
}
@@ -420,4 +413,4 @@
.contributor-card {
min-width: 145px;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_components/_topics.scss b/src/scss/_components/_topics.scss
index db14a4a01..12c65ee8c 100644
--- a/src/scss/_components/_topics.scss
+++ b/src/scss/_components/_topics.scss
@@ -31,7 +31,8 @@ $topic-color: $small-blue;
@include respond-to(xs) {
min-height: 120px;
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
border-color: $topic-color;
background: lighten($link-color, 38%);
border-width: 2px;
@@ -59,7 +60,8 @@ $topic-color: $small-blue;
@include respond-to(xs) {
padding: 20px 0;
}
- &:hover, &:focus {
+ &:hover,
+ &:focus {
color: darken($link-color, 10%);
}
}
diff --git a/src/scss/_components/_typography.scss b/src/scss/_components/_typography.scss
index 02ce94223..4fcf08c81 100755
--- a/src/scss/_components/_typography.scss
+++ b/src/scss/_components/_typography.scss
@@ -1,26 +1,26 @@
-
-html, body {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-family: $body-font-family;
- color: $body-main-color;
- font-size: $body-font-size;
- line-height: $body-line-height;
- @include respond-to(xs) {
- font-size: $body-font-size-xs;
- }
+html,
+body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-family: $body-font-family;
+ color: $body-main-color;
+ font-size: $body-font-size;
+ line-height: $body-line-height;
+ @include respond-to(xs) {
+ font-size: $body-font-size-xs;
+ }
}
html {
- height: 100%;
+ height: 100%;
}
body {
- min-height: 100%;
+ min-height: 100%;
}
main {
- flex: 1;
+ flex: 1;
}
.wrapper {
@@ -34,247 +34,269 @@ body.drawer .wrapper {
}
.serif {
- font-family: "PT Serif", serif !important;
+ font-family: 'PT Serif', serif !important;
}
.em {
- font-style: italic;
+ font-style: italic;
}
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
- //margin-top: 0;
- margin-bottom: 20px;
- line-height: 1.3;
- font-weight: 500;
- &:last-child {
- margin-bottom: 0;
- }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+ //margin-top: 0;
+ margin-bottom: 20px;
+ line-height: 1.3;
+ font-weight: 500;
+ &:last-child {
+ margin-bottom: 0;
+ }
}
+h1,
+.h1 {
+ color: $black;
+ font-size: 36px;
-h1, .h1 {
- color: $black;
- font-size: 36px;
-
- @include respond-to(sm) {
- font-size: 32px;
- }
- @include respond-to(xs) {
- font-size: 28px;
- }
-}
-h2, .h2 {
- color: $black;
- font-size: 24px;
- line-height: 40px;
- @include respond-to(sm) {
- font-size: 24px;
- line-height: 38px;
- }
- @include respond-to(xs) {
- font-size: 22px;
- line-height: 36px;
- }
-}
-h3, .h3 {
- color: $black;
- font-size: 24px;
- @include respond-to(sm) {
- font-size: 22px;
- }
- @include respond-to(xs) {
- font-size: 20px;
- }
-}
-h4, .h4 {
- color: $black;
- font-size: 21px;
- font-weight: 400;
- line-height: 1.6;
- @include respond-to(xs) {
- font-size: 18px;
- }
-}
-h5, .h5 {
- color: $black;
- font-size: 17px;
- @include respond-to(xs) {
- font-size: 16px;
- }
+ @include respond-to(sm) {
+ font-size: 32px;
+ }
+ @include respond-to(xs) {
+ font-size: 28px;
+ }
+}
+h2,
+.h2 {
+ color: $black;
+ font-size: 24px;
+ line-height: 40px;
+ @include respond-to(sm) {
+ font-size: 24px;
+ line-height: 38px;
+ }
+ @include respond-to(xs) {
+ font-size: 22px;
+ line-height: 36px;
+ }
+}
+h3,
+.h3 {
+ color: $black;
+ font-size: 24px;
+ @include respond-to(sm) {
+ font-size: 22px;
+ }
+ @include respond-to(xs) {
+ font-size: 20px;
+ }
+}
+h4,
+.h4 {
+ color: $black;
+ font-size: 21px;
+ font-weight: 400;
+ line-height: 1.6;
+ @include respond-to(xs) {
+ font-size: 18px;
+ }
+}
+h5,
+.h5 {
+ color: $black;
+ font-size: 17px;
+ @include respond-to(xs) {
+ font-size: 16px;
+ }
}
-ul, ol {
- ul, ol {
- padding-left: 30px;
- }
+ul,
+ol {
+ ul,
+ ol {
+ padding-left: 30px;
+ }
}
a {
- color: $link-color;
- @include transition(250ms);
- text-decoration: none;
- &:hover, &:focus {
- color: darken($link-color, 10%);
- text-decoration: none;
- }
+ color: $link-color;
+ @include transition(250ms);
+ text-decoration: none;
+ &:hover,
+ &:focus {
+ color: darken($link-color, 10%);
+ text-decoration: none;
+ }
}
-p a, li a, table a {
- transition: all 0.25s cubic-bezier(0.2, 1, 0.4, 1);
- &:hover, &:focus {
- background-color: #daeeff;
- }
+p a,
+li a,
+table a {
+ transition: all 0.25s cubic-bezier(0.2, 1, 0.4, 1);
+ &:hover,
+ &:focus {
+ background-color: #daeeff;
+ }
}
button {
- @include transition(250ms);
+ @include transition(250ms);
}
.underline {
- text-decoration: underline;
+ text-decoration: underline;
}
p {
- margin-bottom: 10px;
- color: #111;
- /* &:last-child {
+ margin-bottom: 10px;
+ color: #111;
+ /* &:last-child {
margin-bottom: 0;
} */
}
-.small, small {
- font-size: 14px;
+.small,
+small {
+ font-size: 14px;
}
.lead {
- font-size: 20px;
- @include respond-to(xs) {
- font-size: 16px;
- }
+ font-size: 20px;
+ @include respond-to(xs) {
+ font-size: 16px;
+ }
}
-b, strong {
- font-weight: 600;
+b,
+strong {
+ font-weight: 600;
}
hr {
- border-color: #ddd;
+ border-color: #ddd;
}
.hr--sm {
- margin-top: 10px;
- margin-bottom: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.data-text {
- &:before {
- content: '<';
- }
- &:after {
- content: '>';
- }
+ &:before {
+ content: '<';
+ }
+ &:after {
+ content: '>';
+ }
}
.data-text__inner {
- &:before {
- content: attr(data-text);
- }
+ &:before {
+ content: attr(data-text);
+ }
}
.highlight-p {
- font-size: 18px;
- color: #707070;
- letter-spacing: 0;
- line-height: 30px;
+ font-size: 18px;
+ color: #707070;
+ letter-spacing: 0;
+ line-height: 30px;
}
.highlight-ul {
- list-style-image: url('/assets/images/elements/check.svg');
- padding-left: 25px;
- line-height: 30px;
+ list-style-image: url('/assets/images/elements/check.svg');
+ padding-left: 25px;
+ line-height: 30px;
- li {
- color: #333;
- font-size: 18px;
- }
+ li {
+ color: #333;
+ font-size: 18px;
+ }
}
/*Font classes*/
.font-light {
- font-family: $font-light;
+ font-family: $font-light;
}
.font-regular {
- font-family: $font-regular;
+ font-family: $font-regular;
}
.font-medium {
- font-family: $font-medium;
+ font-family: $font-medium;
}
.font-bold {
- font-family: $font-bold;
+ font-family: $font-bold;
}
-
/*Color classes*/
.text-mutted {
- color: $mutted;
+ color: $mutted;
}
.text-mutted-soft {
- color: $mutted-soft;
+ color: $mutted-soft;
}
.text-gray {
- color: $gray;
+ color: $gray;
}
.text-danger {
- color: $danger;
+ color: $danger;
}
.text-primary {
- color: $primary;
+ color: $primary;
}
.text-white {
- color: $white;
+ color: $white;
}
/*Background classes*/
.bg-mutted {
- background-color: $mutted;
+ background-color: $mutted;
}
.bg-mutted-soft {
- background-color: $mutted-soft;
+ background-color: $mutted-soft;
}
.bg-gray {
- background-color: $gray;
+ background-color: $gray;
}
.bg-danger {
- background-color: $danger;
+ background-color: $danger;
}
.bg-blue-gray {
- background: $blue-gray;
+ background: $blue-gray;
}
.bg-soft-blue {
- background: $soft-blue;
+ background: $soft-blue;
}
/*Margin classess*/
.mb-lg {
- margin-bottom: 60px;
- @include respond-to(md) {
- margin-bottom: 50px;
- }
- @include respond-to(sm) {
- margin-bottom: 30px;
- }
+ margin-bottom: 60px;
+ @include respond-to(md) {
+ margin-bottom: 50px;
+ }
+ @include respond-to(sm) {
+ margin-bottom: 30px;
+ }
}
.mb-md {
- margin-bottom: 50px;
- @include respond-to(md) {
- margin-bottom: 40px;
- }
- @include respond-to(sm) {
- margin-bottom: 25px;
- }
+ margin-bottom: 50px;
+ @include respond-to(md) {
+ margin-bottom: 40px;
+ }
+ @include respond-to(sm) {
+ margin-bottom: 25px;
+ }
}
.mb-sm {
- margin-bottom: 40px;
- @include respond-to(md) {
- margin-bottom: 30px;
- }
- @include respond-to(sm) {
- margin-bottom: 25px;
- }
+ margin-bottom: 40px;
+ @include respond-to(md) {
+ margin-bottom: 30px;
+ }
+ @include respond-to(sm) {
+ margin-bottom: 25px;
+ }
}
.mb-xs {
- margin-bottom: 5px;
+ margin-bottom: 5px;
}
diff --git a/src/scss/_components/_variables.scss b/src/scss/_components/_variables.scss
index 947193030..b5cd7ad8a 100755
--- a/src/scss/_components/_variables.scss
+++ b/src/scss/_components/_variables.scss
@@ -11,9 +11,9 @@ $white: #ffffff;
/* Black group */
$black: #000000;
/* Gray group */
-$legaloblolly: #BDC9D0; //Nav and footer links color
+$legaloblolly: #bdc9d0; //Nav and footer links color
$alabaster: #f7f7f7; //Mutted
-$seachell: #F8FAFA; //Mutted soft
+$seachell: #f8fafa; //Mutted soft
$alto: #dcdcdc; //Gray
$scorpion: #111; //Body text color
$gallery: #f0f0f0;
@@ -22,11 +22,11 @@ $hoki: #668899; //Navbar bg
$wild-sand: #f5f5f5;
$mine-shaft: #333333;
/* Blue group */
-$small-blue: #2196F3; //Footer bg
-$soft-blue: #E9F2FF;
+$small-blue: #2196f3; //Footer bg
+$soft-blue: #e9f2ff;
/* Red group */
-$bittersweet: #FF7864; //Danger
-$bridesmaid: #FEECE7;
+$bittersweet: #ff7864; //Danger
+$bridesmaid: #feece7;
/*************************
Global color variable
*************************/
@@ -42,12 +42,17 @@ $blue-gray: $hoki;
/*************************
Fonts variable
*************************/
-$font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
-$font-light: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-medium: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
-$font-bold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-light: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
+$font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
+$font-medium: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
+$font-bold: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
$font-icon: 'FontAwesome';
@@ -60,7 +65,6 @@ $body-font-size-xs: 15px;
$body-line-height: 1.6;
$body-main-color: $body-text-color;
-
/*************************
Links color variable
*************************/
diff --git a/src/scss/main.scss b/src/scss/main.scss
index b9ac19463..77fd92640 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,6 +1,6 @@
$bootstrap-sass-asset-helper: false;
-$fa-font-path: "~font-awesome/fonts/";
-$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
+$fa-font-path: '~font-awesome/fonts/';
+$icon-font-path: 'bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~font-awesome/scss/font-awesome';
@import '_components/_mixins.scss';
diff --git a/src/templates/DataSourcePage.jsx b/src/templates/DataSourcePage.jsx
index 9f33f55da..94b0f4ff8 100644
--- a/src/templates/DataSourcePage.jsx
+++ b/src/templates/DataSourcePage.jsx
@@ -128,9 +128,9 @@ export default function DataSourcePageTemplate({
-
- Share insights from {frontmatter.name} via link
- or embed them wherever you need to make your
- organization truly data driven.
+ Share insights from {frontmatter.name} via link or
+ embed them wherever you need to make your organization truly
+ data driven.
-
Integrate Redash with external services and{' '}
@@ -214,7 +214,7 @@ export default function DataSourcePageTemplate({
}
export const pageQuery = graphql`
- query($path: String!) {
+ query ($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
diff --git a/src/templates/HelpArticle.jsx b/src/templates/HelpArticle.jsx
index 6033c3d38..a944d3e57 100644
--- a/src/templates/HelpArticle.jsx
+++ b/src/templates/HelpArticle.jsx
@@ -75,7 +75,7 @@ class HelpPageTemplate extends React.Component {
const headings = document
.getElementById('pageContent')
.querySelectorAll('h1, h2, h3, h4, h5, h6')
- headings.forEach(heading => {
+ headings.forEach((heading) => {
heading.id =
heading.id ||
heading.textContent.replace(/[\. ,:-]+/g, '-').replace(/-$/, '')
@@ -235,7 +235,7 @@ class HelpPageTemplate extends React.Component {
}
export const pageQuery = graphql`
- query($category: String!, $parent_category: String, $slug: String) {
+ query ($category: String!, $parent_category: String, $slug: String) {
Article: markdownRemark(
frontmatter: {
parent_category: { eq: $parent_category }
diff --git a/src/templates/NarrowTextPage.jsx b/src/templates/NarrowTextPage.jsx
index 94ee1ed1c..e7e606b75 100644
--- a/src/templates/NarrowTextPage.jsx
+++ b/src/templates/NarrowTextPage.jsx
@@ -22,7 +22,7 @@ export default function NarrowTextPageTemplate({
}
export const pageQuery = graphql`
- query($path: String!) {
+ query ($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
diff --git a/src/templates/TextPage.jsx b/src/templates/TextPage.jsx
index c5df37fc4..6e88931c1 100644
--- a/src/templates/TextPage.jsx
+++ b/src/templates/TextPage.jsx
@@ -18,7 +18,7 @@ export default function TextPageTemplate({
}
export const pageQuery = graphql`
- query($path: String!) {
+ query ($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
-
- - Share insights from {frontmatter.name} via link - or embed them wherever you need to make your - organization truly data driven. + Share insights from {frontmatter.name} via link or + embed them wherever you need to make your organization truly + data driven.
- Integrate Redash with external services and{' '} @@ -214,7 +214,7 @@ export default function DataSourcePageTemplate({ } export const pageQuery = graphql` - query($path: String!) { + query ($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { diff --git a/src/templates/HelpArticle.jsx b/src/templates/HelpArticle.jsx index 6033c3d38..a944d3e57 100644 --- a/src/templates/HelpArticle.jsx +++ b/src/templates/HelpArticle.jsx @@ -75,7 +75,7 @@ class HelpPageTemplate extends React.Component { const headings = document .getElementById('pageContent') .querySelectorAll('h1, h2, h3, h4, h5, h6') - headings.forEach(heading => { + headings.forEach((heading) => { heading.id = heading.id || heading.textContent.replace(/[\. ,:-]+/g, '-').replace(/-$/, '') @@ -235,7 +235,7 @@ class HelpPageTemplate extends React.Component { } export const pageQuery = graphql` - query($category: String!, $parent_category: String, $slug: String) { + query ($category: String!, $parent_category: String, $slug: String) { Article: markdownRemark( frontmatter: { parent_category: { eq: $parent_category } diff --git a/src/templates/NarrowTextPage.jsx b/src/templates/NarrowTextPage.jsx index 94ee1ed1c..e7e606b75 100644 --- a/src/templates/NarrowTextPage.jsx +++ b/src/templates/NarrowTextPage.jsx @@ -22,7 +22,7 @@ export default function NarrowTextPageTemplate({ } export const pageQuery = graphql` - query($path: String!) { + query ($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { diff --git a/src/templates/TextPage.jsx b/src/templates/TextPage.jsx index c5df37fc4..6e88931c1 100644 --- a/src/templates/TextPage.jsx +++ b/src/templates/TextPage.jsx @@ -18,7 +18,7 @@ export default function TextPageTemplate({ } export const pageQuery = graphql` - query($path: String!) { + query ($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter {