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 {
@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;
@include themify() {
background-color: getThemifyVariable('button-background-color');
color: getThemifyVariable('button-color');
cursor: pointer;
border: 1px solid $light-button-border-color;
border: 1px solid getThemifyVariable('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;
border-color: getThemifyVariable('button-background-hover-color');
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color');
}
&:active {
border-color: $light-button-background-active-color;
background-color: $light-button-background-active-color;
color: $light-button-active-color;
border-color: getThemifyVariable('button-background-active-color');
background-color: getThemifyVariable('button-background-active-color');
color: getThemifyVariable('button-active-color');
}
}
}

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

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

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

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

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

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

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

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

@ -20,15 +20,11 @@
.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__file-list {
border-top: 1px solid $ide-border-color;
@ -95,6 +91,7 @@
.sidebar__file-item-show-options {
@include themify() {
@extend %icon;
}
display: none;
position: absolute;
right: #{26 / $base-font-size}rem;
@ -102,7 +99,6 @@
display: inline-block;
}
}
}
.sidebar__file-item-options {
@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 {
@include themify() {
@extend %icon;
}
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
@ -157,6 +140,19 @@
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 {

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