[css] implement @keyframes #2161

Closed
wants to merge 2 commits into
from

Conversation

Projects
None yet
2 participants
@peterkroon
Contributor

peterkroon commented Jan 20, 2014

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

peterkroon added some commits Jan 20, 2014

[css] implement @keyframes
````css
h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
````
remove if statement...
...not required

peterkroon added a commit to peterkroon/CodeMirror2 that referenced this pull request Jan 20, 2014

@@ -246,6 +248,16 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
return states.media(type, stream, state);
};
+ states.keyframes = function(type, stream, state) {
+ if (type == "}") return popAndPass(type, stream, state);
+ if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top");

This comment has been minimized.

Show comment Hide comment
@marijnh

marijnh Jan 22, 2014

Member

Why do you pop the keyframes context here? Won't we need to return to it when the block ends?

@marijnh

marijnh Jan 22, 2014

Member

Why do you pop the keyframes context here? Won't we need to return to it when the block ends?

This comment has been minimized.

Show comment Hide comment
@peterkroon

peterkroon Jan 23, 2014

Contributor

Why do you pop the keyframes context here?

To preserve correct indentation.
Add code below in editor Ctrl-A => Tab => Ctrl-Tab.
When Ctrl-A => Tab => Ctrl-Tab is done Without popContext(state) the indentation after the closing keyframes bracket} is incorrect.

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* Some example CSS */

@import url("something.css");

body {
  margin: 0;
  padding: 3em 6em;
  font-family: tahoma, arial, sans-serif;
  color: #000;
}

#navigation a {
  font-weight: bold;
  text-decoration: none !important;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.7em;
}

h1:before, h2:before {
  content: "::";
}

code {
  font-family: courier, monospace;
  font-size: 80%;
  color: #418A8A;
}
@peterkroon

peterkroon Jan 23, 2014

Contributor

Why do you pop the keyframes context here?

To preserve correct indentation.
Add code below in editor Ctrl-A => Tab => Ctrl-Tab.
When Ctrl-A => Tab => Ctrl-Tab is done Without popContext(state) the indentation after the closing keyframes bracket} is incorrect.

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* Some example CSS */

@import url("something.css");

body {
  margin: 0;
  padding: 3em 6em;
  font-family: tahoma, arial, sans-serif;
  color: #000;
}

#navigation a {
  font-weight: bold;
  text-decoration: none !important;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.7em;
}

h1:before, h2:before {
  content: "::";
}

code {
  font-family: courier, monospace;
  font-size: 80%;
  color: #418A8A;
}

This comment has been minimized.

Show comment Hide comment
@peterkroon

peterkroon Jan 23, 2014

Contributor

Ah, it's not needed at all.

if (type == "}") return popAndPass(type, stream, state);

@peterkroon

peterkroon Jan 23, 2014

Contributor

Ah, it's not needed at all.

if (type == "}") return popAndPass(type, stream, state);

@marijnh marijnh closed this in 38c8463 Jan 23, 2014

@marijnh

This comment has been minimized.

Show comment Hide comment
@marijnh

marijnh Jan 23, 2014

Member

I've pushed a simpler patch instead. Find attached.

Member

marijnh commented Jan 23, 2014

I've pushed a simpler patch instead. Find attached.

@peterkroon

This comment has been minimized.

Show comment Hide comment
@peterkroon

peterkroon Jan 23, 2014

Contributor

Nice.
#2170

Contributor

peterkroon commented Jan 23, 2014

Nice.
#2170

anaran added a commit to anaran/CodeMirror that referenced this pull request Feb 22, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment