raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into HEAD

Browse Source
This commit is contained in:
Continuous Integration
2017-01-25 12:41:02 +11:00
parent 165b437f31 b526307ad1
commit 05f9747f15
131 changed files with 6176 additions and 4440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/admin/alert.css.sass
View File

@@ -1,15 +0,0 @@
.alert
border: 3px solid #919191
border-radius: 6px
margin-bottom: 20px
color: #919191
padding: 5px 10px
h6
color: #919191
.message
font-weight: bold
&:hover
border-color: #DA5354
color: #DA5354
h6
color: #DA5354

24
app/assets/stylesheets/admin/alert.css.scss Normal file
View File

@@ -0,0 +1,24 @@
.alert {
border: 3px solid #919191;
border-radius: 6px;
margin-bottom: 20px;
color: #919191;
padding: 5px 10px;
h6 {
color: #919191;
}
.message {
font-weight: bold;
}
&:hover {
border-color: #DA5354;
color: #DA5354;
h6 {
color: #DA5354;
}
}
}

34
app/assets/stylesheets/admin/animations.css.sass → app/assets/stylesheets/admin/animations.css.scss
View File

@@ -1,10 +1,14 @@
@-webkit-keyframes slideInUp
0%
-webkit-transform: translateY(20px)
transform: translateY(20px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
// @-webkit-keyframes slideOutDown
// 0%
@@ -14,13 +18,14 @@
// -webkit-transform: translateY(20px)
// transform: translateY(20px)
.animate-show
-webkit-animation-name: slideInUp
animation-name: slideInUp
-webkit-animation-duration: 0.3s
animation-duration: 0.3s
-webkit-animation-fill-mode: both
animation-fill-mode: both
.animate-show {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
// line-height: 20px
// opacity: 1
@@ -33,3 +38,4 @@
// animation-fill-mode: both
// // line-height: 20px
// // opacity: 1
}

72
app/assets/stylesheets/admin/change_type_form.css.sass
View File

@@ -1,72 +0,0 @@
@import ../darkswarm/branding
@import ../darkswarm/mixins
#change_type
section
margin: 2em 0 0 0
&, & *
color: #5498da
.description
background-color: #eff5fc
margin-top: -2em
padding: 4em 2em 2em 1em
@media all and (max-width: 786px)
margin-bottom: 2em
.admin-cta
border: 1px solid #5498da
@include border-radius(3px)
text-align: center
padding: 1em
.error
display: block
color: #f57e80
border: 1px solid #f57e80
background-color: #fde6e7
@include border-radius(3px)
margin-bottom: 1em
padding: 0.5em
a.selector
position: relative
border: 2px solid black
text-align: center
width: 100%
cursor: pointer
&, & *
color: white
&:after, &:before
top: 100%
left: 50%
border: solid transparent
content: " "
height: 0
width: 0
position: absolute
pointer-events: none
&:after
border-color: rgba(136, 183, 213, 0)
border-top-color: #5498da
border-width: 12px
margin-left: -12px
&:hover
&:after
border-top-color: #9fc820
&:before
border-color: rgba(84, 152, 218, 0)
border-top-color: black
border-width: 15px
margin-left: -15px
.bottom
background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px)
margin-top: 1em
margin-left: -15px
margin-right: -15px
padding: 5px
text-transform: uppercase
&.selected
background-color: black
&:after, &:hover &:after
border-top-color: black

103
app/assets/stylesheets/admin/change_type_form.css.scss Normal file
View File

@@ -0,0 +1,103 @@
@import "../darkswarm/branding";
@import "../darkswarm/mixins";
#change_type {
section {
margin: 2em 0 0 0;
&, & * {
color: #5498da;
}
}
.description {
background-color: #eff5fc;
margin-top: -2em;
padding: 4em 2em 2em 1em;
@media all and (max-width: 786px) {
margin-bottom: 2em;
}
}
.admin-cta {
border: 1px solid #5498da;
@include border-radius(3px);
text-align: center;
padding: 1em;
}
.error {
display: block;
color: #f57e80;
border: 1px solid #f57e80;
background-color: #fde6e7;
@include border-radius(3px);
margin-bottom: 1em;
padding: 0.5em;
}
a.selector {
position: relative;
border: 2px solid black;
text-align: center;
width: 100%;
cursor: pointer;
&, & * {
color: white;
}
&:after, &:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #5498da;
border-width: 12px;
margin-left: -12px;
}
&:hover {
&:after {
border-top-color: #9fc820;
}
}
&:before {
border-color: rgba(84, 152, 218, 0);
border-top-color: black;
border-width: 15px;
margin-left: -15px;
}
.bottom {
background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px);
margin-top: 1em;
margin-left: -15px;
margin-right: -15px;
padding: 5px;
text-transform: uppercase;
}
&.selected {
background-color: black;
&:after, &:hover &:after {
border-top-color: black;
}
}
}
}

14
app/assets/stylesheets/admin/components/save_bar.sass
View File

@@ -1,14 +0,0 @@
#save-bar
position: fixed
width: 100%
z-index: 100
bottom: 0px
left: 0
padding: 8px 8px
font-weight: bold
background-color: #eff5fc
color: #5498da
h5
color: #5498da
input
margin-right: 5px

19
app/assets/stylesheets/admin/components/save_bar.scss Normal file
View File

@@ -0,0 +1,19 @@
#save-bar {
position: fixed;
width: 100%;
z-index: 100;
bottom: 0px;
left: 0;
padding: 8px 8px;
font-weight: bold;
background-color: #eff5fc;
color: #5498da;
h5 {
color: #5498da;
}
input {
margin-right: 5px;
}
}

9
app/assets/stylesheets/admin/components/trial_progess_bar.sass
View File

@@ -1,9 +0,0 @@
#trial_progress_bar
position: fixed
left: 0px
bottom: 0px
width: 100vw
padding: 8px 10px
font-weight: bold
background-color: #5498da
color: white

10
app/assets/stylesheets/admin/components/trial_progess_bar.scss Normal file
View File

@@ -0,0 +1,10 @@
#trial_progress_bar {
position: fixed;
left: 0px;
bottom: 0px;
width: 100vw;
padding: 8px 10px;
font-weight: bold;
background-color: #5498da;
color: white;
}

33
app/assets/stylesheets/admin/dashboard-single-ent.css.sass
View File

@@ -1,33 +0,0 @@
@import ../darkswarm/mixins
.alert-box
position: relative
display: block
background-color: #eff5dc
border: 1px solid #9fc820
color: #666
margin-top: 1em
margin-bottom: 1em
@include border-radius(3px)
transition: opacity 300ms ease-out
padding: 0.77778em 1.33333em 0.77778em 0.77778em
a.close
position: absolute
right: 5px
top: 0px
font-size: 1.5em
.dashboard_item.single-ent
.header
padding: 0.77778em 1.33333em 0.77778em 0.77778em
height: auto !important
.list
.button.bottom
width: 100%
.button.big
width: 100%
font-size: 1rem
@include border-radius(25px)
padding: 15px

45
app/assets/stylesheets/admin/dashboard-single-ent.css.scss Normal file
View File

@@ -0,0 +1,45 @@
@import "../darkswarm/mixins";
.alert-box {
position: relative;
display: block;
background-color: #eff5dc;
border: 1px solid #9fc820;
color: #666;
margin-top: 1em;
margin-bottom: 1em;
@include border-radius(3px);
transition: opacity 300ms ease-out;
padding: 0.77778em 1.33333em 0.77778em 0.77778em;
a.close {
position: absolute;
right: 5px;
top: 0px;
font-size: 1.5em;
}
}
.dashboard_item.single-ent {
.header {
padding: 0.77778em 1.33333em 0.77778em 0.77778em;
height: auto !important;
}
.list {
.button.bottom {
width: 100%;
}
}
}
.button.big {
width: 100%;
font-size: 1rem;
@include border-radius(25px);
padding: 15px;
}

159
app/assets/stylesheets/admin/dashboard_item.css.sass
View File

@@ -1,159 +0,0 @@
div.dashboard_item
margin-bottom: 30px
.centered
text-align: center
.text-icon
margin-top: 8px
display: block
font-size: 16px
font-weight: bold
color: #fff
padding: 0px 6px
border-radius: 10px
&.green
background-color: #9fc820
&.red
background-color: #DA5354
&.orange
background-color: #DA7F52
div.header
height: 50px
border-radius: 6px 6px 0px 0px
border: 1px solid #5498da
position: relative
a[ofn-with-tip]
position: absolute
right: 5px
bottom: 5px
&.red
border-color: #DA5354
border-width: 3px
h3
color: #DA5354
&.orange
border-color: #DA7F52
border-width: 3px
h3
color: #DA7F52
h3.alpha
height: 100%
padding: 10px 5px 0px 3%
a
border-radius: 0px 4px 0px 0px
margin-left: 8px
height: 100%
padding: 15px 2px 0px 2px
.tabs
height: 30px
border: solid #5498da
border-width: 0px 0px 1px 0px
margin-top: 3px
div.dashboard_tab
cursor: pointer
height: 30px
color: #fff
background-color: #5498da
padding: 5px 5px 0px 5px
text-align: center
font-weight: bold
border: solid #5498da
border-width: 1px 1px 0px 1px
&:hover
background-color: #9fc820
&.selected
color: #5498da
background-color: #fff
.list
max-height: 250px
overflow-y: auto
overflow-x: hidden
.list-title
border: solid #5498da
border-width: 0px 1px 0px 1px
span
font-size: 105%
padding: 10px 0px
font-weight: bold
span.alpha
padding: 10px 2px 10px 5%
.list-item
border: solid #5498da
border-width: 0px 1px 0px 1px
height: 38px
span.alpha
font-weight: bold
margin-left: -3px
padding: 10px 2px 0px 5%
span.omega
padding-right: 13px
margin-right: -3px
text-align: right
.icon-arrow-right
padding-top: 6px
font-size: 20px
.icon-warning-sign
color: #DA7F52
font-size: 30px
.icon-remove-sign
color: #DA5354
font-size: 30px
.icon-ok-sign
color: #9fc820
font-size: 30px
&.orange
color: #DA7F52
border: solid #DA7F52
&.red
color: #DA5354
border: solid #DA5354
&.orange, &.red
border-width: 0px 3px 0px 3px
&.even
background-color: #fff
&.odd
background-color: #eff5fc
&.even, &.odd
&:hover
color: #ffffff
background-color: #9fc820
.icon-arrow-right
color: #fff
.icon-remove-sign
color: #fff
.icon-warning-sign
color: #fff
.icon-ok-sign
color: #fff
.text-icon
&.green
color: #9fc820
background-color: #fff
a.button
color: #fff
font-size: 110%
font-weight: bold
text-align: center
&.orange
background-color: #DA7F52
&.blue
background-color: #5498da
&.red
background-color: #DA5354
&:hover
background-color: #9fc820
&.bottom
border-radius: 0px 0px 6px 6px
padding: 15px 15px

239
app/assets/stylesheets/admin/dashboard_item.css.scss Normal file
View File

@@ -0,0 +1,239 @@
div.dashboard_item {
margin-bottom: 30px;
.centered {
text-align: center;
}
.text-icon {
margin-top: 8px;
display: block;
font-size: 16px;
font-weight: bold;
color: #fff;
padding: 0px 6px;
border-radius: 10px;
&.green {
background-color: #9fc820;
}
&.red {
background-color: #DA5354;
}
&.orange {
background-color: #DA7F52;
}
}
div.header {
height: 50px;
border-radius: 6px 6px 0px 0px;
border: 1px solid #5498da;
position: relative;
a[ofn-with-tip] {
position: absolute;
right: 5px;
bottom: 5px;
}
&.red {
border-color: #DA5354;
border-width: 3px;
h3 {
color: #DA5354;
}
}
&.orange {
border-color: #DA7F52;
border-width: 3px;
h3 {
color: #DA7F52;
}
}
h3.alpha {
height: 100%;
padding: 10px 5px 0px 3%;
}
a {
border-radius: 0px 4px 0px 0px;
margin-left: 8px;
height: 100%;
padding: 15px 2px 0px 2px;
}
}
.tabs {
height: 30px;
border: solid #5498da;
border-width: 0px 0px 1px 0px;
margin-top: 3px;
div.dashboard_tab {
cursor: pointer;
height: 30px;
color: #fff;
background-color: #5498da;
padding: 5px 5px 0px 5px;
text-align: center;
font-weight: bold;
border: solid #5498da;
border-width: 1px 1px 0px 1px;
&:hover {
background-color: #9fc820;
}
&.selected {
color: #5498da;
background-color: #fff;
}
}
}
.list {
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
}
.list-title {
border: solid #5498da;
border-width: 0px 1px 0px 1px;
span {
font-size: 105%;
padding: 10px 0px;
font-weight: bold;
}
span.alpha {
padding: 10px 2px 10px 5%;
}
}
.list-item {
border: solid #5498da;
border-width: 0px 1px 0px 1px;
height: 38px;
span.alpha {
font-weight: bold;
margin-left: -3px;
padding: 10px 2px 0px 5%;
}
span.omega {
padding-right: 13px;
margin-right: -3px;
text-align: right;
}
.icon-arrow-right {
padding-top: 6px;
font-size: 20px;
}
.icon-warning-sign {
color: #DA7F52;
font-size: 30px;
}
.icon-remove-sign {
color: #DA5354;
font-size: 30px;
}
.icon-ok-sign {
color: #9fc820;
font-size: 30px;
}
&.orange {
color: #DA7F52;
border: solid #DA7F52;
}
&.red {
color: #DA5354;
border: solid #DA5354;
}
&.orange, &.red {
border-width: 0px 3px 0px 3px;
}
&.even {
background-color: #fff;
}
&.odd {
background-color: #eff5fc;
}
&.even, &.odd {
&:hover {
color: #ffffff;
background-color: #9fc820;
.icon-arrow-right {
color: #fff;
}
.icon-remove-sign {
color: #fff;
}
.icon-warning-sign {
color: #fff;
}
.icon-ok-sign {
color: #fff;
}
.text-icon {
&.green {
color: #9fc820;
background-color: #fff;
}
}
}
}
}
a.button {
color: #fff;
font-size: 110%;
font-weight: bold;
text-align: center;
&.orange {
background-color: #DA7F52;
}
&.blue {
background-color: #5498da;
}
&.red {
background-color: #DA5354;
}
&:hover {
background-color: #9fc820;
}
&.bottom {
border-radius: 0px 0px 6px 6px;
padding: 15px 15px;
}
}
}

23
app/assets/stylesheets/admin/relationships.css.sass
View File

@@ -1,23 +0,0 @@
// TODO: Provide -moz- and -o- directives
@-webkit-keyframes alert-flash
0%
background-color: #f9f1ae
100%
background-color: #fff
table#enterprise-relationships, table#enterprise-roles
ul
list-style-type: none
th.actions, td.actions
width: 16%
.errors
color: #f00
tr.ng-enter
-webkit-animation-name: alert-flash
-webkit-animation-duration: 1200ms
-webkit-animation-iteration-count: 1
-webkit-animation-timing-function: ease-in-out

31
app/assets/stylesheets/admin/relationships.css.scss Normal file
View File

@@ -0,0 +1,31 @@
// TODO: Provide -moz- and -o- directives
@-webkit-keyframes alert-flash {
0% {
background-color: #f9f1ae;
}
100% {
background-color: #fff;
}
}
table#enterprise-relationships, table#enterprise-roles {
ul {
list-style-type: none;
}
th.actions, td.actions {
width: 16%;
.errors {
color: #f00;
}
}
tr.ng-enter {
-webkit-animation-name: alert-flash;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
}

18
app/assets/stylesheets/admin/side_menu.css.sass
View File

@@ -1,18 +0,0 @@
.side_menu
border-right: 2px solid #f6f6f6
border-top: 2px solid #f6f6f6
.menu_item
display: block
padding: 8px 15px
font-size: 120%
cursor: pointer
text-transform: uppercase
&:nth-child(odd)
background-color: #ebf3fb
&:nth-child(even)
background-color: #ffffff
&:hover
background-color: #eaf0f5
&.selected
background-color: #5498da
color: #ffffff

29
app/assets/stylesheets/admin/side_menu.css.scss Normal file
View File

@@ -0,0 +1,29 @@
.side_menu {
border-right: 2px solid #f6f6f6;
border-top: 2px solid #f6f6f6;
.menu_item {
display: block;
padding: 8px 15px;
font-size: 120%;
cursor: pointer;
text-transform: uppercase;
&:nth-child(odd) {
background-color: #ebf3fb;
}
&:nth-child(even) {
background-color: #ffffff;
}
&:hover {
background-color: #eaf0f5;
}
&.selected {
background-color: #5498da;
color: #ffffff;
}
}
}

77
app/assets/stylesheets/admin/sidebar-item.css.sass
View File

@@ -1,77 +0,0 @@
div.sidebar_item
margin-bottom: 30px
.centered
text-align: center
div.header
font-size: 105%
color: #fff
padding: 10px 0px
position: relative
&.blue
background-color: #5498da
&.red
background-color: #DA5354
.list
max-height: 400px
overflow-y: auto
overflow-x: hidden
&.red
color: #DA5354
.list-item
border: solid #DA5354
border-width: 0px 3px 0px 3px
a.alpha, span.alpha
margin-left: -3px
&.odd
background-color: #fcf6ef
&:hover
background-color: #9fc820
a
color: #DA5354
.list-item
.icon-arrow-right
padding-top: 6px
font-size: 20px
border: solid #5498da
border-width: 0px 1px 0px 1px
a.alpha, span.alpha
font-weight: bold
margin-left: -1px
padding: 10px 2px 10px 5%
overflow: hidden
text-overflow: ellipsis
span.omega
padding: 8px 18px 8px 0px
margin-right: -3px
text-align: right
.icon-remove-sign
color: #DA5354
font-size: 18px
&.even
background-color: #fff
&.odd
background-color: #eff5fc
&.even, &.odd
&:hover
color: #ffffff
background-color: #9fc820
a
color: #ffffff
a.button
color: #fff
padding: 15px 15px
font-weight: bold
text-align: center
border-radius: 0px
&.blue
background-color: #5498da
&.red
background-color: #DA5354
&:hover
background-color: #9fc820

121
app/assets/stylesheets/admin/sidebar-item.css.scss Normal file
View File

