I'm new to the whole ruby on rails development environment, and I'm struggling to deploy an existing app onto Heroku.
I have spoken to Heroku support and they have failed to continue to address my issue, which is disappointing. Now the specific problem relates to the following terminal command:
$ git push heroku master
This is my output (I will start from the position where it starts to go wrong!):
remote: Installing turbolinks 2.5.3
remote: Installing rails 4.2.0
remote: Your bundle is complete!
remote: Gems in the groups development and test were not installed.
remote: It was installed into ./vendor/bundle
remote: Post-install message from rdoc:
remote: Depending on your version of ruby, you may need to install ruby rdoc/ri data:
remote: <= 1.8.6 : unsupported
remote: = 1.8.7 : gem install rdoc-data; rdoc-data --install
remote: = 1.9.1 : gem install rdoc-data; rdoc-data --install
remote: >= 1.9.2 : nothing to do! Yay!
remote: Bundle completed (39.87s)
remote: Cleaning up the bundler cache.
remote: -----> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: I, [2015-03-18T17:04:43.818368 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/FontAwesome-838af52e382b27dca33a344726a9ec67.otf
remote: I, [2015-03-18T17:04:43.820455 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/fontawesome-webfont-429acacb01a51b0738d8b0c6dcee0fc4.eot
remote: I, [2015-03-18T17:04:43.823090 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/fontawesome-webfont-9c8db592bac7eb9e7ef1b0c464140fa5.svg
remote: I, [2015-03-18T17:04:43.825779 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/fontawesome-webfont-9bf0604ed1778de864df7e69a3348217.ttf
remote: I, [2015-03-18T17:04:43.827790 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/fontawesome-webfont-ff4168b9c4bf807dd42d15ce204cb1ad.woff
remote: I, [2015-03-18T17:04:49.756561 #1194] INFO -- : Writing /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/public/assets/application-cba6abf49f8c4efcc9f21fa8851e620a.js
remote: rake aborted!
remote: Sass::SyntaxError: Invalid CSS after "": expected keyframes selector (e.g. 10%), was "0"
remote: (in /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/app/assets/stylesheets/application.css)
remote: (sass):11234
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/scss/parser.rb:1165:in `expected'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/scss/parser.rb:1101:in `expected'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/scss/parser.rb:1081:in `expr!'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/scss/static_parser.rb:46:in `parse_keyframes_selector'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:412:in `visit_rule'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:501:in `block (2 levels) in visit_directive'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:501:in `map'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:501:in `block in visit_directive'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:500:in `visit_directive'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `map'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `visit_children'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `block in visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:157:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:8:in `visit'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/root_node.rb:36:in `css_tree'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/tree/root_node.rb:20:in `render'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sass-3.4.13/lib/sass/engine.rb:268:in `render'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/sass_compressor.rb:24:in `evaluate'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/context.rb:197:in `block in evaluate'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/context.rb:194:in `each'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/context.rb:194:in `evaluate'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/bundled_asset.rb:25:in `initialize'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/base.rb:377:in `new'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/base.rb:377:in `build_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/index.rb:94:in `block in build_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/caching.rb:58:in `cache_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/index.rb:93:in `build_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/base.rb:287:in `find_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/index.rb:61:in `find_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:211:in `block in find_asset
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:257:in `benchmark'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:210:in `find_asset'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:119:in `block in compile'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:118:in `each'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/sprockets/manifest.rb:118:in `compile'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-rails-2.2.4/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-2.12.3/lib/rake/sprocketstask.rb:146:in `with_logger'
remote: /tmp/build_02a03f7daac8fa16dbf45f752b79f4cc/vendor/bundle/ruby/2.0.0/gems/sprockets-rails-2.2.4/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
remote: Tasks: TOP => assets:precompile
remote: (See full trace by running task with --trace)
remote: !
remote: ! Precompiling assets failed.
remote: !
remote:
remote: ! Push rejected, failed to compile Ruby app
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to quiet-springs-8146.
remote:
To https://git.heroku.com/quiet-springs-8146.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/quiet-springs-8146.git'
What does this mean exactly, and what would be the potential solutions to such an error?
Any help would be warmly appreciated!
All that the application.css file contains is my flash stylings (for an user authentication/signup/login app): Flash is just the class which contains these elements (incidentally it does work, the flash messages do appear to be droid sans and 13px etc within my browser).
.flash {
color: #363636;
font-family: 'Droid Sans', sans-serif;
font-size: 13px;
}
FOA: main.css.scss
/* GLOBAL CSS
-------------------------------------------------- */
body {
width: 100%;
height: 100%;
font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000000;
}
html, body, #container {height: 100%;}
body > #container {height: auto; min-height: 5%;}
html {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
font-family: 'Droid Sans', sans-serif;
margin: 0 0 25px;
font-size: 13px;
line-height: 1.5;
}
#media(min-width:768px) {
p {
margin: 0 0 35px;
font-size: 20px;
line-height: 1.6;
}
}
a {
color: #562cd4;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: #5913d1;
}
.light {
font-weight: 400;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000000;
}
.navbar-custom .navbar-brand {
font-weight: 600;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #ffffff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: #ffffff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255,255,255,.8);
background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li.active a:hover {
color: #ffffff;
}
#media(min-width:768px) {
.navbar-custom {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: #000;
}
}
#fafa_inline {
display: inline;
color: #ffffff;
}
/* CUSTOMIZE THE JUMBOTRON
-------------------------------------------------- */
.jumbotron {
background-image:url('https://dl-web.dropbox.com/get/astroboxio_vela_mosaic_background.gif?_subject_uid=209608449&w=AABTZ4DArPvunSTYalnTRheoQM2Kb8Y1wPnlMZEl1Adfhg');
height: 570px;
background-repeat: no-repeat;
background-size: cover
}
.jumbotron .title {
text-align: center;
}
.jumbotron_image {
margin-bottom: 50px;
}
.jumbotron .container {
position: relative;
top:10px;
}
.jumbotron astrobox {
color: #ffffff;
font-size: 110px;
font-family: 'Basic', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron io {
color: #ffffff;
font-size: 48px;
font-family: 'Lobster', sans-serif;
font-weight: bold;
display: inline;
}
.jumbotron .container p {
font-size: 13px;
color: #ffffff;
text-align: center;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
}
.jumbotron_paragraphs .jumbotron_image_ras {
padding-bottom: 0px;
margin-bottom: 5px;
}
.jumbotron_paragraphs .jumbotron_image_dotastronomy {
padding-bottom: 0px;
margin-bottom: 5px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel {
background-color: #000000;
height: 500px;
margin-bottom: 60px;
border: 1px solid black;
}
.carousel-caption {
z-index: 10;
}
.carousel-caption h1 {
z-index: 10;
}
.carousel-caption p {
z-index: 10;
}
.carousel .item {
height: 500px;
background-color: #000000;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
}
.intro .intro-body .brand-heading {
font-size: 40px;
}
.intro .intro-body .intro-text {
font-size: 18px;
}
#media(min-width:668px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 100px;
}
.intro .intro-body .intro-text {
font-size: 26px;
}
}
/* CUSTOMIZE NEIGHBORHOOD-GUIDES
-------------------------------------------------- */
.neighborhood-guides {
background-color: #000000;
height: 490px;
}
.studio_pipeline {
background-size: 60%;
}
.studio_pipeline h2 {
color: #ffffff;
background-color: #562cd4;
background-size: 100%;
padding: 0.5cm;
font-size: 16px;
font-family: 'Roboto', sans-serif;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: initial;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
.studio_pipeline p {
color: #ffffff;
background-color: #000000;
font-size: 13px;
font-family: 'Droid Sans', sans-serif;
text-align: center;
margin-bottom: 13px;
}
.thumbnail {
background-color: #000000;
border: 0;
}
.thumbnail_description {
background-color: #000000;
padding: 0;
text-align: center;
}
.thumbnail_description h1 {
background-color: #000000;
color: #ffffff;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
font-size: 30px;
text-transform: capitalize;
letter-spacing: 0;
padding: 5px;
margin: 0 0 0 0;
}
.thumbnail_description p {
background-color: #000000;
color: #363636;
font-family: 'Droid Sans', sans-serif;
font-size: 13px;
letter-spacing: 0;
padding: 0;
}
.thumbnail img {
background-color: #000000;
padding: 20px;
opacity: 0.85;
border-radius: 100%;
}
.thumbnail img:hover {
background-color: #000000;
opacity: 1.0;
}
.btn-circle {
width: 30px;
height: 30px;
margin-top: 15px;
margin-left: 48.8%;
padding: 8px;
border: 1px solid #ffffff;
border-radius: 100%!important;
font-size: 13px;
color: #ffffff;
background: 0 0;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus {
outline: 0;
color: #ffffff;
background: rgba(255,255,255,.1);
}
.btn-circle i.animated {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.btn-circle:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes pulse {
0 {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0 {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
.content-section {
padding-top: 100px;
}
.about {
width: 100%;
padding: 50px 0;
color: #ffffff;
background: url(../assets/images/downloads-bg.jpg) no-repeat center center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#map {
width: 100%;
height: 200px;
margin-top: 100px;
}
#media(min-width:767px) {
.content-section {
padding-top: 250px;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.about {
padding: 100px 0;
}
#map {
height: 400px;
margin-top: 250px;
}
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-default {
border: 1px solid #ffffff;
color: #ffffff;
border-radius: 20%!important;
background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #ffffff;
outline: 0;
color: #ffffff;
background-color: #562cd4;
}
ul.banner-social-buttons {
margin-top: 0;
}
#media(max-width:1199px) {
ul.banner-social-buttons {
margin-top: 15px;
}
}
#media(max-width:767px) {
ul.banner-social-buttons li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons li:last-child {
margin-bottom: 0;
}
}
/* CUSTOMIZE THE STICKY BAR FOOTER
-------------------------------------------------- */
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 2px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 2px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
::-moz-selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
::selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
body {
webkit-tap-highlight-color: rgba(255,255,255,.2);
}
Looking at the error message, first thing I notice is the extension of your file /app/assets/stylesheets/application.css
Rename
app/assets/stylesheets/application.css
To
app/assets/stylesheets/application.css.scss (NOTE the added extension .scss)
This way sass gem can actually preprocess your stylesheets.
UPDATE
Use the option -a while committing the changes to git
git commit -am <commit message>
This option will automatically stage files that have been modified and/or deleted. In your case app/assets/stylesheets/application.css would be treated as deleted and app/assets/stylesheets/application.css.scss as newly added.
Sass::SyntaxError: Invalid CSS after "": expected keyframes selector
(e.g. 10%), was "0" remote: (in
/tmp/build_365c7241bf197a8f84d0ec4a70ddd900/app/assets/stylesheets/main.css.scss:399)
To fix the above error, in app/assets/stylesheets/main.css.scss, you need to update the following code (use 0% instead of 0):
#-webkit-keyframes pulse {
// Use 0% and not 0
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
//...
}
#-moz-keyframes pulse {
// Use 0% and not 0
0% {
-moz-transform: scale(1);
transform: scale(1);
}
//...
}
If you don't want to change application.css. You can create new file:
ex:
custom.css.scss
If you using bootstrap, add bootstrap rails to Gemfile and import following lines to custom.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
Run commands:
$ bundle install
$ git push heroku master -f
If you can't using bootstrap in heroku:
Open config/environments/production.rb and edit following line:
config.assets.compile = false
to
config.assets.compile = true
Push again to github and heroku.
Related
[enter image description here][1]
[1]: the image of the button
[2] There are styles for this button. Please looking at the line (.btnDefault:hover:after).
.btnDefault {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 46px 0 25px;
background-color: #fff;
width: 160px;
height: 48px;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
border-radius: 50px;
box-shadow: 0px 12px 51px 0px rgba(88, 49, 33, .4);
transition: opacity .3s ease-in-out;
}
.btnDefault:after {
content: '';
position: absolute;
top: 50%;
right: 25px;
width: 22px;
height: 22px;
background: url('https://i.stack.imgur.com/pPcvP.png') no-repeat;
background-size: contain;
transform: translateY(-50%);
transition: transform .3s ease-in-out;
}
.btnDefault:hover {
opacity: .7;
}
.btnDefault:hover:after {
transform: scaleX(-1) translateY(-50%);
}
[3] this is button HTML
<a class="btnDefault">VIEW MORE</a>
Consider this two parts of code
NotifWidget* notifWidget_ = new NotifWidget();
notifWidget_->show();
notifWidget_->move(computePosition(notifWidget_));
notifWidget_->show();
notifWidget_->move(computePosition(notifWidget_));
In first case the NotifWidget (which is inherited from QFrame) the notifWidget_ object is local object and the corresponding widget is show like this
In the second case the notifWidget_ object is the class member and and here is the image for that case
Both widgets have same CSS style sheet and same objectName. Does anyone know what's the problem for the second case? Why in second case the inner widgets are overlapped?
update
including css(if any)
QWidget#NotifWidget_actions
{
border:0px solid;
}
QWidget#AccessGiven, QWidget#AccessGiven[onhover="false"]
{
background: white;
}
QWidget#AccessGiven[onhover="true"]
{
background: #f2f2f2;
}
QLabel#AccessGiven_icon, QLabel#AccessGiven_message, QLabel#AccessGiven_icon[onhover="false"], QLabel#AccessGiven_message[onhover="false"]
{
background: white;
padding-bottom: 0px;
qproperty-wordWrap: true;
max-height: 48px;
min-height: 48px;
}
QLabel#AccessGiven_message
{
font: 12px;
max-width: 200px;
min-width: 200px;
}
QLabel#AccessGiven_icon
{
max-width: 64px;
min-width: 64px;
}
QLabel#AccessGiven_icon[onhover="true"], QLabel#AccessGiven_message[onhover="true"]
{
background: #f2f2f2;
}
QPushButton#AccessGiven_action, QPushButton#AccessGiven_action[onhover="true"]
{
font: 12px;
color: rgba( 35, 35, 35, 0% );
padding-bottom: 0px;
background-color: rgba( 35, 35, 35, 0% );
margin-left: 0px;
}
QPushButton#AccessGiven_action[onhover="true"]
{
color: rgba( 35, 35, 35, 50% );
}
QPushButton#AccessGiven_action:hover
{
background: rgba( 35, 35, 35, 20% );
}
QPushButton#AccessGiven_action:pressed
{
background: rgba( 35, 35, 35, 10% );
padding-bottom: 2px;
}
QPushButton#NotifWidget_settings
{
background-image: url(./media/settings.png);
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center center;
border: 0px;
}
QPushButton#NotifWidget_settings:hover
{
background-color: lightgray;
}
QPushButton#NotifWidget_settings:pressed
{
background-color: silver;
}
QPushButton#NotifWidget_help
{
background-image: url(./media/help.png);
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center center;
border: 0px;
}
QPushButton#NotifWidget_help:hover
{
background-color: lightgray;
}
QPushButton#NotifWidget_help:pressed
{
background-color: silver;
}
QPushButton#NotifWidget_toWeb
{
height: 24px;
width: 24px;
background-image: url(./media/web.png);
background-repeat: no-repeat;
background-position: center center;;
border: 0px light ;
}
QPushButton#NotifWidget_toWeb:hover
{
background-color: lightgray;
}
QPushButton#NotifWidget_toWeb:pressed
{
background-color: silver;
}
QPushButton#NotifWidget_exit
{
height: 14;
padding:2px;
margin-left:5px;
background-color: rgb(255,0,0, 0%);
border: 1px light ;
}
QPushButton#NotifWidget_exit:hover
{
background-color: rgb(255,0,0, 25%);
}
QPushButton#NotifWidget_exit:pressed
{
background-color: rgb(255,0,0, 35%);
}
QScrollArea#NotifWidget_scrollArea
{
/* background: transparent;
border: 0px solid;*/
}
QFrame#NotifWidget
{
background-color: #F5F5F5;
/*min-width: 345;
max-width: 345;
min-height: 400;*/
border: 1px solid rgb(37, 76, 241);
}
css is not working properly in rails 4.2.5 on implementing home page looks like
the gem file are
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'devise'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '3.2.0.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
my routes are
Rails.application.routes.draw do
get 'pages/about'
get 'pages/contact'
get 'pages/resources'
devise_for :admin_users, ActiveAdmin::Devise.config
ActiveAdmin.routes(self)
resources :categories
get 'categories/index'
get 'categories/edit'
get 'categories/new'
get 'categories/show'
get 'home/index'
resources :posts
root 'home#index'
end
my css files are:
#import "bootstrap-sprockets";
#import "bootstrap";
body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6F6F6F;
}
strong {
color: #3F3F3F;
}
h1,h2,h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-weight: normal;
color: #2B2522;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p,ul,ol {
margin-top: 0;
line-height: 180%;
}
ul,ol {
}
a {
text-decoration: underline;
color: #D93544;
}
a:hover{
text-decoration: none;
}
#wrapper{
width: 1000px;
margin: 0 auto;
padding: 0;
background: #000000;
}
/* Header */
#header-wrapper {
height: 120px;
}
#header {
width: 1000px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 350px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
margin-left: 30px;
padding: 20px 0px 0px 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 3.8em;
font-weight: bold;
color: #D43442;
}
#logo h1 a {
color: #D43442;
}
#logo h1 span {
}
#logo p {
margin: 0;
padding: 0px 0 0 32px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #BEBEBE;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #707070
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
height: 19px;
padding: 4px 5px 1px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 26px;
background: #D93544;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
height: 125px;
margin: 0 auto;
padding: 0;
background: #D43442;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
border-left: 1px solid #000000;
}
#menu a {
display: block;
height: 80px;
padding: 45px 25px 0px 25px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 26px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a{
background: #A32833;
text-decoration: none;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 980px;
margin: 0 auto;
padding: 0px 0px 0px 20px;
}
#page-bgtop {
padding: 20px 0px;
}
/* Content */
#content {
float: right;
width: 600px;
padding: 40px 0px 0px 0px;
}
.post, .post_full, .page {
margin-bottom: 30px;
padding: 30px 20px 20px 20px;
background: #FFFFFF url (images/page-gradient-bg.png) repeat-x left bottom;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,1);
outline: 1px dashed #D4D4D4;
outline-offset: -5px;
}
.post .title, .page .title {
height: 41px;
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-family: 'Abel', sans-serif;
}
.post .title a, .page .title a {
text-decoration: none;
color: #202020;
border: none;
}
.post .entry {
padding: 20px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.post .byline {
clear: both;
overflow: hidden;
padding-bottom: 20px;
}
.post .meta {
float: left;
}
.post .links {
float: right;
}
/* Full Post */
.post_full .byline p {
padding: 0;
margin: 0;
}
.post_full .byline {
clear: both;
overflow: hidden;
margin-bottom: 15px;
padding: 5px;
background: black:;
color: #fff;
border-left: 5px #D93544 solid;
}
.links a {
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
margin: 0px;
padding: 20px 20px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #191919;
background: url (images/img01.jpg) no-repeat left 15px;
margin: 0px 20px 0px 20px;
border-left: none;
text-align: left;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 0px;
}
#sidebar h2 {
height: 31px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 20px;
background: url(images/img03.jpg) no-repeat left top;
text-shadow: #203060 -1px 1px 2px;
text-align: left;
text-transform: uppercase;
letter-spacing: -0.5em;
font-size: 2em;
color: #FFFFFF;
}
#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
color: #847F7E;
}
#sidebar a {
border: none;
color: #847F7E;
}
#sidebar a:hover {
text-decoration: underline;
color: #847F7E;
}
/* Calendar */
#calender {
}
#calender_wrap{
padding:20px;
}
#calender table {
width: 100%;
}
#calendar body td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/footer/
#footer{
width: 980px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #847F7E;
}
#footer a {
color: 847F7E;
}
form label{width: 110px; display: inline-block;}
looks like thisenter image description here
want home about contact to be in column form
and want to remove the header background
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly.
Here is my code..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
Where is the problem? I can't find.
Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??
Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
I've found a solution of this without changing any css..
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it.
I don't know I'm right or wrong?
Delaying the line which sets the opacity to '1' by a few ms is now working.
Now Run the updated code below and see it works -
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
function hideModal() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.display = "none"
}, 300);
}
#bellNotification {
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover {
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip {
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp {
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
width: 50%;
min-height: 200px;
background-color: white;
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input {
color: #4d4d4d;
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip">
<div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.
<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" />
<input type="button" value="Proceed" />
</div>
</div>