r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix some specificity issues

Browse source
This commit is contained in:
catarak 2016-09-13 17:05:42 -04:00 committed by Cassie Tarakajian
parent 19df6d6ee4
commit c9b2d178b2
8 changed files with 86 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
client/styles/abstracts/_placeholders.scss
View file

@ -33,10 +33,6 @@
%icon { %icon {
@include themify() { @include themify() {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: getThemifyVariable('icon-color'); color: getThemifyVariable('icon-color');
& g { & g {
fill: getThemifyVariable('icon-color'); fill: getThemifyVariable('icon-color');
@ -49,24 +45,30 @@
} }
} }
} }
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
} }
%button { %button {
background-color: $light-button-background-color; @include themify() {
color: $light-button-color; background-color: getThemifyVariable('button-background-color');
color: getThemifyVariable('button-color');
cursor: pointer; cursor: pointer;
border: 1px solid $light-button-border-color; border: 1px solid getThemifyVariable('button-border-color');
border-radius: 2px; border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:hover { &:hover {
border-color: $light-button-background-hover-color; border-color: getThemifyVariable('button-background-hover-color');
background-color: $light-button-background-hover-color; background-color: getThemifyVariable('button-background-hover-color');
color: $light-button-hover-color; color: getThemifyVariable('button-hover-color');
} }
&:active { &:active {
border-color: $light-button-background-active-color; border-color: getThemifyVariable('button-background-active-color');
background-color: $light-button-background-active-color; background-color: getThemifyVariable('button-background-active-color');
color: $light-button-active-color; color: getThemifyVariable('button-active-color');
}
} }
} }

2
client/styles/base/_base.scss
View file

@ -42,8 +42,10 @@ input {
} }
input[type="submit"] { input[type="submit"] {
@include themify() {
@extend %button; @extend %button;
} }
}
h2 { h2 {
font-size: #{21 / $base-font-size}em; font-size: #{21 / $base-font-size}em;

4
client/styles/components/_console.scss
View file

@ -53,18 +53,18 @@
.preview-console__collapse { .preview-console__collapse {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
.preview-console--collapsed & { .preview-console--collapsed & {
display: none; display: none;
} }
} }
}
.preview-console__expand { .preview-console__expand {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
display: none; display: none;
.preview-console--collapsed & { .preview-console--collapsed & {
display: inline-block; display: inline-block;
} }
} }
}

2
client/styles/components/_editor.scss
View file

@ -64,12 +64,12 @@
.editor__options-button { .editor__options-button {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
position: absolute; position: absolute;
top: #{5 / $base-font-size}rem; top: #{5 / $base-font-size}rem;
right: #{5 / $base-font-size}rem; right: #{5 / $base-font-size}rem;
z-index: 1; z-index: 1;
} }
}
.editor__options { .editor__options {
display: none; display: none;

8
client/styles/components/_github-button.scss
View file

@ -1,18 +1,20 @@
.github-button { .github-button {
@include themify() {
@extend %button; @extend %button;
width: #{300 / $base-font-size}rem; width: #{300 / $base-font-size}rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
& path { & path {
color: $light-primary-text-color; color: getThemifyVariable('primary-text-color');
} }
&:hover path, &:active path { &:hover path, &:active path {
fill: $white; fill: $white;
} }
&:hover, &:active { &:hover, &:active {
background-color: $light-secondary-text-color; background-color: getThemifyVariable('secondary-text-color');
border-color: $light-secondary-text-color border-color: getThemifyVariable('secondary-text-color');
}
} }
} }

2
client/styles/components/_preferences.scss
View file

@ -15,8 +15,8 @@
.preferences__exit-button { .preferences__exit-button {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
padding-top: #{5 / $base-font-size}rem;
} }
padding-top: #{5 / $base-font-size}rem;
} }
.preference__plus-button { .preference__plus-button {

36
client/styles/components/_sidebar.scss
View file

@ -20,15 +20,11 @@
.sidebar__add { .sidebar__add {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
cursor: pointer; }
// height: #{26 / $base-font-size}rem;
// margin-right: #{16 / $base-font-size}rem;
// font-size: #{24 / $base-font-size}rem;
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;
} }
} }
}
.sidebar__file-list { .sidebar__file-list {
border-top: 1px solid $ide-border-color; border-top: 1px solid $ide-border-color;
@ -95,6 +91,7 @@
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
display: none; display: none;
position: absolute; position: absolute;
right: #{26 / $base-font-size}rem; right: #{26 / $base-font-size}rem;
@ -102,7 +99,6 @@
display: inline-block; display: inline-block;
} }
} }
}
.sidebar__file-item-options { .sidebar__file-item-options {
@extend %modal; @extend %modal;
@ -131,23 +127,10 @@
} }
} }
.sidebar__contract {
@include themify() {
@extend %icon;
margin-left: #{10 / $base-font-size}rem;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
}
.sidebar--contracted & {
display: none;
}
}
}
.sidebar__expand { .sidebar__expand {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
& svg { & svg {
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
@ -157,6 +140,19 @@
display: inline-block; display: inline-block;
} }
} }
.sidebar__contract {
@include themify() {
@extend %icon;
}
margin-left: #{10 / $base-font-size}rem;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
}
.sidebar--contracted & {
display: none;
}
} }
.sidebar__icons { .sidebar__icons {

2
client/styles/components/_toast.scss
View file

@ -12,10 +12,10 @@
.toast__close { .toast__close {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
}
color: $toast-text-color; color: $toast-text-color;
& g { & g {
fill: $toast-text-color; fill: $toast-text-color;
} }
margin-left: #{10 / $base-font-size}rem; margin-left: #{10 / $base-font-size}rem;
} }
}