Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update syntax for "border-radius" and "box-shadow", added vendor prefixes for calc() #2367

Merged
merged 2 commits into from Jul 11, 2016
Merged

Update syntax for "border-radius" and "box-shadow", added vendor prefixes for calc() #2367

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2d59c5
Update syntax for "border-radius" and "box-shadow", added vendor pref…
bensontrent Jul 10, 2016
b7fbba8
mocha.css: Reverted whitespace differences
bensontrent Jul 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
60 changes: 36 additions & 24 deletions mocha.css
View file
Open in desktop
Expand Up @@ -91,13 +91,13 @@ body {
padding: 2px 5px;
color: #fff;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please revert whitespace changes to keep the commit clean

box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

#mocha .test.pass.fast .duration {
Expand Down Expand Up @@ -148,23 +148,28 @@ body {
padding: 15px;
border: 1px solid #eee;
max-width: 85%; /*(1)*/
max-width: -webkit-calc(100% - 42px);
max-width: -moz-calc(100% - 42px);
max-width: calc(100% - 42px); /*(2)*/
max-height: 300px;
word-wrap: break-word;
border-bottom-color: #ddd;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #eee;
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #eee;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px #eee;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please revert whitespace changes and just add the two box-shadow rules

box-shadow: 0 1px 3px #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#mocha .test .html-error pre.error {
border: none;
-webkit-border-radius: none;
-webkit-box-shadow: none;
-moz-border-radius: none;
-moz-box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
padding: 0;
margin: 0;
margin-top: 18px;
Expand All @@ -185,14 +190,17 @@ body {
padding: 15px;
border: 1px solid #eee;
max-width: 85%; /*(1)*/
max-width: -webkit-calc(100% - 42px);
max-width: -moz-calc(100% - 42px);
max-width: calc(100% - 42px); /*(2)*/
word-wrap: break-word;
border-bottom-color: #ddd;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #eee;
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #eee;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px #eee;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above

box-shadow: 0 1px 3px #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#mocha .test h2 {
Expand All @@ -212,10 +220,12 @@ body {
text-align: center;
background: #eee;
font-size: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition:opacity 200ms;
-moz-transition:opacity 200ms;
-o-transition:opacity 200ms;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why opera here and nowhere else?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good question; I was respecting the opera reference in another line (line 99 -o-border-radius: 5px;); It's not consistent with other references to border-radius, but I erred on the side of caution. Lowest common denominator, I thought if the file supports vendor prefixes for the era of Opera 11.5 --when Opera standardized their css for border radius and dropped the need for the -o prefix; at that time, the -o prefix for transition was also required (until version 15) but not for box-shadow. Opera is now at version 38, but as mocha is so widely used, I didn't want to remove support, but ensure it.

I had go to cast a wide net on the settings at autoprefixer for the Opera settings to show up, using > .04%, last 30 versions (Browsers with more than .04% share, plus back 30 versions). It's likely safe to remove the prefix considering the developer audience. Supporting the last 10 versions with browsers more than 1% share, it's now safe to drop most -moz and -o prefixes, but I didn't feel it was my place to make that choice.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah that all went way over my head. I'm convinced!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first, I didn't know why the hell that one prefix was hanging out there either; I was probably as surprised as you that it wasn't my mistake.😂

transition: opacity 200ms;
opacity: 0.3;
color: #888;
Expand Down Expand Up @@ -261,14 +271,16 @@ body {
#mocha-stats .progress {
float: right;
padding-top: 0;

/**
* Set safe initial values, so mochas .progress does not inherit these
* properties from Bootstrap .progress (which causes .progress height to
* equal line height set in Bootstrap).
*/
height: auto;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: initial;
}

Expand Down