@@ -0,0 +1,121 @@
div.sidebar_item {
margin-bottom: 30px;
.centered {
text-align: center;
}
div.header {
font-size: 105%;
color: #fff;
padding: 10px 0px;
position: relative;
&.blue {
background-color: #5498da;
}
&.red {
background-color: #DA5354;
}
}
.list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
&.red {
color: #DA5354;
.list-item {
border: solid #DA5354;
border-width: 0px 3px 0px 3px;
a.alpha, span.alpha {
margin-left: -3px;
}
&.odd {
background-color: #fcf6ef;
&:hover {
background-color: #9fc820;
}
}
}
a {
color: #DA5354;
}
}
}
.list-item {
.icon-arrow-right {
padding-top: 6px;
font-size: 20px;
}
border: solid #5498da;
border-width: 0px 1px 0px 1px;
a.alpha, span.alpha {
font-weight: bold;
margin-left: -1px;
padding: 10px 2px 10px 5%;
overflow: hidden;
text-overflow: ellipsis;
}
span.omega {
padding: 8px 18px 8px 0px;
margin-right: -3px;
text-align: right;
}
.icon-remove-sign {
color: #DA5354;
font-size: 18px;
}
&.even {
background-color: #fff;
}
&.odd {
background-color: #eff5fc;
}
&.even, &.odd {
&:hover {
color: #ffffff;
background-color: #9fc820;
a {
color: #ffffff;
}
}
}
}
a.button {
color: #fff;
padding: 15px 15px;
font-weight: bold;
text-align: center;
border-radius: 0px;
&.blue {
background-color: #5498da;
}
&.red {
background-color: #DA5354;
}
&:hover {
background-color: #9fc820;
}
}
}

6
app/assets/stylesheets/admin/variant_overrides.css.sass
View File

@@ -1,6 +0,0 @@
.variant-override-unit
float: right
font-style: italic
button.hide:hover
background-color: #DA5354

8
app/assets/stylesheets/admin/variant_overrides.css.scss Normal file
View File

@@ -0,0 +1,8 @@
.variant-override-unit {
float: right;
font-style: italic;
}
button.hide:hover {
background-color: #DA5354;
}

16
app/assets/stylesheets/admin/welcome.css.sass
View File

@@ -1,16 +0,0 @@
@import ../darkswarm/mixins
#welcome_page
header
text-align: center
padding: 4em 2em
@include fullbg
background-image: url('/assets/home/tagline-bg.jpg')
background-repeat: no-repeat
background-position: center center
margin-bottom: 2em
p
text-transform: uppercase
font-weight: 300
&, & *
color: white

24
app/assets/stylesheets/admin/welcome.css.scss Normal file
View File

@@ -0,0 +1,24 @@
@import "../darkswarm/mixins";
#welcome_page {
header {
text-align: center;
padding: 4em 2em;
@include fullbg;
background-image: url("/assets/home/tagline-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 2em;
p {
text-transform: uppercase;
font-weight: 300;
}
&, & * {
color: white;
}
}
}

125
app/assets/stylesheets/darkswarm/_shop-filters.css.sass
View File

@@ -1,125 +0,0 @@
@import mixins
@import branding
@import big-input
@import animations
@mixin filter-selector($base-clr, $border-clr, $hover-clr)
&.inline-block, ul.inline-block
display: inline-block
li
display: inline-block
@include border-radius(0)
padding: 0
margin: 0 0 0.25rem 0.25rem
&:hover, &:focus
background: transparent
&.active
box-shadow: none
a, a.button
display: block
padding-top: 0.5rem
@include border-radius(0.5em)
border: 1px solid $border-clr
padding: 0.5em 0.625em
font-size: 0.875em
color: $base-clr
font-size: 0.75em
background: white
margin: 0
i
padding-left: 0.25rem
render-svg
&, & svg
width: 1rem
height: 1rem
float: left
padding-right: 0.25rem
path
@include csstrans
fill: $base-clr
&:hover, &:focus
border-color: $hover-clr
color: $hover-clr
render-svg
svg
path
fill: $hover-clr
&.disabled
opacity: 0.6
&:hover, &:focus
border-color: $border-clr
color: $base-clr
render-svg
svg
path
fill: $base-clr
&.active, &.active:hover, &.active:focus
border: 1px solid $base-clr
background: $base-clr
color: white
render-svg
svg
path
fill: white
// Alert when search, taxon, filter is triggered
.alert-box.search-alert
background-color: $clr-yellow-light
border-color: $clr-yellow-light
color: #777
font-size: 0.75rem
padding: 0.5rem 0.75rem
span.applied-properties
color: #333
span.applied-taxons
color: $clr-blue
span.applied-search
color: $clr-brick
span.filter-label
opacity: 0.75
// singleLineSelectors directive provides a drop-down that can overlap
// content. Ensure that the dropdown appears above the content.
.filter-row
position: relative
z-index: 90
.filter-shopfront
&.taxon-selectors, &.property-selectors
background: transparent
single-line-selectors
overflow-x: hidden
white-space: nowrap
.f-dropdown
overflow-x: auto
white-space: normal
ul
margin: 0
display: inline-block
ul, ul li
list-style: none
// Shopfront taxons
&.taxon-selectors
@include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright)
// Shopfront properties
&.property-selectors
@include filter-selector(#666, #ccc, #777)

173
app/assets/stylesheets/darkswarm/_shop-filters.css.scss Normal file
View File

@@ -0,0 +1,173 @@
@import "mixins";
@import "branding";
@import "big-input";
@import "animations";
@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
&.inline-block, ul.inline-block {
display: inline-block;
}
li {
display: inline-block;
@include border-radius(0);
padding: 0;
margin: 0 0 0.25rem 0.25rem;
&:hover, &:focus {
background: transparent;
}
&.active {
box-shadow: none;
}
a, a.button {
display: block;
padding-top: 0.5rem;
@include border-radius(0.5em);
border: 1px solid $border-clr;
padding: 0.5em 0.625em;
font-size: 0.875em;
color: $base-clr;
font-size: 0.75em;
background: white;
margin: 0;
i {
padding-left: 0.25rem;
}
render-svg {
&, & svg {
width: 1rem;
height: 1rem;
float: left;
padding-right: 0.25rem;
path {
@include csstrans;
fill: $base-clr;
}
}
}
&:hover, &:focus {
border-color: $hover-clr;
color: $hover-clr;
render-svg {
svg {
path {
fill: $hover-clr;
}
}
}
}
&.disabled {
opacity: 0.6;
&:hover, &:focus {
border-color: $border-clr;
color: $base-clr;
render-svg {
svg {
path {
fill: $base-clr;
}
}
}
}
}
&.active, &.active:hover, &.active:focus {
border: 1px solid $base-clr;
background: $base-clr;
color: white;
render-svg {
svg {
path {
fill: white;
}
}
}
}
}
}
}
// Alert when search, taxon, filter is triggered
.alert-box.search-alert {
background-color: $clr-yellow-light;
border-color: $clr-yellow-light;
color: #777;
font-size: 0.75rem;
padding: 0.5rem 0.75rem;
span.applied-properties {
color: #333;
}
span.applied-taxons {
color: $clr-blue;
}
span.applied-search {
color: $clr-brick;
}
span.filter-label {
opacity: 0.75;
}
}
// singleLineSelectors directive provides a drop-down that can overlap
// content. Ensure that the dropdown appears above the content.
.filter-row {
position: relative;
z-index: 90;
}
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;
single-line-selectors {
overflow-x: hidden;
white-space: nowrap;
.f-dropdown {
overflow-x: auto;
white-space: normal;
}
}
ul {
margin: 0;
display: inline-block;
}
ul, ul li {
list-style: none;
}
}
// Shopfront taxons
&.taxon-selectors {
@include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright);
}
// Shopfront properties
&.property-selectors {
@include filter-selector(#666, #ccc, #777);
}
}

85
app/assets/stylesheets/darkswarm/_shop-inputs.css.sass
View File

