fix: colors of css.

meetio-theme · Feb 27, 2019 · 67ebd91 · 67ebd91
1 parent 26c1b4b
commit 67ebd91
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 66 deletions.
diff --git a/examples/file.css b/examples/file.css
@@ -7,21 +7,21 @@ body {
 }
 
 .addon-store .pagehead h1 { display: inline-block }
-.addon-store .addon-summary:after { clear: both }
+.addon-store .addon-summary::after { clear: both }
 
 #addon-store .pagehead .electrocat-small {
-    bottom: -7px;
+    bottom: calc(100% - 20px);
     position: absolute;
     right: 0;
 }
 
 .addon-store .addons-nav::after {
     display: block;
-    content: "";
+    content: attr("data-link");
 }
 
 .addon-store .addons-nav a:hover {
- background-color: red;
+   background-color: red;
 }
 
 .addon-store .addons-nav a.selected {
@@ -31,6 +31,16 @@ body {
     padding: 0 0 14px;
 }
 
+.addon-store img {
+    filter: grayscale(100%);
+}
+
+@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+
 .addon-store .addon-icon {
     background: #fff;
     border: 1px solid #ddd;
@@ -56,9 +66,8 @@ body {
 }
 
 .addon-field-editor .addon-field-list, .addon-field-editor .addon-new-field {
-    -moz-box-sizing: border-box;
     border-radius: 3px;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     display: inline-block;
     text-align: center;
     width: 595px;
@@ -67,3 +76,14 @@ body {
 #form input[type="text"] {
     border: 1px solid var(--color-border-input);
 }
+
+@keyframes mymove {
+    from {top: 0px;}
+    to {top: 200px;}
+}
+
+@media screen and (max-width: 600px) {
+  body {
+    background-color: blue;
+  }
+}
diff --git a/examples/file.scss b/examples/file.scss
@@ -1,5 +1,5 @@
-$addon-store-border-color: #d95468;
-$addon-store-color: #333;
+$addon-store-border-color: #d95468 !default;
+$addon-store-color: #333 !default;
 
 #app {
   .addons-nav {
@@ -40,7 +40,7 @@ $addon-store-color: #333;
 }
 
 @mixin grid($flex) {
-  @if $flex {
+  @if ($flex) {
     @include flex;
   }
   @else {
@@ -49,6 +49,6 @@ $addon-store-color: #333;
 }
 
 /* Functions */
-@function my-calculation-function($some-number, $another-number){
+@function my-calculation-function($some-number, $another-number) {
   @return $some-number + $another-number;
 }
diff --git a/schemes/Meetio-Cobalt.sublime-color-scheme b/schemes/Meetio-Cobalt.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",

diff --git a/schemes/Meetio-Darker.sublime-color-scheme b/schemes/Meetio-Darker.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",

diff --git a/schemes/Meetio-Lighter.sublime-color-scheme b/schemes/Meetio-Lighter.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",

diff --git a/schemes/Meetio-Ocean.sublime-color-scheme b/schemes/Meetio-Ocean.sublime-color-scheme
@@ -110,31 +110,36 @@
         {
             "name": "[CSS] Classes",
             "scope": "entity.other.attribute-name.class",
-            "foreground": "var(magenta)"
+            "foreground": "var(yellow)"
         },
         {
             "name": "[CSS] ID",
-            "scope": "source.css entity.other.attribute-name.id.css, source.sass entity.other.attribute-name.id.sass, source.scss entity.other.attribute-name.id.scss",
-            "foreground": "var(magenta)"
+            "scope": "entity.other.attribute-name.id.css",
+            "foreground": "var(yellow)"
         },
         {
-            "name": "[CSS] Class and Support",
+            "name": "[CSS] Properties",
             "scope": "source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus",
             "foreground": "var(foreground)"
         },
         {
             "name": "[CSS] Variable",
-            "scope": "support.type.custom-property.css, variable.other.css, variable.other.sass, variable.other.scss",
-            "foreground": "var(yellow)"
+            "scope": "support.type.custom-property.css, support.type.custom-property.scss, variable.other.sass, variable.other.scss",
+            "foreground": "var(cyan)"
         },
         {
             "name": "[CSS] Functions",
-            "scope": "support.function.var.css",
+            "scope": "support.function.var.css, support.function.filter.css, support.function.calc.css",
+            "foreground": "var(blue)"
+        },
+        {
+            "name": "[CSS] Prefix",
+            "scope": "support.type.vendor-prefix.css",
             "foreground": "var(blue)"
         },
         {
             "name": "[CSS] Properties",
-            "scope": "source.css support.constant.property-value.css, source.sass support.constant.property-value.sass, source.scss support.constant.property-value.scss",
+            "scope": "meta.property-name.css",
             "foreground": "var(foreground)"
         },
         {
@@ -147,6 +152,16 @@
             "scope": "entity.other.pseudo-element.css",
             "foreground": "var(red)"
         },
+        {
+            "name": "[CSS] Important",
+            "scope": "keyword.other.important.css",
+            "foreground": "var(violet)"
+        },
+        {
+            "name": "[CSS] Color Values",
+            "scope": "support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css, support.constant.color.w3c-extended-color-keywords.css",
+            "foreground": "var(blue)"
+        },
         {
             "name": "[JavaScript] Dollar",
             "scope": "variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js",