remove all sass
This commit is contained in:
Your Name
Henri Dickson
parent
16bbd72ae0
commit
3c3777ae3a
28 changed files with 1 additions and 2320 deletions
|
|
@ -1,400 +0,0 @@
|
|||
$aside-section-padding: 28px 25px 12px 25px
|
||||
$aside-section-padding-mobile: 24px 25px 10px 25px
|
||||
|
||||
.aside-section-wrapper
|
||||
display: flex
|
||||
flex: 1
|
||||
flex-direction: column
|
||||
// align-items: center
|
||||
width: 100%
|
||||
padding: $aside-section-padding
|
||||
background-color: $color-bright
|
||||
margin-bottom: 30px
|
||||
overflow: auto
|
||||
|
||||
&--transparent
|
||||
background-color: unset
|
||||
&--collapse
|
||||
padding: unset
|
||||
|
||||
.add-entity-entries
|
||||
|
||||
& &__entry
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__label
|
||||
font-size: 1.2em
|
||||
margin-bottom: 8px
|
||||
|
||||
& &__button
|
||||
line-height: unset;
|
||||
height: unset;
|
||||
padding: 4px 15px;
|
||||
margin: 5px;
|
||||
|
||||
.action-panel
|
||||
margin-bottom: 20px
|
||||
|
||||
& &__label
|
||||
// font-size: 1.2em
|
||||
font-weight: bold
|
||||
margin-bottom: 12px
|
||||
|
||||
& &__button-group
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
&--center
|
||||
justify-content: center
|
||||
|
||||
& &__button
|
||||
line-height: unset
|
||||
height: unset
|
||||
padding: 4px 15px
|
||||
margin: 0 5px
|
||||
// width: 100%
|
||||
|
||||
.mark-panel
|
||||
margin-bottom: 20px
|
||||
|
||||
& &__status
|
||||
font-weight: bold
|
||||
|
||||
& &__rating-star
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
& &__actions
|
||||
float: right
|
||||
& form
|
||||
display: inline
|
||||
|
||||
& &__time
|
||||
color: $color-light
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__content
|
||||
|
||||
& &__clear
|
||||
@include clear
|
||||
|
||||
.review-panel
|
||||
& &__label
|
||||
font-weight: bold
|
||||
& &__actions
|
||||
float: right
|
||||
& &__time
|
||||
color: $color-light
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__review-title
|
||||
display: block
|
||||
margin-bottom: 15px
|
||||
font-weight: bold
|
||||
|
||||
& &__clear
|
||||
@include clear
|
||||
|
||||
.user-profile
|
||||
& &__header
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
margin-bottom: 15px
|
||||
|
||||
& &__avatar
|
||||
width: 72px
|
||||
|
||||
& &__username
|
||||
font-size: large
|
||||
margin-left: 10px
|
||||
margin-bottom: 0
|
||||
|
||||
& &__bio
|
||||
|
||||
& &__report-link
|
||||
color: $color-light
|
||||
|
||||
.user-relation
|
||||
& &__label
|
||||
display: inline-block
|
||||
font-size: large
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__more-link
|
||||
margin-left: 5px
|
||||
|
||||
& &__related-user-list
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
&:last-of-type
|
||||
margin-bottom: 0
|
||||
|
||||
& &__related-user
|
||||
flex-basis: 25%
|
||||
padding: 0px 3px
|
||||
text-align: center
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
& > a
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
|
||||
& &__related-user-avatar
|
||||
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
|
||||
width: 48px
|
||||
height: 48px
|
||||
@media (min-width: $small-devices) and (max-width: $large-devices)
|
||||
height: unset
|
||||
width: 60%
|
||||
max-width: 96px
|
||||
|
||||
|
||||
& &__related-user-name
|
||||
color: inherit
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
// display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
$panel-padding : 0
|
||||
|
||||
.report-panel
|
||||
& &__label
|
||||
display: inline-block
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__body
|
||||
padding-left: $panel-padding
|
||||
|
||||
& &__report-list
|
||||
|
||||
& &__report
|
||||
margin: 2px 0
|
||||
|
||||
& &__user-link
|
||||
margin: 0 2px
|
||||
|
||||
& &__all-link
|
||||
margin-left: 5px
|
||||
|
||||
.import-panel
|
||||
overflow-x: hidden
|
||||
|
||||
& &__label
|
||||
display: inline-block
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__body
|
||||
padding-left: $panel-padding
|
||||
border: 2px dashed #00a1cc
|
||||
padding: 6px 9px
|
||||
form
|
||||
margin: 0
|
||||
|
||||
@media (max-width: $large-devices)
|
||||
border: unset
|
||||
padding-left: 0
|
||||
|
||||
& &__help
|
||||
background-color: $color-quinary
|
||||
border-radius: 100000px
|
||||
display: inline-block
|
||||
width: 16px
|
||||
height: 16px
|
||||
text-align: center
|
||||
font-size: 12px
|
||||
cursor: help
|
||||
|
||||
& &__checkbox
|
||||
display: inline-block
|
||||
margin-right: 10px
|
||||
label
|
||||
display: inline
|
||||
input[type="checkbox"]
|
||||
margin: 0
|
||||
position: relative
|
||||
top: 2px
|
||||
&--last
|
||||
margin-right: 0
|
||||
|
||||
& &__file-input
|
||||
margin-top: 10px
|
||||
|
||||
& &__button
|
||||
line-height: unset
|
||||
height: unset
|
||||
padding: 4px 15px
|
||||
|
||||
& &__progress
|
||||
padding-top: 10px
|
||||
// padding-top: 4px
|
||||
&:not(:first-child)
|
||||
border-top: $color-tertiary 1px dashed
|
||||
label
|
||||
display: inline
|
||||
progress
|
||||
background-color: $color-quaternary
|
||||
border-radius: 0
|
||||
height: 10px
|
||||
width: 54%
|
||||
|
||||
progress::-webkit-progress-bar
|
||||
background-color: $color-quaternary
|
||||
|
||||
progress::-webkit-progress-value
|
||||
background-color: $color-primary
|
||||
|
||||
progress::-moz-progress-bar
|
||||
background-color: $color-quaternary
|
||||
|
||||
& &__last-task
|
||||
&:not(:first-child)
|
||||
padding-top: 4px
|
||||
border-top: $color-tertiary 1px dashed
|
||||
.index:not(:last-of-type)
|
||||
margin-right: 8px
|
||||
|
||||
& &__fail-urls
|
||||
margin-top: 10px
|
||||
li
|
||||
word-break: break-all
|
||||
ul
|
||||
// padding: 4px
|
||||
max-height: 100px
|
||||
overflow-y: auto
|
||||
|
||||
|
||||
.relation-dropdown
|
||||
& &__button
|
||||
display: none
|
||||
|
||||
.entity-card
|
||||
display: flex
|
||||
margin-bottom: 10px
|
||||
flex-direction: column
|
||||
&--horizontal
|
||||
flex-direction: row
|
||||
|
||||
& &__img
|
||||
height: 150px
|
||||
|
||||
& &__rating-star
|
||||
position: relative
|
||||
top: 4px
|
||||
left: -3px
|
||||
|
||||
& &__rating-score
|
||||
position: relative
|
||||
top: 1px
|
||||
margin-left: 2px
|
||||
|
||||
& &__title
|
||||
margin-bottom: 10px
|
||||
margin-top: 5px
|
||||
|
||||
& &__info-wrapper
|
||||
&--horizontal
|
||||
margin-left: 20px
|
||||
|
||||
& &__img-wrapper
|
||||
flex-basis: 100px
|
||||
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.add-entity-entries
|
||||
display: block !important
|
||||
& &__button
|
||||
width: 100%
|
||||
margin: 5px 0 5px 0;
|
||||
|
||||
.aside-section-wrapper
|
||||
&:first-child
|
||||
margin-right: 0 !important
|
||||
margin-bottom: 0 !important
|
||||
&--singular:first-child
|
||||
margin-bottom: 20px !important
|
||||
// &--no-padding
|
||||
// padding: $aside-section-padding-mobile !important
|
||||
// margin-top: 0 !important
|
||||
.action-panel
|
||||
flex-direction: column !important
|
||||
|
||||
.entity-card
|
||||
&--horizontal
|
||||
flex-direction: column !important
|
||||
// flex-direction: column !important
|
||||
& &__info-wrapper
|
||||
margin-left: 10px !important
|
||||
&--horizontal
|
||||
margin-left: 0 !important
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
.add-entity-entries
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
|
||||
.aside-section-wrapper
|
||||
padding: $aside-section-padding-mobile
|
||||
|
||||
margin-top: 20px
|
||||
// &:not(:first-child)
|
||||
&:not(:last-child)
|
||||
margin-right: 20px
|
||||
&--collapse
|
||||
padding: $aside-section-padding-mobile !important
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
&:first-child
|
||||
margin-right: 0
|
||||
&--no-margin
|
||||
margin: 0
|
||||
|
||||
.action-panel
|
||||
flex-direction: row
|
||||
& &__button-group
|
||||
justify-content: space-evenly
|
||||
|
||||
.relation-dropdown
|
||||
margin-bottom: 20px
|
||||
& &__button
|
||||
padding-bottom: 10px
|
||||
background-color: $color-bright
|
||||
width: 100%
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
transition: transform 0.3s
|
||||
&:focus
|
||||
background-color: red
|
||||
|
||||
& &__button > .icon-arrow
|
||||
transition: transform 0.3s
|
||||
|
||||
& &__button:hover > .icon-arrow > svg
|
||||
fill: $color-primary
|
||||
|
||||
& &__button > .icon-arrow--expand
|
||||
transform: rotate(-180deg)
|
||||
|
||||
& &__body
|
||||
background-color: $color-bright
|
||||
max-height: 0
|
||||
transition: max-height 1s ease-out
|
||||
overflow: hidden
|
||||
|
||||
& &__body--expand
|
||||
max-height: 2000px
|
||||
transition: max-height 1s ease-in
|
||||
|
||||
.entity-card
|
||||
flex-direction: row
|
||||
& &__info-wrapper
|
||||
margin-left: 30px
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
|
||||
// Blockquote
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
blockquote
|
||||
border-left: .3rem solid $color-quaternary
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 1rem 1.5rem
|
||||
|
||||
*:last-child
|
||||
margin-bottom: 0
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
|
||||
// Button
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit']
|
||||
background-color: $color-primary
|
||||
border: .1rem solid $color-primary
|
||||
border-radius: .4rem
|
||||
color: $color-initial
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-size: 1.1rem
|
||||
font-weight: 700
|
||||
height: 3.4rem
|
||||
letter-spacing: .1rem
|
||||
line-height: 3.4rem
|
||||
padding: 0 2.8rem
|
||||
// width: 100%
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
white-space: nowrap
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $color-secondary
|
||||
border-color: $color-secondary
|
||||
color: $color-initial
|
||||
outline: 0
|
||||
|
||||
&[disabled]
|
||||
cursor: default
|
||||
opacity: .5
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $color-primary
|
||||
border-color: $color-primary
|
||||
|
||||
&.button-outline
|
||||
background-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
border-color: $color-secondary
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
border-color: inherit
|
||||
color: $color-primary
|
||||
|
||||
&.button-clear
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-primary
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $color-secondary
|
||||
|
||||
&[disabled]
|
||||
|
||||
&:focus,
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
|
||||
// Code
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
code
|
||||
background: $color-tertiary
|
||||
border-radius: .4rem
|
||||
font-size: 86%
|
||||
margin: 0 .2rem
|
||||
padding: .2rem .5rem
|
||||
white-space: nowrap
|
||||
|
||||
pre
|
||||
background: $color-tertiary
|
||||
border-left: .3rem solid $color-primary
|
||||
overflow-y: hidden
|
||||
|
||||
& > code
|
||||
border-radius: 0
|
||||
display: block
|
||||
padding: 1rem 1.5rem
|
||||
white-space: pre
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
|
||||
// Color
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
$color-initial: #fff !default
|
||||
$color-primary: #00a1cc !default
|
||||
$color-secondary: #606c76 !default
|
||||
$color-tertiary: #bbb !default
|
||||
$color-quaternary: #d5d5d5 !default
|
||||
$color-quinary: #e5e5e5 !default
|
||||
|
||||
$color-light: #ccc
|
||||
$color-bright: rgb(247, 247, 247)
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
// Divider
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-top: .1rem solid $color-initial
|
||||
margin: 3.0rem 0
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
// these 2 id selectors are to make footer stay at the bottom
|
||||
#page-wrapper
|
||||
position: relative
|
||||
min-height: 100vh
|
||||
z-index: 0
|
||||
|
||||
#content-wrapper
|
||||
padding-bottom: 160px
|
||||
// min-height: 100vh;
|
||||
|
||||
.footer
|
||||
padding-top: 0.4em !important
|
||||
text-align: center
|
||||
margin-bottom: 4px !important
|
||||
position: absolute !important
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
bottom: 0
|
||||
width: 100%
|
||||
|
||||
|
||||
&__border
|
||||
// width: 100%
|
||||
padding-top: 4px;
|
||||
border-top: $color-bright solid 2px
|
||||
|
||||
&__link
|
||||
margin: 0 12px
|
||||
white-space: nowrap
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
#content-wrapper
|
||||
padding-bottom: 120px
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
pass
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
|
||||
// Form
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
|
||||
|
||||
select
|
||||
padding-right: 3.0rem
|
||||
|
||||
textarea
|
||||
min-height: 6.5rem
|
||||
width: 100%
|
||||
|
||||
select
|
||||
width: 100%
|
||||
|
||||
label,
|
||||
legend
|
||||
display: block
|
||||
// font-size: 1.6rem
|
||||
// font-weight: 700
|
||||
margin-bottom: .5rem
|
||||
|
||||
fieldset
|
||||
border-width: 0
|
||||
padding: 0
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio']
|
||||
display: inline
|
||||
|
||||
.label-inline
|
||||
display: inline-block
|
||||
font-weight: normal
|
||||
margin-left: .5rem
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
|
||||
// Base
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Set box-sizing globally to handle padding and border widths
|
||||
\:root
|
||||
font-size: 10px
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before
|
||||
box-sizing: inherit
|
||||
|
||||
// The base font-size is set at 62.5% for having the convenience
|
||||
// of sizing rems in a way that is similar to using px: 1.6rem = 16px
|
||||
html
|
||||
box-sizing: border-box
|
||||
// font-size: 62.5%
|
||||
height: 100%
|
||||
|
||||
// Default body styles
|
||||
body
|
||||
color: $color-secondary
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif
|
||||
font-size: 1.3rem
|
||||
font-weight: 300
|
||||
letter-spacing: .05rem
|
||||
line-height: 1.6
|
||||
margin: 0
|
||||
height: 100%
|
||||
// filter: grayscale(1)
|
||||
|
||||
textarea
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif
|
||||
|
||||
// default link styles
|
||||
a
|
||||
color: $color-primary
|
||||
text-decoration: none
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:hover:visited
|
||||
color: $color-secondary
|
||||
|
||||
&:visited
|
||||
// color: $color-primary
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
// clear the "x" button inside the search input box
|
||||
input[type=text]::-ms-clear,
|
||||
input[type=text]::-ms-reveal
|
||||
display: none
|
||||
width : 0
|
||||
height: 0
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration
|
||||
display: none;
|
||||
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='date'],
|
||||
input[type='time'],
|
||||
input[type='color'],
|
||||
textarea,
|
||||
select
|
||||
appearance: none // Removes awkward default styles on some inputs for iOS
|
||||
background-color: transparent
|
||||
border: .1rem solid $color-light
|
||||
border-radius: .4rem
|
||||
box-shadow: none
|
||||
box-sizing: inherit // Forced to replace inherit values of the normalize.css
|
||||
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
|
||||
|
||||
&:focus
|
||||
border-color: $color-primary
|
||||
outline: 0
|
||||
|
||||
&::placeholder
|
||||
color: $color-light
|
||||
|
||||
::selection
|
||||
color: white
|
||||
background-color: $color-primary
|
||||
|
||||
// Mixins
|
||||
|
||||
@mixin clear
|
||||
content: ' '
|
||||
clear: both
|
||||
display: table
|
||||
|
||||
// Breakpoints
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
$small-devices: 575.98px
|
||||
// Medium devices (tablets, 768px and up)
|
||||
$medium-devices: 767.98px
|
||||
// Large devices (desktops, 992px and up)
|
||||
$large-devices: 991.98px
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
$x-large-devices: 1199.98px
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
|
||||
// Grid
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
@mixin container
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
max-width: 110rem
|
||||
padding: 0 2.0rem;
|
||||
width: 100%
|
||||
|
||||
.grid
|
||||
@include container
|
||||
|
||||
$main-width: 70%
|
||||
$aside-width: 96% - $main-width
|
||||
|
||||
& &__main
|
||||
width: $main-width
|
||||
float: left
|
||||
position: relative
|
||||
|
||||
& &__aside
|
||||
width: $aside-width
|
||||
// background-color: $color-bright
|
||||
float: right
|
||||
position: relative
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-around
|
||||
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.grid
|
||||
padding: 0 0.2rem;
|
||||
& &__aside
|
||||
flex-direction: column !important
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
.grid
|
||||
& &__main
|
||||
width: 100%
|
||||
float: none
|
||||
|
||||
& &__aside
|
||||
width: 100%
|
||||
float: none
|
||||
flex-direction: row
|
||||
&--tablet-column
|
||||
flex-direction: column
|
||||
&--reverse-order
|
||||
transform: scaleY(-1)
|
||||
& &__main--reverse-order
|
||||
transform: scaleY(-1)
|
||||
& &__aside--reverse-order
|
||||
transform: scaleY(-1)
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
.icon-lock svg
|
||||
fill: $color-light
|
||||
height: 12px
|
||||
position: relative
|
||||
top: 1px
|
||||
margin-left: 3px
|
||||
|
||||
.icon-edit svg
|
||||
fill: $color-light
|
||||
height: 12px
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
.icon-save svg
|
||||
fill: $color-light
|
||||
height: 12px
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
.icon-cross svg
|
||||
fill: $color-light
|
||||
height: 10px
|
||||
position: relative
|
||||
|
||||
.icon-arrow svg
|
||||
fill: $color-secondary
|
||||
height: 15px
|
||||
position: relative
|
||||
top: 3px
|
||||
|
||||
|
||||
.spinner
|
||||
display: inline-block
|
||||
position: relative
|
||||
left: 50%
|
||||
transform: translateX(-50%) scale(0.4)
|
||||
width: 80px
|
||||
height: 80px
|
||||
|
||||
& div
|
||||
transform-origin: 40px 40px
|
||||
animation: spinner 1.2s linear infinite
|
||||
&::after
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 37px;
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
border-radius: 20%;
|
||||
background: $color-secondary
|
||||
@for $i from 1 through 12
|
||||
&:nth-child(#{$i})
|
||||
transform: rotate(($i - 1) * 30deg)
|
||||
animation-delay: (12 - $i) * -0.1s
|
||||
|
||||
@keyframes spinner
|
||||
0%
|
||||
opacity: 1
|
||||
100%
|
||||
opacity: 0
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
|
||||
// Image
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
object-fit: contain
|
||||
|
||||
&.emoji
|
||||
height: 14px
|
||||
box-sizing: border-box
|
||||
object-fit: contain
|
||||
position: relative
|
||||
top: 3px
|
||||
|
||||
&--large
|
||||
height: 20px
|
||||
position: relative
|
||||
top: 2px
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
// source label name should match the enum value in `common.models.SourceSiteEnum`
|
||||
|
||||
$in-site-color: $color-primary
|
||||
$douban-color-primary: #319840
|
||||
$douban-color-secondary: white
|
||||
$spotify-color-primary: #1ed760
|
||||
$spotify-color-secondary: black
|
||||
$imdb-color-primary: #F5C518
|
||||
$imdb-color-secondary: #121212
|
||||
$igdb-color-primary: #323A44
|
||||
$igdb-color-secondary: #DFE1E2
|
||||
$steam-color-primary: #1387b8
|
||||
$steam-color-secondary: #111d2e
|
||||
$bangumi-color-primary: #F09199
|
||||
$bangumi-color-secondary: #FCFCFC
|
||||
$goodreads-color-primary: #372213
|
||||
$goodreads-color-secondary: #F4F1EA
|
||||
$bookstw-color-primary: white
|
||||
$bookstw-color-secondary: #7FBA19
|
||||
$tmdb-color-primary: #91CCA3
|
||||
$tmdb-color-secondary: #1FB4E2
|
||||
$bandcamp-color-primary: #28A0C1
|
||||
$bandcamp-color-secondary: white
|
||||
|
||||
.source-label
|
||||
display: inline
|
||||
background: transparent
|
||||
border-radius: .3rem
|
||||
border-style: solid
|
||||
border-width: .1rem
|
||||
line-height: 1.2rem
|
||||
font-size: 1.1rem
|
||||
margin: 3px
|
||||
padding: 1px 3px
|
||||
padding-top: 2px
|
||||
font-weight: lighter
|
||||
letter-spacing: 0.1rem
|
||||
word-break: keep-all
|
||||
opacity: 1
|
||||
|
||||
|
||||
position: relative
|
||||
top: -1px
|
||||
|
||||
&.source-label__in-site
|
||||
border-color: $in-site-color
|
||||
color: $in-site-color
|
||||
&.source-label__douban
|
||||
border: none
|
||||
color: $douban-color-secondary
|
||||
background-color: $douban-color-primary
|
||||
&.source-label__amazon
|
||||
&.source-label__spotify
|
||||
background-color: $spotify-color-primary
|
||||
color: $spotify-color-secondary
|
||||
border: none
|
||||
font-weight: bold
|
||||
&.source-label__imdb
|
||||
background-color: $imdb-color-primary
|
||||
color: $imdb-color-secondary
|
||||
border: none
|
||||
font-weight: bold
|
||||
&.source-label__igdb
|
||||
background-color: $igdb-color-primary
|
||||
color: $igdb-color-secondary
|
||||
border: none
|
||||
font-weight: bold
|
||||
&.source-label__steam
|
||||
background: linear-gradient(30deg, $steam-color-primary, $steam-color-secondary)
|
||||
color: white
|
||||
border: none
|
||||
font-weight: 600
|
||||
padding-top: 2px
|
||||
&.source-label__bangumi
|
||||
background: $bangumi-color-secondary
|
||||
color: $bangumi-color-primary
|
||||
font-style: italic
|
||||
font-weight: 600
|
||||
&.source-label__goodreads
|
||||
background: $goodreads-color-secondary
|
||||
color: $goodreads-color-primary
|
||||
font-weight: lighter
|
||||
&.source-label__bookstw
|
||||
background: $bookstw-color-secondary
|
||||
color: $bookstw-color-primary
|
||||
font-weight: lighter
|
||||
&.source-label__tmdb
|
||||
background: linear-gradient(90deg, $tmdb-color-primary, $tmdb-color-secondary)
|
||||
color: white
|
||||
border: none
|
||||
font-weight: lighter
|
||||
padding-top: 2px
|
||||
&.source-label__googlebooks
|
||||
color: white
|
||||
background-color: #4285F4
|
||||
border-color: #4285F4
|
||||
&.source-label__rss
|
||||
color: white
|
||||
background-color: #E1A02F
|
||||
border-color: #E1A02F
|
||||
&.source-label__bandcamp
|
||||
color: $bandcamp-color-secondary
|
||||
background-color: $bandcamp-color-primary
|
||||
// transform: skewX(-30deg)
|
||||
display: inline-block
|
||||
&.source-label__bandcamp span
|
||||
// transform: skewX(30deg)
|
||||
display: inline-block
|
||||
margin: 0 4px
|
||||
&.source-label__discogs
|
||||
color: white
|
||||
background-color: #262626
|
||||
border-color: #262626
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
|
||||
// List
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
list-style: none
|
||||
margin-top: 0
|
||||
padding-left: 0
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
// font-size: 90%
|
||||
// margin: 1.5rem 0 1.5rem 3.0rem
|
||||
|
||||
ol
|
||||
list-style: decimal inside
|
||||
|
||||
ul
|
||||
list-style: circle inside
|
||||
|
|
@ -1,583 +0,0 @@
|
|||
|
||||
$main-section-padding: 32px 48px 32px 36px
|
||||
$main-section-padding-mobile: 32px 28px 28px 28px
|
||||
|
||||
$section-title-margin: 20px
|
||||
$sub-sections-between-margin: 28px
|
||||
$sub-section-title-margin: 8px
|
||||
|
||||
.main-section-wrapper
|
||||
padding: $main-section-padding
|
||||
background-color: $color-bright
|
||||
overflow: auto
|
||||
|
||||
& input, & select
|
||||
width: 100%
|
||||
|
||||
// for search result etc
|
||||
.entity-list
|
||||
|
||||
& &__title
|
||||
// font-size: large
|
||||
margin-bottom: $section-title-margin
|
||||
|
||||
& &__entities
|
||||
|
||||
& &__entity
|
||||
display: flex
|
||||
margin-bottom: 36px
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
& &__entity-img
|
||||
// float: left
|
||||
object-fit: contain
|
||||
// height: 150px
|
||||
$width: 130px
|
||||
min-width: $width
|
||||
max-width: $width
|
||||
|
||||
& &__entity-text
|
||||
margin-left: 20px
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
// float: left
|
||||
& .tag-collection
|
||||
margin-left: -3px
|
||||
|
||||
& &__entity-link
|
||||
font-size: 1.2em
|
||||
|
||||
& &__entity-title
|
||||
display: block
|
||||
|
||||
& &__entity-category
|
||||
color: $color-tertiary
|
||||
margin-left: 5px
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
& &__entity-info
|
||||
max-width: 73%
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
display: inline-block
|
||||
text-overflow: ellipsis
|
||||
position: relative
|
||||
top: 0.52em
|
||||
&--full-length
|
||||
// display: block
|
||||
max-width: 100%
|
||||
// margin-bottom: 12px
|
||||
|
||||
& &__entity-brief
|
||||
margin-top: 8px
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
-webkit-line-clamp: 4
|
||||
overflow: hidden
|
||||
margin-bottom: 0
|
||||
|
||||
$rating-info-gap-width: 5px
|
||||
& &__rating
|
||||
display: inline-block
|
||||
margin: 0
|
||||
|
||||
& &__rating--empty
|
||||
// width: $empty-rating-width
|
||||
margin-right: $rating-info-gap-width
|
||||
|
||||
& &__rating-score
|
||||
margin-right: $rating-info-gap-width
|
||||
position: relative
|
||||
top: 1px
|
||||
|
||||
& &__rating-star
|
||||
display: inline
|
||||
position: relative
|
||||
top: 0.3em
|
||||
left: -0.3em
|
||||
|
||||
// detail page
|
||||
.entity-detail
|
||||
|
||||
& &__img
|
||||
height: 210px
|
||||
float: left
|
||||
object-fit: contain
|
||||
max-width: 150px
|
||||
object-position: top
|
||||
|
||||
& &__img-origin
|
||||
cursor: zoom-in
|
||||
|
||||
& &__info
|
||||
float: left
|
||||
margin-left: 20px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
width: 70%
|
||||
|
||||
& &__title
|
||||
font-weight: bold
|
||||
|
||||
& &__title--secondary
|
||||
color: $color-tertiary
|
||||
|
||||
& &__fields
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
width: 46%
|
||||
margin-left: 2%
|
||||
// margin-bottom: 5px
|
||||
& div, & span
|
||||
margin: 1px 0
|
||||
& + .tag-collection
|
||||
margin-top: 5px
|
||||
margin-left: 6px
|
||||
|
||||
& &__rating
|
||||
position: relative
|
||||
top: -5px
|
||||
|
||||
& &__rating-star
|
||||
position: relative
|
||||
left: -4px
|
||||
top: 3px
|
||||
|
||||
& &__rating-score
|
||||
font-weight: bold
|
||||
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
$mark-review-padding: 3px 0
|
||||
$mark-review-padding-wider: 6px 0
|
||||
|
||||
// includes title and description of an entity
|
||||
// sub section
|
||||
.entity-desc
|
||||
margin-bottom: $sub-sections-between-margin
|
||||
& &__title
|
||||
display: inline-block
|
||||
margin-bottom: $sub-section-title-margin
|
||||
& &__content
|
||||
overflow: hidden
|
||||
&--folded
|
||||
max-height: 202px
|
||||
|
||||
& &__unfold-button
|
||||
display: flex
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
justify-content: center
|
||||
text-align: center
|
||||
&--hidden
|
||||
display: none
|
||||
|
||||
& &__empty
|
||||
|
||||
// includes marks of an entity
|
||||
// sub section
|
||||
.entity-marks
|
||||
margin-bottom: $sub-sections-between-margin
|
||||
& &__title
|
||||
margin-bottom: $sub-section-title-margin
|
||||
display: inline-block
|
||||
& > a
|
||||
margin-right: 5px
|
||||
&--stand-alone
|
||||
margin-bottom: $section-title-margin
|
||||
|
||||
& &__more-link
|
||||
margin-left: 5px
|
||||
& &__mark-list
|
||||
|
||||
& &__mark
|
||||
margin: 0
|
||||
padding: $mark-review-padding
|
||||
border-bottom: 1px dashed $color-quinary
|
||||
&:last-child
|
||||
border: none
|
||||
&--wider
|
||||
padding: $mark-review-padding-wider
|
||||
|
||||
& &__mark-content
|
||||
margin-bottom: 0
|
||||
|
||||
& &__mark-time
|
||||
color: $color-light
|
||||
margin-left: 2px
|
||||
|
||||
& &__owner-link
|
||||
|
||||
& &__rating-star
|
||||
position: relative
|
||||
top: 4px
|
||||
|
||||
& &__empty
|
||||
|
||||
// includes reviews of an entity
|
||||
// sub section
|
||||
.entity-reviews
|
||||
// when used alone
|
||||
&:first-child
|
||||
margin-bottom: $sub-sections-between-margin
|
||||
& &__title
|
||||
display: inline-block
|
||||
margin-bottom: $sub-section-title-margin
|
||||
& > a
|
||||
margin-right: 5px
|
||||
&--stand-alone
|
||||
margin-bottom: $section-title-margin
|
||||
& &__more-link
|
||||
margin-left: 5px
|
||||
& &__review-list
|
||||
|
||||
& &__review
|
||||
margin: 0
|
||||
padding: $mark-review-padding
|
||||
border-bottom: 1px dashed $color-quinary
|
||||
&:last-child
|
||||
border: none
|
||||
&--wider
|
||||
padding: $mark-review-padding-wider
|
||||
|
||||
& &__review-time
|
||||
color: $color-light
|
||||
margin-left: 2px
|
||||
& &__review-title
|
||||
|
||||
& &__owner-link
|
||||
|
||||
& &__empty
|
||||
|
||||
.dividing-line
|
||||
height: 0
|
||||
width: 100%
|
||||
margin: 40px 0 24px 0
|
||||
border-top: solid 1px $color-light
|
||||
&.dividing-line--dashed
|
||||
margin: 0
|
||||
margin-top: 10px
|
||||
margin-bottom: 2px
|
||||
border-top: 1px dashed $color-quinary;
|
||||
|
||||
// on home page
|
||||
.entity-sort
|
||||
position: relative
|
||||
margin-bottom: 30px
|
||||
& &__label
|
||||
font-size: large
|
||||
display: inline-block
|
||||
margin-bottom: $section-title-margin
|
||||
|
||||
& &__more-link
|
||||
margin-left: 8px
|
||||
|
||||
& &__count
|
||||
// font-size: large
|
||||
// letter-spacing: -1px
|
||||
color: $color-tertiary
|
||||
&::before
|
||||
content: '('
|
||||
&::after
|
||||
content: ')'
|
||||
|
||||
& &__entity-list
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
// padding-left: 24px
|
||||
flex-wrap: wrap
|
||||
|
||||
& &__entity
|
||||
padding: 0 10px
|
||||
flex-basis: 20%
|
||||
text-align: center
|
||||
display: inline-block
|
||||
color: $color-secondary
|
||||
&:hover
|
||||
color: $color-primary
|
||||
& > a
|
||||
color: inherit
|
||||
|
||||
& &__entity-img
|
||||
height: 110px
|
||||
|
||||
& &__entity-name
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
& &__empty
|
||||
|
||||
// for drag and sort purpose
|
||||
&--placeholder
|
||||
border: dashed $color-tertiary 4px
|
||||
&--hover
|
||||
padding: 10px
|
||||
border: dashed $color-primary 2px !important
|
||||
border-radius: 3px
|
||||
&--sortable
|
||||
padding: 10px
|
||||
margin: 10px 0
|
||||
border: dashed $color-tertiary 2px
|
||||
cursor: all-scroll
|
||||
&--hidden
|
||||
opacity: 0.4
|
||||
|
||||
.entity-sort-control
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
&__button
|
||||
margin-top: 5px
|
||||
margin-left: 12px
|
||||
padding: 0 2px
|
||||
cursor: pointer
|
||||
color: $color-tertiary
|
||||
&:hover
|
||||
color: $color-primary
|
||||
& > .icon-save svg, & > .icon-edit svg
|
||||
fill: $color-primary
|
||||
|
||||
&--float-right
|
||||
position: absolute
|
||||
top: 4px
|
||||
right: 10px
|
||||
|
||||
&__text
|
||||
|
||||
|
||||
// follower/following list page
|
||||
.related-user-list
|
||||
& &__title
|
||||
margin-bottom: $section-title-margin
|
||||
|
||||
& &__user
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
margin-bottom: 20px
|
||||
|
||||
& &__user-info
|
||||
margin-left: 15px
|
||||
overflow: auto
|
||||
|
||||
& &__user-name
|
||||
|
||||
& &__user-bio
|
||||
|
||||
& &__user-avatar
|
||||
max-height: 72px
|
||||
min-width: 72px
|
||||
|
||||
// review detail page
|
||||
.review-head
|
||||
& &__title
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
|
||||
& &__body
|
||||
margin-bottom: 10px
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
& &__info
|
||||
float: left
|
||||
|
||||
& &__owner-link
|
||||
color: $color-light
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
& &__time
|
||||
color: $color-light
|
||||
|
||||
& &__rating-star
|
||||
position: relative
|
||||
top: 3px
|
||||
left: -1px
|
||||
|
||||
& &__actions
|
||||
float: right
|
||||
|
||||
& &__action-link
|
||||
&:not(:first-child)
|
||||
margin-left: 5px
|
||||
|
||||
// tag list
|
||||
.tag-collection
|
||||
margin-left: -9px
|
||||
& &__tag
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
color: white;
|
||||
background: $color-light;
|
||||
padding: 5px;
|
||||
// margin: 4px;
|
||||
border-radius: .3rem;
|
||||
line-height: 1.2em;
|
||||
font-size: 80%
|
||||
margin: 3px
|
||||
& a
|
||||
color: white
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
|
||||
.track-carousel
|
||||
position: relative
|
||||
margin-top: 5px
|
||||
// padding: 0
|
||||
|
||||
&__content
|
||||
overflow: auto
|
||||
scroll-behavior: smooth
|
||||
scrollbar-width: none
|
||||
display: flex
|
||||
margin: auto
|
||||
box-sizing: border-box
|
||||
padding-bottom: 10px
|
||||
&::-webkit-scrollbar
|
||||
// horizontal scrollbar width
|
||||
height: 3px
|
||||
// vertical scrollbar width
|
||||
width: 1px
|
||||
background-color: $color-quinary
|
||||
&::-webkit-scrollbar-thumb
|
||||
background-color: $color-tertiary
|
||||
|
||||
|
||||
&__track
|
||||
text-align: center
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
min-width: 18%
|
||||
max-width: 18%
|
||||
margin-right: 2.5%
|
||||
& img
|
||||
object-fit: contain
|
||||
&__track-title
|
||||
// word-break: keep-all
|
||||
// overflow-wrap: anywhere
|
||||
white-space: nowrap
|
||||
|
||||
&__button
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-content: center
|
||||
background: white
|
||||
border: none
|
||||
padding: 8px
|
||||
border-radius: 50%
|
||||
outline: 0
|
||||
cursor: pointer
|
||||
position: absolute
|
||||
top: 50%
|
||||
&--prev
|
||||
left: 0
|
||||
transform: translate(50%, -50%)
|
||||
&--next
|
||||
right: 0
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.entity-list
|
||||
& &__entity
|
||||
flex-direction: column
|
||||
margin-bottom: 30px
|
||||
& &__entity-text
|
||||
margin-left: 0
|
||||
& &__entity-img-wrapper
|
||||
margin-bottom: 8px
|
||||
& &__entity-info
|
||||
max-width: unset
|
||||
& &__rating--empty + &__entity-info
|
||||
max-width: 70%
|
||||
& &__entity-brief
|
||||
-webkit-line-clamp: 5
|
||||
|
||||
.entity-detail
|
||||
flex-direction: column
|
||||
& &__title
|
||||
margin-bottom: 5px
|
||||
& &__info
|
||||
margin-left: 0
|
||||
float: none
|
||||
display: flex
|
||||
flex-direction: column
|
||||
width: 100%
|
||||
& &__img
|
||||
margin-bottom: 24px
|
||||
float: none
|
||||
height: unset
|
||||
max-width: 170px;
|
||||
& &__fields
|
||||
width: unset
|
||||
margin-left: unset
|
||||
& + .tag-collection
|
||||
margin-left: -3px
|
||||
|
||||
.entity-marks
|
||||
& &__mark-list
|
||||
|
||||
& &__mark
|
||||
|
||||
& &__rating-star
|
||||
|
||||
& &__rating-star + &__mark-time
|
||||
// display: block
|
||||
|
||||
.dividing-line
|
||||
margin-top: 24px
|
||||
|
||||
.entity-sort
|
||||
& &__entity
|
||||
flex-basis: 50%
|
||||
// margin-left: 10px
|
||||
// margin-right: 10px
|
||||
& &__entity-img
|
||||
height: 130px
|
||||
|
||||
.review-head
|
||||
& &__info
|
||||
float: unset
|
||||
& &__actions
|
||||
float: unset
|
||||
|
||||
.track-carousel
|
||||
&__content
|
||||
padding-bottom: 10px
|
||||
&__track
|
||||
min-width: 31%
|
||||
max-width: 31%
|
||||
margin-right: 4.5%
|
||||
|
||||
|
||||
.calendar_view
|
||||
position: relative
|
||||
margin-left: -8px;
|
||||
margin-right: -24px;
|
||||
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
.calendar_view
|
||||
overflow-x: scroll
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
.main-section-wrapper
|
||||
padding: $main-section-padding-mobile
|
||||
|
||||
.entity-detail
|
||||
display: flex
|
||||
& &__info
|
||||
// display: flex
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
.markdown-content
|
||||
& blockquote
|
||||
background: #f9f9f9
|
||||
border-left: 10px solid #ccc
|
||||
margin: 1.5em 10px
|
||||
padding: 0.5em 10px
|
||||
quotes: "\201C""\201D""\2018""\2019"
|
||||
|
||||
& blockquote:before
|
||||
color: #ccc
|
||||
content: open-quote
|
||||
font-size: 4em
|
||||
line-height: 0.1em
|
||||
margin-right: 0.25em
|
||||
vertical-align: -0.4em
|
||||
|
||||
& table
|
||||
border: 1px solid #ccc
|
||||
border-collapse: collapse
|
||||
margin: 0
|
||||
padding: 0
|
||||
width: 100%
|
||||
table-layout: fixed
|
||||
|
||||
& table caption
|
||||
font-size: 1.5em
|
||||
margin: .5em 0 .75em
|
||||
|
||||
& table tr
|
||||
background-color: #eee
|
||||
border: 1px solid #ccc
|
||||
padding: .35em
|
||||
|
||||
& table th, table td
|
||||
padding: .625em
|
||||
border: 1px solid #ccc
|
||||
|
||||
& table th
|
||||
font-size: .85em
|
||||
letter-spacing: .1em
|
||||
|
||||
& code
|
||||
background: #333
|
||||
color: #ddd
|
||||
font-family: monospace
|
||||
|
||||
& pre
|
||||
background: #333
|
||||
color: #ddd
|
||||
font-family: monospace
|
||||
width: 100%
|
||||
overflow: auto
|
||||
overflow-y: hidden
|
||||
font-size: 12px
|
||||
line-height: 20px
|
||||
|
||||
& ol, ul
|
||||
padding-left: 3rem
|
||||
|
||||
& li
|
||||
list-style: unset
|
||||
|
||||
& mark
|
||||
background: unset
|
||||
text-decoration: underline
|
||||
|
||||
.spoiler
|
||||
background: grey
|
||||
filter: blur(2px)
|
||||
cursor: pointer
|
||||
|
||||
.spoiler.revealed
|
||||
background: unset
|
||||
filter: unset
|
||||
color: inherit
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
.bg-mask
|
||||
background-color: black
|
||||
z-index: 1
|
||||
filter: opacity(20%)
|
||||
position: fixed
|
||||
width: 100%
|
||||
height: 100%
|
||||
left: 0
|
||||
top: 0
|
||||
display: none
|
||||
|
||||
@mixin modal
|
||||
z-index: 2
|
||||
display: none
|
||||
position: fixed
|
||||
width: 500px
|
||||
max-width: 100vw
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
background-color: $color-bright
|
||||
padding: 20px 20px 10px 20px
|
||||
color: $color-secondary
|
||||
& &__head
|
||||
margin-bottom: 20px
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
& &__title
|
||||
font-weight: bold
|
||||
font-size: 1.2em
|
||||
float: left
|
||||
|
||||
& &__close-button
|
||||
float: right
|
||||
cursor: pointer
|
||||
|
||||
& &__body
|
||||
|
||||
& &__confirm-button
|
||||
float: right
|
||||
|
||||
.mark-modal
|
||||
@include modal
|
||||
& input[type="radio"]
|
||||
margin-right: 0
|
||||
|
||||
& &__rating-star
|
||||
display: inline
|
||||
float: left
|
||||
position: relative
|
||||
left: -3px
|
||||
|
||||
& &__status-radio
|
||||
float: right
|
||||
& ul
|
||||
margin-bottom: 0
|
||||
& li, & label
|
||||
display: inline
|
||||
& input[type="radio"]
|
||||
position: relative
|
||||
top: 1px
|
||||
|
||||
& &__clear
|
||||
@include clear
|
||||
|
||||
& &__content-input, & form textarea
|
||||
height: 200px
|
||||
width: 100%
|
||||
margin-top: 5px
|
||||
margin-bottom: 5px
|
||||
resize: vertical
|
||||
|
||||
& &__tag
|
||||
// margin-top: 10px
|
||||
margin-bottom: 20px
|
||||
|
||||
& &__option
|
||||
margin-bottom: 24px
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
& &__visibility-radio
|
||||
float: left
|
||||
& ul, & li, & label
|
||||
display: inline
|
||||
& label
|
||||
font-size: normal
|
||||
& input[type="radio"]
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
& &__share-checkbox
|
||||
float: right
|
||||
& input[type="checkbox"]
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
.confirm-modal
|
||||
@include modal
|
||||
|
||||
.announcement-modal
|
||||
@include modal
|
||||
|
||||
& &__body
|
||||
overflow-y: auto
|
||||
max-height: 64vh
|
||||
& .announcement
|
||||
&__title
|
||||
display: inline-block
|
||||
|
||||
&__datetime
|
||||
color: $color-light
|
||||
margin-left: 10px
|
||||
|
||||
&__content
|
||||
word-break: break-all
|
||||
|
||||
.add-to-list-modal
|
||||
@include modal
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.mark-modal, .confirm-modal, .announcement-modal .add-to-list-modal
|
||||
width: 100%
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
pass
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
|
||||
.navbar
|
||||
background-color: $color-bright
|
||||
box-sizing: border-box
|
||||
padding: 10px 0
|
||||
margin-bottom: 50px
|
||||
border-bottom: $color-light 0.5px solid
|
||||
|
||||
& &__wrapper
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
position: relative
|
||||
|
||||
& &__logo
|
||||
flex-basis: 100px
|
||||
|
||||
& &__logo-link
|
||||
display: inline-block
|
||||
|
||||
& &__link-list
|
||||
margin: 0
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
|
||||
& &__link
|
||||
margin: 9px
|
||||
color: $color-secondary
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:hover:visited
|
||||
color: $color-primary
|
||||
|
||||
&:visited
|
||||
color: $color-secondary
|
||||
|
||||
.current
|
||||
color: $color-primary
|
||||
font-weight: bold
|
||||
|
||||
& &__search-box
|
||||
margin: 0 12% 0 15px
|
||||
display: inline-flex
|
||||
flex: 1
|
||||
$widget-height: 32px
|
||||
& > input[type="search"]
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
margin: 0
|
||||
height: $widget-height
|
||||
background-color: white !important
|
||||
width: 100%
|
||||
|
||||
& .navbar__search-dropdown
|
||||
margin: 0
|
||||
margin-left: -1px
|
||||
padding: 0
|
||||
padding-left: 10px
|
||||
color: $color-secondary
|
||||
appearance: auto
|
||||
background-color: white
|
||||
height: $widget-height
|
||||
width: 80px
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
& &__dropdown-btn
|
||||
display: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: none
|
||||
|
||||
background-color: transparent
|
||||
color: $color-primary
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
color: $color-secondary
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.navbar
|
||||
padding: 2px 0
|
||||
& &__wrapper
|
||||
display: block
|
||||
& &__logo-img
|
||||
max-width: 72px
|
||||
max-height: 26px
|
||||
margin-right: 10px
|
||||
position: relative
|
||||
top: 7px
|
||||
& &__search-box
|
||||
margin: 0
|
||||
width: 80%
|
||||
$widget-height: 26px
|
||||
& > input[type="search"]
|
||||
height: $widget-height
|
||||
padding: 4px 6px
|
||||
& .navbar__search-dropdown
|
||||
cursor: pointer
|
||||
height: $widget-height
|
||||
width: 60px
|
||||
padding-left: 5px
|
||||
.dropdown
|
||||
display: inline
|
||||
margin-left: 0px
|
||||
margin-right: 0px
|
||||
.dropbtn
|
||||
display: none
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
.navbar
|
||||
margin-bottom: 20px
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
||||
@media (min-width: $small-devices)
|
||||
.navbar
|
||||
.dropbtn
|
||||
color: #606c76
|
||||
cursor: pointer
|
||||
.dropdown
|
||||
position: relative
|
||||
display: inline-block
|
||||
float: right
|
||||
.dropdown-content
|
||||
display: none
|
||||
position: absolute
|
||||
right: 0
|
||||
background-color: #f9f9f9
|
||||
min-width: 80px
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
|
||||
z-index: 1
|
||||
.dropdown-content a
|
||||
color: black
|
||||
padding: 4px 8px
|
||||
text-decoration: none
|
||||
display: block
|
||||
.dropdown-content a:hover
|
||||
background-color: #eeeeee
|
||||
.dropdown:hover .dropdown-content
|
||||
display: block
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.pagination
|
||||
// position: absolute
|
||||
// bottom: 30px
|
||||
// left: 50%
|
||||
// transform: translateX(-50%)
|
||||
text-align: center
|
||||
width: 100%
|
||||
|
||||
& &__page-link
|
||||
font-weight: normal
|
||||
margin: 0 5px
|
||||
|
||||
&--current
|
||||
font-weight: bold
|
||||
font-size: 1.2em
|
||||
// text-decoration: underline
|
||||
color: $color-secondary
|
||||
|
||||
& &__nav-link
|
||||
font-size: 1.4em
|
||||
margin: 0 2px
|
||||
|
||||
$nav-link-edge-margin-width: 18px
|
||||
|
||||
&--right-margin
|
||||
margin-right: $nav-link-edge-margin-width
|
||||
|
||||
&--left-margin
|
||||
margin-left: $nav-link-edge-margin-width
|
||||
|
||||
&--hidden
|
||||
display: none
|
||||
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.pagination
|
||||
& &__page-link
|
||||
margin: 0 3px
|
||||
|
||||
& &__nav-link
|
||||
font-size: 1.4em
|
||||
margin: 0 2px
|
||||
|
||||
$nav-link-edge-margin-width: 10px
|
||||
|
||||
&--right-margin
|
||||
margin-right: $nav-link-edge-margin-width
|
||||
|
||||
&--left-margin
|
||||
margin-left: $nav-link-edge-margin-width
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
// Large devices (desktops, 992px and up)
|
||||
@media (max-width: $large-devices)
|
||||
pass
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
$single-section-padding: 32px 36px
|
||||
$single-section-padding-mobile: 32px 28px
|
||||
|
||||
.single-section-wrapper
|
||||
padding: $single-section-padding
|
||||
background-color: $color-bright
|
||||
overflow: auto
|
||||
|
||||
// & input, & select
|
||||
// width: 100%
|
||||
& &__link--secondary
|
||||
display: inline-block
|
||||
color: $color-light
|
||||
margin-bottom: 20px
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
.entity-form, .review-form
|
||||
overflow: auto
|
||||
& > input[type='email'],
|
||||
& > input[type='number'],
|
||||
& > input[type='password'],
|
||||
& > input[type='search'],
|
||||
& > input[type='tel'],
|
||||
& > input[type='text'],
|
||||
& > input[type='url'],
|
||||
& textarea
|
||||
width: 100%
|
||||
& img
|
||||
display: block
|
||||
|
||||
.review-form
|
||||
& &__preview-button
|
||||
color: $color-primary
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
|
||||
& &__fyi
|
||||
color: $color-light
|
||||
|
||||
& &__main-content, & textarea
|
||||
margin-bottom: 5px
|
||||
resize: vertical
|
||||
height: 400px
|
||||
|
||||
& &__option
|
||||
margin-top: 24px
|
||||
margin-bottom: 10px
|
||||
&::after
|
||||
@include clear
|
||||
|
||||
& &__visibility-radio
|
||||
float: left
|
||||
& ul, & li, & label
|
||||
display: inline
|
||||
& label
|
||||
font-size: normal
|
||||
& input[type="radio"]
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
& &__share-checkbox
|
||||
float: right
|
||||
& input[type="checkbox"]
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
|
||||
.report-form
|
||||
& input, & select
|
||||
width: 100%
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.review-form
|
||||
& &__visibility-radio
|
||||
float: unset
|
||||
& &__share-checkbox
|
||||
float: unset
|
||||
position: relative
|
||||
left: -3px
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
|
||||
// Spacing
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li
|
||||
margin-bottom: 1.0rem
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul
|
||||
margin-bottom: 1rem
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
|
||||
// Table
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
table
|
||||
border-spacing: 0
|
||||
width: 100%
|
||||
|
||||
td,
|
||||
th
|
||||
border-bottom: .1rem solid $color-quinary
|
||||
padding: 1.2rem 1.5rem
|
||||
text-align: left
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
|
||||
&:last-child
|
||||
padding-right: 0
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
// Typography
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
p
|
||||
margin-top: 0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-weight: 300
|
||||
letter-spacing: -.1rem
|
||||
margin-bottom: 2.0rem
|
||||
margin-top: 0
|
||||
|
||||
h1
|
||||
font-size: 4.6rem
|
||||
line-height: 1.2
|
||||
|
||||
h2
|
||||
font-size: 3.6rem
|
||||
line-height: 1.25
|
||||
|
||||
h3
|
||||
font-size: 2.8rem
|
||||
line-height: 1.3
|
||||
|
||||
h4
|
||||
font-size: 2.2rem
|
||||
letter-spacing: -.08rem
|
||||
line-height: 1.35
|
||||
|
||||
h5
|
||||
font-size: 1.8rem
|
||||
letter-spacing: -.05rem
|
||||
line-height: 1.5
|
||||
|
||||
h6
|
||||
font-size: 1.6rem
|
||||
letter-spacing: 0
|
||||
line-height: 1.4
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
// Utility
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Clear a float with .clearfix
|
||||
.clearfix
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
content: ' ' // The space content is one way to avoid an Opera bug.
|
||||
display: table
|
||||
|
||||
// Float either direction
|
||||
.float-left
|
||||
float: left
|
||||
|
||||
.float-right
|
||||
float: right
|
||||
|
||||
.highlight
|
||||
font-weight: bold
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
.markdownx-preview
|
||||
min-height: 100px
|
||||
|
||||
& ul li
|
||||
list-style: circle inside
|
||||
|
||||
h1
|
||||
font-size: 2.5em
|
||||
|
||||
h2
|
||||
font-size: 2.0em
|
||||
|
||||
blockquote
|
||||
border-left: lightgray solid 0.4em
|
||||
padding-left: 0.1em
|
||||
margin-left: 0
|
||||
|
||||
code
|
||||
border-left: $color-primary solid 0.3em
|
||||
padding-left: 0.1em
|
||||
|
||||
.rating-star .jq-star
|
||||
cursor: unset !important
|
||||
|
||||
.ms-parent > .ms-choice
|
||||
margin-bottom: 1.5rem
|
||||
appearance: none
|
||||
background-color: transparent
|
||||
border: 0.1rem solid #ccc
|
||||
border-radius: .4rem
|
||||
box-shadow: none
|
||||
box-sizing: inherit
|
||||
padding: .6rem 1.0rem
|
||||
width: 100%
|
||||
height: 30.126px
|
||||
|
||||
&:focus
|
||||
border-color: $color-primary
|
||||
|
||||
& > .icon-caret
|
||||
top: 15.5px
|
||||
|
||||
& > span
|
||||
color: black
|
||||
font-weight: initial
|
||||
// font-size: 1.3rem
|
||||
font-size: 13.3333px
|
||||
top: 2.5px
|
||||
left: 2px
|
||||
&:hover, &:focus
|
||||
color: black
|
||||
|
||||
.ms-parent > .ms-drop > ul > li > label
|
||||
& > span
|
||||
margin-left: 10px
|
||||
& > input
|
||||
width: unset
|
||||
|
||||
.tippy-box
|
||||
border: $color-secondary 1px solid
|
||||
// border-radius: 2px
|
||||
background-color: $color-bright
|
||||
padding: 3px 5px
|
||||
|
||||
.tippy-content
|
||||
|
||||
.tag-input input
|
||||
flex-grow: 1
|
||||
|
||||
.tools-section-wrapper input, .tools-section-wrapper select
|
||||
width: unset
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
|
||||
@mixin clear
|
||||
content: ' '
|
||||
clear: both
|
||||
display: table
|
||||
|
||||
// Breakpoints
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
$small-devices: 575.98px
|
||||
// Medium devices (tablets, 768px and up)
|
||||
$medium-devices: 767.98px
|
||||
// Large devices (desktops, 992px and up)
|
||||
$large-devices: 991.98px
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
$x-large-devices: 1199.98px
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
|
||||
// Sass Modules
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
@import url(https://cdn.jsdelivr.net/npm/skeleton-css@2.0.4/css/normalize.css)
|
||||
// milligram
|
||||
@import Color
|
||||
// @import Blockquote
|
||||
@import Button
|
||||
// @import Code
|
||||
// @import Divider
|
||||
@import Form
|
||||
@import List
|
||||
@import Spacing
|
||||
// @import Table
|
||||
@import Typography
|
||||
@import Image
|
||||
@import Utility
|
||||
|
||||
// boofilsic components
|
||||
@import Global
|
||||
@import Navbar
|
||||
@import Grid
|
||||
@import Pagination
|
||||
@import Footer
|
||||
@import Icon
|
||||
@import Modal
|
||||
@import Label
|
||||
|
||||
// boofilsic modules
|
||||
@import MainSection
|
||||
@import AsideSection
|
||||
@import SingleSection
|
||||
|
||||
@import Vendor
|
||||
|
||||
@import MdContent
|
||||
|
|
@ -77,8 +77,7 @@ python3 manage.py migrate
|
|||
|
||||
Rebuild static assets
|
||||
```
|
||||
python3 manage.py sass common/static/sass/boofilsic.sass common/static/css/boofilsic.min.css -t compressed
|
||||
python3 manage.py sass common/static/sass/boofilsic.sass common/static/css/boofilsic.css
|
||||
python3 manage.py compilescss
|
||||
python3 manage.py collectstatic
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue