Implemented most of the styles in scarlet now

2016-12-02 15:24:45 +09:00
parent 31dfc47d5c
commit 59ef1f53f2
38 changed files with 126 additions and 1191 deletions
--- a/styles/include/config.scarlet
+++ b/styles/include/config.scarlet
@ -0,0 +1,41 @@
+// Colors
+text-color = rgb(60, 60, 60)
+main-color = rgb(248, 165, 130)
+link-color = rgb(245, 126, 76)
+link-hover-color = rgb(242, 93, 30)
+link-active-color = rgb(100, 149, 237)
+post-highlight-color = rgba(248, 165, 130, 0.7)
+
+// UI
+ui-border = 1px solid rgba(0, 0, 0, 0.1)
+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-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)
+
+// Navigation
+nav-color = rgb(60, 60, 60)
+nav-link-color = rgb(160, 160, 160)
+nav-link-hover-color = rgb(255, 255, 255)
+// nav-color = rgb(245, 245, 245)
+// nav-link-color = rgb(160, 160, 160)
+// nav-link-hover-color = rgb(80, 80, 80)
+
+// Shadow
+shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
+shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.13)
+
+// Outline shadow
+outline-shadow-light = 0 0 6px rgba(0, 0, 0, 0.05)
+outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13)
+outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
+
+// Distances
+content-padding = 1.6rem
+content-padding-top = 2rem
+hover-line-size = 2px
+nav-height = 3.11rem
+
+// Timings
+fade-speed = 200ms
+transition-speed = 290ms
--- a/styles/include/mixins.scarlet
+++ b/styles/include/mixins.scarlet
@ -0,0 +1,62 @@
+mixin default-transition
+	transition all transition-speed ease
+
+mixin horizontal
+	display flex
+	flex-direction row
+
+mixin horizontal-wrap
+	display flex
+	flex-flow row wrap
+
+mixin vertical
+	display flex
+	flex-direction column
+
+mixin vertical-wrap
+	display flex
+	flex-flow column wrap
+
+mixin ui-element
+	border ui-border
+	background ui-background
+	border-radius 3px
+	default-transition
+	:hover
+		border ui-hover-border
+		background ui-hover-background
+		box-shadow outline-shadow-medium
+
+mixin ui-disabled
+	background-color ui-disabled-color
+	cursor not-allowed
+
+mixin light-up
+	filter brightness(0.4) saturate(1)
+	:hover
+		filter brightness(1) saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin scale-up
+	transform scale(1)
+	:hover
+		transform scale(1.08)
+
+mixin shadow-up
+	box-shadow shadow-light
+	:hover
+		box-shadow shadow-medium
+
+mixin outline-shadow-up
+	box-shadow outline-shadow-light
+	:hover
+		box-shadow outline-shadow-medium