diff options
Diffstat (limited to 'assets/sass')
47 files changed, 317 insertions, 208 deletions
diff --git a/assets/sass/_accordion.sass b/assets/sass/_accordion.sass index aff7f295..25be776f 100644 --- a/assets/sass/_accordion.sass +++ b/assets/sass/_accordion.sass @@ -1,3 +1,5 @@ +@import variables + .accordion-title background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px h3 @@ -10,10 +12,12 @@ margin-bottom: 25px .accordion-toggle - color: #333 + color: color('primary') text-decoration: none - &:focus, &:hover - color: #999 + &:focus + color: color('primary') + &:hover + color: color('light') &:before content: "\f0d7" diff --git a/assets/sass/_activity_stream.sass b/assets/sass/_activity_stream.sass index daef94cf..b9ffcdda 100644 --- a/assets/sass/_activity_stream.sass +++ b/assets/sass/_activity_stream.sass @@ -1,3 +1,5 @@ +@import variables + .activity-event margin-bottom: 15px padding: 10px @@ -7,18 +9,18 @@ .activity-date margin-left: 10px font-weight: normal - color: #999 + color: color('light') .activity-content margin-left: 55px .activity-title font-weight: bold - color: #000 + color: color('dark') border-bottom: 1px dotted #efefef .activity-description - color: #555 + color: color('medium') margin-top: 10px li list-style-type: circle diff --git a/assets/sass/_alert.sass b/assets/sass/_alert.sass index b8598c35..5a90c825 100644 --- a/assets/sass/_alert.sass +++ b/assets/sass/_alert.sass @@ -1,31 +1,33 @@ +@import variables + .alert padding: 8px 35px 8px 14px margin-top: 5px margin-bottom: 5px - color: $alert-default-text-color - background-color: $alert-default-background-color - border: 1px solid $alert-default-border-color + color: alert-color('default') + background-color: alert-bg-color('default') + border: 1px solid alert-border-color('default') border-radius: 4px .alert-success - color: $alert-success-text-color - background-color: $alert-success-background-color - border-color: $alert-success-border-color + color: alert-color('success') + background-color: alert-bg-color('success') + border-color: alert-border-color('success') .alert-error - color: $alert-error-text-color - background-color: $alert-error-background-color - border-color: $alert-error-border-color + color: alert-color('error') + background-color: alert-bg-color('error') + border-color: alert-border-color('error') .alert-info - color: $alert-info-text-color - background-color: $alert-info-background-color - border-color: $alert-info-border-color + color: alert-color('info') + background-color: alert-bg-color('info') + border-color: alert-border-color('info') .alert-normal - color: $alert-normal-text-color - background-color: $alert-normal-background-color - border-color: $alert-normal-border-color + color: alert-color('normal') + background-color: alert-bg-color('normal') + border-color: alert-border-color('normal') .alert ul diff --git a/assets/sass/_avatar.sass b/assets/sass/_avatar.sass index f18e5926..2041c326 100644 --- a/assets/sass/_avatar.sass +++ b/assets/sass/_avatar.sass @@ -1,3 +1,5 @@ +@import variables + .avatar img vertical-align: bottom diff --git a/assets/sass/_board.sass b/assets/sass/_board.sass index 597ccb18..c94879bc 100644 --- a/assets/sass/_board.sass +++ b/assets/sass/_board.sass @@ -1,3 +1,5 @@ +@import variables + .public-board margin-top: 5px @@ -31,7 +33,7 @@ td.board-column-task-collapsed font-weight: bold - background-color: #fbfbfb + background-color: bg-color('primary') #board th.board-column-header-collapsed width: 28px @@ -65,21 +67,21 @@ td.board-column-task-collapsed padding: 0 5px a text-decoration: none - color: #3366CC - font-size: $text-xlarge + color: link-color('primary') + font-size: size('xlarge') line-height: 70% &:focus, &:hover text-decoration: none color: red .board-column-header-task-count - color: #999 + color: color('light') font-weight: normal a.board-swimlane-toggle text-decoration: none &:hover, &:focus - color: #000 + color: color('dark') text-decoration: none border: none @@ -87,7 +89,7 @@ a.board-swimlane-toggle min-height: 60px .board-task-list-limit - background-color: #DF5353 + background-color: $board-task-limit-color .draggable-item cursor: pointer diff --git a/assets/sass/_button.sass b/assets/sass/_button.sass index e618b1f5..95237085 100644 --- a/assets/sass/_button.sass +++ b/assets/sass/_button.sass @@ -1,46 +1,49 @@ +@import variables + +a.btn + text-decoration: none + .btn +appearance - font-size: $text-medium + font-size: size('medium') font-weight: normal cursor: pointer display: inline-block - color: #333 - background: #f5f5f5 - border: 1px solid #ddd border-radius: 2px padding: 3px 10px margin: 0 - -a.btn - text-decoration: none - -.btn:hover - border: 1px solid #bbb - color: #000 - background: #fafafa + border: 1px solid button-border-color('default') + background: button-bg-color('default') + color: button-color('default') + &:hover, &:focus + border-color: button-hover-border-color('default') + background: button-hover-bg-color('default') + color: button-hover-color('default') .btn-red - border-color: #b0281a - background: #d14836 - color: #fff + border-color: button-border-color('red') + background: button-bg-color('red') + color: button-color('red') &:hover, &:focus - color: #fff - background: #c53727 + border-color: button-hover-border-color('red') + background: button-hover-bg-color('red') + color: button-hover-color('red') .btn-blue - border-color: #3079ed - background: #4d90fe - color: #fff + border-color: button-border-color('blue') + background: button-bg-color('blue') + color: button-color('blue') &:hover, &:focus - border-color: #2f5bb7 - background: #357ae8 - color: #fff + border-color: button-hover-border-color('blue') + background: button-hover-bg-color('blue') + color: button-hover-color('blue') .btn:disabled - color: #ccc - border: 1px solid #ccc - background: #f7f7f7 + color: button-color('disabled') + border-color: button-border-color('disabled') + background: button-bg-color('disabled') .buttons-header - font-size: 0.9em + font-size: size('small') + margin-top: 5px margin-bottom: 15px diff --git a/assets/sass/_comment.sass b/assets/sass/_comment.sass index e61ef462..fdc38eaf 100644 --- a/assets/sass/_comment.sass +++ b/assets/sass/_comment.sass @@ -1,11 +1,13 @@ +@import variables + .comment-sorting text-align: right a - color: #555 + color: color('medium') font-weight: normal text-decoration: none &:hover - color: #aaa + color: color('light') .comment padding: 5px @@ -19,20 +21,20 @@ margin-bottom: 10px .comment-date - color: #999 + color: color('light') font-weight: 200 .comment-actions - font-size: $text-small + font-size: size('small') margin-left: 55px margin-top: 8px li display: inline a - color: #999 + color: color('light') text-decoration: none &:focus, &:hover - color: #333 + color: color('primary') text-decoration: underline .comment-content diff --git a/assets/sass/_dashboard.sass b/assets/sass/_dashboard.sass index 5abb32fb..4c19d084 100644 --- a/assets/sass/_dashboard.sass +++ b/assets/sass/_dashboard.sass @@ -1,11 +1,13 @@ +@import variables + .dashboard-project-stats small margin-right: 10px - color: #999 + color: color('light') .dashboard-table-link font-weight: bold - color: #444 + color: color('dark') text-decoration: none &:focus, &:hover - color: #999 + color: color('light') diff --git a/assets/sass/_dialog_box.sass b/assets/sass/_dialog_box.sass index 4e1168c9..38364230 100644 --- a/assets/sass/_dialog_box.sass +++ b/assets/sass/_dialog_box.sass @@ -1,2 +1,4 @@ +@import variables + #main .confirm max-width: 700px diff --git a/assets/sass/_documentation.sass b/assets/sass/_documentation.sass index dbede75e..72cc2abc 100644 --- a/assets/sass/_documentation.sass +++ b/assets/sass/_documentation.sass @@ -1,3 +1,5 @@ +@import variables + .documentation margin: 0 auto padding: 20px @@ -5,7 +7,7 @@ background: #fefefe border: 1px solid #ccc border-radius: 5px - color: #555 + color: color('medium') img border: 1px solid #333 h1 diff --git a/assets/sass/_dropdown.sass b/assets/sass/_dropdown.sass index 50b29abb..dd0aecc3 100644 --- a/assets/sass/_dropdown.sass +++ b/assets/sass/_dropdown.sass @@ -1,3 +1,5 @@ +@import variables + .dropdown display: inline position: relative @@ -39,12 +41,12 @@ ul.dropdown-submenu-open .dropdown-submenu-open a text-decoration: none - color: #333 + color: color('primary') &:focus text-decoration: underline .dropdown-menu-link-text, .dropdown-menu-link-icon - color: #333 + color: color('primary') text-decoration: none .dropdown-menu-link-text:hover diff --git a/assets/sass/_file_upload.sass b/assets/sass/_file_upload.sass index 3c251a18..b258620e 100644 --- a/assets/sass/_file_upload.sass +++ b/assets/sass/_file_upload.sass @@ -1,3 +1,5 @@ +@import variables + #file-dropzone, #screenshot-zone position: relative border: 2px dashed #ccc @@ -26,4 +28,4 @@ width: 95% &.file-error font-weight: bold - color: #b94a48 + color: color('error') diff --git a/assets/sass/_files.sass b/assets/sass/_files.sass index d3d3c006..914dc1f5 100644 --- a/assets/sass/_files.sass +++ b/assets/sass/_files.sass @@ -1,3 +1,5 @@ +@import variables + .file-thumbnails display: -webkit-flex display: flex @@ -28,11 +30,11 @@ .file-thumbnail-title font-weight: 700 font-size: 0.9em - color: #555 + color: color('medium') .file-thumbnail-description font-size: 0.8em - color: #aaa + color: color('light') margin-top: 8px margin-bottom: 5px diff --git a/assets/sass/_filter_box.sass b/assets/sass/_filter_box.sass index f053615e..f8c541ab 100644 --- a/assets/sass/_filter_box.sass +++ b/assets/sass/_filter_box.sass @@ -1,3 +1,5 @@ +@import variables + .filter-box display: inline-block position: relative @@ -19,7 +21,7 @@ border-bottom-left-radius: 5px vertical-align: top &:focus - color: #000 + color: color('dark') border-color: rgba(82, 168, 236, 0.8) outline: 0 box-shadow: 0 0 8px rgba(82, 168, 236, 0.6) diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass index f2be47cf..83c65c50 100644 --- a/assets/sass/_form.sass +++ b/assets/sass/_form.sass @@ -1,3 +1,5 @@ +@import variables + form margin-bottom: 20px @@ -8,24 +10,24 @@ label input &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"] - color: #888 + color: color('light') border: 1px solid #ccc width: 300px max-width: 95% - font-size: $text-normal + font-size: size('normal') height: 25px padding-bottom: 0 font-family: sans-serif margin-top: 10px +appearance &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus - color: #000 + color: color('dark') border-color: rgba(82, 168, 236, 0.8) outline: 0 box-shadow: 0 0 8px rgba(82, 168, 236, 0.6) textarea:focus - color: #000 + color: color('dark') border-color: rgba(82, 168, 236, 0.8) outline: 0 box-shadow: 0 0 8px rgba(82, 168, 236, 0.6) @@ -53,7 +55,8 @@ span.select2-container margin-top: 2px \::-webkit-input-placeholder, ::-ms-input-placeholder, ::-moz-placeholder - color: #ddd + color: color('light') + opacity: 0.2 padding-top: 2px .form-actions @@ -73,14 +76,14 @@ input.form-error:focus, textarea.form-error:focus font-weight: bold .form-errors - color: #b94a48 + color: color('error') list-style-type: none ul.form-errors li margin-left: 0 .form-help - font-size: $text-small + font-size: size('small') color: brown margin-bottom: 15px @@ -128,4 +131,4 @@ input .reset-password margin-top: 20px a - color: #999 + color: color('light') diff --git a/assets/sass/_gantt_chart.sass b/assets/sass/_gantt_chart.sass index 08aa4d56..eb6124d8 100644 --- a/assets/sass/_gantt_chart.sass +++ b/assets/sass/_gantt_chart.sass @@ -1,3 +1,5 @@ +@import variables + div &.ganttview-hzheader-month, &.ganttview-hzheader-day, &.ganttview-vtheader, &.ganttview-vtheader-item-name, &.ganttview-vtheader-series, &.ganttview-grid, &.ganttview-grid-row-cell float: left @@ -19,14 +21,14 @@ div border-right: 1px solid #f0f0f0 border-top: 1px solid #d0d0d0 line-height: 20px - color: #777 + color: color('medium') &.ganttview-vtheader margin-top: 41px width: 400px overflow: hidden background-color: #fff &.ganttview-vtheader-item - color: #666 + color: color('medium') &.ganttview-vtheader-series-name width: 400px height: 31px @@ -37,15 +39,15 @@ div overflow: hidden white-space: nowrap a - color: #666 + color: color('medium') text-decoration: none &:hover - color: #333 + color: color('primary') text-decoration: underline i - color: #000 + color: color('dark') &:hover i - color: #666 + color: color('medium') &.ganttview-slide-container overflow: auto border-left: 1px solid #999 @@ -78,8 +80,8 @@ div &.ganttview-block-text position: absolute height: 12px - font-size: $text-tiny - color: #999 + font-size: size('tiny') + color: color('light') padding: 2px 3px &.ganttview-block div.ui-resizable-handle.ui-resizable-s bottom: -0 diff --git a/assets/sass/_header.sass b/assets/sass/_header.sass index e3afe1b3..13ae6a99 100644 --- a/assets/sass/_header.sass +++ b/assets/sass/_header.sass @@ -1,14 +1,16 @@ +@import variables + header margin-top: 5px margin-bottom: 5px border-bottom: 1px solid #dedede h1 - font-size: $page-title-size + font-size: size('title') .tooltip opacity: 0.3 - font-size: $text-tiny + font-size: size('tiny') .web-notification-icon - color: #3366CC + color: link-color('primary') &:focus, &:hover - color: #000 + color: color('dark') diff --git a/assets/sass/_links.sass b/assets/sass/_links.sass index 8f2359a2..d4544391 100644 --- a/assets/sass/_links.sass +++ b/assets/sass/_links.sass @@ -1,10 +1,12 @@ +@import variables + a - color: $link-color + color: link-color('primary') border: none &:focus outline: 0 - color: $link-color-focus + color: link-color('focus') text-decoration: none &:hover - color: $link-color-hover + color: link-color('hover') text-decoration: none diff --git a/assets/sass/_listing.sass b/assets/sass/_listing.sass index 20ebc7fa..64ff4adc 100644 --- a/assets/sass/_listing.sass +++ b/assets/sass/_listing.sass @@ -1,10 +1,12 @@ +@import variables + .listing border-radius: 4px padding: 8px 35px 8px 14px margin-bottom: 20px border: 1px solid #ddd - color: #333 - background-color: #fcfcfc + color: color('primary') + background-color: bg-color('light') overflow: auto li list-style-type: square diff --git a/assets/sass/_logo.sass b/assets/sass/_logo.sass index 55d33ab1..200b4447 100644 --- a/assets/sass/_logo.sass +++ b/assets/sass/_logo.sass @@ -1,13 +1,15 @@ +@import variables + .logo a opacity: 0.5 color: #d40000 text-decoration: none span - color: #333 + color: color('primary') a &:hover opacity: 0.8 - color: #333 + color: color('primary') &:focus span, &:hover span color: #d40000 diff --git a/assets/sass/_markdown_rendering.sass b/assets/sass/_markdown_rendering.sass index 778286e7..cc1f977a 100644 --- a/assets/sass/_markdown_rendering.sass +++ b/assets/sass/_markdown_rendering.sass @@ -1,3 +1,5 @@ +@import variables + .markdown line-height: 1.4em h1 @@ -18,7 +20,7 @@ border-radius: 5px border: 1px solid #ddd overflow: auto - color: #444 + color: color('medium') blockquote font-style: italic border-left: 3px solid #ddd diff --git a/assets/sass/_page_header.sass b/assets/sass/_page_header.sass index 592b359f..0ea1a8f6 100644 --- a/assets/sass/_page_header.sass +++ b/assets/sass/_page_header.sass @@ -1,3 +1,5 @@ +@import variables + .page-header margin-bottom: 20px .dropdown @@ -8,10 +10,10 @@ font-weight: bold border-bottom: 1px dotted #ccc a - color: #333 + color: color('primary') text-decoration: none &:focus, &:hover - color: #aaa + color: color('light') ul text-align: left margin-top: 5px @@ -20,7 +22,7 @@ display: inline padding-right: 15px &.active a - color: #333 + color: color('primary') text-decoration: none font-weight: bold &:hover, &:focus diff --git a/assets/sass/_pagination.sass b/assets/sass/_pagination.sass index 877a3a91..792fb945 100644 --- a/assets/sass/_pagination.sass +++ b/assets/sass/_pagination.sass @@ -1,3 +1,5 @@ +@import variables + .pagination text-align: center diff --git a/assets/sass/_popover.sass b/assets/sass/_popover.sass index 841019ae..ed58cfbc 100644 --- a/assets/sass/_popover.sass +++ b/assets/sass/_popover.sass @@ -1,3 +1,5 @@ +@import variables + #popover-container position: fixed top: 0 diff --git a/assets/sass/_project.sass b/assets/sass/_project.sass index 308175dd..0f91d92a 100644 --- a/assets/sass/_project.sass +++ b/assets/sass/_project.sass @@ -1,9 +1,11 @@ +@import variables + .project-header margin-top: 8px margin-bottom: 20px .action-menu - color: #333 + color: color('primary') text-decoration: none &:hover, &:focus text-decoration: underline diff --git a/assets/sass/_project_overview.sass b/assets/sass/_project_overview.sass index 096fe085..6f9faa0b 100644 --- a/assets/sass/_project_overview.sass +++ b/assets/sass/_project_overview.sass @@ -1,3 +1,4 @@ +@import variables .project-overview-columns +display-flex @@ -5,14 +6,14 @@ +flex-wrap +align-content(center) margin-bottom: 20px - font-size: $text-large + font-size: size('large') .project-overview-column text-align: center margin-right: 3% padding: 3px 15px 3px 15px border: 1px dashed #ddd - strong - color: #444 small - color: #777 + color: color('light') + strong + color: color('medium') diff --git a/assets/sass/_project_views_switcher.sass b/assets/sass/_project_views_switcher.sass index 0faee0cc..86aa2619 100644 --- a/assets/sass/_project_views_switcher.sass +++ b/assets/sass/_project_views_switcher.sass @@ -1,3 +1,5 @@ +@import variables + .views display: inline-block margin-left: 10px @@ -10,21 +12,21 @@ padding: 5px 8px display: inline a - color: #555 + color: color('medium') text-decoration: none &:hover - color: #333 + color: color('primary') text-decoration: underline .menu-inline li.active a font-weight: bold - color: #000 + color: color('dark') text-decoration: none .views li &.active a font-weight: bold - color: #000 + color: color('dark') text-decoration: none &:first-child border-top-left-radius: 5px diff --git a/assets/sass/_reset.sass b/assets/sass/_reset.sass index 8b8e1499..c4568ce7 100644 --- a/assets/sass/_reset.sass +++ b/assets/sass/_reset.sass @@ -1,3 +1,5 @@ +@import variables + h1, li, ul, @@ -17,12 +19,12 @@ body margin-left: 10px margin-right: 10px padding-bottom: 10px - color: $text-color + color: color('primary') font-family: $text-font text-rendering: optimizeLegibility small - font-size: $text-small + font-size: size('small') hr border: 0 diff --git a/assets/sass/_sidebar.sass b/assets/sass/_sidebar.sass index 8a2a1113..90cdd660 100644 --- a/assets/sass/_sidebar.sass +++ b/assets/sass/_sidebar.sass @@ -1,3 +1,5 @@ +@import variables + .sidebar-container margin-top: 10px height: 100% @@ -37,10 +39,10 @@ > ul a text-decoration: none - color: #999 + color: color('light') font-weight: 300 &:hover - color: #333 + color: color('primary') li list-style-type: none line-height: 35px @@ -53,7 +55,7 @@ border-left: 5px solid #333 padding-left: 8px a - color: #333 + color: color('primary') font-weight: bold .sidebar-icons > ul li @@ -65,6 +67,6 @@ .sidebar > ul li &.active a &:focus, &:hover - color: #555 + color: color('medium') &:last-child margin-bottom: 15px diff --git a/assets/sass/_subtasks.sass b/assets/sass/_subtasks.sass index ed976703..ad467b81 100644 --- a/assets/sass/_subtasks.sass +++ b/assets/sass/_subtasks.sass @@ -1,3 +1,5 @@ +@import variables + .subtasks-table td vertical-align: middle diff --git a/assets/sass/_table.sass b/assets/sass/_table.sass index b49e7696..de535ed1 100644 --- a/assets/sass/_table.sass +++ b/assets/sass/_table.sass @@ -1,3 +1,5 @@ +@import variables + table width: 100% border-collapse: collapse @@ -14,18 +16,18 @@ td vertical-align: top th - background: #fbfbfb + background: bg-color('primary') text-align: left td li margin-left: 20px .table-small - font-size: $text-small + font-size: size('small') th a text-decoration: none - color: #333 + color: color('primary') &:focus, &:hover text-decoration: underline @@ -91,7 +93,7 @@ th a cursor: move color: #dedede &:hover - color: #333 + color: color('primary') tr.draggable-item-selected background: #fff diff --git a/assets/sass/_task_board.sass b/assets/sass/_task_board.sass index f5b3b432..17632f08 100644 --- a/assets/sass/_task_board.sass +++ b/assets/sass/_task_board.sass @@ -1,3 +1,5 @@ +@import variables + .task-board position: relative margin-bottom: 4px @@ -15,7 +17,7 @@ div .task-board a - color: #000 + color: color('dark') text-decoration: none .dropdown-menu font-weight: bold diff --git a/assets/sass/_task_board_age.sass b/assets/sass/_task_board_age.sass index 53ec91d5..1e91880f 100644 --- a/assets/sass/_task_board_age.sass +++ b/assets/sass/_task_board_age.sass @@ -1,3 +1,5 @@ +@import variables + .task-board-age display: inline-block diff --git a/assets/sass/_task_board_avatar.sass b/assets/sass/_task_board_avatar.sass index a4624c30..2a5563b3 100644 --- a/assets/sass/_task_board_avatar.sass +++ b/assets/sass/_task_board_avatar.sass @@ -1,3 +1,5 @@ +@import variables + .task-board-avatars text-align: right float: right diff --git a/assets/sass/_task_board_category.sass b/assets/sass/_task_board_category.sass index 72bf4387..37a4ea47 100644 --- a/assets/sass/_task_board_category.sass +++ b/assets/sass/_task_board_category.sass @@ -1,3 +1,5 @@ +@import variables + .task-board-category-container text-align: right margin-top: 8px @@ -5,7 +7,7 @@ .task-board-category font-weight: 500 - color: #000 + color: color('dark') border: 1px solid #555 padding: 1px 2px 1px 2px border-radius: 4px diff --git a/assets/sass/_task_board_date.sass b/assets/sass/_task_board_date.sass index 65849e39..9b11cce2 100644 --- a/assets/sass/_task_board_date.sass +++ b/assets/sass/_task_board_date.sass @@ -1,11 +1,11 @@ +@import variables + .task-board-date font-weight: bold - color: #000 + color: color('dark') span &.task-board-date-today - color: #0000D9 opacity: 1.0 &.task-board-date-overdue - color: #D90000 opacity: 1.0 diff --git a/assets/sass/_task_board_icons.sass b/assets/sass/_task_board_icons.sass index 77491baf..c9240325 100644 --- a/assets/sass/_task_board_icons.sass +++ b/assets/sass/_task_board_icons.sass @@ -1,5 +1,7 @@ +@import variables + .task-board-icons - font-size: $text-small + font-size: size('small') text-align: right margin-top: 4px margin-bottom: 2px diff --git a/assets/sass/_task_board_saving_state.sass b/assets/sass/_task_board_saving_state.sass index d5c1a6da..31465e9c 100644 --- a/assets/sass/_task_board_saving_state.sass +++ b/assets/sass/_task_board_saving_state.sass @@ -1,3 +1,5 @@ +@import variables + .task-board-saving-state opacity: 0.3 @@ -6,4 +8,4 @@ margin: auto width: 100% text-align: center - color: #000 + color: color('dark') diff --git a/assets/sass/_task_links.sass b/assets/sass/_task_links.sass index fdcea04b..4d68703c 100644 --- a/assets/sass/_task_links.sass +++ b/assets/sass/_task_links.sass @@ -1,9 +1,11 @@ +@import variables + .task-links-table td vertical-align: middle .task-links-task-count - color: #999 + color: color('light') .task-link-closed text-decoration: line-through diff --git a/assets/sass/_task_listing.sass b/assets/sass/_task_listing.sass index ea312685..1c265e87 100644 --- a/assets/sass/_task_listing.sass +++ b/assets/sass/_task_listing.sass @@ -1,12 +1,14 @@ +@import variables + .task-table .dropdown-menu - color: #000 + color: color('dark') text-decoration: none font-weight: bold &:focus, &:hover text-decoration: underline td.task-table a - color: #000 + color: color('dark') text-decoration: none &:hover text-decoration: underline diff --git a/assets/sass/_task_summary.sass b/assets/sass/_task_summary.sass index 0063ba43..0ecc979a 100644 --- a/assets/sass/_task_summary.sass +++ b/assets/sass/_task_summary.sass @@ -1,14 +1,13 @@ +@import variables + #task-summary margin-bottom: 15px h2 - color: #666 - font-size: $text-xlarge + color: color('medium') + font-size: size('xlarge') margin-top: 0 padding-top: 0 -.task-summary-buttons - margin-top: 10px - .task-summary-container border: 2px solid #000 border-radius: 8px @@ -23,9 +22,9 @@ justify-content: space-between .task-summary-column - color: #666 + color: color('primary') span - color: #555 + color: color('medium') li line-height: 23px @@ -34,6 +33,6 @@ border-radius: 8px margin-bottom: 20px h2 - color: #555 + color: color('medium') margin: 0 padding: 8px diff --git a/assets/sass/_task_tags.sass b/assets/sass/_task_tags.sass index 26cf38fa..935b3faf 100644 --- a/assets/sass/_task_tags.sass +++ b/assets/sass/_task_tags.sass @@ -1,9 +1,11 @@ +@import variables + .task-tags li display: inline margin: 0 margin-right: 4px padding: 2px - color: #666 + color: color('medium') border: 1px solid #666 border-radius: 2px diff --git a/assets/sass/_title.sass b/assets/sass/_title.sass index 3247b4a6..16e81df3 100644 --- a/assets/sass/_title.sass +++ b/assets/sass/_title.sass @@ -1,14 +1,16 @@ +@import variables + h1, h2, h3 font-weight: normal - color: $title-color + color: color('primary') h1 - font-size: $page-title-size + font-size: size('title') h2 - font-size: $text-large + font-size: size('large') margin-bottom: 10px h3 margin-top: 10px - font-size: $text-medium + font-size: size('medium') diff --git a/assets/sass/_tooltip.sass b/assets/sass/_tooltip.sass index a5c67aaf..19365a33 100644 --- a/assets/sass/_tooltip.sass +++ b/assets/sass/_tooltip.sass @@ -1,3 +1,5 @@ +@import variables + .tooltip-arrow:after background: #fff border: 1px solid #aaaaaa @@ -47,4 +49,4 @@ div.ui-tooltip list-style-type: none .tooltip .fa-info-circle - color: #999 + color: color('light') diff --git a/assets/sass/_user_mentions.sass b/assets/sass/_user_mentions.sass index 342ff953..4c0f038e 100644 --- a/assets/sass/_user_mentions.sass +++ b/assets/sass/_user_mentions.sass @@ -1,6 +1,8 @@ +@import variables + .user-mention-link font-weight: bold - color: #000 + color: color('dark') text-decoration: none &:hover - color: #555 + color: color('medium') diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass new file mode 100644 index 00000000..fcfc718a --- /dev/null +++ b/assets/sass/_variables.sass @@ -0,0 +1,83 @@ +$colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48) +$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333) +$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc) + +$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333) +$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0) +$alert-border-colors: ('default': #fbeed5, 'success': #d6e9c6, 'error': #eed3d7, 'info': #bce8f1, 'normal': #ddd) + +$button-colors: ('default': #333, 'red': #fff, 'blue': #fff, 'disabled': #ccc) +$button-background-colors: ('default': #f5f5f5, 'red': #d14836, 'blue': #4d90fe, 'disabled': #f7f7f7) +$button-border-colors: ('default': #ddd, 'red': #b0281a, 'blue': #3079ed, 'disabled': #ccc) +$button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff) +$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8) +$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed) + +$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em) + +$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif + +$dropdown-text-size: 0.9em +$board-text-size: 0.9em +$board-task-limit-color: #DF5353 + +@function size($key) + @return map-get($font-sizes, $key) + +@function color($key: 'primary') + @return map-get($colors, $key) + +@function link-color($key: 'primary') + @return map-get($link-colors, $key) + +@function bg-color($key: 'primary') + @return map-get($background-colors, $key) + +@function alert-color($key) + @return map-get($alert-colors, $key) + +@function alert-bg-color($key) + @return map-get($alert-background-colors, $key) + +@function alert-border-color($key) + @return map-get($alert-border-colors, $key) + +@function button-color($key) + @return map-get($button-colors, $key) + +@function button-bg-color($key) + @return map-get($button-background-colors, $key) + +@function button-border-color($key) + @return map-get($button-border-colors, $key) + +@function button-hover-color($key) + @return map-get($button-hover-colors, $key) + +@function button-hover-bg-color($key) + @return map-get($button-hover-background-colors, $key) + +@function button-hover-border-color($key) + @return map-get($button-hover-border-colors, $key) + +=appearance + -webkit-appearance: none + -moz-appearance: none + +=display-flex + display: -webkit-flex + display: flex + +=flex-direction($direction) + -webkit-flex-direction: $direction + flex-direction: $direction + +=flex-wrap + -webkit-flex-wrap: wrap + flex-wrap: wrap + +=align-content($position) + -webkit-align-items: $position + align-items: $position + -webkit-justify-content: $position + justify-content: $position diff --git a/assets/sass/app.sass b/assets/sass/app.sass index dc74121d..fe31a6f9 100644 --- a/assets/sass/app.sass +++ b/assets/sass/app.sass @@ -1,65 +1,3 @@ -$text-xlarge: 1.6em -$text-large: 1.4em -$text-medium: 1.2em -$text-normal: 1.0em -$text-small: 0.8em -$text-tiny: 0.7em - -$dropdown-text-size: 0.9em -$board-text-size: 0.9em - -$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif -$text-color: #333 - -$title-color: #333 -$page-title-size: 1.5em - -$link-color: #3366CC -$link-color-focus: #DF5353 -$link-color-hover: #333 - -$alert-default-text-color: #c09853 -$alert-default-background-color: #fcf8e3 -$alert-default-border-color: #fbeed5 - -$alert-success-text-color: #468847 -$alert-success-background-color: #dff0d8 -$alert-success-border-color: #d6e9c6 - -$alert-error-text-color: #b94a48 -$alert-error-background-color: #f2dede -$alert-error-border-color: #eed3d7 - -$alert-info-text-color: #3a87ad -$alert-info-background-color: #d9edf7 -$alert-info-border-color: #bce8f1 - -$alert-normal-text-color: #333 -$alert-normal-background-color: #f0f0f0 -$alert-normal-border-color: #ddd - -=appearance - -webkit-appearance: none - -moz-appearance: none - -=display-flex - display: -webkit-flex - display: flex - -=flex-direction($direction) - -webkit-flex-direction: $direction - flex-direction: $direction - -=flex-wrap - -webkit-flex-wrap: wrap - flex-wrap: wrap - -=align-content($position) - -webkit-align-items: $position - align-items: $position - -webkit-justify-content: $position - justify-content: $position - @import reset @import base @import links |