in my website (www.ricpedrotti.com) I use PrettyPhoto for the slideshow. I want to lighten and speed up by replacing it with css3 and at most a bit of java.
I am able, separately, to make the slideshow and to enlarge the image with the hover, but I am not able to automatically grow the images inside the show.
My question is: how do I merge both effects (just like in PrettyPhoto)?
P.S. I am willing and passionate, but not very skilled ...
Thank you very much for your reply. I add my code, hoping it's not too
primitive, and the img upload is correct.
HTML[tryptics]
<link rel="stylesheet" href='css/stile.css' type="text/css" /><link href="css/stile.css" rel="stylesheet" type="text/css" /><div class="grow"><div class="container"> ![image1]="1.jpg"> ![image2]="2.jpg"> ![image3]="3.jpg"> ![image4]="4.jpg"> ![image3]="3.jpg"> ![image2]="2.jpg"> ![image1]="1.jpg"> ![image4]="4.jpg"></div>
CSS
.container { position:relative; } .container img { position:absolute; width:350px; height:150px } div { margin:200px 250px; width:600px; height:300px; background:white; transition:all 2s ease ; } .grow:hover { -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } #-webkit-keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } #keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } .container img:nth-child(8) { -webkit-animation: xfade 48s 0s infinite; animation: xfade 48s 0s infinite; } .container img:nth-child(7) { -webkit-animation: xfade 48s 6s infinite; animation: xfade 48s6s infinite; } .container img:nth-child(6) { -webkit-animation: xfade 48s 12s infinite; animation: xfade 48s 12s infinite; } .container img:nth-child(5) { -webkit-animation: xfade 48s 18s infinite; animation: xfade 48s 18s infinite; } .container img:nth-child(4) {
-webkit-animation: xfade 48s 24s infinite; animation: xfade 48s 24s infinite; } .container img:nth-child(3) { -webkit-animation: xfade 48s 30s infinite; animation: xfade 48s 30s infinite; } .container img:nth-child(2) { -webkit-animation: xfade 48s 36s infinite; animation: xfade 48s 36s infinite; } .container img:nth-child(1) { -webkit-animation: xfade 48s42s infinite; animation: xfade 120s 48s 42s infinite; }
Related
const menu = document.querySelector(".mini-menu");
menu.addEventListener("click", () => menu.classList.toggle("opened"));
html, body
{
width: 100%;
height: 100%;
margin: 0;
}
.container
{
display: flex;
width: 100%;
height: 100%;
background: #47b6e04a;
justify-content: center;
align-items: center;
}
.mini-menu
{
cursor: pointer;
transition: all .4s linear;
}
.line
{
transition: all .4s linear;
transform-origin: center;
}
.mini-menu.opened
{
transform: rotate(45deg);
}
.mini-menu.opened .line_top
{
transform: translateY(24px);
}
.mini-menu.opened .line_mid
{
transform: rotate(-90deg);
}
.mini-menu.opened .line_bottom
{
transform: translateY(-24px);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width=80 height=80 stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="mini-menu">
<line x1="6" y1="16" x2="74" y2="16" class="line line_top"></line>
<line x1="6" y1="40" x2="74" y2="40" class="line line_mid"></line>
<line x1="6" y1="64" x2="74" y2="64" class="line line_bottom"></line>
</svg>
</div>
Click on menu-burger - transition becomes. It works correctly in desktop Google Chrome, but in Chrome on Android transition of top and bottom lines for translateY isn't shown, at the end it just "jumps" to final state. Does anyone know what's here the problem, and is there a way to fix it? Big thanks!
So, it seems the problem was in translating SVG. Just changed code, and it works smoothly now.
const menu = document.querySelector(".mini-menu");
menu.addEventListener("click", () => menu.classList.toggle("opened"));
html, body
{
width: 100%;
height: 100%;
margin: 0;
}
.container
{
display: flex;
width: 100%;
height: 100%;
background: #47b6e04a;
justify-content: center;
align-items: center;
}
.mini-menu
{
display: flex;
flex-direction: column;
width: 70px;
height: 92px;
cursor: pointer;
transition: all .4s linear;
}
.line
{
margin-bottom: 20px;
width: 100%;
height: 4px;
background: #000;
transition: all .4s linear;
}
.line_top
{
margin-top: 20px;
}
.line_bottom
{
margin-bottom: 0;
}
.mini-menu.opened
{
transform: rotate(45deg);
}
.mini-menu.opened .line_top
{
transform: translateY(24px);
}
.mini-menu.opened .line_mid
{
transform: rotate(-90deg);
}
.mini-menu.opened .line_bottom
{
transform: translateY(-24px);
}
<div class="container">
<div class="mini-menu">
<div class="line line_top"></div>
<div class="line line_mid"></div>
<div class="line line_bottom"></div>
</div>
</div>
I want to call all values from each $lists of specific $map ($value-tree in this case.) and do to create media queries for that numbers.
The $map what I have looks like this:
$breakpoints: (
564
768
992
1200
);
$value-tree: (
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
And this is my code:
#mixin media-module($prefix, $properties...) {
#each $names, $value in $properties {
$myValue: map-get($names, $value);
$myGrid: nth($breakpoints, $myValue);
// doesn't work
#media all and (min-width: $myGrid + px) {
#each $names in $properties {
#{$names}: 123;
}
}
}
}
The main problem is these two directives, map-get and map-values can't call the $values from the $lists.
used map-get directive to call the $values:
Error: $map: "width" is not a map for 'map-get'
on line 112 of scss/app.scss, in 'media-module'
used map-values:
Error: $map: "width" is not a map for `map-values'
Is there any ways to get or call the values from the $lists that inside of $map?
Many thanks always.
================ UPDATE 12/6 ================
I made it to create the numbers of media queries for each of the $breakpoints' values but it only calls width's values like this:
#media all and (min-width: 564px) {
.qaz {
width: 80%;
display: 80%;
border: 80%; } }
#media all and (min-width: 768px) {
.qaz {
width: 70%;
display: 70%;
border: 70%; } }
#media all and (min-width: 992px) {
.qaz {
width: 400px;
display: 400px;
border: 400px; } }
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
display: 500px;
border: 500px; } }
My second code looks like this:
#mixin mqg3($prefix, $properties...) {
#each $contents, $dummy in $prefix, $properties {
$myGroup: map-get($prefix, $contents);
#each $values in $myGroup {
$myIndex: index($myGroup, $values);
$myGrid: nth($breakpoints, $myIndex);
#media all and (min-width: $myGrid + px) {
#each $names in $properties {
#{$names}: $values;
}
}
}
}
}
P.S
Thanks for answer me #Jakob, but I want to make the $properties can be able to checked inside of #include so the user doesn't need to scroll up every time for checking the $properties:
.qaz { #include mqg3($bp-values, width, display, border); }
As I tried to say in this post: How to get $values of Array in SCSS?, in my opinion a nested map helps you to find a more clear & simple solution:
$bp-values:(
xs:(
display: 564px,
width: 200px,
font-size: 20px,
color:lightblue,
border:1px solid black
),
md:(
display: 768px,
width: 300px,
font-size: 30px,
color:orange,
border:4px solid orange
),
lg:(
display: 992px,
width: 400px,
font-size: 40px,
color:lime,
border:7px solid brown
),
xl:(
display: 1200px,
width: 500px,
font-size: 50px,
color:crimson,
border:10px solid lightblue
)
);
#mixin mqg3($map, $keys...) {
#each $keyMap, $valueMap in $map {
#media all and (min-width: map-get($valueMap, display)) {
#each $v in $keys {
#{$v}: map-get($valueMap, $v);
}
}
}
}
It is more clear every correlation. It is not necessary to insert the display in your args 'cause I suppose it is your min-width:
.qaz { #include mqg3($bp-values, width, border); }
.qaz1 { #include mqg3($bp-values, color, font-size); }
This is the result:
#media all and (min-width: 564px) {
.qaz {
width: 200px;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.qaz {
width: 300px;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
#media all and (min-width: 564px) {
.qaz1 {
color: lightblue;
font-size: 20px;
}
}
#media all and (min-width: 768px) {
.qaz1 {
color: orange;
font-size: 30px;
}
}
#media all and (min-width: 992px) {
.qaz1 {
color: lime;
font-size: 40px;
}
}
#media all and (min-width: 1200px) {
.qaz1 {
color: crimson;
font-size: 50px;
}
}
EDIT 1
As you asked in the comment, if you want work with lists, this is another solution. I put your $breakpoints with the other lists. You can remove display in your args 'cause by default I use it always as min-width:
$value-tree: (
display:(
564, 768, 992, 1200
),
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
#mixin mqg3($map, $keys...){
$myList:map-get($map, display);
#each $myItem in $myList {
$i: index($myList, $myItem);
#media all and (min-width: $myItem * 1px) {
#each $v in $keys {
#{$v}: nth(map-get($value-tree, $v), $i);
}
}
}
}
.qaz { #include mqg3($value-tree, width, border); }
This is the output:
#media all and (min-width: 564px) {
.qaz {
width: 80%;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.qaz {
width: 70%;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
I think you want something like this
SCSS
#mixin media-module {
$index: 1;
#each $bp in $breakpoints {
#media all and (min-width: $bp * 1px){
#each $key, $list in $value-tree {
#{$key}: nth($list, $index);
}
$index: $index + 1;
}
}
}
.class {
#include media-module;
}
CSS Output
#media all and (min-width: 564px) {
.class {
width: 80%;
font-size: 20px;
color: lightblue;
border: 1px solid black;
}
}
#media all and (min-width: 768px) {
.class {
width: 70%;
font-size: 30px;
color: orange;
border: 4px solid orange;
}
}
#media all and (min-width: 992px) {
.class {
width: 400px;
font-size: 40px;
color: lime;
border: 7px solid brown;
}
}
#media all and (min-width: 1200px) {
.class {
width: 500px;
font-size: 50px;
color: crimson;
border: 10px solid lightblue;
}
}
Hello guys im having a hard time configuring out what is the missing part of my css, because the animation in hover out is not the same in hover in, here is the fiddle link thank you.
[https://jsfiddle.net/m2Lz4euv/][1]
You need to apply the timing properties in the not-hover selectors.
jsFiddle
What I've done is changing this:
.hamburger-wrap span:first-of-type {
top: 0;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
To this:
.hamburger-wrap span:first-of-type {
top: 0;
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
If you want different timing for the in- and out state you can set the in-timing in the :hover selector and the out-timing in the regular selector.
HOVER FIDDLE DEMO
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1:hover span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1:hover span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1:hover span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3:hover span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3:hover span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3:hover span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4:hover span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4:hover span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
I have a span-area like this
<span class="blinky">I'm blinking</span>
and now I want it to blink.
In vanilla JS, I would write a simple piece of code using jQuery which starts an interval for this.
However: How can I implement this in ember in a proper way?
I write a full solution for blinking
First, let's create CSS for blinking
.blinky {
animation: changecolor 0.5s infinite;
-moz-animation: changecolor 0.5s infinite;
-webkit-animation: changecolor 0.5s infinite;
-ms-animation: changecolor 0.5s infinite;
-o-animation: changecolor 0.5s infinite;
}
#keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 2px solid #blink-bg;
}
}
/* Mozilla Browser */
#-moz-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* WebKit browser Safari and Chrome */
#-webkit-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* IE 9,10*/
#-ms-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* Opera Browser*/
#-o-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
#keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* Mozilla Browser */
#-moz-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* WebKit browser Safari and Chrome */
#-webkit-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* IE 9,10*/
#-ms-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* Opera Browser*/
#-o-keyframes changecolor {
0% {
color: #pre-text-color;
background: red;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
Then where you want to use this in the controller, route or Component declare
blinky: null,
now we need to have an action or you need to initialize it depends on how you want to use it, let's assume you want to add this Blinky class for 3seconds while clicking on a button so we would do the following code :
actions: {
myChangeColor: function() {
this.set('blinky', 'blinkery');//set your class to property
// remove blinker after 1 sec, it must be passed to reference for 'this' so easily we can bind that.
setTimeout(function() {
this.set('blink', ' ');
}.bind(this), 3000);
}
}
Now you need to use it in template for example in my example you simply add this property in your proper line of template like :
<div class="row well {{blinky}}"> //whatever </div>
now suppose you have a button which myChangeColor action
<button type="submit" class="btn btn-success btn-block" {{action "blinky"}}>make me blinky for 3 seconds !</button>
that's it.
Depends on what you want and how you want to use this action and class you can implement it in different ways, However, the way of implementation is the same.
Note: you can also use animation.css library to have more class either you can add your Vanilla javascript code in the action.
If you want to use this in a component depends on how you want to use, you may have to work with didInsertElement() {} and willDestroyElement() {} . As an example see the following code:
let blinker;
export default Ember.Component.extend({
tagName: 'span',
blink: null,
interval: 3000,
init() {
this._super(...arguments);
this.set('blink','');
},
didInsertElement() { // when you enter route
this._super(...arguments);
blinker = setInterval(function() {
this.set('blink', 'blinky');
}.bind(this), this.get('interval'));
},
willDestroyElement() { // when you leave route
this._super(...arguments);
clearInterval(blinker);
}
});
I hope this can help you.
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.