added 260907 version of worker toolkit
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
$badges: (
|
||||
"default": $progress-gray,
|
||||
"primary": $primary,
|
||||
);
|
||||
|
||||
@each $badge-type, $color in $badges {
|
||||
.badge-#{$badge-type} {
|
||||
background-color: $color;
|
||||
border-radius: $base-font-size * 5;
|
||||
color: darken($color, 40%);
|
||||
display: inline-block;
|
||||
font-size: $base-font-size;
|
||||
line-height: 1;
|
||||
padding: 0.4em 1.2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.bottom-nav {
|
||||
background-color: white;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
height: $bottom-nav-height;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
-webkit-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
-moz-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
height: $bottom-nav-height;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
label {
|
||||
color: $inactive-link;
|
||||
font-size: .8rem;
|
||||
line-height: .8rem;
|
||||
margin: .25rem 0 0 0;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.icon * {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
background-color: $primary;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($primary, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
height: 1.5em;
|
||||
position: relative;
|
||||
font-size: 6px;
|
||||
background-color: $progress-gray;
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
line-height: inherit;
|
||||
background-color: $progress-blue;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.civ-chat-window {
|
||||
.ca__chat-expand-button {
|
||||
bottom: 115px;
|
||||
}
|
||||
|
||||
.ca__chat-launcher-body {
|
||||
bottom: 175px;
|
||||
}
|
||||
|
||||
@include media ($medium-screen) {
|
||||
.ca__chat-expand-button {
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.ca__chat-launcher-body {
|
||||
bottom: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
worker-toolkit-flaredown/repo/frontend/app/styles/app.scss
Normal file
49
worker-toolkit-flaredown/repo/frontend/app/styles/app.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@import "bourbon";
|
||||
@import "bitters/base";
|
||||
@import "neat";
|
||||
|
||||
@import "fonts";
|
||||
@import "variables";
|
||||
@import "badges";
|
||||
@import "mixins";
|
||||
@import "layout";
|
||||
@import "bottom-nav";
|
||||
@import "btn-group";
|
||||
@import "pace-theme-minimal";
|
||||
@import "progressbar";
|
||||
@import "global";
|
||||
@import "colorable";
|
||||
@import "spinner";
|
||||
@import "userengage";
|
||||
|
||||
@import "ember-power-select";
|
||||
@import "ember-power-select-search";
|
||||
|
||||
/* Keep in alphabetical order */
|
||||
@import "components/add-trackings";
|
||||
@import "components/chart-navigation";
|
||||
@import "components/checkin-days-nav";
|
||||
@import "components/checkin-navigation";
|
||||
@import "components/checkin/hbi-step";
|
||||
@import "components/checkin/multi-select-group";
|
||||
@import "components/checkin/summary-step";
|
||||
@import "components/checkin/trackables-step";
|
||||
@import "components/checkin/tracked-level";
|
||||
@import "components/checkin/treatment-taker";
|
||||
@import "components/checkin/weather-step";
|
||||
@import "components/discussions";
|
||||
@import "components/emoji-menu";
|
||||
@import "components/emoji-reactions";
|
||||
@import "components/form-field";
|
||||
@import "components/health-chart";
|
||||
@import "components/invitation-form";
|
||||
@import "components/label-switch";
|
||||
@import "components/login-form";
|
||||
@import "components/navigation-bar";
|
||||
@import "components/reset-password-form";
|
||||
@import "components/save-status";
|
||||
@import "components/signup-form";
|
||||
@import "components/step-controls";
|
||||
@import "components/tags-group";
|
||||
@import "components/update-password-form";
|
||||
@import "components/additional-info";
|
||||
@@ -0,0 +1,17 @@
|
||||
// Bitters 1.2.0
|
||||
// http://bitters.bourbon.io
|
||||
// Copyright 2013-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "variables";
|
||||
|
||||
// Neat Settings -- uncomment if using Neat -- must be imported before Neat
|
||||
@import "grid-settings";
|
||||
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "lists";
|
||||
@import "offsets";
|
||||
@import "tables";
|
||||
@import "typography";
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
#{$all-buttons} {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-radius: $base-border-radius;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: $small-spacing $base-spacing;
|
||||
text-decoration: none;
|
||||
transition: background-color $base-duration $base-timing;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@use 'sass:math';
|
||||
|
||||
fieldset {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
margin-bottom: math.div($small-spacing, 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: math.div($small-spacing, 2);
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
display: block;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
#{$all-text-inputs},
|
||||
select[multiple] {
|
||||
background-color: $base-background-color;
|
||||
border: $base-border;
|
||||
border-radius: $base-border-radius;
|
||||
box-shadow: $form-box-shadow;
|
||||
box-sizing: border-box;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
margin-bottom: $small-spacing;
|
||||
padding: math.div($base-spacing, 3);
|
||||
transition: border-color $base-duration $base-timing;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($base-border-color, 20%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $action-color;
|
||||
box-shadow: $form-box-shadow-focus;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: shade($base-background-color, 5%);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border: $base-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline;
|
||||
margin-right: math.div($small-spacing, 2);
|
||||
}
|
||||
|
||||
[type="file"] {
|
||||
margin-bottom: $small-spacing;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: $base-spacing;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Neat Overrides
|
||||
// $column: 90px;
|
||||
// $gutter: 30px;
|
||||
// $grid-columns: 12;
|
||||
// $max-width: 1200px;
|
||||
|
||||
// Neat Breakpoints
|
||||
$medium-screen: 600px;
|
||||
$large-screen: 900px;
|
||||
@@ -0,0 +1,19 @@
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: $small-spacing;
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
margin-top: $small-spacing;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.vert-offset-top-1 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.vert-offset-top-2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.vert-offset-top-3-conditional {
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.vert-offset-bottom-0_5 {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.vert-offset-bottom-1 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.vert-offset-bottom-2 {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: $small-spacing 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid shade($base-border-color, 25%);
|
||||
font-weight: 600;
|
||||
padding: $small-spacing 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: $base-border;
|
||||
padding: $small-spacing 0;
|
||||
}
|
||||
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
body {
|
||||
color: $base-font-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $heading-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $action-color;
|
||||
text-decoration: none;
|
||||
transition: color $base-duration $base-timing;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: shade($action-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: $base-border;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
margin: $base-spacing 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@use 'sass:math';
|
||||
|
||||
// Typography
|
||||
$base-font-family: $font-stack-helvetica;
|
||||
$heading-font-family: $base-font-family;
|
||||
|
||||
// Font Sizes
|
||||
$base-font-size: 1em;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.2;
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 3px;
|
||||
$base-spacing: $base-line-height * 1em;
|
||||
$small-spacing: math.div($base-spacing, 2);
|
||||
$base-z-index: 0;
|
||||
$bottom-nav-height: 3.25rem;
|
||||
|
||||
// Colors
|
||||
$blue: #1565c0;
|
||||
$dark-gray: #333;
|
||||
$medium-gray: #999;
|
||||
$light-gray: #ddd;
|
||||
$progress-gray: #f1f1f1;
|
||||
$progress-blue: #56CCF2;
|
||||
$primary: #73C1BA;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $dark-gray;
|
||||
$action-color: $blue;
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray;
|
||||
$base-border: 1px solid $base-border-color;
|
||||
|
||||
// Background Colors
|
||||
$base-background-color: #fff;
|
||||
$secondary-background-color: tint($base-border-color, 75%);
|
||||
|
||||
// Forms
|
||||
$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
|
||||
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms;
|
||||
$base-timing: ease;
|
||||
@@ -0,0 +1,19 @@
|
||||
$colors: #145B7F, #D8AB41, #ED544E, #88A146, #7D4282, #E25E32, #1B6F4C, #C5265B, #43B0D6, #F2CB43, #F28E8B, #B3CB84,
|
||||
#867EB8, #F59958, #58AF8D, #E25097, #709CB2, #E7CC89, #F07670, #B2BE84, #B18DB4, #ED9E81, #74A893, #DB7B9C,
|
||||
#A1CAE1, #F7DF89, #F7BBB9, #D1DFB5, #CEBAD8, #F9C29A, #9ACFBA, #ED95C1, #8CCFE7, #B6B2D5, #7D4282, #73C1BA,
|
||||
white, $dark-shadow, $inactive-link, $dark-gray;
|
||||
|
||||
@each $color in $colors {
|
||||
$i: (index($colors, $color) - 1);
|
||||
|
||||
.colorable-bg-#{$i} { background-color: $color !important; }
|
||||
.colorable-clr-#{$i} { color: $color !important; }
|
||||
.colorable-fill-#{$i} { fill: $color !important; }
|
||||
.colorable-stroke-#{$i} { stroke: $color !important; }
|
||||
.colorable-border-#{$i} { border-color: $color !important; }
|
||||
|
||||
// switch bg
|
||||
input.cmn-toggle-round.checked.tbg-#{$i} + label:before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
h6.trackable {
|
||||
font-size: 1.2em;
|
||||
&:before {
|
||||
content: "✔ ";
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.explainer {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
margin: .5em;
|
||||
color: $grey;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.flaredown-additional-info {
|
||||
padding: 2em 0;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
|
||||
.item {
|
||||
flex: 0.5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.chart-navigation {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: $bottom-nav-height;
|
||||
height: $bottom-nav-height * .8;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
user-select: none;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
-webkit-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
-moz-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
span,
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0.2;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.picker__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eye-icon,
|
||||
.calendar-icon {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-grow: 0.5;
|
||||
justify-content: center;
|
||||
|
||||
.calendarItem {
|
||||
border: 2px solid $primary;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
max-height: 2.6rem;
|
||||
max-width: 140px;
|
||||
text-align: -webkit-center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.left-arrow {
|
||||
flex: 0.1;
|
||||
}
|
||||
|
||||
.calendarItem {
|
||||
flex: 0.4;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 0.4;
|
||||
}
|
||||
|
||||
.rigth-arrow {
|
||||
flex: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.isBottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.picker__button--clear {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
.checkin-head-nav {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.checkin-date > a > svg {
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkin-days-nav {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
box-shadow: 0 4px 0 #E1D8C8;
|
||||
max-width: 500px;
|
||||
width: 95%;
|
||||
|
||||
.ember-pick-a-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.yesterday, .tomorrow {
|
||||
flex: 1;
|
||||
font-size: 2em;
|
||||
position: relative;
|
||||
transition: all .25s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4, 1);
|
||||
a { color: $primary; }
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 5px 20px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.yesterday {
|
||||
border-right: 1px solid $lightgrey;
|
||||
}
|
||||
|
||||
.tomorrow {
|
||||
border-left: 1px solid $lightgrey;
|
||||
}
|
||||
|
||||
.calendar-opener {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.checkin-date {
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
padding: 20px 0 20px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
.checkin-days-nav {
|
||||
&:hover {
|
||||
.yesterday, .tomorrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.checkin-navigation {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: $bottom-nav-height;
|
||||
height: $bottom-nav-height * .8;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
|
||||
-webkit-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
-moz-box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
box-shadow: 0px 0px .5rem 0px $shadow;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $inactive-link;
|
||||
display: flex;
|
||||
padding: 0 .5em;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.hbi-step {
|
||||
.switch-name {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
margin-top: 3px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.score {
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
background-color: #ECF7F6;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.choosen-object {
|
||||
margin: 0 5px 5px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
&:hover {
|
||||
opacity: .85;
|
||||
}
|
||||
.regular {
|
||||
color: $primary;
|
||||
font-size: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 400px;
|
||||
}
|
||||
.badge-text {
|
||||
font-size: 1.5em;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
background: orange;
|
||||
border-top-right-radius: 999px;
|
||||
border-bottom-right-radius: 999px;
|
||||
padding: 0 10px 0 0;
|
||||
color: white;
|
||||
}
|
||||
.badge-pointer {
|
||||
vertical-align: bottom;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.checkin-summary {
|
||||
@include outer-container;
|
||||
max-width: 500px;
|
||||
.summary-title {
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
-webkit-margin-after: 0em;
|
||||
}
|
||||
.note-textarea {
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-posts {
|
||||
padding-top: 5%;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.trackables-step {
|
||||
.trackable-row {
|
||||
.draggable-dropzone {
|
||||
height: 1.5em;
|
||||
&.activated {
|
||||
height: 5em;
|
||||
background-color: $lightgrey;
|
||||
border-radius: 5px;
|
||||
border: 3px dashed $primary;
|
||||
}
|
||||
&.deactivated {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.draggable-item {
|
||||
&.activated {
|
||||
border-radius: 5px;
|
||||
border: 3px dashed $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
.tracked-level {
|
||||
.pips {
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
border-radius: 5px;
|
||||
width: 15%;
|
||||
max-width: 50px;
|
||||
height: 40px;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
background-color: #ddd;
|
||||
opacity: 0.4;
|
||||
|
||||
&.highlight {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
width: 40px;
|
||||
border-radius: 999px;
|
||||
background-image: url(smiley.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 25px 25px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover .tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@include position(absolute, null 0 3em 0);
|
||||
transition: all 0.2s ease-in-out;
|
||||
background-color: black;
|
||||
background: black;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 2px black;
|
||||
color: #333;
|
||||
font-size: 0.7em;
|
||||
line-height: 1.5em;
|
||||
margin-left: -21px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 100px;
|
||||
min-width: 100px;
|
||||
opacity: 0;
|
||||
padding: 0.7em;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
|
||||
p {
|
||||
color: white;
|
||||
line-height: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include position(absolute, null 0 null 0);
|
||||
border: 8px solid transparent;
|
||||
bottom: -1.5em;
|
||||
color: black;
|
||||
content: '▼';
|
||||
font-size: 1.4em;
|
||||
margin-left: -8px;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px silver;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.treatment-taker {
|
||||
display: flex;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.treatment-data {
|
||||
.treatment-dose {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 3px;
|
||||
margin-bottom: .1em;
|
||||
}
|
||||
.untaken {
|
||||
color: $light-gray;
|
||||
}
|
||||
.indented {
|
||||
margin: 0;
|
||||
}
|
||||
.dose {
|
||||
border-radius: 999px;
|
||||
border: 2px solid;
|
||||
padding: 5px 10px 5px 10px;
|
||||
&:hover {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
.ember-basic-dropdown {
|
||||
@extend .indented;
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
.dose-trigger,
|
||||
.dose-dropdown {
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.dose-dropdown {
|
||||
margin-top: -44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.measurements {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.measurement {
|
||||
flex-grow: 1;
|
||||
|
||||
&.clickable {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.discussion-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: white;
|
||||
padding: .5em .5em;
|
||||
border: 1px solid $primary;
|
||||
border-radius: 5px;
|
||||
background-color: $primary;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($primary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-filter {
|
||||
color: $primary;
|
||||
padding: .5em 1em;
|
||||
background-color: transparent;
|
||||
border: 1px solid $primary;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.followed-topic {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.8em;
|
||||
.x-to-remove {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
display: flex;
|
||||
:first-child {
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
}
|
||||
:last-child {
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-filter {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.badge-post-topics {
|
||||
background-color: $secondary;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.filter-topic {
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.new-comment {
|
||||
textarea{
|
||||
height: 54px;
|
||||
transition: height .25s;
|
||||
|
||||
&:focus {
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.emoji-menu {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.devider {
|
||||
margin: .5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-menu-tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.emoji-menu-tab {
|
||||
width: 24px;
|
||||
height: 29px;
|
||||
background: url('/assets/emoji/IconsetSmiles.png') no-repeat;
|
||||
background-size: 42px 350px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.icon-smile { background-position: -9px -34px; }
|
||||
.icon-smile-selected { background-position: -9px -5px; }
|
||||
|
||||
.icon-flower { background-position: -9px -145px; }
|
||||
.icon-flower-selected { background-position: -9px -118px; }
|
||||
|
||||
.icon-bell { background-position: -9px -89px; }
|
||||
.icon-bell-selected { background-position: -9px -61px; }
|
||||
|
||||
.icon-car { background-position: -9px -196px; }
|
||||
.icon-car-selected { background-position: -9px -170px; }
|
||||
|
||||
.icon-grid { background-position: -9px -248px; }
|
||||
.icon-grid-selected { background-position: -9px -222px; }
|
||||
|
||||
.icon-car,
|
||||
.icon-bell,
|
||||
.icon-grid,
|
||||
.icon-smile,
|
||||
.icon-flower {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.icon-car:hover,
|
||||
.icon-bell:hover,
|
||||
.icon-grid:hover,
|
||||
.icon-smile:hover,
|
||||
.icon-flower:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-items-wrap {
|
||||
max-height: 30vh;
|
||||
min-height: 30vh;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.emoji-item {
|
||||
padding: 3px;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.emoji-reactions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emoji-reaction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid $lightgrey;
|
||||
border-radius: 5px;
|
||||
|
||||
padding: 3px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
> * {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&.is-participated {
|
||||
background-color: lighten($primary, 30%);
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.form-field {
|
||||
.error-message {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
.health-chart {
|
||||
&.dragging {
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
|
||||
&.dragging:active {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
.g-background {
|
||||
x: 5px;
|
||||
rx: 5;
|
||||
ry: 5;
|
||||
fill: white;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.ruler-label {
|
||||
fill: $background;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.ruler-line {
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 3, 3;
|
||||
stroke: $background;
|
||||
}
|
||||
|
||||
.tool-tip {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
svg {
|
||||
circle.point {
|
||||
fill: $background;
|
||||
}
|
||||
|
||||
circle.point:hover {
|
||||
stroke-width: 3;
|
||||
cursor: pointer;
|
||||
fill: $background;
|
||||
}
|
||||
|
||||
.marker:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trackable-title {
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
path.line {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
fill: none;
|
||||
stroke: $grey;
|
||||
stroke-width: 1;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.chart {
|
||||
.axis {
|
||||
path {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 3,3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
.axis {
|
||||
path, line {
|
||||
fill: none;
|
||||
stroke: $grey;
|
||||
stroke-width: 1;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.tick {
|
||||
font-size: 10px;
|
||||
}
|
||||
.tick:hover {
|
||||
fill: $grey;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-enabler {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hide-control {
|
||||
fill: $dark-shadow;
|
||||
font-size: .8em;
|
||||
transform: translate(calc(100vw - 35px), -5px);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.invitation-form {
|
||||
@include outer-container;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.label-switch {
|
||||
$switch-width: 52px;
|
||||
$switch-padding: 2px;
|
||||
$switch-height: 32px;
|
||||
$switch-radius: $switch-height;
|
||||
$knob-size: $switch-height - ($switch-padding * 2);
|
||||
$knob-radius: $switch-height - ($switch-padding * 2);
|
||||
$knob-width: $knob-size;
|
||||
$switch-background: $base-background-color;
|
||||
$switch-border-background: darken($base-background-color, 9%);
|
||||
$switch-shadow: 0 2px 5px transparentize(black, 0.6);
|
||||
|
||||
border-radius: $switch-radius;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $switch-height;
|
||||
margin-bottom: 0px;
|
||||
position: relative;
|
||||
width: $switch-width;
|
||||
|
||||
.checkbox {
|
||||
background-color: $switch-border-background;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
+ .checkbox {
|
||||
transition: all 0.3s ease;
|
||||
border-radius: $switch-radius;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: $switch-height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: $switch-width;
|
||||
z-index: 0;
|
||||
|
||||
&:before {
|
||||
@include position(absolute, 2px 0 0 2px);
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
background-color: $switch-background;
|
||||
border-radius: $switch-radius;
|
||||
content: "";
|
||||
height: $knob-radius;
|
||||
width: $switch-width - ($switch-padding * 2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include position(absolute, 2px 0 0 2px);
|
||||
transition: all 0.3s ease;
|
||||
@include size($knob-size);
|
||||
background-color: $switch-background;
|
||||
border-radius: $knob-radius;
|
||||
box-shadow: $switch-shadow;
|
||||
content: "";
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .checkbox {
|
||||
|
||||
&:before {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: $switch-width - $knob-width - ($switch-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.login-form {
|
||||
@include outer-container;
|
||||
@include single-col;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
$large-screen: 50em !default;
|
||||
$medium-screen: 30em !default;
|
||||
$submenu-width: 12em;
|
||||
|
||||
$action-color: #477DCA !default;
|
||||
$sliding-panel-border-color: #eee;
|
||||
$sliding-panel-background: #fff;
|
||||
$sliding-panel-color: $primary;
|
||||
$sliding-panel-border: 1px solid $sliding-panel-border-color;
|
||||
$sliding-panel-background-hover: $primary;
|
||||
$sliding-panel-color-hover: #fff;
|
||||
$sliding-panel-background-focus: darken($sliding-panel-background, 5%);
|
||||
|
||||
.navigation-bar {
|
||||
display: none;
|
||||
@include media ($medium-screen) {
|
||||
display: inline-block;
|
||||
}
|
||||
.navigation-wrapper {
|
||||
@include clearfix;
|
||||
@include outer-container;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
max-height: 2em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
float: none;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
ul.navigation-menu {
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav items
|
||||
ul li.nav-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
@include media ($medium-screen) {
|
||||
background: transparent;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
li.nav-link a {
|
||||
display: inline-block;
|
||||
|
||||
@include media ($large-screen) {
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.reset-password-form {
|
||||
@include outer-container;
|
||||
@include single-col;
|
||||
h4 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.save-status {
|
||||
color: $grey;
|
||||
// padding: 20px 0 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.signup-form {
|
||||
@include outer-container;
|
||||
@include single-col;
|
||||
|
||||
.g-recaptcha {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.step-controls {
|
||||
@include outer-container;
|
||||
margin-top: 20px;
|
||||
.back,
|
||||
.forward {
|
||||
@include grid-column(6);
|
||||
text-align: center;
|
||||
a {
|
||||
margin-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
background-color: $primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($primary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
button.summary-btn {
|
||||
display: inline-flex;
|
||||
span {
|
||||
padding-left: 5%;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
button.discussion-btn {
|
||||
background-color: $primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($primary, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.tags-group {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.update-password-form {
|
||||
@include outer-container;
|
||||
}
|
||||
|
||||
.expired-box {
|
||||
padding: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.ember-basic-dropdown-trigger, input.ember-power-select-search-input {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0 5px;
|
||||
height: 40px;
|
||||
margin-bottom: .25em;
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
box-shadow: 0 0 5px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ember-power-select-placeholder {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.ember-power-select-status-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ember-power-select-dropdown {
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.power-select-dropdown-trackable {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.ember-power-select-selected-item {
|
||||
line-height: 2.6;
|
||||
}
|
||||
|
||||
.ember-power-select-option {
|
||||
margin-bottom: 2px;
|
||||
.title {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: .8em;
|
||||
color: $grey;
|
||||
}
|
||||
&[aria-current="true"] {
|
||||
background-color: $primary;
|
||||
color: #ffffff;
|
||||
.subtitle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
worker-toolkit-flaredown/repo/frontend/app/styles/fonts.scss
Normal file
23
worker-toolkit-flaredown/repo/frontend/app/styles/fonts.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@font-face {
|
||||
font-family: 'proximanovacond-regular';
|
||||
src: url('fonts/proximanovacond-regular-webfont.eot');
|
||||
src: url('fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/proximanovacond-regular-webfont.woff') format('woff'),
|
||||
url('fonts/proximanovacond-regular-webfont.ttf') format('truetype'),
|
||||
url('fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'proximanova-regular';
|
||||
src: url('fonts/proximanova-regular-webfont.eot');
|
||||
src: url('fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/proximanova-regular-webfont.woff') format('woff'),
|
||||
url('fonts/proximanova-regular-webfont.ttf') format('truetype'),
|
||||
url('fonts/proximanova-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
661
worker-toolkit-flaredown/repo/frontend/app/styles/global.scss
Normal file
661
worker-toolkit-flaredown/repo/frontend/app/styles/global.scss
Normal file
@@ -0,0 +1,661 @@
|
||||
.tip {
|
||||
background: #ECF7F6;
|
||||
color: $primary;
|
||||
padding: .5em 1em;
|
||||
text-align: left;
|
||||
border: 1px solid $primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
@include outer-container;
|
||||
@include standard-shadow;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 5px;
|
||||
background-color: $primary;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($primary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.p-note {
|
||||
font-size: 0.75em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
.delete-btn h5 {
|
||||
margin-bottom: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.flaredown-transparent-box {
|
||||
@include outer-container;
|
||||
width: 95%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.flaredown-white-box {
|
||||
@include outer-container;
|
||||
@include single-col;
|
||||
margin-bottom: 1em;
|
||||
width: 95%;
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.tip {
|
||||
margin: 1em auto 2em auto;
|
||||
}
|
||||
.success_img {
|
||||
margin: 2em auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.max-width {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 30px 0px;
|
||||
}
|
||||
|
||||
&.flaredown-svg-group {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 28px;
|
||||
|
||||
img {
|
||||
padding-bottom: $space_md;
|
||||
}
|
||||
}
|
||||
.separator-line {
|
||||
height: 1px;
|
||||
display: flex;
|
||||
background: $grey;
|
||||
opacity: .3;
|
||||
}
|
||||
.checkins-list-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
padding-bottom: $space_md;
|
||||
.checkins-text {
|
||||
padding-left: $space_md;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.arrow-check-in {
|
||||
color:#73c1ba;
|
||||
font-size: 2em;
|
||||
}
|
||||
.checkins-list {
|
||||
padding-top: $space_sm;
|
||||
padding-bottom: $space_lg;
|
||||
}
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
padding: $space_sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
.x-to-remove {
|
||||
color: $grey;
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
color: $base-font-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight unread notification
|
||||
.unreadNotification {
|
||||
background: $secondary;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 8em;
|
||||
color: $dark-shadow;
|
||||
a {
|
||||
color: $dark-shadow;
|
||||
margin: 0 .5em;
|
||||
}
|
||||
.footer-help-btn {
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
border: 2px solid $dark-shadow;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.legal {
|
||||
@include outer-container;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 0 $shadow;
|
||||
max-width: 700px;
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
p + h5, ul + h5 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
background-color: darken($primary,10%);
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: $action-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: $indianred;
|
||||
}
|
||||
|
||||
// https://github.com/emberjs/ember.js/issues/13171#issuecomment-200521638
|
||||
[data-ember-action] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// TEMPORARY FIX
|
||||
.ca__chat-expand-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-back-button {
|
||||
@include media ($large-screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.checkinReminder {
|
||||
margin-top: 5%;
|
||||
color: $grey;
|
||||
|
||||
.reminderTitle {
|
||||
color: $label-color;
|
||||
font-weight: 600;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.checked {
|
||||
color: $label-color;
|
||||
}
|
||||
|
||||
.checkinReminders {
|
||||
display: flex;
|
||||
padding-left: 28px;
|
||||
|
||||
.checkinReminderTime {
|
||||
width: 95px;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ember-basic-dropdown {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ember-basic-dropdown-trigger {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.checkinReminders .picker__box {
|
||||
width: 75%;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.checkinPrStep {
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
.prRate {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 89%;
|
||||
|
||||
li {
|
||||
flex: 1;
|
||||
border: 1px solid $grey;
|
||||
border-left: none;
|
||||
text-align: center;
|
||||
color: $grey;
|
||||
font-weight: 200;
|
||||
font-size: 1.5em;
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid $grey;
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
background-color: $primary;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
button.pr-btn {
|
||||
background-color: $primary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkinReviewBody {
|
||||
text-align: center;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.checkinReviewBody {
|
||||
.reviewSocials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reviewButtons {
|
||||
.reviewBtn {
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: $radius;
|
||||
|
||||
a {
|
||||
display: inherit;
|
||||
padding: 0.5em 0.25em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewIOS-btn {
|
||||
background-color: $iosBtn-color;
|
||||
:active {
|
||||
background-color: rgba(31, 77, 158, 1);
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewGP-btn {
|
||||
background-color: $gbBtn-color;
|
||||
:active {
|
||||
background-color: rgba(29, 145, 135, 1);
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-button {
|
||||
span a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fb-share-button,
|
||||
.twitter-share-button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
// History Page
|
||||
|
||||
.history-box {
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.choosen-object {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.history-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.history-btn {
|
||||
background-color: $primary;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(29, 145, 135, 1);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.large-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history-remove {
|
||||
color: rgba(255, 0, 0, 0.72);
|
||||
}
|
||||
|
||||
.history-cancel {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.history-index-btn {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border: 1px solid $dark-shadow;
|
||||
color: $dark-shadow;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(225, 216, 200, 0.36);
|
||||
outline: none;
|
||||
color: $dark-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pattern Index block
|
||||
|
||||
.pattern-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 1em;
|
||||
width: 95%;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
|
||||
&.pattern-edit {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flaredown-svg-group {
|
||||
.line {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.dot {
|
||||
fill: #ffab00;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.yGrid {
|
||||
fill: none;
|
||||
stroke: $background;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 3,3;
|
||||
}
|
||||
|
||||
line.hover-line {
|
||||
stroke: $lightgrey;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.background-area {
|
||||
.svg-background {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-hover-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-area {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
border: 2px solid $lightgrey;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
visibility: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
padding: 0 5px;
|
||||
background-color: $secondary;
|
||||
color: $primary;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tooltip-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
|
||||
.line-item {
|
||||
order: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span:first-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.marker-items {
|
||||
order: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.marker-item {
|
||||
display: flex;
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.tooltip-items {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.trackableItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: red;
|
||||
margin-right: 10px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.circle:before {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.line:before {
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sharePatternLink {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.history-index-btn {
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Sharing Patterns
|
||||
.sharedPatternsDialog {
|
||||
.sharedPatternList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sharedPattern {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row-reverse;
|
||||
justify-content: flex-end;
|
||||
padding: 5px 0;
|
||||
|
||||
label:last-child { margin-right: 15px; }
|
||||
}
|
||||
|
||||
.sharedPatternBtn {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
|
||||
&:disabled:hover {
|
||||
background-color: #50b1a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sharedBottom {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.sharedPatternUrl {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.birthDate {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
div:nth-child(3) {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.birthdayForm {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
//Form Elements
|
||||
.checkbox{
|
||||
display:flex;
|
||||
justify-content: start;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.flex-container.right-nav a:nth-child(2) {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
326
worker-toolkit-flaredown/repo/frontend/app/styles/layout.scss
Normal file
326
worker-toolkit-flaredown/repo/frontend/app/styles/layout.scss
Normal file
@@ -0,0 +1,326 @@
|
||||
body {
|
||||
background: $background;
|
||||
font-family: $proxima-regular;
|
||||
position: relative;
|
||||
margin: 1em 0 $bottom-nav-height 0;
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken($primary, 30%)
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
font-family: $proxima-regular;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header.toggle-header {
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
header.navigation {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.hideTag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pull-down {
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
padding-top: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
z-index: 1200;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
transition: transform 300ms linear;
|
||||
|
||||
// Unauthenticated User styles
|
||||
&.unauthenticatedNav {
|
||||
background: $secondary;
|
||||
min-height: 50px;
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
h5 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.left-nav, .right-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $medium-screen) {
|
||||
border: 1px solid $primary;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.hideNavBar {
|
||||
transform: translate3d(0px, -101%, 0px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $medium-screen) {
|
||||
margin: auto;
|
||||
max-width: 500px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
//===================
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
//====================
|
||||
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: .5em .75em;
|
||||
margin-bottom: .5em;
|
||||
box-shadow: 0 1px 0 #E1D8C8;
|
||||
|
||||
.page-title {
|
||||
color: $grey;
|
||||
flex: 2;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.left-nav {
|
||||
flex: 0.5;
|
||||
@media screen and (min-width: $medium-screen) {
|
||||
// display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-screen) {
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
color: $grey;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-nav {
|
||||
flex: 0.5;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
|
||||
.icon {
|
||||
margin-left: .5em;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.search-resource {
|
||||
justify-content: inherit;
|
||||
align-items: center;
|
||||
padding-top: 1em;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
input {
|
||||
width: 80%;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.ember-basic-dropdown {
|
||||
flex: 0.9;
|
||||
span {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.ember-power-select-status-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typeTopickable {
|
||||
color: $grey;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
span.ember-power-select-clear-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 500rem;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
right: -3.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-nav {
|
||||
align-items: baseline;
|
||||
justify-content: flex-start;
|
||||
padding: 1.5em;
|
||||
|
||||
.notification-title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.img-logo {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Descussions page
|
||||
|
||||
.shareSocials {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
// Post page
|
||||
.flaredown-post-page {
|
||||
max-width: 500px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Topic page
|
||||
.topic-name, .topic-type {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
// Profile page
|
||||
.profile-header {
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
.profile-circle {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.pictureLetter{
|
||||
align-self: center;
|
||||
height: 80px;
|
||||
width:80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5em;
|
||||
background-color: #E18E8D;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.join-footer {
|
||||
background: $primary;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-height: 50px;
|
||||
max-width: 385px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Tagging users
|
||||
.atwho-view {
|
||||
color: $primary;
|
||||
|
||||
.cur {
|
||||
color: $primary;
|
||||
background: $secondary;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@mixin standard-shadow {
|
||||
box-shadow: 0 4px 0 $shadow;
|
||||
}
|
||||
|
||||
@mixin card {
|
||||
@include standard-shadow;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 0 $shadow;
|
||||
}
|
||||
|
||||
@mixin single-col {
|
||||
@include card;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@mixin outer-container {
|
||||
@include clearfix;
|
||||
box-sizing: border-box;
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
*,::after,::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media($query) {
|
||||
@media screen and (min-width: $query) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/* This is a compiled file, you should be editing the file in the templates directory */
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
background: $primary;
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--sk-color: #{$primary};
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
//Colors
|
||||
$background: #F2EEE8;
|
||||
$primary: #73C1BA;
|
||||
$secondary: rgba(115, 193, 186, 0.24);
|
||||
$grey: grey;
|
||||
$lightgrey: #F1EEEE;
|
||||
$indianred: #CD5C5C;
|
||||
$shadow: #E1D8C8;
|
||||
$dark-shadow: #C3B399;
|
||||
$inactive-link: #BDBDBD;
|
||||
$lilaс: #867eb8;
|
||||
$label-color: #333;
|
||||
$iosBtn-color: #3786e8;
|
||||
$gbBtn-color: #a4c639;
|
||||
$radius: 3px;
|
||||
|
||||
// Fonts
|
||||
$proxima-regular: "proximanova-regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
|
||||
//Media
|
||||
$tablet: 768px;
|
||||
|
||||
//Spacing
|
||||
$space_xs: 4px;
|
||||
$space_sm: 8px;
|
||||
$space_md: 16px;
|
||||
$space_lg: 24px;
|
||||
$space_xl: 32px;
|
||||
$space_xxl: 40px;
|
||||
Reference in New Issue
Block a user