subtype/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fixed checkbox styles, optimized default shadows

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

8
src/components/tab_switcher/tab_switcher.scss
View file

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

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

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