Changeset 9856

Timestamp:

05/09/2015 08:44:25 AM (11 years ago)

Author:

hnla

Message:

Update twentyfourteen SCSS Sheet
Commit addresses scss-lint tests for VendorPrefix (currently disallowed by config)

• Uncomment vendor prefix properties previously removed as failing tests.
• Add scss-lint disable/enable block rules.
• Moves any mixins with vendor prefix properties within the exclusion block.
• Add calc() mixin from twentyfifteen sheet(props r-a-y)

Vendor prefix usage such as 'border-radius', 'box-sizing' will now pass tests as long as they are only used via a mixin within this exclusion block; this allows us to pass vendor prefixes where we explicitly set them in our exclusion block but then allows the lint test to run through on the rest of the sheet so ensuring prefixes aren't written directly to rulesets.
See #6338

Location:

trunk/src/bp-templates/bp-legacy/css

Files:

• twentyfourteen-rtl.css (modified) (3 diffs)
• twentyfourteen.css (modified) (3 diffs)
• twentyfourteen.scss (modified) (6 diffs)

trunk/src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css

@@ -102 +102 @@
       border: 1px solid rgba(0, 0, 0, 0.2);
       border-bottom-color: #fff;
+      -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
+      -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
       background-clip: padding-box;
@@ -248 +250 @@
         display: block; }
         #buddypress ul.item-list li .action div a {
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
           box-sizing: border-box;
           display: block;
@@ -386 +390 @@
 #buddypress .members .item-list .my-entry .item {
   background: #f7f7f7;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 0.5em; }

trunk/src/bp-templates/bp-legacy/css/twentyfourteen.css

@@ -102 +102 @@
       border: 1px solid rgba(0, 0, 0, 0.2);
       border-bottom-color: #fff;
+      -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
+      -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
       background-clip: padding-box;
@@ -248 +250 @@
         display: block; }
         #buddypress ul.item-list li .action div a {
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
           box-sizing: border-box;
           display: block;
@@ -386 +390 @@
 #buddypress .members .item-list .my-entry .item {
   background: #f7f7f7;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 0.5em; }

trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss

@@ -38 +38 @@
 }
 
+// To allow mixins to pass VendorPrefix scss-lint tests we disable lint-test
+// for specific blocks / rulesets
+// until such time as exemption lists can be built for the scss-lint.yml?
+// Any vendor prefix properties / mixins need to be in this block
+// scss-lint:disable VendorPrefix
+
 // Border border-radius mixins
-// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
-// until such time as exemption lists can be built for the scss-lint.yml
-
 @mixin border-radius($radius) {
-//      -webkit-border-radius: $radius;
-//      -moz-border-radius: $radius;
-//      -ms-border-radius: $radius;
+        -webkit-border-radius: $radius;
+        -moz-border-radius: $radius;
+        -ms-border-radius: $radius;
         border-radius: $radius;
         background-clip: padding-box;
@@ -51 +54 @@
 
 @mixin border-top-radius($radius) {
-//      -webkit-border-top-right-radius: $radius;
+        -webkit-border-top-right-radius: $radius;
         border-top-right-radius: $radius;
-//      -webkit-border-top-left-radius: $radius;
+        -webkit-border-top-left-radius: $radius;
         border-top-left-radius: $radius;
         background-clip: padding-box;
@@ -59 +62 @@
 
 @mixin border-right-radius($radius) {
-//      -webkit-border-bottom-right-radius: $radius;
+        -webkit-border-bottom-right-radius: $radius;
         border-bottom-right-radius: $radius;
-//      -webkit-border-top-right-radius: $radius;
+        -webkit-border-top-right-radius: $radius;
         border-top-right-radius: $radius;
         background-clip: padding-box;
@@ -67 +70 @@
 
 @mixin border-bottom-radius($radius) {
-//      -webkit-border-bottom-right-radius: $radius;
+        -webkit-border-bottom-right-radius: $radius;
         border-bottom-right-radius: $radius;
-//      -webkit-border-bottom-left-radius: $radius;
+        -webkit-border-bottom-left-radius: $radius;
         border-bottom-left-radius: $radius;
         background-clip: padding-box;
@@ -75 +78 @@
 
 @mixin border-left-radius($radius) {
-//      -webkit-border-bottom-left-radius: $radius;
+        -webkit-border-bottom-left-radius: $radius;
         border-bottom-left-radius: $radius;
-//      -webkit-border-top-left-radius: $radius;
+        -webkit-border-top-left-radius: $radius;
         border-top-left-radius: $radius;
         background-clip: padding-box;
@@ -83 +86 @@
 
 // Box sizing
-
 @mixin box-model($box-model: border-box) {
-//      -webkit-box-sizing: $box-model;
-//      -moz-box-sizing: $box-model;
+        -webkit-box-sizing: $box-model;
+        -moz-box-sizing: $box-model;
         box-sizing: $box-model;
 }
+
+// Calc
+@mixin calc($property, $expression) {
+        #{$property}: -webkit-calc(#{$expression});
+        #{$property}: -moz-calc(#{$expression});
+        #{$property}: calc(#{$expression});
+}
+
+// Re-enable the VendorPrefix lint test
+// scss-lint:enable VendorPrefix
 
 // BP message boxes