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

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,11 +64,11 @@
.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 {

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,14 +20,10 @@
.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 {
@ -95,13 +91,13 @@
.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;
.sidebar__file-item--selected > .file-item__content & { .sidebar__file-item--selected > .file-item__content & {
display: inline-block; display: inline-block;
} }
}
} }
.sidebar__file-item-options { .sidebar__file-item-options {
@ -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;
@ -156,6 +139,19 @@
.sidebar--contracted & { .sidebar--contracted & {
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;
} }
} }

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;
}
} }