moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed checkbox styles, optimized default shadows

This commit is contained in:
Henry Jameson 2018-11-23 00:24:16 +03:00
parent d6f7cb469c
commit 29082e9aee
3 changed files with 20 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.scss
View File

@ -58,8 +58,6 @@ button {
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer;
/* border-top: 1px solid rgba(255, 255, 255, 0.2); */
/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 2px black;
box-shadow: var(--buttonShadow);
font-size: 14px;
@ -80,8 +78,7 @@ button {
}
&:active {
/* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
/* border-top: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: var(--buttonPressedShadow);
}
&:disabled {
@ -106,8 +103,6 @@ input, textarea, .select {
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
/* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
/* border-top: 1px solid rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
@ -184,8 +179,6 @@ input, textarea, .select {
height: 1.1em;
border-radius: $fallback--checkBoxRadius;
border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
margin-right: .5em;

6
src/components/tab_switcher/tab_switcher.scss
View File

@ -34,13 +34,13 @@
border-bottom-right-radius: 0;
padding: 5px 1em 99px;
&:not(.active) {
z-index: 4;
&:hover {
z-index: 6;
}
&:not(.active) {
z-index: 4;
&::after {
content: '';
position: absolute;

50
src/services/style_setter/style_setter.js
View File

@ -256,40 +256,26 @@ const generateRadii = (input) => {
}
const generateShadows = (input) => {
const buttonInsetFakeBorders = [{
const border = (top, shadow) => ({
x: 0,
y: 1,
y: top ? 1 : -1,
blur: 0,
spread: 0,
color: '#FFFFFF',
color: shadow ? '#000000' : '#FFFFFF',
alpha: 0.2,
inset: true
}, {
})
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
const inputInsetFakeBorders = [border(true, true), border(false, false)]
const hoverGlow = {
x: 0,
y: -1,
blur: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.2,
inset: true
}]
const inputInsetFakeBorders = [{
x: 0,
y: 1,
blur: 0,
spread: 0,
color: '#000000',
alpha: 0.2,
inset: true
}, {
x: 0,
y: -1,
blur: 0,
spread: 0,
color: '#FFFFFF',
alpha: 0.2,
inset: true
}]
color: '--faint',
alpha: 1
}
const shadows = {
panel: [{
x: 1,
@ -332,14 +318,8 @@ const generateShadows = (input) => {
color: '#000000',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '--faint',
alpha: 1
}, ...buttonInsetFakeBorders],
buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
input: [...inputInsetFakeBorders, {
x: 0,
y: 0,