Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(code-switch): adjust styling based on Malins new suggestion

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-09 11:42:14 +02:00
committed by Benedikt Rötsch
parent 6d55102c16
commit 8e6171cb74
3 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/stylesheets/lesson/index.css
View File

@@ -1,4 +1,4 @@
.lesson-module { @block lesson-module {
margin-top: var(--grid-gutter); margin-top: var(--grid-gutter);
& img { & img {
@@ -26,16 +26,17 @@
@element trigger { @element trigger {
display: inline-block; display: inline-block;
height: 30px;
padding: 0 1em; padding: 0 1em;
margin-right: 1em; margin-right: 1em;
background: var(--code-trigger-bg); background: var(--code-trigger-bg);
border-top-left-radius: var(--border-radius); border-top: 3px solid transparent;
border-top-right-radius: var(--border-radius);
line-height: 30px;
font-family: var(--font-medium); font-family: var(--font-medium);
font-size: 0.7em; font-size: 0.875em;
color: var(--code-trigger-color); color: var(--code-trigger-color);
cursor: pointer; cursor: pointer;
@@ -45,10 +46,15 @@
margin-right: 0; margin-right: 0;
} }
&:hover {
color: var(--color-link-content-hover);
}
@modifier active { @modifier active {
background: var(--code-trigger-bg-active); background: var(--code-trigger-bg-active);
color: var(--code-trigger-color-active); color: var(--code-trigger-color-active) !important;
cursor: default; cursor: default;
border-color: var(--code-trigger-border-active);
} }
} }

7
assets/stylesheets/variables.css
View File

@@ -65,8 +65,9 @@
--module-copy-emphasized-cta-color: #fff; --module-copy-emphasized-cta-color: #fff;
--code-bg: var(--color-bg-grey); --code-bg: var(--color-bg-grey);
--code-trigger-bg: color(var(--color-bg-grey) shade(20%)); --code-trigger-bg: #fff;
--code-trigger-bg-active: var(--code-bg); --code-trigger-bg-active: var(--code-bg);
--code-trigger-color: #fff; --code-trigger-color: var(--color-text-grey);
--code-trigger-color-active: var(--color-text-dark-bg-grey); --code-trigger-color-active: var(--color-text-default);
--code-trigger-border-active: #c3cfd5;
} }

20
public/stylesheets/style.css
View File

@@ -2137,7 +2137,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
} }
.lesson-module { .lesson-module {
margin-top: 22px margin-top: 22px;
} }
.lesson-module img { .lesson-module img {
@@ -2166,17 +2166,18 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.lesson-module-code__trigger { .lesson-module-code__trigger {
display: inline-block; display: inline-block;
height: 30px;
padding: 0 1em; padding: 0 1em;
margin-right: 1em; margin-right: 1em;
background: rgb(198, 199, 200); background: #fff;
border-top-left-radius: 4px; border-top: 3px solid transparent;
border-top-right-radius: 4px;
line-height: 30px;
font-family: 'robotomedium', Helvetica, sans-serif; font-family: 'robotomedium', Helvetica, sans-serif;
font-size: 0.7em; font-size: 0.875em;
color: #fff; color: #8091a5;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
@@ -2189,10 +2190,15 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
margin-right: 0; margin-right: 0;
} }
.lesson-module-code__trigger:hover {
color: #3c80cf;
}
.lesson-module-code__trigger--active { .lesson-module-code__trigger--active {
background: #f7f9fa; background: #f7f9fa;
color: #a9b9c0; color: #536171 !important;
cursor: default; cursor: default;
border-color: #c3cfd5;
} }
.lesson-module-code__code { .lesson-module-code__code {