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

40
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');
cursor: pointer; color: getThemifyVariable('button-color');
border: 1px solid $light-button-border-color; cursor: pointer;
border-radius: 2px; border: 1px solid getThemifyVariable('button-border-color');
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem; border-radius: 2px;
&:hover { padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
border-color: $light-button-background-hover-color; &:hover {
background-color: $light-button-background-hover-color; border-color: getThemifyVariable('button-background-hover-color');
color: $light-button-hover-color; background-color: getThemifyVariable('button-background-hover-color');
} color: getThemifyVariable('button-hover-color');
&:active { }
border-color: $light-button-background-active-color; &:active {
background-color: $light-button-background-active-color; border-color: getThemifyVariable('button-background-active-color');
color: $light-button-active-color; background-color: getThemifyVariable('button-background-active-color');
color: getThemifyVariable('button-active-color');
}
} }
} }

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

@ -42,7 +42,9 @@ input {
} }
input[type="submit"] { input[type="submit"] {
@extend %button; @include themify() {
@extend %button;
}
} }
h2 { h2 {

14
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 & { }
display: none; .preview-console--collapsed & {
} display: none;
} }
} }
.preview-console__expand { .preview-console__expand {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
display: none; }
.preview-console--collapsed & { display: none;
display: inline-block; .preview-console--collapsed & {
} display: inline-block;
} }
} }

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

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

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

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

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

@ -20,13 +20,9 @@
.sidebar__add { .sidebar__add {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
cursor: pointer; }
// height: #{26 / $base-font-size}rem; .sidebar--contracted & {
// margin-right: #{16 / $base-font-size}rem; display: none;
// font-size: #{24 / $base-font-size}rem;
.sidebar--contracted & {
display: none;
}
} }
} }
@ -95,12 +91,12 @@
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
display: none; }
position: absolute; display: none;
right: #{26 / $base-font-size}rem; position: absolute;
.sidebar__file-item--selected > .file-item__content & { right: #{26 / $base-font-size}rem;
display: inline-block; .sidebar__file-item--selected > .file-item__content & {
} display: inline-block;
} }
} }
@ -131,31 +127,31 @@
} }
} }
.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;
& svg {
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
& svg { }
height: #{14 / $base-font-size}rem; display: none;
} .sidebar--contracted & {
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; display: none;
.sidebar--contracted & {
display: inline-block;
}
} }
} }

10
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;
& g {
fill: $toast-text-color;
}
margin-left: #{10 / $base-font-size}rem;
} }
color: $toast-text-color;
& g {
fill: $toast-text-color;
}
margin-left: #{10 / $base-font-size}rem;
} }