@@ -1,85 +0,0 @@
@import mixins
@import variables
@import branding
@import big-input
.darkswarm
// #search
@include placeholder(rgba(0,0,0,0.4), #777)
input#search
@include medium-input(rgba(0,0,0,0.3), #777, $clr-brick)
// ordering
product
input
@include border-radius(0)
@include csstrans
margin: 0
width: 10rem
display: inline
@include box-shadow(none)
border-color: #b3b3b3
text-align: right
@media all and (max-width: 1024px)
width: 8rem
@media all and (max-width: 768px)
width: 7rem
@media all and (max-width: 640px)
float: left !important
font-size: 0.75rem
padding-left: 0.25rem
padding-right: 0.25rem
@media all and (max-width: 480px)
width: 5.8rem
&:hover
@include box-shadow(none)
border-color: #888
background-color: #fafafa
&:active, &:focus, &.active
@include box-shadow(none)
background-color: #f9f4b9
border-color: #666
// BULK
input.bulk
width: 5rem
@media all and (max-width: 1024px)
width: 4rem
@media all and (max-width: 768px)
width: 3.5rem
@media all and (max-width: 480px)
width: 2.8rem
input.bulk.first
border-right: 0
input.bulk.second
border-left: 0
.bulk-input-container
float: right
@media all and (max-width: 640px)
float: left !important
.bulk-input
float: left

102
app/assets/stylesheets/darkswarm/_shop-inputs.css.scss Normal file
View File

@@ -0,0 +1,102 @@
@import "mixins";
@import "variables";
@import "branding";
@import "big-input";
.darkswarm {
// #search
@include placeholder(rgba(0, 0, 0, 0.4), #777);
input#search {
@include medium-input(rgba(0, 0, 0, 0.3), #777, $clr-brick);
}
// ordering
product {
input {
@include border-radius(0);
@include csstrans;
margin: 0;
width: 10rem;
display: inline;
@include box-shadow(none);
border-color: #b3b3b3;
text-align: right;
@media all and (max-width: 1024px) {
width: 8rem;
}
@media all and (max-width: 768px) {
width: 7rem;
}
@media all and (max-width: 640px) {
float: left !important;
font-size: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
@media all and (max-width: 480px) {
width: 5.8rem;
}
&:hover {
@include box-shadow(none);
border-color: #888;
background-color: #fafafa;
}
&:active, &:focus, &.active {
@include box-shadow(none);
background-color: #f9f4b9;
border-color: #666;
}
}
// BULK
input.bulk {
width: 5rem;
@media all and (max-width: 1024px) {
width: 4rem;
}
@media all and (max-width: 768px) {
width: 3.5rem;
}
@media all and (max-width: 480px) {
width: 2.8rem;
}
}
input.bulk.first {
border-right: 0;
}
input.bulk.second {
border-left: 0;
}
.bulk-input-container {
float: right;
@media all and (max-width: 640px) {
float: left !important;
}
.bulk-input {
float: left;
}
}
}
}

6
app/assets/stylesheets/darkswarm/_shop-modals.css.sass
View File

@@ -1,6 +0,0 @@
.product-header
h1, h2, h3, h4, h5, h6
margin: 0
hr
margin: 0.5em 0

9
app/assets/stylesheets/darkswarm/_shop-modals.css.scss Normal file
View File

@@ -0,0 +1,9 @@
.product-header {
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
hr {
margin: 0.5em 0;
}
}

112
app/assets/stylesheets/darkswarm/_shop-popovers.css.sass
View File

@@ -1,112 +0,0 @@
@import mixins
@import branding
// .darkswarm
// product
ordercycle
.joyride-tip-guide
background-color: $clr-brick
.joyride-nub.right
border-color: $clr-brick !important
border-top-color: transparent !important
border-right-color: transparent !important
border-bottom-color: transparent !important
p
margin: 0
font-weight: 700
// Pop over
// Foundation overrides
.joyride-tip-guide.price_breakdown
// JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
background-color: #999
color: #1f1f1f
margin-left: -8px
@include box-shadow(0 1px 2px 0 rgba(0,0,0,0.7))
.joyride-content-wrapper
padding: 1.125rem 1.25rem 1.5rem
padding: 1rem
margin: 1%
width: 98%
background-color: white
h1, h2, h3, h4, h5, h6
color: #1f1f1f
.joyride-nub.right
top: 38px
border-color: #999 !important
border-top-color: transparent !important
border-right-color: transparent !important
border-bottom-color: transparent !important
.progress
background-color: #13bf85
padding: 0
border: none
color: white
font-size: 0.75rem
font-style: oblique
line-height: 1
height: auto
.right
padding: 0.5rem 0.25rem 0 0
.meter
background-color: #0b8c61
padding: 0.5rem 0.25rem
border-right: 1px solid #539f92
.expanded
ul, li
list-style: none
margin: 0
font-size: 0.875rem
li
background-color: #13bf85
padding: 0 0.25rem
margin-bottom: 2px
color: white
li.cost
background-color: #0b8c61
li:last-child
margin-bottom: 0.75rem
button.graph-button
// z-index: 9999999
border: 1px solid transparent
padding: 0
margin: 0
display: inline
background-color: rgba(255,255,255,0.5)
padding: 4px
@include box-shadow(none)
@include border-radius(999rem)
&:before
@include icon-font
content: '\e639'
color: #999
&:focus
border: 1px solid #e0e0e0
background-color: rgba(255,255,255,1)
&:before
color: #666
&:hover, &:active
background-color: rgba(255,255,255,1)
border: 1px solid transparent
&:before
color: $clr-brick-bright
@media all and (max-width: 768px)
// Hide for small
display: none
button.graph-button.open
border: 1px solid transparent
background-color: $clr-brick-bright
&:before
content: '\e608'
color: white

152
app/assets/stylesheets/darkswarm/_shop-popovers.css.scss Normal file
View File

@@ -0,0 +1,152 @@
@import "mixins";
@import "branding";
// .darkswarm
// product
ordercycle {
.joyride-tip-guide {
background-color: $clr-brick;
.joyride-nub.right {
border-color: $clr-brick !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
}
p {
margin: 0;
font-weight: 700;
}
}
}
// Pop over
// Foundation overrides
.joyride-tip-guide.price_breakdown {
// JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
background-color: #999;
color: #1f1f1f;
margin-left: -8px;
@include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.7));
.joyride-content-wrapper {
padding: 1.125rem 1.25rem 1.5rem;
padding: 1rem;
margin: 1%;
width: 98%;
background-color: white;
}
h1, h2, h3, h4, h5, h6 {
color: #1f1f1f;
}
.joyride-nub.right {
top: 38px;
border-color: #999 !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
}
.progress {
background-color: #13bf85;
padding: 0;
border: none;
color: white;
font-size: 0.75rem;
font-style: oblique;
line-height: 1;
height: auto;
.right {
padding: 0.5rem 0.25rem 0 0;
}
.meter {
background-color: #0b8c61;
padding: 0.5rem 0.25rem;
border-right: 1px solid #539f92;
}
}
.expanded {
ul, li {
list-style: none;
margin: 0;
font-size: 0.875rem;
}
li {
background-color: #13bf85;
padding: 0 0.25rem;
margin-bottom: 2px;
color: white;
}
li.cost {
background-color: #0b8c61;
}
li:last-child {
margin-bottom: 0.75rem;
}
}
}
button.graph-button {
// z-index: 9999999
border: 1px solid transparent;
padding: 0;
margin: 0;
display: inline;
background-color: rgba(255, 255, 255, 0.5);
padding: 4px;
@include box-shadow(none);
@include border-radius(999rem);
&:before {
@include icon-font;
content: "";
color: #999;
}
&:focus {
border: 1px solid #e0e0e0;
background-color: rgba(255, 255, 255, 1);
&:before {
color: #666;
}
}
&:hover, &:active {
background-color: rgba(255, 255, 255, 1);
border: 1px solid transparent;
&:before {
color: $clr-brick-bright;
}
}
@media all and (max-width: 768px) {
// Hide for small
display: none;
}
}
button.graph-button.open {
border: 1px solid transparent;
background-color: $clr-brick-bright;
&:before {
content: "";
color: white;
}
}

123
app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass
View File

@@ -1,123 +0,0 @@
@import branding.css.sass
@import animations.sass
.darkswarm
products
product
// GENERAL LAYOUT
.row
.columns
padding-top: 0em
padding-bottom: 0em
display: table
line-height: 1.1
// outline: 1px solid red
@media all and (max-width: 768px)
font-size: 0.875rem
@media all and (max-width: 640px)
font-size: 0.75rem
.table-cell
display: table-cell
vertical-align: middle
height: 37px
// ROW VARIANTS
.row.variants
margin-left: 0
margin-right: 0
background-color: #ECECEC
&:hover, &:focus, &:active
background-color: $clr-brick-light
&:nth-of-type(even)
background-color: #f9f9f9
&:hover, &:focus, &:active
background-color: $clr-brick-ultra-light
&.out-of-stock
opacity: 0.2
// Variant name
.variant-name
padding-left: 7.9375rem
@media all and (max-width: 768px)
padding-left: 4.9375rem
.variant-name
@media all and (max-width: 640px)
background: #333
color: white
padding-left: 0.9375rem
font-weight: bold
.table-cell
height: 27px
// Variant unit
.variant-unit
padding-left: 0rem
padding-right: 0rem
color: #888
font-size: 0.875rem
overflow: hidden
@media all and (max-width: 768px)
font-size: 0.75rem
// Variant price
.variant-price
padding-left: 0.25rem
padding-right: 0.25rem
@media all and (max-width: 640px)
text-align: right
// Total price
.total-price
padding-left: 0rem
color: $disabled-med
.filled
color: $med-drk-grey
@media all and (max-width: 640px)
background: #777
color: $disabled-med
.filled
color: white
.table-cell
height: 27px
// ROW SUMMARY
.row.summary
margin-left: 0
margin-right: 0
background: #fff
.columns
padding-top: 1em
padding-bottom: 1em
line-height: 1
@media all and (max-width: 768px)
padding-top: 0.65rem
padding-bottom: 0.65rem
.summary-header
padding-left: 7.9375rem
@media all and (max-width: 768px)
padding-left: 4.9375rem
@media all and (max-width: 640px)
padding-left: 0.9375rem
small
font-size: 80%
h3
font-size: 1.5rem
margin: 0
h3 a
color: #222
i
@include csstrans
font-size: 0.6em
&:hover, &:focus, &:active
color: $clr-brick
i
font-size: 0.8em

182
app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss Normal file
View File

@@ -0,0 +1,182 @@
@import "branding";
@import "animations";
.darkswarm {
products {
product {
// GENERAL LAYOUT
.row {
.columns {
padding-top: 0em;
padding-bottom: 0em;
display: table;
line-height: 1.1;
// outline: 1px solid red
@media all and (max-width: 768px) {
font-size: 0.875rem;
}
@media all and (max-width: 640px) {
font-size: 0.75rem;
}
}
.table-cell {
display: table-cell;
vertical-align: middle;
height: 37px;
}
}
// ROW VARIANTS
.row.variants {
margin-left: 0;
margin-right: 0;
background-color: #ECECEC;
&:hover, &:focus, &:active {
background-color: $clr-brick-light;
}
&:nth-of-type(even) {
background-color: #f9f9f9;
&:hover, &:focus, &:active {
background-color: $clr-brick-ultra-light;
}
}
&.out-of-stock {
opacity: 0.2;
}
// Variant name
.variant-name {
padding-left: 7.9375rem;
@media all and (max-width: 768px) {
padding-left: 4.9375rem;
}
}
.variant-name {
@media all and (max-width: 640px) {
background: #333;
color: white;
padding-left: 0.9375rem;
font-weight: bold;
.table-cell {
height: 27px;
}
}
}
// Variant unit
.variant-unit {
padding-left: 0rem;
padding-right: 0rem;
color: #888;
font-size: 0.875rem;
overflow: hidden;
@media all and (max-width: 768px) {
font-size: 0.75rem;
}
}
// Variant price
.variant-price {
padding-left: 0.25rem;
padding-right: 0.25rem;
@media all and (max-width: 640px) {
text-align: right;
}
}
// Total price
.total-price {
padding-left: 0rem;
color: $disabled-med;
.filled {
color: $med-drk-grey;
}
@media all and (max-width: 640px) {
background: #777;
color: $disabled-med;
.filled {
color: white;
}
.table-cell {
height: 27px;
}
}
}
}
// ROW SUMMARY
.row.summary {
margin-left: 0;
margin-right: 0;
background: #fff;
.columns {
padding-top: 1em;
padding-bottom: 1em;
line-height: 1;
@media all and (max-width: 768px) {
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
}
.summary-header {
padding-left: 7.9375rem;
@media all and (max-width: 768px) {
padding-left: 4.9375rem;
}
@media all and (max-width: 640px) {
padding-left: 0.9375rem;
}
small {
font-size: 80%;
}
h3 {
font-size: 1.5rem;
margin: 0;
}
h3 a {
color: #222;
i {
@include csstrans;
font-size: 0.6em;
}
&:hover, &:focus, &:active {
color: $clr-brick;
i {
font-size: 0.8em;
}
}
}
}
}
}
}
}

59
app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass
View File

@@ -1,59 +0,0 @@
@import branding
@import animations.sass
.darkswarm
products
product
.product-thumb
@include csstrans
position: absolute
top: 2px
left: 0px
width: 7rem
height: 7rem
float: left
display: block
z-index: 1
background-color: white
overflow: hidden
i
@include csstrans
transition-delay: 150ms
position: absolute
left: 45%
top: 45%
z-index: 99999
color: white
font-size: 1rem
opacity: 0
img
@include csstrans
opacity: 1
@include transform-scale(scale(1))
&:hover, &:focus, &:active
background-color: $clr-brick
i
left: 32%
top: 30%
font-size: 3rem
opacity: 1
img
opacity: 0.5
@include transform-scale(scale(1.1))
@media all and (max-width: 768px)
top: 2px
width: 4rem
height: 4rem
&:hover, &:focus, &:active
i
left: 30%
top: 30%
font-size: 2rem
@media all and (max-width: 640px)
display: none
width: 0rem
height: 0rem

81
app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss Normal file
View File

@@ -0,0 +1,81 @@
@import "branding";
@import "animations";
.darkswarm {
products {
product {
.product-thumb {
@include csstrans;
position: absolute;
top: 2px;
left: 0px;
width: 7rem;
height: 7rem;
float: left;
display: block;
z-index: 1;
background-color: white;
overflow: hidden;
i {
@include csstrans;
transition-delay: 150ms;
position: absolute;
left: 45%;
top: 45%;
z-index: 99999;
color: white;
font-size: 1rem;
opacity: 0;
}
img {
@include csstrans;
opacity: 1;
@include transform-scale(scale(1));
}
&:hover, &:focus, &:active {
background-color: $clr-brick;
i {
left: 32%;
top: 30%;
font-size: 3rem;
opacity: 1;
}
img {
opacity: 0.5;
@include transform-scale(scale(1.1));
}
}
@media all and (max-width: 768px) {
top: 2px;
width: 4rem;
height: 4rem;
&:hover, &:focus, &:active {
i {
left: 30%;
top: 30%;
font-size: 2rem;
}
}
}
@media all and (max-width: 640px) {
display: none;
width: 0rem;
height: 0rem;
}
}
}
}
}

31
app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass
View File

@@ -1,31 +0,0 @@
.darkswarm
products
product
.taxon-flag
background: transparent url("/assets/flag.svg") top center no-repeat
background-size: 34px 39px
min-height: 40px
width: 34px
margin-top: -1.1rem
padding-top: 0.25rem
z-index: 999999
@media all and (max-width: 480px)
background-size: 28px 32px
min-height: 32px
width: 28px
render-svg
svg
width: 24px
height: 24px
path
fill: #999
@media all and (max-width: 768px)
margin-top: -0.85rem
@media all and (max-width: 480px)
render-svg
svg
width: 18px
height: 18px

45
app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss Normal file
View File

@@ -0,0 +1,45 @@
.darkswarm {
products {
product {
.taxon-flag {
background: transparent url("/assets/flag.svg") top center no-repeat;
background-size: 34px 39px;
min-height: 40px;
width: 34px;
margin-top: -1.1rem;
padding-top: 0.25rem;
z-index: 999999;
@media all and (max-width: 480px) {
background-size: 28px 32px;
min-height: 32px;
width: 28px;
}
render-svg {
svg {
width: 24px;
height: 24px;
path {
fill: #999;
}
}
}
@media all and (max-width: 768px) {
margin-top: -0.85rem;
}
@media all and (max-width: 480px) {
render-svg {
svg {
width: 18px;
height: 18px;
}
}
}
}
}
}
}

70
app/assets/stylesheets/darkswarm/account.css.sass
View File

@@ -1,70 +0,0 @@
@import branding
@import mixins
.orders
@include sidepaddingSm
@include panepadding
padding-top: 10px
h3
padding-top: 2em
a
color: $clr-brick
&:hover, &:active, &:focus
color: $clr-brick-med-bright
img
display: block
width: 80px
height: auto
i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
font-size: 3rem
display: inline-block
margin-right: 0.25rem
float: left
color: $clr-turquoise
.credit
color: green
.debit
color: $clr-brick
.invalid
color: $ofn-grey
.credit
color: $ofn-grey
.debit
color: $ofn-grey
.distributor-balance.paid
visibility: hidden
.transaction-group
table
border-radius: 0.5em 0.5em 0 0
tr:nth-of-type(even)
background: transparent // clear previous
tbody.odd
tr
background-color: #f9f9f9
border: none
// Column widths for order table
.order1
width: 20%
.order2
width: 20%
.order3
width: 20%
.order4
width: 10%
.order5
width: 10%
.order6
width: 10%
.order7
width: 10%

106
app/assets/stylesheets/darkswarm/account.css.scss Normal file
View File

@@ -0,0 +1,106 @@
@import "branding";
@import "mixins";
.orders {
@include sidepaddingSm;
@include panepadding;
padding-top: 10px;
h3 {
padding-top: 2em;
}
a {
color: $clr-brick;
&:hover, &:active, &:focus {
color: $clr-brick-med-bright;
}
}
img {
display: block;
width: 80px;
height: auto;
}
i.ofn-i_059-producer, i.ofn-i_060-producer-reversed {
font-size: 3rem;
display: inline-block;
margin-right: 0.25rem;
float: left;
color: $clr-turquoise;
}
.credit {
color: green;
}
.debit {
color: $clr-brick;
}
.invalid {
color: $ofn-grey;
.credit {
color: $ofn-grey;
}
.debit {
color: $ofn-grey;
}
}
.distributor-balance.paid {
visibility: hidden;
}
.transaction-group {}
table {
border-radius: 0.5em 0.5em 0 0;
tr:nth-of-type(even) {
background: transparent;
}
tbody.odd {
tr {
background-color: #f9f9f9;
border: none;
}
}
}
// Column widths for order table
.order1 {
width: 20%;
}
.order2 {
width: 20%;
}
.order3 {
width: 20%;
}
.order4 {
width: 10%;
}
.order5 {
width: 10%;
}
.order6 {
width: 10%;
}
.order7 {
width: 10%;
}
}

114
app/assets/stylesheets/darkswarm/active_table.css.sass
View File

@@ -1,114 +0,0 @@
@import branding
@import mixins
@import "compass/css3/user-interface"
.no-results
font-size: 1.875rem
.active_table
margin: 2em 0em
@include user-select(none)
.active_table_row
display: block
cursor: pointer
&:first-child
padding: 1rem 0
.active_table .active_table_node
margin-top: 0.25rem
display: block
border: 0
@media all and (max-width: 640px)
margin-bottom: 1rem
//Generic text link style
a:hover, a:active, a:focus
color: $dark-grey
span
text-decoration: underline
span.margin-top
margin-top: 0.5rem
display: inline-block
// Generic text resize
@media all and (max-width: 640px)
&, & *
font-size: 0.875rem
fat > div label
&, & *
font-size: 0.75rem
// Inherits from active_table
.active_table_row
border: 1px solid transparent
@include border-radius(0.5em)
// Foundation overrides
margin-left: 0
margin-right: 0
&, & > a.row
display: block
.active_table_row.link
border: 0
&.open
// .active_table_row:nth-child(2)
.active_table_row
border-left: 1px solid $disabled-bright
border-right: 1px solid $disabled-bright
border-top: 0
border-bottom: 0
@include border-radius(0)
.active_table_row:first-child
border-top: 1px solid $disabled-bright
color: $dark-grey
@include border-radius-mixed(0.5em, 0.5em, 0, 0)
&:hover, &:active, &:focus
// color: $dark-grey
.active_table_row:last-child
border-bottom: 1px solid $disabled-bright
@include border-radius-mixed(0, 0, 0.5em, 0.5em)
//Open row sections
.fat > div
border-top: 1px solid #aaa
@media all and (max-width: 640px)
margin-top: 1em
ul, ol
font-size: 0.875rem
[class*="block-grid-"] > li
padding-bottom: 0.25rem !important
label
text-transform: uppercase
font-size: 0.75rem
margin-top: 0.25rem
margin-bottom: 0.25rem
color: #777
p.trans-sentence
text-transform: capitalize
&.closed
&:hover, &:active, &:focus
.active_table_row.closed
border: 1px solid $disabled-bright
&.current
&.closed
&, & *
color: $dark-grey
&.open
.active_table_row:first-child
color: $dark-grey

160
app/assets/stylesheets/darkswarm/active_table.css.scss Normal file
View File

@@ -0,0 +1,160 @@
@import "branding";
@import "mixins";
@import "compass/css3/user-interface";
.no-results {
font-size: 1.875rem;
}
.active_table {
margin: 2em 0em;
@include user-select(none);
.active_table_row {
display: block;
cursor: pointer;
&:first-child {
padding: 1rem 0;
}
}
}
.active_table .active_table_node {
margin-top: 0.25rem;
display: block;
border: 0;
@media all and (max-width: 640px) {
margin-bottom: 1rem;
}
//Generic text link style
a:hover, a:active, a:focus {
color: $dark-grey;
span {
text-decoration: underline;
}
}
span.margin-top {
margin-top: 0.5rem;
display: inline-block;
}
// Generic text resize
@media all and (max-width: 640px) {
&, & * {
font-size: 0.875rem;
}
fat > div label {
&, & * {
font-size: 0.75rem;
}
}
}
// Inherits from active_table
.active_table_row {
border: 1px solid transparent;
@include border-radius(0.5em);
// Foundation overrides
margin-left: 0;
margin-right: 0;
&, & > a.row {
display: block;
}
}
.active_table_row.link {
border: 0;
}
&.open {
// .active_table_row:nth-child(2)
.active_table_row {
border-left: 1px solid $disabled-bright;
border-right: 1px solid $disabled-bright;
border-top: 0;
border-bottom: 0;
@include border-radius(0);
}
.active_table_row:first-child {
border-top: 1px solid $disabled-bright;
color: $dark-grey;
@include border-radius-mixed(0.5em, 0.5em, 0, 0);
&:hover, &:active, &:focus {
// color: $dark-grey
}
}
.active_table_row:last-child {
border-bottom: 1px solid $disabled-bright;
@include border-radius-mixed(0, 0, 0.5em, 0.5em);
}
//Open row sections
.fat > div {
border-top: 1px solid #aaa;
@media all and (max-width: 640px) {
margin-top: 1em;
}
ul, ol {
font-size: 0.875rem;
}
[class*="block-grid-"] > li {
padding-bottom: 0.25rem !important;
}
label {
text-transform: uppercase;
font-size: 0.75rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
color: #777;
}
}
p.trans-sentence {
text-transform: capitalize;
}
}
&.closed {
&:hover, &:active, &:focus {
.active_table_row.closed {
border: 1px solid $disabled-bright;
}
}
}
&.current {
&.closed {
&, & * {
color: $dark-grey;
}
}
&.open {
.active_table_row:first-child {
color: $dark-grey;
}
}
}
}

117
app/assets/stylesheets/darkswarm/active_table_search.css.sass
View File

@@ -1,117 +0,0 @@
@import mixins
@import branding
@import big-input
@import animations
// Filter-box
.row .row.filter-box
margin-left: 0
margin-right: 0
.row.filter-box:first-child
border: 1px solid $clr-blue-light
@include border-radius(0.25em)
margin-top: 2px
@media all and (max-width: 640px)
margin-bottom: 1em
.row.filter-box.clear-filters
background: transparent
margin-top: 1em
products .filter-box
background: #f7f7f7
.filter-box
background: rgba(245,245,245,0.6)
.tdhead
padding: 0.25rem 0.5rem
margin-top: 0.9rem
color: $clr-blue
border-bottom: 1px solid $clr-blue-light
// OVERRIDES
[class*="block-grid-"]
margin: 0 0 0.5rem 0
[class*="block-grid-"] > li
padding-bottom: 0.5rem !important
li
@include border-radius(12px)
padding-top: 0.5rem
margin-bottom: 0.25rem
&:hover, &:focus
background: rgba(255,255,255,0.25)
li.active
background: white
@include box-shadow(inset 0 1px 3px 0 rgba(143,48,29,0.5))
li.active a
color: $clr-brick
render-svg
svg
path
fill: $clr-brick
&:hover, &:focus
border-color: $clr-brick-bright
li a
@include csstrans
display: table
table-layout: fixed
text-transform: capitalize
overflow: visible
line-height: 1
color: $med-drk-grey
font-size: 0.875rem
span
display: table-cell
vertical-align: middle
text-align: left
i
display: block
font-size: 1.5rem
margin: 0 0.2rem 0 0
&:hover, &:focus
color: $clr-brick-bright
render-svg
svg
path
fill: $clr-brick-bright
&:active, &.active
color: $clr-brick
render-svg
svg
path
fill: $clr-brick
render-svg
display: block
width: 1.5rem
height: 1.5rem
margin: 0 0.2rem 0 0
padding: 0
svg
width: 1.5rem
height: 1.5rem
path
fill: #666
.button.filterbtn
margin-bottom: 0 !important
min-width: 160px
#active-table-search
position: relative
@include placeholder(rgba(0,0,0,0.4), #777)
input[type="text"]
@include big-input(rgba(0,0,0,0.3), #777, $clr-brick)

164
app/assets/stylesheets/darkswarm/active_table_search.css.scss Normal file
View File

@@ -0,0 +1,164 @@
@import "mixins";
@import "branding";
@import "big-input";
@import "animations";
// Filter-box
.row .row.filter-box {
margin-left: 0;
margin-right: 0;
}
.row.filter-box:first-child {
border: 1px solid $clr-blue-light;
@include border-radius(0.25em);
margin-top: 2px;
@media all and (max-width: 640px) {
margin-bottom: 1em;
}
}
.row.filter-box.clear-filters {
background: transparent;
margin-top: 1em;
}
products .filter-box {
background: #f7f7f7;
}
.filter-box {
background: rgba(245, 245, 245, 0.6);
.tdhead {
padding: 0.25rem 0.5rem;
margin-top: 0.9rem;
color: $clr-blue;
border-bottom: 1px solid $clr-blue-light;
}
// OVERRIDES
[class*="block-grid-"] {
margin: 0 0 0.5rem 0;
}
[class*="block-grid-"] > li {
padding-bottom: 0.5rem !important;
}
li {
@include border-radius(12px);
padding-top: 0.5rem;
margin-bottom: 0.25rem;
&:hover, &:focus {
background: rgba(255, 255, 255, 0.25);
}
}
li.active {
background: white;
@include box-shadow(inset 0 1px 3px 0 rgba(143, 48, 29, 0.5));
}
li.active a {
color: $clr-brick;
render-svg {
svg {
path {
fill: $clr-brick;
}
}
}
&:hover, &:focus {
border-color: $clr-brick-bright;
}
}
li a {
@include csstrans;
display: table;
table-layout: fixed;
text-transform: capitalize;
overflow: visible;
line-height: 1;
color: $med-drk-grey;
font-size: 0.875rem;
span {
display: table-cell;
vertical-align: middle;
text-align: left;
}
i {
display: block;
font-size: 1.5rem;
margin: 0 0.2rem 0 0;
}
&:hover, &:focus {
color: $clr-brick-bright;
render-svg {
svg {
path {
fill: $clr-brick-bright;
}
}
}
}
&:active, &.active {
color: $clr-brick;
render-svg {
svg {
path {
fill: $clr-brick;
}
}
}
}
render-svg {
display: block;
width: 1.5rem;
height: 1.5rem;
margin: 0 0.2rem 0 0;
padding: 0;
svg {
width: 1.5rem;
height: 1.5rem;
path {
fill: #666;
}
}
}
}
}
.button.filterbtn {
margin-bottom: 0 !important;
min-width: 160px;
}
#active-table-search {
position: relative;
@include placeholder(rgba(0, 0, 0, 0.4), #777);
input[type="text"] {
@include big-input(rgba(0, 0, 0, 0.3), #777, $clr-brick);
}
}

5
app/assets/stylesheets/darkswarm/angular.css.sass → app/assets/stylesheets/darkswarm/angular.css.scss
View File

@@ -1,3 +1,4 @@
// https://docs.angularjs.org/api/ng/directive/ngCloak
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
display: none !important
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

217
app/assets/stylesheets/darkswarm/animations.sass
View File

@@ -1,217 +0,0 @@
@import mixins
// ANIMATION FUNCTIONS
//
@-webkit-keyframes slideInDown
0%
opacity: 0
-webkit-transform: translateY(-20px)
transform: translateY(-20px)
100%
-webkit-transform: translateY(0)
transform: translateY(0)
@keyframes slideInDown
0%
opacity: 0
-webkit-transform: translateY(-20px)
-ms-transform: translateY(-20px)
transform: translateY(-20px)
100%
-webkit-transform: translateY(0)
-ms-transform: translateY(0)
transform: translateY(0)
@-webkit-keyframes slideOutUp
0%
-webkit-transform: translateY(0)
transform: translateY(0)
100%
opacity: 0
-webkit-transform: translateY(-20px)
transform: translateY(-20px)
@keyframes slideOutUp
0%
-webkit-transform: translateY(0)
-ms-transform: translateY(0)
transform: translateY(0)
@-webkit-keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@keyframes fadeIn
0%
opacity: 0
100%
opacity: 1
@-webkit-keyframes spin
0%
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(359deg)
transform: rotate(359deg)
@keyframes spin
0%
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
100%
-webkit-transform: rotate(359deg)
transform: rotate(359deg)
// ANIMATION CLASSES
.fade
opacity: 0
-webkit-transition: opacity .15s linear
transition: opacity .15s linear
.fade.in
opacity: 1
.reveal-modal.fade
-webkit-transition: -webkit-transform .2s ease-out
-moz-transition: -moz-transform .2s ease-out
-o-transition: -o-transform .2s ease-out
transition: transform .2s ease-out
-webkit-transform: translate(0, -25%)
-ms-transform: translate(0, -25%)
transform: translate(0, -25%)
.reveal-modal.in
-webkit-transform: translate(0, 0)
-ms-transform: translate(0, 0)
transform: translate(0, 0)
.reveal-modal-bg.fade
filter: alpha(opacity = 0)
opacity: 0
.reveal-modal-bg.in
filter: alpha(opacity = 50)
opacity: .5
.animate-repeat
&.ng-move, &.ng-enter, &.ng-leave
-webkit-transition: all 300ms linear
transition: all 300ms linear
&.ng-leave
opacity: 1
&.ng-leave-active
opacity: 0
&.ng-enter
opacity: 0
&.ng-enter-active
opacity: 1
product.animate-repeat
&.ng-leave
border-color: rgba(153, 153, 153, 1)
&.ng-leave-active
border-color: rgba(153, 153, 153, 0)
&.ng-enter
border-color: rgba(153, 153, 153, 0)
&.ng-enter-active
border-color: rgba(153, 153, 153, 1)
.animate-show
-webkit-animation-name: slideInDown
animation-name: slideInDown
-webkit-animation-duration: 0.5s
animation-duration: 0.5s
-webkit-animation-fill-mode: both
animation-fill-mode: both
// line-height: 20px
// opacity: 1
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove
// display: block !important
.animate-show.ng-hide
-webkit-animation-name: slideOutUp
animation-name: slideOutUp
-webkit-animation-duration: 0.15s
animation-duration: 0.15s
-webkit-animation-fill-mode: both
animation-fill-mode: both
// line-height: 0
// opacity: 0
// padding: 0 10px
.row.animate-show ~ .row
-webkit-animation-name: fadeIn
animation-name: fadeIn
-webkit-animation-duration: 0.5s
animation-duration: 0.5s
-webkit-animation-fill-mode: both
animation-fill-mode: both
//
.animate-slide
max-height: 500px
opacity: 1 !important
-webkit-transition: all 300ms ease-in-out
-moz-transition: all 300ms ease-in-out
-o-transition: all 300ms ease-in-out
transition: all 300ms ease-in-out
&.ng-hide
overflow: hidden
max-height: 0
opacity: 0 !important
// &.ng-hide-add-active, &.ng-hide-remove-active
&.ng-hide-add, &.ng-hide-remove
/* IMPORTANT: this needs to be here to make it visible during the animation
since the .ng-hide class is already on the element rendering
it as hidden. */
display: block !important
.animate-show
opacity: 1 !important
-webkit-transition: all 300ms ease-in-out
-moz-transition: all 300ms ease-in-out
-o-transition: all 300ms ease-in-out
transition: all 300ms ease-in-out
&.ng-hide
opacity: 0 !important
// &.ng-hide-add-active, &.ng-hide-remove-active
&.ng-hide-add, &.ng-hide-remove
/* IMPORTANT: this needs to be here to make it visible during the animation
since the .ng-hide class is already on the element rendering
it as hidden. */
display: block !important
@mixin csstrans
-webkit-transition: all 300ms ease
-moz-transition: all 300ms ease
-ms-transition: all 300ms ease
-o-transition: all 300ms ease
transition: all 300ms ease
-webkit-transform-style: preserve-3d

271
app/assets/stylesheets/darkswarm/animations.scss Normal file
View File

@@ -0,0 +1,271 @@
@import "mixins";
// ANIMATION FUNCTIONS
//
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
// ANIMATION CLASSES
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.reveal-modal.fade {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.reveal-modal.in {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.reveal-modal-bg.fade {
filter: alpha(opacity = 0);
opacity: 0;
}
.reveal-modal-bg.in {
filter: alpha(opacity = 50);
opacity: 0.5;
}
.animate-repeat {
&.ng-move, &.ng-enter, &.ng-leave {
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
&.ng-leave {
opacity: 1;
&.ng-leave-active {
opacity: 0;
}
}
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: 1;
}
}
}
product.animate-repeat {
&.ng-leave {
border-color: rgba(153, 153, 153, 1);
&.ng-leave-active {
border-color: rgba(153, 153, 153, 0);
}
}
&.ng-enter {
border-color: rgba(153, 153, 153, 0);
&.ng-enter-active {
border-color: rgba(153, 153, 153, 1);
}
}
}
.animate-show {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
// line-height: 20px
// opacity: 1
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
// display: block !important
}
.animate-show.ng-hide {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
// line-height: 0
// opacity: 0
// padding: 0 10px
}
.row.animate-show ~ .row {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
//
.animate-slide {
max-height: 500px;
opacity: 1 !important;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
&.ng-hide {
overflow: hidden;
max-height: 0;
opacity: 0 !important;
}
// &.ng-hide-add-active, &.ng-hide-remove-active
&.ng-hide-add, &.ng-hide-remove {
/* IMPORTANT: this needs to be here to make it visible during the animation
* since the .ng-hide class is already on the element rendering
* it as hidden. */
display: block !important;
}
}
.animate-show {
opacity: 1 !important;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
&.ng-hide {
opacity: 0 !important;
}
// &.ng-hide-add-active, &.ng-hide-remove-active
&.ng-hide-add, &.ng-hide-remove {
/* IMPORTANT: this needs to be here to make it visible during the animation
* since the .ng-hide class is already on the element rendering
* it as hidden. */
display: block !important;
}
}
@mixin csstrans {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
-webkit-transform-style: preserve-3d;
}

93
app/assets/stylesheets/darkswarm/big-input.sass
View File

@@ -1,93 +0,0 @@
@import typography
@import branding
@import animations
@import mixins
//Big search used in active table search \\
@mixin big-input($input, $inputhvr, $inputactv)
@include headingFont
@include csstrans
@include border-radius(0.5rem)
background: rgba(255,255,255,0.1)
border: 2px solid $input
font-size: 2rem
box-shadow: 0
padding: 0.5rem 1rem
height: auto
width: 100%
margin-bottom: 0.5rem
box-shadow: none
color: $inputactv
@media all and (max-width: 640px)
font-size: 1.25rem
&:hover
@include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25))
border: 2px solid $inputhvr
color: $inputactv
&:active, &:focus, &.active
border: 2px solid $inputactv
color: $inputactv
background: white
background: rgba(255,255,255,0.5)
text-shadow: 0 0 10px #ffffff
padding: 1rem
letter-spacing: 0.02rem
outline: none
@mixin big-input-static
outline: 0
&:active, &:focus, &.active
padding: 0.75rem 1rem 0.35rem 1rem
letter-spacing: 0
@mixin medium-input($input, $inputhvr, $inputactv)
@include headingFont
@include csstrans
@include border-radius(0.5rem)
background: rgba(255,255,255,0.1)
border: 2px solid $input
font-size: 0.875rem
box-shadow: 0
padding: 0.5rem 0.625rem 0.375rem
height: auto
width: 100%
margin-bottom: 0.5rem
box-shadow: none
color: $inputactv
&:hover
@include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25))
border: 2px solid $inputhvr
color: $inputactv
&:active, &:focus, &.active
border: 2px solid $inputactv
color: $inputactv
background: white
background: rgba(255,255,255,0.5)
text-shadow: 0 0 10px #ffffff
outline: none
@mixin placeholder($placeholder, $placeholderhvr)
::-webkit-input-placeholder
color: $placeholder
:-moz-placeholder
color: $placeholder
::-moz-placeholder
color: $placeholder
:-ms-input-placeholder
color: $placeholder
&:hover
::-webkit-input-placeholder
color: $placeholderhvr
:-moz-placeholder
color: $placeholderhvr
::-moz-placeholder
color: $placeholderhvr
:-ms-input-placeholder
color: $placeholderhvr

127
app/assets/stylesheets/darkswarm/big-input.scss Normal file
View File

@@ -0,0 +1,127 @@
@import "typography";
@import "branding";
@import "animations";
@import "mixins";
//Big search used in active table search \\
@mixin big-input($input, $inputhvr, $inputactv) {
@include headingFont;
@include csstrans;
@include border-radius(0.5rem);
background: rgba(255, 255, 255, 0.1);
border: 2px solid $input;
font-size: 2rem;
box-shadow: 0;
padding: 0.5rem 1rem;
height: auto;
width: 100%;
margin-bottom: 0.5rem;
box-shadow: none;
color: $inputactv;
@media all and (max-width: 640px) {
font-size: 1.25rem;
}
&:hover {
@include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
border: 2px solid $inputhvr;
color: $inputactv;
}
&:active, &:focus, &.active {
border: 2px solid $inputactv;
color: $inputactv;
background: white;
background: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 10px #ffffff;
padding: 1rem;
letter-spacing: 0.02rem;
outline: none;
}
}
@mixin big-input-static {
outline: 0;
&:active, &:focus, &.active {
padding: 0.75rem 1rem 0.35rem 1rem;
letter-spacing: 0;
}
}
@mixin medium-input($input, $inputhvr, $inputactv) {
@include headingFont;
@include csstrans;
@include border-radius(0.5rem);
background: rgba(255, 255, 255, 0.1);
border: 2px solid $input;
font-size: 0.875rem;
box-shadow: 0;
padding: 0.5rem 0.625rem 0.375rem;
height: auto;
width: 100%;
margin-bottom: 0.5rem;
box-shadow: none;
color: $inputactv;
&:hover {
@include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
border: 2px solid $inputhvr;
color: $inputactv;
}
&:active, &:focus, &.active {
border: 2px solid $inputactv;
color: $inputactv;
background: white;
background: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 10px #ffffff;
outline: none;
}
}
@mixin placeholder($placeholder, $placeholderhvr) {
::-webkit-input-placeholder {
color: $placeholder;
}
-moz-placeholder: {
color: $placeholder;
};
::-moz-placeholder {
color: $placeholder;
}
-ms-input-placeholder: {
color: $placeholder;
};
&:hover {
::-webkit-input-placeholder {
color: $placeholderhvr;
}
-moz-placeholder: {
color: $placeholderhvr;
};
::-moz-placeholder {
color: $placeholderhvr;
}
-ms-input-placeholder: {
color: $placeholderhvr;
};
}
}

38
app/assets/stylesheets/darkswarm/branding.css.sass
View File

@@ -1,38 +0,0 @@
$ofn-brand: #f27052
// e.g. australia, uk, norway specific color
$ofn-grey: #808184
// old colors:
$clr-brick: #c1122b
$clr-brick-light: #f5e6e7
$clr-brick-light-trans: rgba(245, 230, 231, 0.9)
$clr-brick-ultra-light: #faf5f6
$clr-brick-bright: #eb4c46
$clr-brick-med-bright: #e5a2a0
$clr-brick-light-bright: #f5c4c9
$clr-turquoise: #0b8c61
$clr-turquoise-light: #ceefe4
$clr-turquoise-ultra-light: #e8f9f4
$clr-turquoise-bright: #23a877
$clr-blue: #0096ad
$clr-blue-light: #85d9e5
$clr-blue-bright: #14b6cc
$clr-yellow-light: #faf6c7
$disabled-light: #e5e5e5
$disabled-bright: #ccc
$disabled-med: #b3b3b3
$disabled-dark: #999
$disabled-v-dark: #808080
$med-grey: #666
$med-drk-grey: #444
$dark-grey: #333
$light-grey: #ddd
$black: #000

37
app/assets/stylesheets/darkswarm/branding.css.scss Normal file
View File

@@ -0,0 +1,37 @@
$ofn-brand: #f27052;
// e.g. australia, uk, norway specific color
$ofn-grey: #808184;
// old colors:
$clr-brick: #c1122b;
$clr-brick-light: #f5e6e7;
$clr-brick-light-trans: rgba(245, 230, 231, 0.9);
$clr-brick-ultra-light: #faf5f6;
$clr-brick-bright: #eb4c46;
$clr-brick-med-bright: #e5a2a0;
$clr-brick-light-bright: #f5c4c9;
$clr-turquoise: #0b8c61;
$clr-turquoise-light: #ceefe4;
$clr-turquoise-ultra-light: #e8f9f4;
$clr-turquoise-bright: #23a877;
$clr-blue: #0096ad;
$clr-blue-light: #85d9e5;
$clr-blue-bright: #14b6cc;
$clr-yellow-light: #faf6c7;
$disabled-light: #e5e5e5;
$disabled-bright: #ccc;
$disabled-med: #b3b3b3;
$disabled-dark: #999;
$disabled-v-dark: #808080;
$med-grey: #666;
$med-drk-grey: #444;
$dark-grey: #333;
$light-grey: #ddd;
$black: #000;

78
app/assets/stylesheets/darkswarm/footer.sass
View File

@@ -1,78 +0,0 @@
@import branding
@import mixins
@import animations
footer
.row
p a
font-size: 0.875rem
a, a *
@include csstrans
color: white
&:hover, &:active, &:focus
color: rgba(white, 1)
text-decoration: underline
.footer-global
background-color: $ofn-grey
padding-top: 60px
padding-bottom: 40px
.logo
width: 200px
height: 200px
background: $ofn-grey
@include border-radius(120px)
margin: -140px auto 0 auto
img
margin-top: 36px
.alert-box
background-color: transparent
border: none
padding: 0
.alert-cta
@include csstrans
width: 100%
border: 1px solid rgba($dark-grey, 0.35)
background-image: url("/assets/tile-wide.png")
background-position: center center
background-color: #bbb
padding: 12px 0 8px 0
display: block
&, & *
@include csstrans
color: #333
strong
letter-spacing: 0.5px
a:hover, a:active, a:focus
text-decoration: none
border-color: white
&, & *
color: rgba(white, 1)
.row
&, p, h1, h2, h3, h4, h5, h6
color: $disabled-bright
.footer-local
background: lighten($dark-grey, 3%)
@include panepadding
.row
&, p, h1, h2, h3, h4, h5, h6
color: $disabled-med
p.secure-icon i
font-size: 10rem
color: rgba(white, 0.1)
p.secure-text
color: rgba($disabled-med, 0.35)
.social-icons
margin-bottom: 0.25rem
margin-top: 0.75rem
a
i
font-size: 1.5rem
color: white
&:hover, &:active, &:focus
text-decoration: none
i
color: lighten($dark-grey, 60%)
text-shadow: 2px 2px 0 black

127
app/assets/stylesheets/darkswarm/footer.scss Normal file
View File

@@ -0,0 +1,127 @@
@import "branding";
@import "mixins";
@import "animations";
footer {
.row {
p a {
font-size: 0.875rem;
}
a, a * {
@include csstrans;
color: white;
&:hover, &:active, &:focus {
color: rgba(white, 1);
text-decoration: underline;
}
}
}
.footer-global {
background-color: $ofn-grey;
padding-top: 60px;
padding-bottom: 40px;
.logo {
width: 200px;
height: 200px;
background: $ofn-grey;
@include border-radius(120px);
margin: (-140px) auto 0 auto;
img {
margin-top: 36px;
}
}
.alert-box {
background-color: transparent;
border: none;
padding: 0;
.alert-cta {
@include csstrans;
width: 100%;
border: 1px solid rgba($dark-grey, 0.35);
background-image: url("/assets/tile-wide.png");
background-position: center center;
background-color: #bbb;
padding: 12px 0 8px 0;
display: block;
&, & * {
@include csstrans;
color: #333;
}
strong {
letter-spacing: 0.5px;
}
a:hover, a:active, a:focus {
text-decoration: none;
border-color: white;
&, & * {
color: rgba(white, 1);
}
}
}
}
.row {
&, p, h1, h2, h3, h4, h5, h6 {
color: $disabled-bright;
}
}
}
.footer-local {
background: lighten($dark-grey, 3%);
@include panepadding;
.row {
&, p, h1, h2, h3, h4, h5, h6 {
color: $disabled-med;
}
p.secure-icon i {
font-size: 10rem;
color: rgba(white, 0.1);
}
p.secure-text {
color: rgba($disabled-med, 0.35);
}
.social-icons {
margin-bottom: 0.25rem;
margin-top: 0.75rem;
a {
i {
font-size: 1.5rem;
color: white;
}
&:hover, &:active, &:focus {
text-decoration: none;
i {
color: lighten($dark-grey, 60%);
text-shadow: 2px 2px 0 black;
}
}
}
}
}
}
}

5
app/assets/stylesheets/darkswarm/forms.css.sass
View File

@@ -1,5 +0,0 @@
@import mixins
@import branding
fieldset
border: 0

6
app/assets/stylesheets/darkswarm/forms.css.scss Normal file
View File

@@ -0,0 +1,6 @@
@import "mixins";
@import "branding";
fieldset {
border: 0;
}

108
app/assets/stylesheets/darkswarm/groups.css.sass
View File

@@ -1,108 +0,0 @@
@import branding
@import mixins
@import typography
// Search page
#groups
@include groupsbg
@include sidepaddingSm
@include panepadding
h1, p.text
font-weight: 300
h1
font-size: 350%
a > .group-name
&:hover, &:focus, &:active
text-decoration: underline
.groups-icons
text-align: right
a
font-size: 1.5em
.groups-header
border: 2px solid $clr-brick-light-bright
@include border-radius-mixed(0.5em, 0.5em, 0, 0)
margin: -1rem 0 1rem
padding: 1rem 0.9375rem
@media screen and (min-width: 640px)
border: 0 none
@include border-radius(0)
margin: 0
padding: 0
.group
padding-bottom: 0.5em
.row div
font-size: 110%
.row a
vertical-align: middle
.ofn-i_035-groups
font-size: 120%
vertical-align: middle
// Individual Page
#group-page
.group-logo, .group-header
text-align: center
.group-logo
padding-bottom: 1em
max-height: 200px
.group-name
border-bottom: 1px solid #ccc
@media screen and (min-width: 768px)
.group-logo, .group-header
text-align: left
.group-logo
max-height: 120px
float: left
padding-right: 1em
background-color: white
// Tabs
.tabs dd a // Mobile first
padding: 0.25rem 0.45rem 0rem
font-size: 0.75rem
border: none
margin-bottom: -2px
margin-right: 2px
text-transform: capitalize
@include headingFont
@include border-radius(1em 0.25em 0 0)
@include gradient($disabled-light, $disabled-bright)
@media screen and (min-width: 768px)
.tabs dd a
padding: 0.5rem 1rem 0.25em
font-size: 0.875rem
@include border-radius(1.5em 0.25em 0 0)
@media screen and (min-width: 1024px)
.tabs dd a
padding: 0.75rem 1.5rem 0.5em
font-size: 1rem
@include border-radius(2em 0.25em 0 0)
.tabs dd.active a
@include gradient(white, white)
margin-bottom: -1px
border-top: 1px solid $light-grey
border-left: 1px solid $light-grey
border-right: 1px solid $light-grey
border-bottom: 0
.tabs-content
border-top: 1px solid $light-grey
border-left: 1px solid $light-grey
border-right: 1px solid $light-grey
border-bottom: 1px solid $light-grey
padding: 1.5em
// Producers tab
.producers
background-image: none
background-color: initial
.active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer
color: $clr-turquoise
padding: 0
// Hubs tab
.hubs
background-image: none
padding-top: 0
padding-bottom: 0

169
app/assets/stylesheets/darkswarm/groups.css.scss Normal file
View File

@@ -0,0 +1,169 @@
@import "branding";
@import "mixins";
@import "typography";
// Search page
#groups {
@include groupsbg;
@include sidepaddingSm;
@include panepadding;
h1, p.text {
font-weight: 300;
}
h1 {
font-size: 350%;
}
a > .group-name {
&:hover, &:focus, &:active {
text-decoration: underline;
}
}
.groups-icons {
text-align: right;
a {
font-size: 1.5em;
}
}
.groups-header {
border: 2px solid $clr-brick-light-bright;
@include border-radius-mixed(0.5em, 0.5em, 0, 0);
margin: (-1rem) 0 1rem;
padding: 1rem 0.9375rem;
@media screen and (min-width: 640px) {
border: 0 none;
@include border-radius(0);
margin: 0;
padding: 0;
}
}
}
.group {
padding-bottom: 0.5em;
.row div {
font-size: 110%;
}
.row a {
vertical-align: middle;
}
.ofn-i_035-groups {
font-size: 120%;
vertical-align: middle;
}
}
// Individual Page
#group-page {
.group-logo, .group-header {
text-align: center;
}
.group-logo {
padding-bottom: 1em;
max-height: 200px;
}
.group-name {
border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 768px) {
.group-logo, .group-header {
text-align: left;
}
.group-logo {
max-height: 120px;
float: left;
padding-right: 1em;
background-color: white;
}
}
// Tabs
.tabs dd a {
padding: 0.25rem 0.45rem 0rem;
font-size: 0.75rem;
border: none;
margin-bottom: -2px;
margin-right: 2px;
text-transform: capitalize;
@include headingFont;
@include border-radius(1em 0.25em 0 0);
@include gradient($disabled-light, $disabled-bright);
}
@media screen and (min-width: 768px) {
.tabs dd a {
padding: 0.5rem 1rem 0.25em;
font-size: 0.875rem;
@include border-radius(1.5em 0.25em 0 0);
}
}
@media screen and (min-width: 1024px) {
.tabs dd a {
padding: 0.75rem 1.5rem 0.5em;
font-size: 1rem;
@include border-radius(2em 0.25em 0 0);
}
}
.tabs dd.active a {
@include gradient(white, white);
margin-bottom: -1px;
border-top: 1px solid $light-grey;
border-left: 1px solid $light-grey;
border-right: 1px solid $light-grey;
border-bottom: 0;
}
.tabs-content {
border-top: 1px solid $light-grey;
border-left: 1px solid $light-grey;
border-right: 1px solid $light-grey;
border-bottom: 1px solid $light-grey;
padding: 1.5em;
}
// Producers tab
.producers {
background-image: none;
background-color: initial;
.active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer {
color: $clr-turquoise;
}
padding: 0;
}
// Hubs tab
.hubs {
background-image: none;
padding-top: 0;
padding-bottom: 0;
}
}

21
app/assets/stylesheets/darkswarm/header.css.sass
View File

@@ -1,21 +0,0 @@
@import variables
nav.top-bar
margin-bottom: 0px
a.icon
&:hover
text-decoration: none
height: $topbar-height
color: white
i
font-size: 29px
line-height: $topbar-height
span
font-size: 13px
display: inline-block
line-height: $topbar-height
height: $topbar-height
vertical-align: top
body > section[role='main']
padding: 0px

31
app/assets/stylesheets/darkswarm/header.css.scss Normal file
View File

@@ -0,0 +1,31 @@
@import "variables";
nav.top-bar {
margin-bottom: 0px;
a.icon {
&:hover {
text-decoration: none;
}
height: $topbar-height;
color: white;
i {
font-size: 29px;
line-height: $topbar-height;
}
span {
font-size: 13px;
display: inline-block;
line-height: $topbar-height;
height: $topbar-height;
vertical-align: top;
}
}
}
body > section[role='main'] {
padding: 0px;
}

156
app/assets/stylesheets/darkswarm/home_panes.css.sass
View File

@@ -1,156 +0,0 @@
@import branding
@import mixins
@import typography
@import animations
@import variables
// Styling for big panes on homepage \\
#panes
.pane
.row
@include panepadding
padding-top: 75px
padding-bottom: 75px
&.header
padding-bottom: 0
&.content
padding-top: 0
// Background styles \\
#system.pane
background-color: white
#brand-story.pane, #cta.pane, #shops.pane, #sell.pane
@include tiledPane
#connect.pane
@include groupsbg
#learn.pane
@include hubsbg
#stats.pane
background-image: url("/assets/home/background-blurred-oranges.jpg")
background-position: center center
background-color: $ofn-grey
@include fullbg
@include paneWhiteText
// Content styles \\
#brand-story.pane
.row
h2
font-weight: 300
font-size: 88px
p
@include bodyFont
font-size: 1.5rem
font-weight: 300
@media all and (max-width: 768px)
h2
font-size: 52px
p
font-size: 1.3rem
a.text-vbig i
font-size: 75px
#system.pane
.row .row
padding-bottom: 0
@media all and (max-width: 640px)
.row .row
padding: 0
.home-icon-box
background-image: url("/assets/ofn-o.png")
background-position: center center
background-repeat: no-repeat
background-size: auto 100%
padding: 3rem 0
text-align: center
margin-top: 2rem
@media all and (min-width: 642px)
margin-top: 0
i
font-size: 4rem
a
display: block
width: 64px
height: 64px
margin: 0 auto
background-color: $brand-colour
background-position: center center
background-repeat: no-repeat
background-size: auto 100%
&.search
background-image: url("/assets/icon-mask-magnifier.png")
&.shop
background-image: url("/assets/icon-mask-apple.png")
&.pick-up-delivery
background-image: url("/assets/icon-mask-truck.png")
h2
font-size: 70px
font-weight: 300
color: $brand-colour
@media all and (max-width: 640px)
font-size: 45px
.home-icon-box-bottom
margin-top: 1rem
width: 100%
padding-left: 1rem
padding-right: 1rem
@media all and (min-width: 480px)
padding-left: 3rem
padding-right: 3rem
@media all and (min-width: 642px)
padding-left: 1rem
padding-right: 1rem
h4
color: $brand-colour
border-bottom: 2px solid lighten($brand-colour, 20%)
text-align: center
padding: 1rem 0
margin: 1.5rem 0
#cta.pane, #stats.pane
h2
font-weight: 300
font-size: 45px
margin-bottom: 2rem
@media all and (max-width: 830px)
font-size: 35px
#stats.pane
.row.header
padding-bottom: 2rem
h4
font-weight: 300
text-transform: uppercase
margin: 1.5rem 0
display: inline-block
strong
display: block
font-weight: normal
font-size: 75px
#shops.pane
@include paneWhiteText
h2
margin-bottom: 2rem
font-size: 4.4rem
font-weight: 300
#shops-signup.pane
background-color: $brand-colour
#sell-detail.pane
margin: 50px 0
.row
padding-top: 25px
padding-bottom: 25px

225
app/assets/stylesheets/darkswarm/home_panes.css.scss Normal file
View File

@@ -0,0 +1,225 @@
@import "branding";
@import "mixins";
@import "typography";
@import "animations";
@import "variables";
// Styling for big panes on homepage \\
#panes {
.pane {
.row {
@include panepadding;
padding-top: 75px;
padding-bottom: 75px;
&.header {
padding-bottom: 0;
}
&.content {
padding-top: 0;
}
}
}
}
// Background styles \\
#system.pane {
background-color: white;
}
#brand-story.pane, #cta.pane, #shops.pane, #sell.pane {
@include tiledPane;
}
#connect.pane {
@include groupsbg;
}
#learn.pane {
@include hubsbg;
}
#stats.pane {
background-image: url("/assets/home/background-blurred-oranges.jpg");
background-position: center center;
background-color: $ofn-grey;
@include fullbg;
@include paneWhiteText;
}
// Content styles \\
#brand-story.pane {
.row {
h2 {
font-weight: 300;
font-size: 88px;
}
p {
@include bodyFont;
font-size: 1.5rem;
font-weight: 300;
}
@media all and (max-width: 768px) {
h2 {
font-size: 52px;
}
p {
font-size: 1.3rem;
}
}
}
a.text-vbig i {
font-size: 75px;
}
}
#system.pane {
.row .row {
padding-bottom: 0;
}
@media all and (max-width: 640px) {
.row .row {
padding: 0;
}
}
.home-icon-box {
background-image: url("/assets/ofn-o.png");
background-position: center center;
background-repeat: no-repeat;
background-size: auto 100%;
padding: 3rem 0;
text-align: center;
margin-top: 2rem;
@media all and (min-width: 642px) {
margin-top: 0;
}
i {
font-size: 4rem;
}
a {
display: block;
width: 64px;
height: 64px;
margin: 0 auto;
background-color: $brand-colour;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 100%;
&.search {
background-image: url("/assets/icon-mask-magnifier.png");
}
&.shop {
background-image: url("/assets/icon-mask-apple.png");
}
&.pick-up-delivery {
background-image: url("/assets/icon-mask-truck.png");
}
}
}
h2 {
font-size: 70px;
font-weight: 300;
color: $brand-colour;
@media all and (max-width: 640px) {
font-size: 45px;
}
}
.home-icon-box-bottom {
margin-top: 1rem;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
@media all and (min-width: 480px) {
padding-left: 3rem;
padding-right: 3rem;
}
@media all and (min-width: 642px) {
padding-left: 1rem;
padding-right: 1rem;
}
h4 {
color: $brand-colour;
border-bottom: 2px solid lighten($brand-colour, 20%);
text-align: center;
padding: 1rem 0;
margin: 1.5rem 0;
}
}
}
#cta.pane, #stats.pane {
h2 {
font-weight: 300;
font-size: 45px;
margin-bottom: 2rem;
@media all and (max-width: 830px) {
font-size: 35px;
}
}
}
#stats.pane {
.row.header {
padding-bottom: 2rem;
}
h4 {
font-weight: 300;
text-transform: uppercase;
margin: 1.5rem 0;
display: inline-block;
strong {
display: block;
font-weight: normal;
font-size: 75px;
}
}
}
#shops.pane {
@include paneWhiteText;
h2 {
margin-bottom: 2rem;
font-size: 4.4rem;
font-weight: 300;
}
}
#shops-signup.pane {
background-color: $brand-colour;
}
#sell-detail.pane {
margin: 50px 0;
.row {
padding-top: 25px;
padding-bottom: 25px;
}
}

