2016-02-04 16:24:09 +00:00
|
|
|
.challenge-step-description {
|
|
|
|
font-size: 1.5em;
|
|
|
|
}
|
|
|
|
.challenge-step-counter {
|
|
|
|
font-size: 20px;
|
|
|
|
line-height: 44px;
|
|
|
|
}
|
|
|
|
|
2016-03-09 22:43:48 +00:00
|
|
|
.challenge-step-forward-leave {
|
|
|
|
transition: opacity .4s ease-in, transform .3s ease-in-out;
|
|
|
|
opacity: 1;
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-forward-leave-active {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translate(-100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-forward-enter {
|
|
|
|
transition: opacity .4s ease-in, transform .3s ease-in-out;
|
|
|
|
opacity: 0;
|
|
|
|
transform: translate(100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-forward-enter-active {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-backward-leave {
|
|
|
|
transition: opacity .4s ease-in, transform .3s ease-in-out;
|
|
|
|
opacity: 1;
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-backward-leave-active {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translate(100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-backward-enter {
|
|
|
|
transition: opacity .4s ease-in, transform .3s ease-in-out;
|
|
|
|
opacity: 0;
|
|
|
|
transform: translate(-100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-step-backward-enter-active {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
|
2016-02-04 16:24:09 +00:00
|
|
|
.challenge-instructions-title {
|
|
|
|
margin-top: 0;
|
|
|
|
i {
|
|
|
|
margin-left: 5px;
|
|
|
|
line-height: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.challenge-instructions {
|
|
|
|
margin-bottom: 5px;
|
|
|
|
h4 {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
blockquote {
|
|
|
|
font-size: 90%;
|
|
|
|
font-family: @font-family-monospace;
|
|
|
|
color: @code-color;
|
|
|
|
background-color: #fffbe5;
|
|
|
|
border-radius: @border-radius-base;
|
|
|
|
border: 1px solid @pre-border-color;
|
|
|
|
white-space: pre;
|
|
|
|
padding: 5px 10px;
|
|
|
|
margin-bottom: 10px;
|
2016-04-08 22:13:41 +00:00
|
|
|
margin-top: -5px;
|
2016-02-04 16:24:09 +00:00
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
dfn {
|
|
|
|
font-family: @font-family-monospace;
|
|
|
|
color: @code-color;
|
|
|
|
background-color: @code-bg;
|
|
|
|
border-radius: @border-radius-base;
|
|
|
|
}
|
|
|
|
& a, #MDN-links a {
|
|
|
|
color: #31708f;
|
|
|
|
}
|
|
|
|
& a::after, #MDN-links a::after {
|
|
|
|
font-size: 70%;
|
|
|
|
font-family: FontAwesome;
|
|
|
|
content: " \f08e";
|
|
|
|
}
|
|
|
|
ol {
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-03-06 05:06:04 +00:00
|
|
|
.challenge-test-suite {
|
2016-02-04 16:24:09 +00:00
|
|
|
margin-top: 10px;
|
2016-03-06 05:06:04 +00:00
|
|
|
& .row {
|
2016-02-04 16:24:09 +00:00
|
|
|
margin: 0!important;
|
|
|
|
}
|
2015-12-21 17:27:04 +00:00
|
|
|
}
|
|
|
|
|
2016-02-04 16:24:09 +00:00
|
|
|
.test-output {
|
|
|
|
font-size: 15px;
|
|
|
|
font-family: "Ubuntu Mono";
|
|
|
|
margin-top: 8px;
|
|
|
|
line-height:20px;
|
2015-12-21 17:27:04 +00:00
|
|
|
}
|
|
|
|
|
2016-02-04 16:24:09 +00:00
|
|
|
.grayed-out-test-output {
|
|
|
|
color: @gray-light;
|
2015-12-21 17:27:04 +00:00
|
|
|
}
|
2016-01-12 18:03:25 +00:00
|
|
|
|
2016-05-14 03:04:56 +00:00
|
|
|
.big-icon {
|
2016-02-04 16:24:09 +00:00
|
|
|
font-size: 30px;
|
2016-05-14 03:04:56 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.error-icon {
|
2016-02-04 16:24:09 +00:00
|
|
|
color: @brand-danger;
|
2016-05-14 03:04:56 +00:00
|
|
|
top: 50%;
|
2016-01-12 18:03:25 +00:00
|
|
|
}
|
|
|
|
|
2016-05-14 03:04:56 +00:00
|
|
|
.success-icon {
|
2016-02-04 16:24:09 +00:00
|
|
|
color: @brand-primary;
|
2016-01-12 18:03:25 +00:00
|
|
|
}
|
|
|
|
|
2016-05-14 03:04:56 +00:00
|
|
|
.refresh-icon {
|
|
|
|
color: @alert-info-bg;
|
|
|
|
}
|
|
|
|
|
2016-02-04 16:24:09 +00:00
|
|
|
iframe.iphone {
|
|
|
|
border: none;
|
|
|
|
@media(min-width: 992px) {
|
|
|
|
width: 280px;
|
|
|
|
height: 500px;
|
|
|
|
position: absolute;
|
|
|
|
top: 70px;
|
|
|
|
right: 35px;
|
|
|
|
overflow-y: scroll;
|
|
|
|
}
|
|
|
|
@media(max-width: 991px) {
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 5px;
|
|
|
|
overflow-y: visible;
|
|
|
|
height: 500px;
|
|
|
|
}
|
|
|
|
@media (min-width: 1200px) and (max-width: 1250px){
|
2016-04-03 03:52:52 +00:00
|
|
|
right: 22px;
|
2016-02-04 16:24:09 +00:00
|
|
|
}
|
2016-01-19 09:41:53 +00:00
|
|
|
}
|
2016-01-12 18:03:25 +00:00
|
|
|
|
2016-02-04 16:24:09 +00:00
|
|
|
// To adjust right margin, negative values bring the image closer to the edge of the screen
|
|
|
|
.iphone-position {
|
|
|
|
position: absolute;
|
|
|
|
top: -50px;
|
|
|
|
z-index: -1;
|
|
|
|
right: -195px;
|
|
|
|
@media (min-width: 1200px) and (max-width: 1250px){
|
2016-04-03 03:52:52 +00:00
|
|
|
right: -207px;
|
2016-02-04 16:24:09 +00:00
|
|
|
}
|
|
|
|
}
|
2016-04-08 22:13:41 +00:00
|
|
|
|
|
|
|
.night {
|
|
|
|
.challenge-instructions blockquote {
|
|
|
|
background-color: #242424;
|
|
|
|
border-color: #515151;
|
|
|
|
color: #ABABAB
|
|
|
|
}
|
2016-03-09 22:43:48 +00:00
|
|
|
.CodeMirror {
|
2016-04-08 22:13:41 +00:00
|
|
|
background-color:#242424;
|
|
|
|
color:#ABABAB;
|
|
|
|
&-gutters {
|
|
|
|
background-color:#242424;
|
|
|
|
color:#ABABAB;
|
|
|
|
}
|
|
|
|
.cm-bracket, .cm-tag {
|
|
|
|
color:#5CAFD6;
|
|
|
|
}
|
|
|
|
.cm-property, .cm-string {
|
|
|
|
color:#B5753A;
|
|
|
|
}
|
|
|
|
.cm-keyword, .cm-attribute {
|
|
|
|
color:#9BBBDC;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|