Steffen Breiler
ffb073102f
IE11 shows checkmark in wierd position. It seems that IE does size the "checkmark" differently than firefox, which make them appear to be more to the right and bottom. I'm using glyphicons to fix that. The look is constistent in different browser. Though its kind of thicker than the original was.
479 lines
9.4 KiB
Stylus
479 lines
9.4 KiB
Stylus
// 1. Set up color classes
|
||
// ========================
|
||
|
||
// Color variables are defined in "./global-colors.styl"
|
||
|
||
// array of keywords and their associated color vars
|
||
$stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best)
|
||
|
||
// for each color stage, generate a named class w/ the appropriate color
|
||
for $stage in $stages
|
||
.color-{$stage[0]}
|
||
background-color: $stage[1]
|
||
.action-yesno label,
|
||
.task-action-btn
|
||
background-color: darken($stage[1], 30%)
|
||
&:hover, &:focus
|
||
background-color: darken($stage[1], 40%)
|
||
.task-options
|
||
background-color: $stage[1]
|
||
|
||
// completed has to be outside the loop to override the color class
|
||
.completed
|
||
background-color: $completed
|
||
color: #999
|
||
.glyphicon
|
||
color: #333
|
||
.task-checker label
|
||
background-color: darken($completed, 30%)
|
||
.task-action-btn
|
||
background-color: darken($completed, 30%)
|
||
|
||
.reward
|
||
background-color: white
|
||
|
||
// 2. Columns & Tasks
|
||
// ===================
|
||
|
||
.tasks-lists
|
||
|
||
.row
|
||
margin-left: -5px
|
||
margin-right: -5px
|
||
|
||
.col-md-3
|
||
padding-left: 10px // Override Bootstrap 15px padding
|
||
padding-right: 10px // Override Bootstrap 15px padding
|
||
margin-bottom: 15px
|
||
|
||
// main columns
|
||
// ------------
|
||
.task-column
|
||
padding: 1.5em
|
||
background: $color-tasks
|
||
border: 1px solid darken($color-tasks,16.18%)
|
||
font-family: 'Lato', sans-serif
|
||
h2
|
||
color: darken($color-tasks,61.8%)
|
||
|
||
.task-column_title
|
||
margin: 0 0 0.5em
|
||
padding: 0
|
||
font-weight: 300
|
||
|
||
// 50% width columns with scrollbars for tablets
|
||
@media (min-width: 768px) and (max-width: 970px)
|
||
.task-column
|
||
max-height: 18.6em
|
||
overflow-y: scroll
|
||
|
||
// "Add new task" form
|
||
// -----------------
|
||
.task-add
|
||
margin-top: 1.618em
|
||
@extend $hrpg-button-with-input
|
||
hrpg-button-color-mixin($color-options-submenu)
|
||
input, button
|
||
height: 2.618em
|
||
input
|
||
width: 80%
|
||
button
|
||
width: 20%
|
||
span
|
||
font-size: 0.8em
|
||
|
||
// an individual task entry
|
||
// ------------------------
|
||
.task
|
||
list-style: none
|
||
clear: both
|
||
padding: 0
|
||
min-height: 3em
|
||
margin-bottom: 0.75em
|
||
box-shadow: inset 0 0 1px rgba(0,0,0,0.5)
|
||
position: relative
|
||
&:hover
|
||
cursor: move
|
||
:last-child
|
||
margin-bottom: 0
|
||
|
||
label
|
||
font-weight: 400
|
||
|
||
// task content
|
||
.task-text
|
||
display: block
|
||
padding: 0.75em 0 0.75em 3.5em
|
||
line-height: 1.4
|
||
word-wrap: break-word
|
||
|
||
span.emoji
|
||
width:1.5em
|
||
height:1.5em
|
||
background-size:1.5em
|
||
|
||
.habit-wide .task-text
|
||
padding-left: 7em
|
||
|
||
// when a task is being dragged
|
||
.task.ui-sortable-helper
|
||
box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 0 5px rgba(0,0,0,0.1)
|
||
transform: scale(1.05)
|
||
outline: 1px solid rgba(0,0,0,0.2)
|
||
|
||
// primary task commands
|
||
// ----------------------
|
||
.task-controls
|
||
display: inline-block
|
||
float: left
|
||
margin-left: -0.5em
|
||
margin-right: 0.5em
|
||
|
||
.task-controls.task-primary
|
||
position: absolute
|
||
top: 0
|
||
bottom: 0
|
||
left: 0
|
||
float: none
|
||
margin: 0
|
||
|
||
// plus/minus commands
|
||
.task-action-btn
|
||
display: inline-block
|
||
width: 2.12765em
|
||
height: 2.12765em
|
||
padding: 0
|
||
font-size: 1.41em
|
||
line-height: 2.12765
|
||
text-align: center
|
||
color: #222
|
||
vertical-align: top
|
||
border-right: 1px solid rgba(0,0,0,0.25)
|
||
&:last-child
|
||
border: 0
|
||
&:hover, &:focus
|
||
color: #222
|
||
text-decoration: none
|
||
|
||
// checkbox
|
||
.task-checker input[type=checkbox]
|
||
margin: 0
|
||
padding: 0
|
||
visibility: hidden
|
||
|
||
.task-checker label
|
||
display: inline-block
|
||
width: 3em
|
||
height: 100%
|
||
margin: 0
|
||
vertical-align: top
|
||
cursor: pointer
|
||
|
||
// plus/minus checkbox
|
||
.action-plusminus
|
||
label
|
||
margin-right: 1.5em
|
||
label:after
|
||
font-size: 1.41em
|
||
width: 2.12765em
|
||
height: 2.12765em
|
||
line-height: 2.12765
|
||
text-align: center
|
||
display: inline-block
|
||
vertical-align top
|
||
opacity: 0.3
|
||
background-color: #ddd
|
||
outline: 1px solid rgba(0,0,0,0.5)
|
||
color: #222
|
||
label[for$="plus"]:after
|
||
content: '＋'
|
||
label[for$="minus"]:after
|
||
content: '−'
|
||
|
||
&.select-toggle input[type=checkbox]:checked + label:after
|
||
opacity: 1
|
||
|
||
// yes/no checkbox
|
||
.action-yesno
|
||
position: relative
|
||
// uncompleted icon
|
||
label:after, label:before
|
||
content: ''
|
||
display: block
|
||
height: 1.714285714em
|
||
width: 1.714285714em
|
||
font-size: 1.75em
|
||
line-height: 1.714285714em
|
||
text-align: center
|
||
color: black
|
||
opacity: 0.2
|
||
|
||
label:after
|
||
height 10px
|
||
width 10px
|
||
margin 15px auto
|
||
border 1px solid #222
|
||
label:before
|
||
position: absolute
|
||
left: 0
|
||
// hint at completed icon
|
||
label:hover:before,
|
||
label:focus:before
|
||
content: ''
|
||
label:hover:after,
|
||
label:focus:after
|
||
content: "\E013"
|
||
font-family 'Glyphicons Halflings'
|
||
border none
|
||
margin 0
|
||
line-height: 1.714285714em
|
||
height: 1.714285714em
|
||
width: 1.714285714em
|
||
text-align: center
|
||
opacity: 0.5 !important
|
||
label:active:after
|
||
opacity: 0.75 !important
|
||
|
||
// completed icon
|
||
input[type=checkbox]:checked + label:after
|
||
content: "\E013"
|
||
font-family 'Glyphicons Halflings'
|
||
border none
|
||
margin 0
|
||
line-height: 1.714285714em
|
||
height: 1.714285714em
|
||
width: 1.714285714em
|
||
text-align: center
|
||
opacity: 0.75
|
||
|
||
|
||
// secondary task commands
|
||
// -----------------------
|
||
.task-meta-controls
|
||
float: right
|
||
margin: 0.75em 0.5em 0 0.5em
|
||
height: 1em
|
||
opacity: 0.25
|
||
|
||
a
|
||
text-decoration: none
|
||
|
||
// improve alignment of task icons
|
||
.glyphicon-signal
|
||
margin-left: 0.25em
|
||
.glyphicon-remove, .glyphicon-ok, a.badge
|
||
margin-right: 0.25em
|
||
.glyphicon-tags
|
||
margin-left: 0.1em
|
||
margin-right: 0.4em
|
||
a.badge
|
||
position: relative; top:-2px
|
||
|
||
.task:hover .task-meta-controls
|
||
opacity: 1
|
||
|
||
.popover
|
||
line-height: 1.5
|
||
|
||
// prevent box-shadow from being clipped/overlapped
|
||
margin-bottom: 10px
|
||
margin-right: 5px
|
||
|
||
// task editing
|
||
// ------------
|
||
form
|
||
margin-bottom: 0 // stupid bootstrap override
|
||
|
||
[class$="-options"]
|
||
padding: 1em 1em 0
|
||
color: #333
|
||
position: relative
|
||
//background-color:
|
||
|
||
.option-group
|
||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||
padding: 0 0 1em
|
||
margin-bottom: 1em
|
||
|
||
.option-title
|
||
font-size: 1em
|
||
margin: 0 0 0.5em
|
||
line-height: 1.5
|
||
border: 0
|
||
padding: 0
|
||
color: #333
|
||
font-style: italic
|
||
&:not(.mega):after
|
||
content: ':'
|
||
&.mega
|
||
cursor: pointer
|
||
font-style: normal
|
||
font-weight: bold
|
||
text-decoration: underline
|
||
|
||
.option-content
|
||
height: 2.5em
|
||
width: 100%
|
||
margin: 0 0 1em
|
||
padding: 0 0 0 0.5em
|
||
outline: 0
|
||
border: 1px solid rgba(0,0,0,0.2)
|
||
box-shadow: none
|
||
border-radius: 0
|
||
font-family: 'Lato', sans-serif //bootstrap override
|
||
|
||
textarea.option-content
|
||
height: 5em
|
||
padding-top: 0.25em
|
||
resize: none
|
||
margin-bottom: 0
|
||
|
||
.option-short
|
||
.option-content
|
||
width: 4em
|
||
display: inline-block
|
||
.input-suffix
|
||
vertical-align: 20%
|
||
padding-left: 0.25em
|
||
|
||
.option-medium
|
||
.option-content
|
||
width: 6em
|
||
display: inline-block
|
||
.input-suffix
|
||
vertical-align: 20%
|
||
padding-left: 0.25em
|
||
|
||
// button-group
|
||
.task-controls.tile-group
|
||
display: block
|
||
text-align: center
|
||
margin: 0
|
||
|
||
&.task-attributes
|
||
text-align: left
|
||
|
||
.task-action-btn.tile
|
||
border: 0
|
||
font-size: 1.15em
|
||
font-weight: 300
|
||
outline: 1px solid rgba(0,0,0,0.2)
|
||
outline-offset: -1px
|
||
margin: 0 0 0 3px
|
||
font-family: 'Lato', sans-serif
|
||
text-align: inherit
|
||
opacity: 0.5
|
||
width: auto
|
||
padding: 0 0.5em
|
||
&.active
|
||
opacity: 1
|
||
|
||
.tile.solid
|
||
opacity: 1
|
||
.tile.spacious
|
||
margin: 0.75em 0
|
||
font-size: 1.25em
|
||
opacity: 1
|
||
.tile.bright
|
||
background-color: lighten($best, 20%)
|
||
&:hover, &:focus
|
||
background-color: lighten($best, 40%)
|
||
.tile.flush
|
||
margin-left: 0
|
||
border: 1px solid rgba(0,0,0,0.2)
|
||
outline: 0
|
||
line-height: 2em
|
||
&:first-child
|
||
border-right: 0
|
||
|
||
.task-options
|
||
.task-action-btn.tile
|
||
margin: 3px
|
||
|
||
// todos ui
|
||
// --------
|
||
|
||
// Checklists
|
||
// --------
|
||
.checklist-form
|
||
/* Make an input blend into its parent */
|
||
input.inline-edit
|
||
reset-box-model()
|
||
reset-font()
|
||
line-height: inherit
|
||
text-align: inherit
|
||
background-color:inherit
|
||
box-shadow: none
|
||
width: 80%
|
||
|
||
/* Add interaction cues on hover and focus */
|
||
input.inline-edit:hover,input.inline-edit:focus
|
||
background-color: #FFD
|
||
transition: background-color 0.5s
|
||
|
||
.checklist-icons
|
||
opacity:0
|
||
width: 5%
|
||
|
||
li
|
||
min-height: 20px
|
||
padding-left: 10px
|
||
margin-bottom: 5px
|
||
|
||
[type="checkbox"]
|
||
margin: 0px 10px 3px 0px
|
||
width: 4%
|
||
li:hover .checklist-icons
|
||
opacity:1
|
||
|
||
// Task filters
|
||
// --------
|
||
.task-filter
|
||
margin: 1.618em 0 1em 0
|
||
hrpg-button-bar-mixin($color-tasks)
|
||
@extend $hrpg-button-bar
|
||
width: 100%
|
||
li
|
||
@extend $hrpg-button-master
|
||
hrpg-button-color-mixin($color-tasks)
|
||
width: 33.333%
|
||
text-align: center
|
||
&:nth-child(3n + 1):nth-last-child(2),
|
||
&:nth-child(3n + 1):nth-last-child(2) + li
|
||
width: 50%;
|
||
a
|
||
width: 100%
|
||
height: 100%
|
||
.rewards
|
||
.task-filter
|
||
li:nth-child(3n + 1):nth-last-child(2)
|
||
width: 33.333%
|
||
li:nth-child(3n + 1):nth-last-child(2) + li
|
||
width: 66.666%
|
||
|
||
.btn-buy
|
||
word-wrap: break-word
|
||
padding-left: 0.2em
|
||
text-align: left
|
||
span
|
||
position: relative
|
||
left: -2px
|
||
&:only-child
|
||
position: static
|
||
padding-left: 0.75em
|
||
|
||
&.highValue // If reward value exceeds three digits, drop the number below the coin icon
|
||
padding: 0.3em
|
||
text-align: center
|
||
span
|
||
display: block
|
||
margin: auto
|
||
.shop_gold + .reward-cost
|
||
line-height: 1
|
||
top: -0.1em
|
||
|
||
.repeat-days
|
||
a
|
||
border-radius: 0.382em
|
||
|