33
app/assets/stylesheets/darkswarm/home_tagline.css.sass
View File

@@ -1,33 +0,0 @@
@import branding
@import mixins
@import variables
// Styling for brand intro / tagline on homepage
#tagline
width: 100%
&:before
content: ""
@include fullbg
background-color: $ofn-grey
background-image: url("/assets/home/home.jpg")
position: fixed
left: 0
right: 0
bottom: 0
z-index: -1
width: 100%
height: 100%
h1
margin-top: 2rem
@media all and (min-width: 768px)
margin-top: 10rem
img
max-width: 45%
@media all and (min-height: 500px)
max-width: 80%
margin-bottom: 2rem
@media all and (min-width: 768px)
margin-bottom: 5rem

47
app/assets/stylesheets/darkswarm/home_tagline.css.scss Normal file
View File

@@ -0,0 +1,47 @@
@import "branding";
@import "mixins";
@import "variables";
// Styling for brand intro / tagline on homepage
#tagline {
width: 100%;
&:before {
content: "";
@include fullbg;
background-color: $ofn-grey;
background-image: url("/assets/home/home.jpg");
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
}
h1 {
margin-top: 2rem;
@media all and (min-width: 768px) {
margin-top: 10rem;
}
img {
max-width: 45%;
@media all and (min-height: 500px) {
max-width: 80%;
}
margin-bottom: 2rem;
@media all and (min-width: 768px) {
margin-bottom: 5rem;
}
}
}
}

