Flat design

This commit is contained in:
Eduard Urbach 2017-06-25 23:07:14 +02:00
parent 9988bf7315
commit da6b250f39
10 changed files with 55 additions and 71 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 50 KiB

View File

@ -8,11 +8,18 @@
.forum-tag .forum-tag
color text-color !important color text-color !important
:hover
color white !important :hover,
&.active &.active
color white !important color white !important
background-color link-hover-color background-color forum-tag-hover-color !important
// color text-color !important
// :hover
// color white !important
// &.active
// color white !important
// background-color link-hover-color
< 920px < 920px
.forum-tag .forum-tag

View File

@ -80,6 +80,10 @@ profile-boot-duration = 2s
padding-left calc(content-padding * 2) padding-left calc(content-padding * 2)
max-width 900px max-width 900px
.website
a
color white
#nick #nick
margin-bottom 1rem margin-bottom 1rem

View File

@ -1,46 +0,0 @@
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main
outline 0
border 0
font-size 100%
font inherit
vertical-align baseline
background transparent
html
box-sizing border-box
textarea
resize vertical
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
display block
body
line-height 1
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
ol, ul
list-style none
blockquote, q
quotes none
blockquote:before, blockquote:after, q:before, q:after
content ''
content none
table
border-collapse collapse
border-spacing 0
audio, canvas, img, video, input, select
vertical-align middle
:focus
outline 0
*
margin 0
padding 0
box-sizing inherit

View File

@ -8,6 +8,7 @@ body
overflow hidden overflow hidden
height 100% height 100%
color text-color color text-color
background-color bg-color
a a
color link-color color link-color
@ -21,8 +22,8 @@ a
:active :active
transform translateY(3px) transform translateY(3px)
&.active // &.active
color link-active-color // color link-active-color
strong strong
font-weight bold font-weight bold

View File

@ -1,19 +1,28 @@
// Colors // Colors
text-color = rgb(60, 60, 60) text-color = rgb(60, 60, 60)
main-color = rgb(248, 165, 130) main-color = rgb(225, 38, 15)
link-color = rgb(225, 38, 15) link-color = main-color
link-hover-color = rgb(242, 60, 30) link-hover-color = rgb(242, 60, 30)
link-active-color = rgb(100, 149, 237) link-active-color = link-hover-color
post-highlight-color = rgba(248, 165, 130, 0.7) post-highlight-color = rgba(248, 165, 130, 0.7)
bg-color = white bg-color = rgb(246, 246, 246)
// UI // UI
ui-border = 1px solid rgba(0, 0, 0, 0.1) ui-border = 1px solid rgba(0, 0, 0, 0.1)
ui-hover-border = 1px solid rgba(0, 0, 0, 0.15) ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) ui-background = rgb(254, 254, 254)
ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) ui-hover-background = rgb(255, 255, 255)
// ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
// ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
ui-disabled-color = rgb(224, 224, 224) ui-disabled-color = rgb(224, 224, 224)
// Input
input-focus-border-color = rgb(248, 165, 130)
// Button
button-hover-color = link-hover-color
forum-tag-hover-color = rgb(46, 85, 160)
// Forum // Forum
forum-width = 830px forum-width = 830px
@ -21,9 +30,10 @@ forum-width = 830px
avatar-size = 50px avatar-size = 50px
// Navigation // Navigation
nav-color = rgb(60, 60, 60) nav-color = text-color
nav-link-color = rgb(160, 160, 160) nav-link-color = rgba(255, 255, 255, 0.5)
nav-link-hover-color = rgb(255, 255, 255) nav-link-hover-color = white
nav-link-hover-slide-color = rgb(248, 165, 130)
// nav-color = rgb(245, 245, 245) // nav-color = rgb(245, 245, 245)
// nav-link-color = rgb(160, 160, 160) // nav-link-color = rgb(160, 160, 160)
// nav-link-hover-color = rgb(80, 80, 80) // nav-link-hover-color = rgb(80, 80, 80)
@ -40,7 +50,7 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
// Distances // Distances
content-padding = 1.6rem content-padding = 1.6rem
content-padding-top = 1.6rem content-padding-top = 1.6rem
hover-line-size = 2px hover-line-size = 3px
nav-height = 3.11rem nav-height = 3.11rem
// Timings // Timings

View File

@ -1,7 +1,7 @@
mixin input-focus mixin input-focus
:focus :focus
color black color black
border 1px solid main-color border 1px solid input-focus-border-color
// TODO: Replace with alpha(main-color, 20%) function // TODO: Replace with alpha(main-color, 20%) function
box-shadow 0 0 6px rgba(248, 165, 130, 0.2) box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
@ -18,11 +18,15 @@ input, textarea
box-shadow none box-shadow none
input-focus input-focus
:active
transform translateY(3px)
:disabled :disabled
ui-disabled ui-disabled
// We need this to have a selector with a higher priority than .widget-element:focus // We need this to have a selector with a higher priority than .widget-element:focus
input.widget-element input.widget-element,
textarea.widget-element
input-focus input-focus
button, .button button, .button
@ -33,10 +37,11 @@ button, .button
padding 0.75rem 1rem padding 0.75rem 1rem
color link-color color link-color
:hover :hover,
&.active
cursor pointer cursor pointer
color white color white
background-color link-hover-color background-color button-hover-color
:active :active
transform translateY(3px) transform translateY(3px)

View File

@ -12,8 +12,8 @@
:after :after
content "" content ""
display block display block
height 3px height hover-line-size
background-color main-color background-color nav-link-hover-slide-color
transform scaleX(0) transform scaleX(0)
opacity 0 opacity 0
default-transition default-transition
@ -45,13 +45,16 @@
#search #search
display none display none
border-radius 0 border-radius 0
background text-color background transparent
border none border none
color white color nav-link-hover-color
font-size 1em font-size 1em
min-width 0 min-width 0
::placeholder
color nav-link-color
:focus :focus
border none border none
box-shadow none box-shadow none

View File

@ -20,4 +20,4 @@ th
tbody tbody
tr tr
:hover :hover
background-color rgba(0, 0, 0, 0.03) background-color rgba(0, 0, 0, 0.015)

View File

@ -12,7 +12,7 @@
.widget-element .widget-element
vertical-wrap vertical-wrap
ui-element ui-element
transition border transition-speed ease, background transition-speed ease, transform transition-speed ease transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, transform color ease
margin-bottom 1rem margin-bottom 1rem
padding 0.5rem 1rem padding 0.5rem 1rem
width 100% width 100%