app/assets/stylesheets/application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require Control.Loading.css
*= require select2/dist/css/select2
*= require taggd
*= require intlTelInput
*= require messenger
*= require messenger-theme-flat
*= require trumbowyg/trumbowyg
*= require bootstrap/dist/css/bootstrap.min.css
*= require flatpickr
*= require leaflet
*= stub active_admin
*= require_self
*= require_tree .
*/
@import "common_vars";
@import "font-awesome-sprockets";
@import "font-awesome";
a{
cursor: pointer;
}
#embed-logo {
display: block;
background: image_url("embed-logo.png");
width: 200px;
height: 51px;
bottom: 18px;
right: 10px;
text-indent: -999px;
position: absolute;
}
table.table {
td {
vertical-align: top;
}
form, form div {
display: inline;
margin: 0;
}
}
body.a-embed {
&, #map {
top: 0;
margin: 0;
padding: 0;
}
header, footer, .uv-icon {
display: none;
}
}
body.development .translation_missing{
color: red;
&:before{
content: "T: ";
color: red;
}
}
footer a.active {
body.a-home & {
color: #dbab00;
}
}
.microdata {
display: none;
}
.button[type=submit] {
background: $success-color;
}
.red {
background-color: #E84E61;
}
.red:hover {
background-color: #D04657;
}
html {
position: relative;
min-height: 100%;
}
#main {
h1,h2,h3,h4,h5,h6 {
text-shadow: 1px 1px 1px #FFF;
}
}
body {
&.a-home {
footer {
background: #fff;
}
}
-webkit-text-size-adjust:none;
text-size-adjust:none;
text-rendering: optimizeLegibility;
position: static;
font-family: 'Lato', Arial, Helvetica, sans-serif;
&, * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
#honeypot {
background: #DDD;
padding: 10px;
opacity: 0.5;
display: none;
}
h1 {
font-size: 2.5em !important;
line-height: 1.2 !important;
font-weight: bold;
margin-top: 0px;
}
.count {
color: #AAA !important;
}
// #lab_phone {
// padding-left: 40px;
// }
.heading {
font-weight: bold;
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
margin: 20px 0 10px;
a {
font-weight: normal;
float: right;
font-size: 0.9em;
}
}
.avatar {
background-color: #d8d8d8;
border-radius: 50%;
border: 2px solid #ccc;
display: inline-block;
overflow: hidden;
&.tiny {
width: 30px;
height: 30px;
}
&.small {
width: 45px;
height: 45px;
}
&.med {
width: 50px;
height: 50px;
}
&.big {
width: 118px;
height: 118px;
}
}
.lab-contact-details {
line-height: 1.2em;
}
.no-bullets {
list-style-type: none;
}
#please-verify {
background: #FFAB4A;
padding: 10px;
z-index: 20;
text-align: center;
a {
font-weight: bold;
color: #FFF;
}
}
h4.modal-title {
text-transform: uppercase;
font-weight: bold;
}
.locale {
margin-bottom: 10px;
display: block;
a {
font-weight: bold;
}
}
.container {
max-width: 1100px;
}
a:hover {
text-decoration: none;
}
.box {
padding: 20px 0;
background: #FFF;
margin-bottom: 20px;
}
h3 {
margin: 0 0 0.5em;
}
h5 {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #666666;
}
.gem-count {
background: #FF7A72;
color: white;
border-radius: 4px;
padding: 2px 5px;
margin-left: 8px;
}
.panel {
background: #EBEBEB;
}
.media {
&, .media-body {
zoom: 1;
overflow: hidden;
}
}
.get-help {
position: fixed;
bottom: 5px;
right: 5px;
}
#organization-map {
width: 100%;
height: 300px;
background: #d7d7d7;
}
#organization-labs-search, #organizations-list {
.media{
margin-top: 0;
}
}
// Fixes for Labs, Organizations, Projects, Machines indexes
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 10px !important;
}
.btn {
&.btn-primary {
background-color: $green;
color: white;
border-color: $green;
font-weight: bold;
&:hover {
background-color: $green-hover;
border-color: $green-hover;
}
&:focus{
background-color: $green;
border-color: $green-hover;
}
&:active {
background-color: $green !important;
border-color: $green-hover !important;
}
}
&.btn-outline-primary {
background-color: white;
color: $green;
border-color: $green;
font-weight: bold;
&:hover {
background-color: $green;
border-color: $green;
color: white;
}
&:active {
background-color: $green !important;
border-color: $green !important;
}
}
&.btn-default {
background-color: transparent;
color: #666;
border-color: #E5E5E5;
font-weight: bold;
&:hover {
background-color: #eee;
}
}
}
.card {
.card-title {
font-size: 18px;
font-weight: 400;
color: #666666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 30px);
display: block;
}
.card-arrow {
font-size: 32px;
color: $green;
position: absolute;
right: 20px;
top: 32px;
}
}
.breadcrumb {
background-color: transparent;
border-radius: 0;
a,
>li+li:before {
color: #747474;
}
}
.text-large {
font-size: 22px;
line-height: 40px;
font-weight: 900;
}
.text-small {
font-size: 14px;
line-height: 24px;
color: #666;
}
.divider {
border-bottom: 1px solid #E5E5E5;
margin: 4px 0;
}
.text-green{ color: $green }
.text-red-1{ color: #fe7a73; }
.text-red-2{ color: #E46D67; }
.text-red-3{ color: #CB615C; }
a,
a.text-primary {
color: $green;
&:hover {
color: $green-hover;
}
}
.text-primary {
color: $green !important;
}
.bg-grey { background-color: #f2f2f2; }
.bg-primary {
background-color: $green !important;
}
.list-item-small-wrapper {
background-color: transparent;
margin: 8px 0;
display: flex;
.list-item-small-image {
width: 50px;
height: 50px;
border-radius: 4px;
background-color: #333;
flex-shrink: 0;
overflow: hidden;
}
.list-item-small-content {
padding: 2px 0px 0px 12px;
width: calc(100% - 50px);
* {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.pagination {
> li > a {
color: #666;
margin-left: 4px;
border-radius: 4px;
border: 1px solid #E5E5E5;
font-weight: bold;
font-size: 14px;
&:hover {
color: #666;
}
}
}
.page-item.active {
.page-link {
background-color: $green;
border-color: $green;
}
}
.well {
min-height: 20px;
padding: 42px;
margin-bottom: 20px;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
border: 1px solid #e3e3e3;
border-radius: 6px;
}