168
app/assets/stylesheets/darkswarm/hub_node.css.sass
View File

@@ -1,168 +0,0 @@
@import branding
@import mixins
.hubs
.active_table .active_table_node
//Prevents ugly overflows on hub title
.columns.skinny-head
white-space: nowrap
overflow-x: hidden
overflow-y: visible
//Generic text link style
a, a *
color: $clr-brick
&:hover, &:active, &:focus
color: $clr-brick-bright
//Hub and Producer icons
i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
font-size: 2rem
display: inline-block
margin-right: 0.25rem
float: left
//Closed & Open column
.open_closed
i
font-size: 2rem
float: right
margin-left: 0.5rem
//Hub Link
@media all and (max-width: 640px)
a.hub
display: block
//Hub Name
span.hub-name-listing
font-weight: 700
&:after
content: ">>"
display: inline-block
margin-left: 5px
//CLOSED row
&.closed
.active_table_row
border: 1px solid transparent
@media all and (max-width: 640px)
border-color: $clr-brick-light
&:hover, &:active, &:focus
border-color: $clr-brick-light-bright
//OPEN row
&.open
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
border-color: $clr-brick-light-bright
&.open, &.closed
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: $clr-brick-light
@include border-radius-mixed(0.5em, 0.5em, 0, 0)
margin-top: -1rem
margin-bottom: 1rem
padding-top: 1rem
padding-bottom: 1rem
label
margin-top: 1rem
//Padding second row
&.open
.active_table_row:nth-child(2)
padding-bottom: 0.75rem
.producers-list
li.more-producers-link
.less
display: none
a:hover
text-decoration: underline
li.additional-producer
display: none
&.show-more-producers
li.additional-producer
display: block
li.more-producers-link
.more
display: none
.less
display: block
//CURRENT hub (shows selected hub)
&.current
//overwrites active_table
&.closed, &.open
a, a *
color: $clr-brick
.active_table_row
border-color: $clr-brick
.active_table_row:first-child, .active_table_row:last-child
background-color: $clr-brick-light-trans
opacity: 1
&:hover, &:focus, &:active
opacity: 0.9
border-color: $clr-brick-bright
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: rgba(255,255,255,0.85)
//INACTIVE - closed hub
&.inactive
&.closed, &.open
&, & *
color: $disabled-med
a, a *
color: $disabled-dark
&.closed
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
&:hover, &:active, &:focus
border-color: $disabled-bright
&.open
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
// border-color: $disabled-bright
&, &:hover, &:active, &:focus
border-color: $disabled-bright
&.closed, &.open
// & Current hub
&.current
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
a, a *
color: $med-grey
border-color: $disabled-dark
background-color: rgba(220,220,220,0.5)
&:hover, &:focus, &:active
border-color: $disabled-dark
// Small devices
@media all and (max-width: 640px)
.active_table_row:first-child .skinny-head
background-color: $disabled-bright
// Small devices
@media all and (max-width: 640px)
.active_table_row, .active_table_row:first-child, .active_table_row:last-child
border-color: $disabled-bright
background-color: transparent
&:hover, &:focus, &:active
border-color: $disabled-bright
opacity: 0.85
.active_table_row:first-child .skinny-head
background-color: $disabled-light
//Is Profile - profile node
&.inactive.is_profile
&.closed, &.open
.active_table_row
&:hover, &:active, &:focus
border-color: transparent
cursor: auto
@media all and (max-width: 640px)
border-color: transparent

255
app/assets/stylesheets/darkswarm/hub_node.css.scss Normal file
View File

@@ -0,0 +1,255 @@
@import "branding";
@import "mixins";
.hubs {
.active_table .active_table_node {
//Prevents ugly overflows on hub title
.columns.skinny-head {
white-space: nowrap;
overflow-x: hidden;
overflow-y: visible;
}
//Generic text link style
a, a * {
color: $clr-brick;
&:hover, &:active, &:focus {
color: $clr-brick-bright;
}
}
//Hub and Producer icons
i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed {
font-size: 2rem;
display: inline-block;
margin-right: 0.25rem;
float: left;
}
//Closed & Open column
.open_closed {
i {
font-size: 2rem;
float: right;
margin-left: 0.5rem;
}
}
//Hub Link
@media all and (max-width: 640px) {
a.hub {
display: block;
}
}
//Hub Name
span.hub-name-listing {
font-weight: 700;
&:after {
content: ">>";
display: inline-block;
margin-left: 5px;
}
}
//CLOSED row
&.closed {
.active_table_row {
border: 1px solid transparent;
@media all and (max-width: 640px) {
border-color: $clr-brick-light;
}
&:hover, &:active, &:focus {
border-color: $clr-brick-light-bright;
}
}
}
//OPEN row
&.open {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
border-color: $clr-brick-light-bright;
}
}
&.open, &.closed {
@media all and (max-width: 640px) {
.active_table_row:first-child .skinny-head {
background-color: $clr-brick-light;
@include border-radius-mixed(0.5em, 0.5em, 0, 0);
margin-top: -1rem;
margin-bottom: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
label {
margin-top: 1rem;
}
}
}
//Padding second row
&.open {
.active_table_row:nth-child(2) {
padding-bottom: 0.75rem;
}
}
.producers-list {
li.more-producers-link {
.less {
display: none;
}
a:hover {
text-decoration: underline;
}
}
li.additional-producer {
display: none;
}
&.show-more-producers {
li.additional-producer {
display: block;
}
li.more-producers-link {
.more {
display: none;
}
.less {
display: block;
}
}
}
}
//CURRENT hub (shows selected hub)
&.current {
//overwrites active_table
&.closed, &.open {
a, a * {
color: $clr-brick;
}
.active_table_row {
border-color: $clr-brick;
}
.active_table_row:first-child, .active_table_row:last-child {
background-color: $clr-brick-light-trans;
opacity: 1;
&:hover, &:focus, &:active {
opacity: 0.9;
border-color: $clr-brick-bright;
}
}
@media all and (max-width: 640px) {
.active_table_row:first-child .skinny-head {
background-color: rgba(255, 255, 255, 0.85);
}
}
}
}
//INACTIVE - closed hub
&.inactive {
&.closed, &.open {
&, & * {
color: $disabled-med;
}
a, a * {
color: $disabled-dark;
}
}
&.closed {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
&:hover, &:active, &:focus {
border-color: $disabled-bright;
}
}
}
&.open {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
// border-color: $disabled-bright
&, &:hover, &:active, &:focus {
border-color: $disabled-bright;
}
}
}
&.closed, &.open {
// & Current hub
&.current {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
a, a * {
color: $med-grey;
}
border-color: $disabled-dark;
background-color: rgba(220, 220, 220, 0.5);
&:hover, &:focus, &:active {
border-color: $disabled-dark;
}
}
// Small devices
@media all and (max-width: 640px) {
.active_table_row:first-child .skinny-head {
background-color: $disabled-bright;
}
}
}
// Small devices
@media all and (max-width: 640px) {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
border-color: $disabled-bright;
background-color: transparent;
&:hover, &:focus, &:active {
border-color: $disabled-bright;
opacity: 0.85;
}
}
.active_table_row:first-child .skinny-head {
background-color: $disabled-light;
}
}
}
}
//Is Profile - profile node
&.inactive.is_profile {
&.closed, &.open {
.active_table_row {
&:hover, &:active, &:focus {
border-color: transparent;
cursor: auto;
}
@media all and (max-width: 640px) {
border-color: transparent;
}
}
}
}
}
}

