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 {
@include themify() {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
color: getThemifyVariable('icon-color');
& g {
fill: getThemifyVariable('icon-color');
@ -49,24 +45,30 @@
}
}
}
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
}
%button {
background-color: $light-button-background-color;
color: $light-button-color;
cursor: pointer;
border: 1px solid $light-button-border-color;
border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:hover {
border-color: $light-button-background-hover-color;
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
}
&:active {
border-color: $light-button-background-active-color;
background-color: $light-button-background-active-color;
color: $light-button-active-color;
@include themify() {
background-color: getThemifyVariable('button-background-color');
color: getThemifyVariable('button-color');
cursor: pointer;
border: 1px solid getThemifyVariable('button-border-color');
border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:hover {
border-color: getThemifyVariable('button-background-hover-color');
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color');
}
&:active {
border-color: getThemifyVariable('button-background-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"] {
@extend %button;
@include themify() {
@extend %button;
}
}
h2 {

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

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

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

@ -64,11 +64,11 @@
.editor__options-button {
@include themify() {
@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 {

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

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

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

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

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

@ -12,10 +12,10 @@
.toast__close {
@include themify() {
@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;
}