web/notify.moe
Code Issues Pull Requests Activity

Split mixins into multiple files

Browse Source
This commit is contained in:
Eduard Urbach 2018-04-07 15:48:43 +02:00
parent ed1d375c63
commit 62875b8dd4
11 changed files with 153 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config.json
View File

@ -7,7 +7,13 @@
"styles": [
"include/config",
"include/dark",
"include/mixins",
"mixins/layout",
"mixins/utils",
"mixins/effects",
"mixins/ui",
"mixins/sidebar",
"mixins/anime-grid",
"mixins/feature-card",
"reset",
"base",
"typography",

10
pages/editor/editor.pixy
View File

@ -12,6 +12,16 @@ component Editor(url string, score int, scoreTitle string, scoreTypes map[string
.feature-card-icon
RawIcon("tv")
p.feature-card-text Anime
a.feature-card.mountable(href="/editor/tracks")
.feature-card-icon
RawIcon("music")
p.feature-card-text SoundTracks
a.feature-card.mountable(href="/editor/companies")
.feature-card-icon
RawIcon("building-o")
p.feature-card-text Companies
//- .footer
//- for objectType, score := range scoreTypes

4
pages/support/support.scarlet
View File

@ -53,9 +53,7 @@
font-weight bold
.payment-amount-converted
font-size 0.9rem
opacity 0.5
margin-top 0
feature-card-footer
.feature-cards-alternative-color
.feature-card-icon,

136
styles/include/mixins.scarlet
View File

@ -1,136 +0,0 @@
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 horizontal-wrap-center
horizontal-wrap
justify-content center
mixin vertical
display flex
flex-direction column
mixin vertical-wrap
display flex
flex-flow column wrap
mixin vertical-wrap-center
horizontal-wrap
align-items center
mixin noise-light
background-image url("//media.notify.moe/images/elements/noise-light.png")
mixin noise-strong
background-image url("//media.notify.moe/images/elements/noise-strong.png")
mixin ui-element
border 1px solid ui-border-color
background ui-background
border-radius ui-element-border-radius
default-transition
:hover
border-color ui-hover-border-color
// background ui-hover-background
// box-shadow outline-shadow-medium
mixin ui-disabled
background-color ui-disabled-color
cursor not-allowed
mixin clip-long-text
overflow hidden
white-space nowrap
text-overflow ellipsis
mixin anime-mini-item
margin 0.25rem
mixin anime-generic-item-image
object-fit cover
border-radius 2px
filter none
transition filter transition-speed ease, opacity transition-speed ease
:hover
filter saturate(1.3)
mixin anime-mini-item-image
width anime-image-small-width !important
height anime-image-small-height !important
anime-generic-item-image
// Make it easier for the browser to layout by specifying max size as well
max-width anime-image-small-width
max-height anime-image-small-height
mixin anime-list-item-image
width anime-image-tiny-width
height anime-image-tiny-height
border-radius 2px
object-fit cover
// Make it easier for the browser to layout by specifying max size as well
max-width anime-image-tiny-width
max-height anime-image-tiny-height
mixin sidebar
vertical
margin-left 0
margin-top 1rem
flex-shrink 0
mixin sidebar-medium
margin-left content-padding
margin-top 0
flex-basis 270px
mixin sidebar-big
flex-basis 300px
mixin bg-dark-up
background-color transparent
:hover
background-color rgba(0, 0, 0, 0.015)
mixin bg-light-up
background-color transparent
:hover
background-color rgba(255, 255, 255, 0.015)
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.056338)
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

30
styles/mixins/anime-grid.scarlet Normal file
View File

@ -0,0 +1,30 @@
mixin anime-mini-item
margin 0.25rem
mixin anime-generic-item-image
object-fit cover
border-radius 2px
filter none
transition filter transition-speed ease, opacity transition-speed ease
:hover
filter saturate(1.3)
mixin anime-mini-item-image
width anime-image-small-width !important
height anime-image-small-height !important
anime-generic-item-image
// Make it easier for the browser to layout by specifying max size as well
max-width anime-image-small-width
max-height anime-image-small-height
mixin anime-list-item-image
width anime-image-tiny-width
height anime-image-tiny-height
border-radius 2px
object-fit cover
// Make it easier for the browser to layout by specifying max size as well
max-width anime-image-tiny-width
max-height anime-image-tiny-height

39
styles/mixins/effects.scarlet Normal file
View File

@ -0,0 +1,39 @@
mixin bg-dark-up
background-color transparent
:hover
background-color rgba(0, 0, 0, 0.015)
mixin bg-light-up
background-color transparent
:hover
background-color rgba(255, 255, 255, 0.015)
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.056338)
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

4
styles/mixins/feature-card.scarlet Normal file
View File

@ -0,0 +1,4 @@
mixin feature-card-footer
font-size 0.9rem
opacity 0.5
margin-top 0

23
styles/mixins/layout.scarlet Normal file
View File

@ -0,0 +1,23 @@
mixin horizontal
display flex
flex-direction row
mixin horizontal-wrap
display flex
flex-flow row wrap
mixin horizontal-wrap-center
horizontal-wrap
justify-content center
mixin vertical
display flex
flex-direction column
mixin vertical-wrap
display flex
flex-flow column wrap
mixin vertical-wrap-center
horizontal-wrap
align-items center

13
styles/mixins/sidebar.scarlet Normal file
View File

@ -0,0 +1,13 @@
mixin sidebar
vertical
margin-left 0
margin-top 1rem
flex-shrink 0
mixin sidebar-medium
margin-left content-padding
margin-top 0
flex-basis 270px
mixin sidebar-big
flex-basis 300px

13
styles/mixins/ui.scarlet Normal file
View File

@ -0,0 +1,13 @@
mixin ui-element
border 1px solid ui-border-color
background ui-background
border-radius ui-element-border-radius
default-transition
:hover
border-color ui-hover-border-color
// background ui-hover-background
// box-shadow outline-shadow-medium
mixin ui-disabled
background-color ui-disabled-color
cursor not-allowed

13
styles/mixins/utils.scarlet Normal file
View File

@ -0,0 +1,13 @@
mixin default-transition
transition all transition-speed ease
mixin noise-light
background-image url("//media.notify.moe/images/elements/noise-light.png")
mixin noise-strong
background-image url("//media.notify.moe/images/elements/noise-strong.png")
mixin clip-long-text
overflow hidden
white-space nowrap
text-overflow ellipsis