13
app/assets/stylesheets/darkswarm/hubs.css.sass
View File

@@ -1,13 +0,0 @@
@import branding
@import mixins
#hubs
background-color: lighten($ofn-grey, 43%)
@include panepadding
@include sidepaddingSm
.name-matches, .distance-matches
margin-top: 4em
.more-controls
text-align: center

18
app/assets/stylesheets/darkswarm/hubs.css.scss Normal file
View File

@@ -0,0 +1,18 @@
@import "branding";
@import "mixins";
#hubs {
background-color: lighten($ofn-grey, 43%);
@include panepadding;
@include sidepaddingSm;
.name-matches, .distance-matches {
margin-top: 4em;
}
.more-controls {
text-align: center;
}
}

32
app/assets/stylesheets/darkswarm/ie_warning.sass
View File

@@ -1,32 +0,0 @@
#ie-warning
margin-bottom: 0
padding-bottom: 2rem
.ie-msg
background: rgba(255,255,255,0.15)
padding: 0.5rem
margin-bottom: 1rem
margin-top: 1rem
.browserbtn
text-align: center
margin-bottom: 1rem
a
color: white
font-size: 1rem
filter: alpha(opacity=70)
opacity: 0.7
&:hover, &:active, &:focus
filter: alpha(opacity=100)
opacity: 1
a.browserlogo
display: block
width: 100%
i
font-size: 5rem
color: white
text-align: center
display: block

40
app/assets/stylesheets/darkswarm/ie_warning.scss Normal file
View File

@@ -0,0 +1,40 @@
#ie-warning {
margin-bottom: 0;
padding-bottom: 2rem;
.ie-msg {
background: rgba(255, 255, 255, 0.15);
padding: 0.5rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
.browserbtn {
text-align: center;
margin-bottom: 1rem;
a {
color: white;
font-size: 1rem;
filter: alpha(opacity = 70);
opacity: 0.7;
&:hover, &:active, &:focus {
filter: alpha(opacity = 100);
opacity: 1;
}
}
a.browserlogo {
display: block;
width: 100%;
}
}
i {
font-size: 5rem;
color: white;
text-align: center;
display: block;
}
}

47
app/assets/stylesheets/darkswarm/images.css.sass
View File

@@ -1,47 +0,0 @@
@import mixins
@import variables
@import branding
.product-img
padding: 5px
margin-bottom: 10px
outline: 1px solid #ccc
@include box-shadow(0 1px 2px 1px rgba(0,0,0,0.15))
// placeholder for when no product images
&.placeholder
opacity: 0.35
@media all and (max-width: 1024px)
display: none
.hero-img
outline: 1px solid $disabled-bright
border-color: transparent
@include box-shadow(none)
width: 100%
min-height: 80px
height: inherit
max-height: 260px
overflow: hidden
@media all and (max-width: 640px)
min-height: 68px
.hero-img-small
background-color: #333
width: 100%
// min-height: 60px
height: inherit
overflow: hidden
margin: 0 0 1rem 0 !important
.producer-logo
max-width: 220px
@media only screen and (max-width: 1024px)
.product-img
margin-top: 2em
margin-bottom: 1em

58
app/assets/stylesheets/darkswarm/images.css.scss Normal file
View File

@@ -0,0 +1,58 @@
@import "mixins";
@import "variables";
@import "branding";
.product-img {
padding: 5px;
margin-bottom: 10px;
outline: 1px solid #ccc;
@include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.15));
// placeholder for when no product images
&.placeholder {
opacity: 0.35;
@media all and (max-width: 1024px) {
display: none;
}
}
}
.hero-img {
outline: 1px solid $disabled-bright;
border-color: transparent;
@include box-shadow(none);
width: 100%;
min-height: 80px;
height: inherit;
max-height: 260px;
overflow: hidden;
@media all and (max-width: 640px) {
min-height: 68px;
}
}
.hero-img-small {
background-color: #333;
width: 100%;
// min-height: 60px
height: inherit;
overflow: hidden;
margin: 0 0 1rem 0 !important;
}
.producer-logo {
max-width: 220px;
}
@media only screen and (max-width: 1024px) {
.product-img {
margin-top: 2em;
margin-bottom: 1em;
}
}

7
app/assets/stylesheets/darkswarm/lists.css.sass
View File

@@ -1,7 +0,0 @@
body ol
list-style-type: none
margin-left: 0em
padding-top: 1em
li
margin-left: 0

9
app/assets/stylesheets/darkswarm/lists.css.scss Normal file
View File

@@ -0,0 +1,9 @@
body ol {
list-style-type: none;
margin-left: 0em;
padding-top: 1em;
li {
margin-left: 0;
}
}

83
app/assets/stylesheets/darkswarm/loading.sass
View File

@@ -1,83 +0,0 @@
@import "compass/css3/user-interface"
#loading
.reveal-modal-bg
z-index: 101
background: rgba(0, 0, 0, 0.85)
#message
width: 100%
text-align: center
position: absolute
z-index: 102
margin: auto
top: 0
left: 0
bottom: 0
right: 0
@include user-select(none)
h1
-webkit-animation: blurFadeIn 0.8s ease-in-out 0s
color: white
font-size: 1.15rem
position: fixed
text-align: center
left: 0
right: 0
margin: 0 auto
top: 55%
width: 100%
overflow: visible
.loader
position: fixed
margin: 0 auto
left: 0
right: 0
top: 50%
margin-top: -30px
width: 60px
height: 60px
list-style: none
li
background-color: #FFFFFF
width: 10px
height: 10px
float: right
margin-right: 5px
box-shadow: 0px 100px 20px rgba(0, 0, 0, 0.2)
li:first-child
-webkit-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s
li:nth-child(2)
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s
li:nth-child(3)
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s
@-webkit-keyframes blurFadeIn
0%
opacity: 0
text-shadow: 0px 0px 10px #fff
-webkit-transform: scale(1.3)
50%
opacity: 0.5
text-shadow: 0px 0px 5px #fff
-webkit-transform: scale(1.1)
100%
opacity: 1
text-shadow: 0px 0px 0px #fff
-webkit-transform: scale(1)
@-webkit-keyframes 'loadbars'
0%
height: 10px
margin-top: 25px
50%
height: 50px
margin-top: 0px
100%
height: 10px
margin-top: 25px

106
app/assets/stylesheets/darkswarm/loading.scss Normal file
View File

@@ -0,0 +1,106 @@
@import "compass/css3/user-interface";
#loading {
.reveal-modal-bg {
z-index: 101;
background: rgba(0, 0, 0, 0.85);
}
#message {
width: 100%;
text-align: center;
position: absolute;
z-index: 102;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
@include user-select(none);
h1 {
-webkit-animation: blurFadeIn 0.8s ease-in-out 0s;
color: white;
font-size: 1.15rem;
position: fixed;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
top: 55%;
width: 100%;
overflow: visible;
}
}
.loader {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
margin-top: -30px;
width: 60px;
height: 60px;
list-style: none;
li {
background-color: #FFFFFF;
width: 10px;
height: 10px;
float: right;
margin-right: 5px;
box-shadow: 0px 100px 20px rgba(0, 0, 0, 0.2);
}
li:first-child {
-webkit-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s;
}
li:nth-child(2) {
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s;
}
li:nth-child(3) {
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s;
}
}
}
@-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 5px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 0px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes 'loadbars' {
0% {
height: 10px;
margin-top: 25px;
}
50% {
height: 50px;
margin-top: 0px;
}
100% {
height: 10px;
margin-top: 25px;
}
}

50
app/assets/stylesheets/darkswarm/map.css.sass
View File

@@ -1,50 +0,0 @@
// Place all the styles related to the map controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import big-input
.map-container
width: 100%
map, .angular-google-map-container, google-map, .angular-google-map
display: block
height: 100%
width: 100%
// https://github.com/zurb/foundation/issues/112
img
max-width: none
height: auto
#pac-input
@include big-input(#888, #333, $clr-brick)
@include big-input-static
font-size: 1.5rem
background: rgba(255,255,255,0.85)
width: 50%
margin-top: 1.2rem
margin-left: 1rem
@media all and (max-width: 768px)
width: 80%
&:active, &:focus, &.active
background: rgba(255,255,255, 1)
.map-footer
position: fixed
z-index: 2
width: 100%
height: 23px
left: 80px
right: 0
bottom: 6px
margin: 0
padding: 6px
font-size: 14px
font-weight: bold
text-shadow: 2px 2px #aaa
color: #fff
a, a:hover, a:active, a:focus
color: #fff
@media all and (max-width: 1025px)
left: 0px

64
app/assets/stylesheets/darkswarm/map.css.scss Normal file
View File

@@ -0,0 +1,64 @@
// Place all the styles related to the map controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import "big-input";
.map-container {
width: 100%;
map, .angular-google-map-container, google-map, .angular-google-map {
display: block;
height: 100%;
width: 100%;
}
// https://github.com/zurb/foundation/issues/112
img {
max-width: none;
height: auto;
}
#pac-input {
@include big-input(#888, #333, $clr-brick);
@include big-input-static;
font-size: 1.5rem;
background: rgba(255, 255, 255, 0.85);
width: 50%;
margin-top: 1.2rem;
margin-left: 1rem;
@media all and (max-width: 768px) {
width: 80%;
}
&:active, &:focus, &.active {
background: rgba(255, 255, 255, 1);
}
}
}
.map-footer {
position: fixed;
z-index: 2;
width: 100%;
height: 23px;
left: 80px;
right: 0;
bottom: 6px;
margin: 0;
padding: 6px;
font-size: 14px;
font-weight: bold;
text-shadow: 2px 2px #aaa;
color: #fff;
a, a:hover, a:active, a:focus {
color: #fff;
}
@media all and (max-width: 1025px) {
left: 0px;
}
}

137
app/assets/stylesheets/darkswarm/menu.css.sass
View File

@@ -1,137 +0,0 @@
@import compass
@import branding
@import mixins
@import typography
@import variables
nav
@include textpress
text-shadow: none
// Create center style for nav ul (foundation provides left and right)
text-align: center
.top-bar-section
// Avoid menu items blocking logo
li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover
background-color: transparent
ul.center
display: inline-block
// By default, we center between the left and right uls, but we want to be centered
// relative to the whole page. The difference in width between the other uls is 74px,
// so we offset by that amount here.
margin-left: -74px
.joyride-tip-guide .button
text-shadow: none
// Default overrides - big menu
.top-bar-section .has-dropdown > a
padding-right: $topbar-height / 3 !important
i.ofn-i_022-cog
font-size: 24px
line-height: $topbar-height
.top-bar-section .has-dropdown > a:after
display: none
.top-bar-section ul li > a
font-size: 0.75rem
height: $topbar-height
opacity: 0.8
&:hover, &:focus, &:active
opacity: 1
@include transition(all 0.3s ease-in-out)
.top-bar-section ul li.ofn-logo > a
display: table-cell
vertical-align: middle
opacity: 1
.nav-branded
color: $brand-colour
span
font-size: 13px
.nav-primary
@include headingFont
font-size: 0.875rem
font-weight: 300
ul .nav-primary
text-transform: uppercase
ul.dropdown
border: 1px solid $smoke
border-top: none
// Mobile Menu
.tab-bar
background-color: white
.off-canvas-wrap.move-right .tab-bar .menu-icon
@include box-shadow(inset 0 0 6px 2px rgba(0,0,0,0.5))
.off-canvas-wrap .tab-bar .menu-icon
@include box-shadow(none)
.off-canvas-wrap.move-right .tab-bar .menu-icon span
-moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666
-webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666
box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666
.tab-bar .menu-icon span::after
box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black
.tab-bar .ofn-logo
padding: 9px 0 0 9px
.left-off-canvas-menu
background-color: white
.off-canvas-wrap.move-right ul.off-canvas-list
font-size: 0.875rem
.li-menu
@include headingFont
font-size: 1rem
a
color: rgba(0, 0, 0, 0.9)
li a
color: rgba(0, 0, 0, 0.9)
&:hover
background-color: transparent
color: $brand-colour
@include transition(all 0.3s ease-in-out)
.off-canvas-wrap.move-right ul.off-canvas-list i
font-size: 1.5rem
margin-right: 0.25rem
// Responsive
@media screen and (max-width: 1450px)
nav .top-bar-section
ul li a, .has-dropdown > a
padding: 0 $topbar-height / 8 !important
ul.center
margin-left: -24px
@media screen and (min-width: 1025px)
body.off-canvas
// padding required to placehold for fixed menu bar
padding-top: $topbar-height
@media screen and (max-width: 1025px)
body.off-canvas
// padding required to placehold for fixed menu bar
padding-top: 0
section.right
.nav-branded
padding: 0 1em

186
app/assets/stylesheets/darkswarm/menu.css.scss Normal file
View File

@@ -0,0 +1,186 @@
@import "compass";
@import "branding";
@import "mixins";
@import "typography";
@import "variables";
nav {
@include textpress;
text-shadow: none;
// Create center style for nav ul (foundation provides left and right)
text-align: center;
.top-bar-section {
// Avoid menu items blocking logo
li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover {
background-color: transparent;
}
ul.center {
display: inline-block;
// By default, we center between the left and right uls, but we want to be centered
// relative to the whole page. The difference in width between the other uls is 74px,
// so we offset by that amount here.
margin-left: -74px;
}
}
.joyride-tip-guide .button {
text-shadow: none;
}
// Default overrides - big menu
.top-bar-section .has-dropdown > a {
padding-right: ($topbar-height / 3) !important;
i.ofn-i_022-cog {
font-size: 24px;
line-height: $topbar-height;
}
}
.top-bar-section .has-dropdown > a:after {
display: none;
}
.top-bar-section ul li > a {
font-size: 0.75rem;
height: $topbar-height;
opacity: 0.8;
&:hover, &:focus, &:active {
opacity: 1;
}
@include transition(all 0.3s ease-in-out);
}
.top-bar-section ul li.ofn-logo > a {
display: table-cell;
vertical-align: middle;
opacity: 1;
}
.nav-branded {
color: $brand-colour;
span {
font-size: 13px;
}
}
.nav-primary {
@include headingFont;
font-size: 0.875rem;
font-weight: 300;
}
ul .nav-primary {
text-transform: uppercase;
}
ul.dropdown {
border: 1px solid $smoke;
border-top: none;
}
}
// Mobile Menu
.tab-bar {
background-color: white;
}
.off-canvas-wrap.move-right .tab-bar .menu-icon {
@include box-shadow(inset 0 0 6px 2px rgba(0, 0, 0, 0.5));
}
.off-canvas-wrap .tab-bar .menu-icon {
@include box-shadow(none);
}
.off-canvas-wrap.move-right .tab-bar .menu-icon span {
-moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
-webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
}
.tab-bar .menu-icon span::after {
box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black;
}
.tab-bar .ofn-logo {
padding: 9px 0 0 9px;
}
.left-off-canvas-menu {
background-color: white;
}
.off-canvas-wrap.move-right ul.off-canvas-list {
font-size: 0.875rem;
.li-menu {
@include headingFont;
font-size: 1rem;
a {
color: rgba(0, 0, 0, 0.9);
}
}
li a {
color: rgba(0, 0, 0, 0.9);
&:hover {
background-color: transparent;
color: $brand-colour;
}
@include transition(all 0.3s ease-in-out);
}
}
.off-canvas-wrap.move-right ul.off-canvas-list i {
font-size: 1.5rem;
margin-right: 0.25rem;
}
// Responsive
@media screen and (max-width: 1450px) {
nav .top-bar-section {
ul li a, .has-dropdown > a {
padding: 0 ($topbar-height / 8) !important;
}
ul.center {
margin-left: -24px;
}
}
}
@media screen and (min-width: 1025px) {
body.off-canvas {
// padding required to placehold for fixed menu bar
padding-top: $topbar-height;
}
}
@media screen and (max-width: 1025px) {
body.off-canvas {
// padding required to placehold for fixed menu bar
padding-top: 0;
}
section.right {
.nav-branded {
padding: 0 1em;
}
}
}

192
app/assets/stylesheets/darkswarm/mixins.sass
View File

@@ -1,192 +0,0 @@
// Note this mixin file is used in ADMIN and FRONTEND
@import branding
// Generic \\
@mixin tiledPane
background-image: url("/assets/tile-wide.png")
background-color: $brand-colour
background-position: center center
@include paneWhiteText
@mixin panepadding
padding-top: 100px
padding-bottom: 100px
@mixin paneWhiteText
&, & *
color: white
@mixin sidepaddingSm
padding-left: 10px
padding-right: 10px
@media all and (min-width: 768px)
padding-left: 20px
padding-right: 20px
@media all and (min-width: 1024px)
padding-left: 50px
padding-right: 50px
@media all and (min-width: 1200px)
padding-left: 100px
padding-right: 100px
@mixin sidepaddingBg
padding-left: 20px
padding-right: 20px
@media all and (min-width: 768px)
padding-left: 40px
padding-right: 40px
@media all and (min-width: 1024px)
padding-left: 100px
padding-right: 100px
@media all and (min-width: 1200px)
padding-left: 200px
padding-right: 200px
@mixin disabled
color: $disabled-bright
@mixin box-shadow($box-shadow)
-moz-box-shadow: $box-shadow
-webkit-box-shadow: $box-shadow
box-shadow: $box-shadow
@mixin elipse-shadow($elipse-shadow)
content: ""
position: absolute
z-index: -1
-webkit-box-shadow: $elipse-shadow
box-shadow: $elipse-shadow
bottom: -12%
left: 10%
right: 10%
width: 80%
height: 10%
-moz-border-radius: 100%
border-radius: 100%
@mixin border-radius($border-radius)
-webkit-border-radius: $border-radius
border-radius: $border-radius
@mixin border-radius-mixed($border-radius-TL, $border-radius-TR, $border-radius-BR, $border-radius-BL)
-webkit-border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL
border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL
@mixin transform-translate($translate)
-ms-transform: $translate
-webkit-transform: $translate
transform: $translate
@mixin transform-scale($scale)
-moz-transform: $scale
-webkit-transform: $scale
-o-transform: $scale
-ms-transform: $scale
transform: $scale
// Typography \\
@mixin textpress
text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222
@mixin textsoftpress
text-shadow: 0 0 3px rgba(0,0,0,0.35)
// TO USE icon-font
// Assign to :before or :after element
// Assign content: "string"
@mixin icon-font
font-family: "OFN"
display: inline-block
font-weight: normal
font-style: normal
font-variant: normal
text-transform: none
// Background options \\
@mixin darkbg
background-color: $clr-brick
&, & *
color: white
a
color: $clr-brick-ultra-light
&:hover
text-decoration: none
color: $clr-brick-light
@mixin lightbg
background-color: $clr-brick-light
&, & *
color: black
a
color: $clr-brick
&:hover
text-decoration: none
color: $clr-brick-bright
@mixin turqbg
background-color: $clr-turquoise-light
&, & *
color: $clr-turquoise
a
color: $clr-turquoise
&:hover
text-decoration: none
color: $clr-turquoise-bright
@mixin fullbg
background-position: center center
background-repeat: no-repeat
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
@mixin fullwidthbg
background-position: center top
background-repeat: no-repeat
background-size: 100% auto
@mixin gradient($gradient-clr1, $gradient-clr2)
background: $gradient-clr1
// Old browsers
background: -moz-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%)
// FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-clr1), color-stop(100%, $gradient-clr2))
// Chrome,Safari4+
background: -webkit-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%)
// Chrome10+,Safari5.1+
background: -o-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%)
// Opera 11.10+
background: -ms-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%)
// IE10+
background: linear-gradient(to bottom, $gradient-clr1 0%, $gradient-clr2 100%)
// W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-clr1', endColorstr='$gradient-clr2',GradientType=0 )
// IE6-8
@mixin producersbg
background-color: lighten($clr-turquoise, 68%)
background-image: url("/assets/producers.svg")
background-position: center 50px
background-repeat: no-repeat
background-size: 922px 763px
@mixin hubsbg
background-color: $brand-colour
background-image: url("/assets/hubs-bg.jpg")
background-position: center center
@mixin groupsbg
background-color: lighten($clr-brick, 56%)
background-image: url("/assets/groups.svg")
background-position: center 50px
background-repeat: no-repeat
background-size: 922px 922px

