added 260907 version of worker toolkit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user