253
app/assets/stylesheets/darkswarm/mixins.scss Normal file
View File

@@ -0,0 +1,253 @@
// Note this mixin file is used in ADMIN and FRONTEND
@import "branding";
// Generic \\
@mixin tiledPane {
background-image: url("/assets/tile-wide.png");
background-color: $brand-colour;
background-position: center center;
@include paneWhiteText;
}
@mixin panepadding {
padding-top: 100px;
padding-bottom: 100px;
}
@mixin paneWhiteText {
&, & * {
color: white;
}
}
@mixin sidepaddingSm {
padding-left: 10px;
padding-right: 10px;
@media all and (min-width: 768px) {
padding-left: 20px;
padding-right: 20px;
}
@media all and (min-width: 1024px) {
padding-left: 50px;
padding-right: 50px;
}
@media all and (min-width: 1200px) {
padding-left: 100px;
padding-right: 100px;
}
}
@mixin sidepaddingBg {
padding-left: 20px;
padding-right: 20px;
@media all and (min-width: 768px) {
padding-left: 40px;
padding-right: 40px;
}
@media all and (min-width: 1024px) {
padding-left: 100px;
padding-right: 100px;
}
@media all and (min-width: 1200px) {
padding-left: 200px;
padding-right: 200px;
}
}
@mixin disabled {
color: $disabled-bright;
}
@mixin box-shadow($box-shadow) {
-moz-box-shadow: $box-shadow;
-webkit-box-shadow: $box-shadow;
box-shadow: $box-shadow;
}
@mixin elipse-shadow($elipse-shadow) {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: $elipse-shadow;
box-shadow: $elipse-shadow;
bottom: -12%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
-moz-border-radius: 100%;
border-radius: 100%;
}
@mixin border-radius($border-radius) {
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
}
@mixin border-radius-mixed($border-radius-TL, $border-radius-TR, $border-radius-BR, $border-radius-BL) {
-webkit-border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL;
border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL;
}
@mixin transform-translate($translate) {
-ms-transform: $translate;
-webkit-transform: $translate;
transform: $translate;
}
@mixin transform-scale($scale) {
-moz-transform: $scale;
-webkit-transform: $scale;
-o-transform: $scale;
-ms-transform: $scale;
transform: $scale;
}
// Typography \\
@mixin textpress {
text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222;
}
@mixin textsoftpress {
text-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}
// TO USE icon-font
// Assign to :before or :after element
// Assign content: "string"
@mixin icon-font {
font-family: "OFN";
display: inline-block;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
}
// Background options \\
@mixin darkbg {
background-color: $clr-brick;
&, & * {
color: white;
}
a {
color: $clr-brick-ultra-light;
&:hover {
text-decoration: none;
color: $clr-brick-light;
}
}
}
@mixin lightbg {
background-color: $clr-brick-light;
&, & * {
color: black;
}
a {
color: $clr-brick;
&:hover {
text-decoration: none;
color: $clr-brick-bright;
}
}
}
@mixin turqbg {
background-color: $clr-turquoise-light;
&, & * {
color: $clr-turquoise;
}
a {
color: $clr-turquoise;
&:hover {
text-decoration: none;
color: $clr-turquoise-bright;
}
}
}
@mixin fullbg {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@mixin fullwidthbg {
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
}
@mixin gradient($gradient-clr1, $gradient-clr2) {
background: $gradient-clr1;
// Old browsers
background: -moz-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%);
// FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-clr1), color-stop(100%, $gradient-clr2));
// Chrome,Safari4+
background: -webkit-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%);
// Chrome10+,Safari5.1+
background: -o-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%);
// Opera 11.10+
background: -ms-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%);
// IE10+
background: linear-gradient(to bottom, $gradient-clr1 0%, $gradient-clr2 100%);
// W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-clr1', endColorstr='$gradient-clr2',GradientType=0 );
// IE6-8
}
@mixin producersbg {
background-color: lighten($clr-turquoise, 68%);
background-image: url("/assets/producers.svg");
background-position: center 50px;
background-repeat: no-repeat;
background-size: 922px 763px;
}
@mixin hubsbg {
background-color: $brand-colour;
background-image: url("/assets/hubs-bg.jpg");
background-position: center center;
}
@mixin groupsbg {
background-color: lighten($clr-brick, 56%);
background-image: url("/assets/groups.svg");
background-position: center 50px;
background-repeat: no-repeat;
background-size: 922px 922px;
}

165
app/assets/stylesheets/darkswarm/modal-enterprises.css.sass
View File

@@ -1,165 +0,0 @@
@import branding
@import mixins
// Generic styles for use
.modal-centered
text-align: center
p
margin-bottom: 0
.modal-header, p.modal-header
text-align: center
text-transform: uppercase
font-size: 1rem
font-weight: 400
color: $disabled-dark
border-bottom: 1px solid $light-grey
margin-top: 0.75rem
margin-bottom: 0.5rem
// Enterprise promo image and text
.highlight
position: relative
.highlight-top
padding-top: 0.75rem
padding-bottom: 0.75rem
background-color: rgba(255,255,255,0.65)
position: absolute
bottom: 0
width: 100%
border: 0
outline: 0
@media only screen and (max-width: 640px)
padding-top: 0.5rem
padding-bottom: 0.35rem
h3, p
margin-top: 0
margin-bottom: 0
padding-bottom: 0
line-height: 1
h3 > i
color: $clr-brick
p
line-height: 2.4
@media all and (max-width: 640px)
line-height: 1.4
h3 a:hover span
border-bottom: 1px solid $clr-brick-bright
.is_producer
&, & *
color: $clr-turquoise
// ABOUT Enterprise
.about-container
min-height: 20px
margin-bottom: 0.5rem
overflow-x: hidden
border-bottom: 1px solid $light-grey
@include box-shadow(0 2px 2px -2px $light-grey)
.enterprise-logo, img
float: left
margin-right: 2rem
margin-bottom: 0.5rem
max-width: 180px
max-height: 180px
// CONTACT Enterprise
.contact-container
a:hover
text-decoration: underline
// FOLLOW Enterprise
.follow-icons
// text-align: center
span
display: inline-block
margin: 0 0.25rem 0.75rem 0.25rem
i
font-size: 2rem
a
color: #999
&:hover, &:active, &:focus
color: #666
// CALL TO ACTION - hub click throughs
.cta-container
background-color: #ececec
padding-top: 0.75rem
label
text-transform: uppercase
font-size: 0.875rem
margin-bottom: 0.75rem
5rem
color: $dark-grey
label.right
color: $disabled-dark
span
text-transform: capitalize
.cta-hub
margin-right: 2rem
margin-top: 0rem
margin-bottom: 0.75rem
display: inline-block
&.secondary
color: $disabled-dark
&.primary
color: $clr-brick
i.ofn-i_033-open-sign, i.ofn-i_032-closed-sign
margin-right: 0.1rem
font-size: 2rem
padding: 0.15rem 0.25rem 0.35rem 0.25rem
float: left
.hub-name
margin-top: 0.75rem
margin-bottom: 0.2rem
font-weight: 400
display: inline-block
border-bottom: 1px solid transparent
.button-address
margin-top: 0.5rem
margin-bottom: 0.2rem
margin-left: 0.1rem
text-transform: uppercase
font-weight: 300
font-style: italic
font-size: 0.75rem
display: inline-block
border-bottom: 1px solid transparent
@media all and (max-width: 640px)
display: none
&:hover, &:focus, &:active
&.secondary
color: #666
.hub-name, .button-address
border-bottom: 1px solid #999
&.primary
color: $clr-brick-bright
.hub-name, .button-address
border-bottom: 1px solid $clr-brick-bright

212
app/assets/stylesheets/darkswarm/modal-enterprises.css.scss Normal file
View File

@@ -0,0 +1,212 @@
@import "branding";
@import "mixins";
// Generic styles for use
.modal-centered {
text-align: center;
p {
margin-bottom: 0;
}
}
.modal-header, p.modal-header {
text-align: center;
text-transform: uppercase;
font-size: 1rem;
font-weight: 400;
color: $disabled-dark;
border-bottom: 1px solid $light-grey;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
// Enterprise promo image and text
.highlight {
position: relative;
}
.highlight-top {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background-color: rgba(255, 255, 255, 0.65);
position: absolute;
bottom: 0;
width: 100%;
border: 0;
outline: 0;
@media only screen and (max-width: 640px) {
padding-top: 0.5rem;
padding-bottom: 0.35rem;
}
h3, p {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
line-height: 1;
}
h3 > i {
color: $clr-brick;
}
p {
line-height: 2.4;
@media all and (max-width: 640px) {
line-height: 1.4;
}
}
h3 a:hover span {
border-bottom: 1px solid $clr-brick-bright;
}
.is_producer {
&, & * {
color: $clr-turquoise;
}
}
}
// ABOUT Enterprise
.about-container {
min-height: 20px;
margin-bottom: 0.5rem;
overflow-x: hidden;
border-bottom: 1px solid $light-grey;
@include box-shadow(0 2px 2px -2px $light-grey);
.enterprise-logo, img {
float: left;
margin-right: 2rem;
margin-bottom: 0.5rem;
max-width: 180px;
max-height: 180px;
}
}
// CONTACT Enterprise
.contact-container {
a:hover {
text-decoration: underline;
}
}
// FOLLOW Enterprise
.follow-icons {
// text-align: center
span {
display: inline-block;
margin: 0 0.25rem 0.75rem 0.25rem;
}
i {
font-size: 2rem;
}
a {
color: #999;
&:hover, &:active, &:focus {
color: #666;
}
}
}
// CALL TO ACTION - hub click throughs
.cta-container {
background-color: #ececec;
padding-top: 0.75rem;
label {
text-transform: uppercase;
font-size: 0.875rem;
margin-bottom: 0.75rem;
5rem {}
color: $dark-grey;
}
label.right {
color: $disabled-dark;
span {
text-transform: capitalize;
}
}
.cta-hub {
margin-right: 2rem;
margin-top: 0rem;
margin-bottom: 0.75rem;
display: inline-block;
&.secondary {
color: $disabled-dark;
}
&.primary {
color: $clr-brick;
}
i.ofn-i_033-open-sign, i.ofn-i_032-closed-sign {
margin-right: 0.1rem;
font-size: 2rem;
padding: 0.15rem 0.25rem 0.35rem 0.25rem;
float: left;
}
.hub-name {
margin-top: 0.75rem;
margin-bottom: 0.2rem;
font-weight: 400;
display: inline-block;
border-bottom: 1px solid transparent;
}
.button-address {
margin-top: 0.5rem;
margin-bottom: 0.2rem;
margin-left: 0.1rem;
text-transform: uppercase;
font-weight: 300;
font-style: italic;
font-size: 0.75rem;
display: inline-block;
border-bottom: 1px solid transparent;
@media all and (max-width: 640px) {
display: none;
}
}
&:hover, &:focus, &:active {
&.secondary {
color: #666;
.hub-name, .button-address {
border-bottom: 1px solid #999;
}
}
&.primary {
color: $clr-brick-bright;
.hub-name, .button-address {
border-bottom: 1px solid $clr-brick-bright;
}
}
}
}
}

13
app/assets/stylesheets/darkswarm/modal-login.css.sass
View File

@@ -1,13 +0,0 @@
// Styling for login modal to style tabs
.reveal-modal.login-modal
border-bottom-color: #efefef
.login-modal
background: #efefef
.tabs-content
background: #fff
padding-top: 10px

13
app/assets/stylesheets/darkswarm/modal-login.css.scss Normal file
View File

@@ -0,0 +1,13 @@
// Styling for login modal to style tabs
.reveal-modal.login-modal {
border-bottom-color: #efefef;
}
.login-modal {
background: #efefef;
.tabs-content {
background: #fff;
padding-top: 10px;
}
}

54
app/assets/stylesheets/darkswarm/modals.css.sass
View File

@@ -1,54 +0,0 @@
@import branding
@import mixins
dialog, .reveal-modal
border: none
outline: none
padding: 30px 20px 0 20px
border-bottom: 30px solid white
overflow-y: scroll
overflow-x: hidden
min-height: 260px
// Not working yet - want a nice gradient shadow when there is overflow - needs JS too
// &:after
// @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8))
// Reveal.js break point:
// @media only screen and (max-width: 40.063em)
// Small - when modal IS full screen
@media only screen and (max-width: 640px)
max-height: initial
// This is needed to make the height not the height of whole content page
min-height: 100%
position: absolute !important
top: 0
left: 0
// Medium and up - when modal IS NOT full screen
@media only screen and (min-width: 641px)
top: 10%
max-height: 80%
.reveal-modal-bg
background-color: rgba(0,0,0,0.85)
position: fixed
dialog .close-reveal-modal, .reveal-modal .close-reveal-modal
right: 0.25rem
top: 0.25rem
background-color: rgba(205,205,205,0.65)
text-shadow: none
font-size: 2rem
padding: 0.45rem
color: #666
z-index: 9999999
@include border-radius(999999rem)
&:hover, &:active, &:focus
background-color: rgba(205,205,205,1)
color: #333
// Prevent body from scrolling when a modal is open
body.modal-open
overflow: hidden

64
app/assets/stylesheets/darkswarm/modals.css.scss Normal file
View File

@@ -0,0 +1,64 @@
@import "branding";
@import "mixins";
dialog, .reveal-modal {
border: none;
outline: none;
padding: 30px 20px 0 20px;
border-bottom: 30px solid white;
overflow-y: scroll;
overflow-x: hidden;
min-height: 260px;
// Not working yet - want a nice gradient shadow when there is overflow - needs JS too
// &:after
// @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8))
// Reveal.js break point:
// @media only screen and (max-width: 40.063em)
// Small - when modal IS full screen
@media only screen and (max-width: 640px) {
max-height: initial;
// This is needed to make the height not the height of whole content page
min-height: 100%;
position: absolute !important;
top: 0;
left: 0;
}
// Medium and up - when modal IS NOT full screen
@media only screen and (min-width: 641px) {
top: 10%;
max-height: 80%;
}
}
.reveal-modal-bg {
background-color: rgba(0, 0, 0, 0.85);
position: fixed;
}
dialog .close-reveal-modal, .reveal-modal .close-reveal-modal {
right: 0.25rem;
top: 0.25rem;
background-color: rgba(205, 205, 205, 0.65);
text-shadow: none;
font-size: 2rem;
padding: 0.45rem;
color: #666;
z-index: 9999999;
@include border-radius(999999rem);
&:hover, &:active, &:focus {
background-color: rgba(205, 205, 205, 1);
color: #333;
}
}
// Prevent body from scrolling when a modal is open
body.modal-open {
overflow: hidden;
}

2
app/assets/stylesheets/darkswarm/overrides.css.sass
View File

@@ -1,2 +0,0 @@
.row
max-width: 74em

3
app/assets/stylesheets/darkswarm/overrides.css.scss Normal file
View File

@@ -0,0 +1,3 @@
.row {
max-width: 74em;
}

58
app/assets/stylesheets/darkswarm/page_alert.css.sass
View File

@@ -1,58 +0,0 @@
@import branding
@import animations
@import "compass/css3/transition"
// Basic style \\
.page-alert
.alert-box
height: 55px
overflow: hidden
border: 1px solid rgba($dark-grey, 0.35)
border-left: none
border-right: none
background-color: #bbb
background-image: url("/assets/tile-wide.png")
background-position: center center
padding: 12px 0 8px 0
margin: 0
h6
@media all and (max-width: 480px)
font-size: 10px
line-height: 24px
.alert-cta
&, & *
@include csstrans
color: #333
strong
letter-spacing: 0.5px
a:hover, a:active, a:focus
&, & *
text-decoration: none
color: white
// Show-hide animation \\
.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar
@include transition(all, 1000ms, ease-in-out)
&.move-down
margin-top: 55px
@include transition(all, 1000ms, ease-in-out)
.off-canvas-wrap .inner-wrap .page-alert.fixed
top: -55px
z-index: 1
// TODO: Compass to disable transition
-moz-transition: none
-webkit-transition: none
-o-transition: color 0 ease-in
transition: none
.off-canvas-wrap.move-right .inner-wrap.move-down
.page-alert
top: -55px * 2
.left-off-canvas-menu
top: -55px

77
app/assets/stylesheets/darkswarm/page_alert.css.scss Normal file
View File

@@ -0,0 +1,77 @@
@import "branding";
@import "animations";
@import "compass/css3/transition";
// Basic style \\
.page-alert {
.alert-box {
height: 55px;
overflow: hidden;
border: 1px solid rgba($dark-grey, 0.35);
border-left: none;
border-right: none;
background-color: #bbb;
background-image: url("/assets/tile-wide.png");
background-position: center center;
padding: 12px 0 8px 0;
margin: 0;
h6 {
@media all and (max-width: 480px) {
font-size: 10px;
line-height: 24px;
}
}
.alert-cta {
&, & * {
@include csstrans;
color: #333;
}
strong {
letter-spacing: 0.5px;
}
a:hover, a:active, a:focus {
&, & * {
text-decoration: none;
color: white;
}
}
}
}
}
// Show-hide animation \\
.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar {
@include transition(all, 1000ms, ease-in-out);
&.move-down {
margin-top: 55px;
@include transition(all, 1000ms, ease-in-out);
}
}
.off-canvas-wrap .inner-wrap .page-alert.fixed {
top: -55px;
z-index: 1;
// TODO: Compass to disable transition
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
.off-canvas-wrap.move-right .inner-wrap.move-down {
.page-alert {
top: -55px * 2;
}
.left-off-canvas-menu {
top: -55px;
}
}

97
app/assets/stylesheets/darkswarm/producer_node.css.sass
View File

@@ -1,97 +0,0 @@
@import branding
@import mixins
.producers
.active_table .active_table_node
// Header row
@media all and (max-width: 640px)
.skinny-head
background-color: $clr-turquoise-light
@include border-radius-mixed(0.5em, 0.5em, 0, 0)
margin-top: -1rem
margin-bottom: 1rem
padding-top: 1rem
padding-bottom: 1rem
.follow-icons
&, & *
font-size: 1.5rem
// Producer icons
i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
font-size: 2rem
display: inline-block
margin-right: 0.25rem
float: left
color: $clr-turquoise
a
&:hover, &:active, &:focus
color: $clr-turquoise-bright
span
text-decoration: underline
&.is_distributor, &.is_distributor i.ofn-i_059-producer, &.is_distributor i.ofn-i_060-producer-reversed
color: $clr-brick
&:hover, &:active, &:focus
color: $clr-brick-bright
a.cta-hub
&:hover, &:focus, &:active
&.secondary
color: #666
.hub-name, .button-address
border-bottom: 1px solid #999
&.primary
color: $clr-brick-bright
.hub-name, .button-address
border-bottom: 1px solid $clr-brick-bright
p.word-wrap
margin-bottom: 0
&:last-child
margin-bottom: 1rem
.fat-taxons
background-color: $clr-turquoise-light
.fat-properties
background-color: $clr-turquoise-ultra-light
border: 1px solid $clr-turquoise-light
.producer-name
color: $clr-turquoise
//Open row
&.open
.active_table_row
border-left: 1px solid $clr-turquoise-bright
border-right: 1px solid $clr-turquoise-bright
background-color: rgba(206,239,228,0.4)
.cta-container
background: none
.columns img
padding: 1rem 0
max-height: 160px
width: auto
&.left
padding: 0.25rem 1rem 0.25rem 0
&.right
padding: 0.25rem 0.5rem 0.25rem 2rem
.active_table_row:first-child
border-top: 1px solid $clr-turquoise-bright
.active_table_row:last-child
border-bottom: 1px solid $clr-turquoise-bright
cursor: auto
//Closed row
&.closed
.active_table_row.closed
border: 1px solid transparent
@media all and (max-width: 640px)
border-color: $clr-turquoise-light
&:hover, &:active, &:focus
border-color: $clr-turquoise

145
app/assets/stylesheets/darkswarm/producer_node.css.scss Normal file
View File

@@ -0,0 +1,145 @@
@import "branding";
@import "mixins";
.producers {
.active_table .active_table_node {
// Header row
@media all and (max-width: 640px) {
.skinny-head {
background-color: $clr-turquoise-light;
@include border-radius-mixed(0.5em, 0.5em, 0, 0);
margin-top: -1rem;
margin-bottom: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.follow-icons {
&, & * {
font-size: 1.5rem;
}
}
}
// Producer icons
i.ofn-i_059-producer, i.ofn-i_060-producer-reversed {
font-size: 2rem;
display: inline-block;
margin-right: 0.25rem;
float: left;
color: $clr-turquoise;
}
a {
&:hover, &:active, &:focus {
color: $clr-turquoise-bright;
span {
text-decoration: underline;
}
}
&.is_distributor, &.is_distributor i.ofn-i_059-producer, &.is_distributor i.ofn-i_060-producer-reversed {
color: $clr-brick;
&:hover, &:active, &:focus {
color: $clr-brick-bright;
}
}
}
a.cta-hub {
&:hover, &:focus, &:active {
&.secondary {
color: #666;
.hub-name, .button-address {
border-bottom: 1px solid #999;
}
}
&.primary {
color: $clr-brick-bright;
.hub-name, .button-address {
border-bottom: 1px solid $clr-brick-bright;
}
}
}
}
p.word-wrap {
margin-bottom: 0;
&:last-child {
margin-bottom: 1rem;
}
}
.fat-taxons {
background-color: $clr-turquoise-light;
}
.fat-properties {
background-color: $clr-turquoise-ultra-light;
border: 1px solid $clr-turquoise-light;
}
.producer-name {
color: $clr-turquoise;
}
//Open row
&.open {
.active_table_row {
border-left: 1px solid $clr-turquoise-bright;
border-right: 1px solid $clr-turquoise-bright;
background-color: rgba(206, 239, 228, 0.4);
.cta-container {
background: none;
}
.columns img {
padding: 1rem 0;
max-height: 160px;
width: auto;
&.left {
padding: 0.25rem 1rem 0.25rem 0;
}
&.right {
padding: 0.25rem 0.5rem 0.25rem 2rem;
}
}
}
.active_table_row:first-child {
border-top: 1px solid $clr-turquoise-bright;
}
.active_table_row:last-child {
border-bottom: 1px solid $clr-turquoise-bright;
cursor: auto;
}
}
//Closed row
&.closed {
.active_table_row.closed {
border: 1px solid transparent;
@media all and (max-width: 640px) {
border-color: $clr-turquoise-light;
}
&:hover, &:active, &:focus {
border-color: $clr-turquoise;
}
}
}
}
}

14
app/assets/stylesheets/darkswarm/producers.css.sass
View File

@@ -1,14 +0,0 @@
@import branding
@import mixins
.producers
@include producersbg
@include sidepaddingSm
@include panepadding
a
color: $clr-turquoise
&:hover, &:active, &:focus
color: $clr-turquoise-bright
a.button.primary
&:hover, &:active, &:focus
color: white

24
app/assets/stylesheets/darkswarm/producers.css.scss Normal file
View File

@@ -0,0 +1,24 @@
@import "branding";
@import "mixins";
.producers {
@include producersbg;
@include sidepaddingSm;
@include panepadding;
a {
color: $clr-turquoise;
&:hover, &:active, &:focus {
color: $clr-turquoise-bright;
}
}
a.button.primary {
&:hover, &:active, &:focus {
color: white;
}
}
}

4
app/assets/stylesheets/darkswarm/product_table.css.sass
View File

@@ -1,4 +0,0 @@
.product_table
.row
border: 1px solid black
padding: 8px inherit

6
app/assets/stylesheets/darkswarm/product_table.css.scss Normal file
View File

@@ -0,0 +1,6 @@
.product_table {
.row {
border: 1px solid black;
padding: 8px inherit;
}
}

161
app/assets/stylesheets/darkswarm/registration.css.sass
View File

@@ -1,161 +0,0 @@
@import branding
@import mixins
#registration-modal
header
text-align: center
@media all and (max-width: 64em)
text-align: left
.container
background-color: #ffffff
i
font-size: 150%
.field
margin-bottom: 1em
.chunky
padding: 8px
font-size: 1rem
margin: 0
width: 100%
label.indent-checkbox
display: block
padding-left: 20px
text-indent: -17px
input
margin: 0px
label
margin-bottom: 3px
ol, ul, p
font-size: 0.875rem
ol, ul
padding: 0
margin: 0
ol
list-style-type: decimal
.highlight-box
background: white
padding: 1rem 1.2rem
@media all and (max-width: 64em)
margin-top: 1rem
#progress-bar
margin-bottom: 15px
.item
font-size: 0.75rem
padding: 10px 0px
text-transform: uppercase
text-align: center
background-color: $clr-blue
border: 2px solid $clr-blue
color: #fff
.item.active
background-color: $disabled-light
border: 2px solid $clr-blue
color: $clr-blue
font-weight: 700
@include box-shadow(inset 0 0 1px 0 #fff)
.image-select
label
font-size: 18px
padding: 21px 0px
#logo-select
display: none
#image-over
font-size: 18px
padding: 41px 0px
border: 3px dashed #494949
text-align: center
font-weight: bold
color: #494949
&.nv-file-over
background-color: #78cd91
#or
text-align: center
font-weight: bold
font-size: 18px
padding: 21px 0px
&.horizontal
padding: 41px 0px
#image-placeholder
font-size: 18px
font-weight: bold
color: #373737
background-color: #f1f1f1
text-align: center
border: 3px dashed #494949
margin-left: auto
margin-right: auto
.spinner
width: 100px
&.logo
.message
padding-top: 6em
.loading
padding-top: 4em
width: 306px
height: 306px
&.promo
.message
padding-top: 4em
.loading
padding-top: 1em
width: 726px
height: 166px
#registration-type
#enterprise-types
a.btnpanel
display: block
padding: 1rem
margin-bottom: 1rem
background-color: #efefef
color: black
text-align: center
border: 1px solid transparent
i
font-size: 3rem
h4
margin-top: 1rem
&:hover
background-color: #fff
&#producer-panel:hover
border: 1px solid $clr-turquoise
&, & *
color: $clr-turquoise
&#hub-panel:hover, &#both-panel:hover
border: 1px solid $clr-brick
&, & *
color: $clr-brick
&.selected
&, & *
color: #fff
&#hub-panel, &#both-panel
background-color: $clr-brick-bright
&:hover
&, & *
color: white
&#producer-panel
background-color: $clr-turquoise-bright
&:hover
&, & *
color: white
p
clear: both
font-size: 0.875rem

239
app/assets/stylesheets/darkswarm/registration.css.scss Normal file
View File

@@ -0,0 +1,239 @@
@import "branding";
@import "mixins";
#registration-modal {
header {
text-align: center;
@media all and (max-width: 64em) {
text-align: left;
}
}
.container {
background-color: #ffffff;
}
i {
font-size: 150%;
}
.field {
margin-bottom: 1em;
}
.chunky {
padding: 8px;
font-size: 1rem;
margin: 0;
width: 100%;
}
label.indent-checkbox {
display: block;
padding-left: 20px;
text-indent: -17px;
input {
margin: 0px;
}
}
label {
margin-bottom: 3px;
}
ol, ul, p {
font-size: 0.875rem;
}
ol, ul {
padding: 0;
margin: 0;
}
ol {
list-style-type: decimal;
}
.highlight-box {
background: white;
padding: 1rem 1.2rem;
@media all and (max-width: 64em) {
margin-top: 1rem;
}
}
#progress-bar {
margin-bottom: 15px;
.item {
font-size: 0.75rem;
padding: 10px 0px;
text-transform: uppercase;
text-align: center;
background-color: $clr-blue;
border: 2px solid $clr-blue;
color: #fff;
}
.item.active {
background-color: $disabled-light;
border: 2px solid $clr-blue;
color: $clr-blue;
font-weight: 700;
@include box-shadow(inset 0 0 1px 0 #fff);
}
}
.image-select {
label {
font-size: 18px;
padding: 21px 0px;
}
#logo-select {
display: none;
}
}
#image-over {
font-size: 18px;
padding: 41px 0px;
border: 3px dashed #494949;
text-align: center;
font-weight: bold;
color: #494949;
&.nv-file-over {
background-color: #78cd91;
}
}
#or {
text-align: center;
font-weight: bold;
font-size: 18px;
padding: 21px 0px;
&.horizontal {
padding: 41px 0px;
}
}
#image-placeholder {
font-size: 18px;
font-weight: bold;
color: #373737;
background-color: #f1f1f1;
text-align: center;
border: 3px dashed #494949;
margin-left: auto;
margin-right: auto;
.spinner {
width: 100px;
}
&.logo {
.message {
padding-top: 6em;
}
.loading {
padding-top: 4em;
}
width: 306px;
height: 306px;
}
&.promo {
.message {
padding-top: 4em;
}
.loading {
padding-top: 1em;
}
width: 726px;
height: 166px;
}
}
}
#registration-type {
#enterprise-types {
a.btnpanel {
display: block;
padding: 1rem;
margin-bottom: 1rem;
background-color: #efefef;
color: black;
text-align: center;
border: 1px solid transparent;
i {
font-size: 3rem;
}
h4 {
margin-top: 1rem;
}
&:hover {
background-color: #fff;
}
&#producer-panel:hover {
border: 1px solid $clr-turquoise;
&, & * {
color: $clr-turquoise;
}
}
&#hub-panel:hover, &#both-panel:hover {
border: 1px solid $clr-brick;
&, & * {
color: $clr-brick;
}
}
&.selected {
&, & * {
color: #fff;
}
&#hub-panel, &#both-panel {
background-color: $clr-brick-bright;
&:hover {
&, & * {
color: white;
}
}
}
&#producer-panel {
background-color: $clr-turquoise-bright;
&:hover {
&, & * {
color: white;
}
}
}
}
p {
clear: both;
font-size: 0.875rem;
}
}
}
}

111
app/assets/stylesheets/darkswarm/shop.css.sass
View File

@@ -1,111 +0,0 @@
@import mixins
@import animations
@import variables
@import branding
@import big-input
// Shop partials
@import shop-inputs
@import shop-navigation
@import shop-product-rows
@import shop-taxon-flag
@import shop-popovers
.darkswarm
products
display: block
padding-top: 20px
@media all and (max-width: 768px)
input.button.right
float: left
@media all and (max-width: 480px)
.add_to_cart
margin-top: 2rem
form
input.small.button.primary.right.add_to_cart
&.dirty
padding-left: 3.2rem
i.cart-spinner
position: absolute
top: 14px
right: 146px
color: white
font-size: 1.2em
// Necessary to be below Z index of cart popover:
z-index: 98
-webkit-animation: spin 2s infinite linear
animation: spin 2s infinite linear
product
@include csstrans
border-bottom: 1px solid #e5e5e5
border-top: 1px solid #e5e5e5
padding-bottom: 1px
margin-bottom: 20px !important
position: relative
display: block
color: $med-drk-grey
&:hover, &:focus, &:active
border-bottom: 1px solid $clr-brick-med-bright
border-top: 1px solid $clr-brick-med-bright
// BULK
.bulk-buy
font-size: 0.875rem
@media all and (max-width: 768px)
font-size: 0.75rem
.bulk-buy, .bulk-buy i
color: #888
.inline
display: inline
.spinner
width: 100px
margin-bottom: 20px
// ICONS
i
font-size: 0.75em
padding-right: 0.9375rem
@media all and (max-width: 640px)
padding-right: 0.25rem
i.ofn-i_056-bulk
font-size: 1rem
padding-right: 0rem
i.ofn-i_036-producers
padding-left: 0.2rem
padding-right: 0rem
font-size: 0.8rem
.alert-box.shopfront-message
border: 2px solid $clr-turquoise
border-radius: 5px
background-color: $clr-turquoise-light
color: $clr-turquoise
a
color: #0096ad
&:hover, &:focus, &:active
text-decoration: none
color: #4aadbd
.shopfront_closed_message, .shopfront_hidden_message
padding: 15px
border-radius: 5px
.shopfront_closed_message
border: 2px solid #eb4c46
.shopfront_closed_message
margin: 2em 0em
.shopfront_hidden_message
border: 2px solid #db4
margin: 2em 0em

146
app/assets/stylesheets/darkswarm/shop.css.scss Normal file
View File

@@ -0,0 +1,146 @@
@import "mixins";
@import "animations";
@import "variables";
@import "branding";
@import "big-input";
// Shop partials
@import "shop-inputs";
@import "shop-navigation";
@import "shop-product-rows";
@import "shop-taxon-flag";
@import "shop-popovers";
.darkswarm {
products {
display: block;
padding-top: 20px;
@media all and (max-width: 768px) {
input.button.right {
float: left;
}
}
@media all and (max-width: 480px) {
.add_to_cart {
margin-top: 2rem;
}
}
form {
input.small.button.primary.right.add_to_cart {
&.dirty {
padding-left: 3.2rem;
}
}
i.cart-spinner {
position: absolute;
top: 14px;
right: 146px;
color: white;
font-size: 1.2em;
// Necessary to be below Z index of cart popover:
z-index: 98;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
}
product {
@include csstrans;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
padding-bottom: 1px;
margin-bottom: 20px !important;
position: relative;
display: block;
color: $med-drk-grey;
&:hover, &:focus, &:active {
border-bottom: 1px solid $clr-brick-med-bright;
border-top: 1px solid $clr-brick-med-bright;
}
// BULK
.bulk-buy {
font-size: 0.875rem;
@media all and (max-width: 768px) {
font-size: 0.75rem;
}
}
.bulk-buy, .bulk-buy i {
color: #888;
}
.inline {
display: inline;
}
.spinner {
width: 100px;
margin-bottom: 20px;
}
// ICONS
i {
font-size: 0.75em;
padding-right: 0.9375rem;
@media all and (max-width: 640px) {
padding-right: 0.25rem;
}
}
i.ofn-i_056-bulk {
font-size: 1rem;
padding-right: 0rem;
}
i.ofn-i_036-producers {
padding-left: 0.2rem;
padding-right: 0rem;
font-size: 0.8rem;
}
}
}
.alert-box.shopfront-message {
border: 2px solid $clr-turquoise;
border-radius: 5px;
background-color: $clr-turquoise-light;
color: $clr-turquoise;
a {
color: #0096ad;
&:hover, &:focus, &:active {
text-decoration: none;
color: #4aadbd;
}
}
}
.shopfront_closed_message, .shopfront_hidden_message {
padding: 15px;
border-radius: 5px;
}
.shopfront_closed_message {
border: 2px solid #eb4c46;
}
.shopfront_closed_message {
margin: 2em 0em;
}
.shopfront_hidden_message {
border: 2px solid #db4;
margin: 2em 0em;
}
}

Some files were not shown because too many files have changed in this diff Show More