Merge pull request #504 from taigaio/astagi-feature/newthemes
Add custom themes \o/ (based on Astagi feature/newthemes)stable
David Barragán Merino
commit
b18509ea29
|
|
@ -7,6 +7,7 @@
|
|||
- Ability to create single-line or multi-line custom fields. (thanks to [@artlepool](https://github.com/artlepool))
|
||||
- Add custom videoconference system.
|
||||
- Make burndown chart collapsible at the backlog panel.
|
||||
- Ability to choose a theme (thanks to [@astagi](https://github.com/astagi))
|
||||
|
||||
### Misc
|
||||
- Improve performance: Show cropped images in timelines.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ window.taigaConfig = {
|
|||
"eventsUrl": null,
|
||||
"debug": true,
|
||||
"defaultLanguage": "en",
|
||||
"themes": ["taiga", "material-design", "high-contrast"],
|
||||
"defaultTheme": "taiga",
|
||||
"publicRegisterEnabled": true,
|
||||
"feedbackEnabled": true,
|
||||
"privacyPolicyUrl": null,
|
||||
|
|
|
|||
|
|
@ -37,9 +37,11 @@ class AuthService extends taiga.Service
|
|||
"$tgUrls",
|
||||
"$tgConfig",
|
||||
"$translate",
|
||||
"tgCurrentUserService"]
|
||||
"tgCurrentUserService",
|
||||
"tgThemeService"]
|
||||
|
||||
constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService) ->
|
||||
constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService,
|
||||
@themeService) ->
|
||||
super()
|
||||
userModel = @.getUser()
|
||||
@.setUserdata(userModel)
|
||||
|
|
@ -51,9 +53,12 @@ class AuthService extends taiga.Service
|
|||
else
|
||||
@.userData = null
|
||||
|
||||
_setTheme: ->
|
||||
theme = @rootscope.user?.theme || @config.get("defaultTheme") || "taiga"
|
||||
@themeService.use(theme)
|
||||
|
||||
_setLocales: ->
|
||||
lang = @rootscope.user.lang || @config.get("defaultLanguage") || "en"
|
||||
lang = @rootscope.user?.lang || @config.get("defaultLanguage") || "en"
|
||||
@translate.preferredLanguage(lang) # Needed for calls to the api in the correct language
|
||||
@translate.use(lang) # Needed for change the interface in runtime
|
||||
|
||||
|
|
@ -66,6 +71,7 @@ class AuthService extends taiga.Service
|
|||
user = @model.make_model("users", userData)
|
||||
@rootscope.user = user
|
||||
@._setLocales()
|
||||
@._setTheme()
|
||||
return user
|
||||
|
||||
return null
|
||||
|
|
@ -78,6 +84,7 @@ class AuthService extends taiga.Service
|
|||
@.setUserdata(user)
|
||||
|
||||
@._setLocales()
|
||||
@._setTheme()
|
||||
|
||||
clear: ->
|
||||
@rootscope.auth = null
|
||||
|
|
@ -117,9 +124,12 @@ class AuthService extends taiga.Service
|
|||
logout: ->
|
||||
@.removeToken()
|
||||
@.clear()
|
||||
|
||||
@currentUserService.removeUser()
|
||||
|
||||
@._setTheme()
|
||||
@._setLocales()
|
||||
|
||||
|
||||
register: (data, type, existing) ->
|
||||
url = @urls.resolve("auth-register")
|
||||
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
@location.replace()
|
||||
|
||||
@scope.lang = @getLan()
|
||||
@scope.theme = @getTheme()
|
||||
|
||||
maxFileSize = @config.get("maxUploadFileSize", null)
|
||||
if maxFileSize
|
||||
|
|
@ -68,6 +69,8 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
promise.then null, @.onInitialDataError.bind(@)
|
||||
|
||||
loadInitialData: ->
|
||||
@scope.availableThemes = @config.get("themes", [])
|
||||
|
||||
return @rs.locales.list().then (locales) =>
|
||||
@scope.locales = locales
|
||||
return locales
|
||||
|
|
@ -79,6 +82,11 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
return @scope.user.lang ||
|
||||
@translate.preferredLanguage()
|
||||
|
||||
getTheme: ->
|
||||
return @scope.user.theme ||
|
||||
@config.get("defaultTheme") ||
|
||||
"taiga"
|
||||
|
||||
module.controller("UserSettingsController", UserSettingsController)
|
||||
|
||||
|
||||
|
|
@ -96,6 +104,7 @@ UserProfileDirective = ($confirm, $auth, $repo, $translate) ->
|
|||
|
||||
changeEmail = $scope.user.isAttributeModified("email")
|
||||
$scope.user.lang = $scope.lang
|
||||
$scope.user.theme = $scope.theme
|
||||
|
||||
onSuccess = (data) =>
|
||||
$auth.setUser(data)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ html(lang="en")
|
|||
meta(name="description", content="Taiga is a project management platform for startups and agile developers & designers who want a simple, beautiful tool that makes work truly enjoyable.")
|
||||
meta(name="keywords", content="agile, scrum, taiga, management, project, developer, designer, user experience")
|
||||
//-meta(name="viewport", content="width=device-width, user-scalable=no")
|
||||
link(rel="stylesheet", href="/styles/main.css")
|
||||
link(rel="stylesheet", href="/styles/theme-taiga.css")
|
||||
link(rel="icon", type="image/png", href="/images/favicon.png")
|
||||
|
||||
//- PRERENDER SERVICE: This is to know when the page is completely loaded.
|
||||
|
|
|
|||
|
|
@ -1193,7 +1193,9 @@
|
|||
"BIO": "Bio (max. 210 chars)",
|
||||
"PLACEHOLDER_BIO": "Tell us something about you",
|
||||
"LANGUAGE": "Language",
|
||||
"LANGUAGE_DEFAULT": "-- use default language --"
|
||||
"LANGUAGE_DEFAULT": "-- use default language --",
|
||||
"THEME": "Theme",
|
||||
"THEME_DEFAULT": "-- use default theme --"
|
||||
}
|
||||
},
|
||||
"WIZARD": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
padding: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
border-color: $fresh-taiga;
|
||||
border-color: $primary-light;
|
||||
transition: all .3s linear;
|
||||
p {
|
||||
color: $gray;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
$dropdown-width: 350px;
|
||||
|
||||
.navbar {
|
||||
background: rgba($black, .5);
|
||||
display: flex;
|
||||
height: $navbar;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
&:after {
|
||||
background: url('../images/menu-vert.png') repeat top left;
|
||||
background-size: 200%;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
}
|
||||
.nav-left {
|
||||
>a {
|
||||
color: $white;
|
||||
padding: .5rem 1.5rem;
|
||||
&.logo {
|
||||
background: rgba($black, .2);
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
.nav-right {
|
||||
margin-left: auto;
|
||||
a {
|
||||
color: $white;
|
||||
padding: .5rem 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -48,10 +50,12 @@
|
|||
color: $white;
|
||||
display: inline-block;
|
||||
transition: all .2s linear;
|
||||
&.active,
|
||||
svg path {
|
||||
fill: darken($primary-dark, 8%);
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($black, .2);
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
svg path {
|
||||
fill: $white;
|
||||
}
|
||||
|
|
@ -77,7 +81,7 @@
|
|||
height: 1.2rem;
|
||||
max-width: 1.2rem;
|
||||
path {
|
||||
fill: $dark-taiga;
|
||||
fill: $top-icon-color;
|
||||
transition: all .2s;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +134,7 @@
|
|||
padding: .8rem .5rem;
|
||||
&:hover {
|
||||
background: rgba($white, .1);
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
&.see-more-projects-btn,
|
||||
&.create-organization-btn,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
&:hover,
|
||||
&.active {
|
||||
border-bottom: 2px solid $gray-light;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
top: 1px;
|
||||
transition: color .2s linear;
|
||||
.icon {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
&:hover,
|
||||
&.active {
|
||||
border-bottom: 2px solid $gray-light;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
color: $gray-light;
|
||||
}
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
.trans-button {
|
||||
margin-bottom: 1rem;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
.active {
|
||||
.icon {
|
||||
color: $star-fill;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
.project-list-single {
|
||||
background: $white;
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
cursor: move;
|
||||
transition: background .3s;
|
||||
.drag {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
taiga = @.taiga
|
||||
|
||||
|
||||
class ThemeService extends taiga.Service = ->
|
||||
use: (themeName) ->
|
||||
stylesheetEl = $("link[rel='stylesheet']")
|
||||
|
||||
if stylesheetEl.length == 0
|
||||
stylesheetEl = $("<link rel='stylesheet' href='' type='text/css'>")
|
||||
$("head").append(stylesheetEl)
|
||||
|
||||
stylesheetEl.attr("href", "/styles/theme-#{themeName}.css")
|
||||
|
||||
|
||||
angular.module("taigaCommon").service("tgThemeService", ThemeService)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
describe "ThemeService", ->
|
||||
themeService = null
|
||||
data = {
|
||||
theme: "testTheme"
|
||||
}
|
||||
|
||||
_inject = () ->
|
||||
inject (_tgThemeService_) ->
|
||||
themeService = _tgThemeService_
|
||||
|
||||
beforeEach ->
|
||||
module "taigaCommon"
|
||||
_inject()
|
||||
|
||||
it "use a test theme", () ->
|
||||
themeService.use(data.theme)
|
||||
expect($("link[rel='stylesheet']")).to.have.attr("href", "/styles/theme-#{data.theme}.css")
|
||||
|
|
@ -7,13 +7,13 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
&:first-child {
|
||||
@extend %bold;
|
||||
color: $gray;
|
||||
}
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
|
|||
|
||||
div.data
|
||||
fieldset
|
||||
label(for="email", translate="USER_PROFILE.FIELD.USERNAME")
|
||||
label(for="username", translate="USER_PROFILE.FIELD.USERNAME")
|
||||
input(type="text", name="username", id="username",
|
||||
placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}",
|
||||
ng-model="user.username", data-required="true", data-maxlength="255",
|
||||
|
|
@ -51,16 +51,23 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl",
|
|||
data-maxlength="256")
|
||||
|
||||
fieldset
|
||||
label(for="full-name", translate="USER_PROFILE.FIELD.LANGUAGE")
|
||||
select(ng-model="lang",
|
||||
label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE")
|
||||
select(name="lang", id="lang", ng-model="lang",
|
||||
ng-options="locale.code as locale.name for locale in locales")
|
||||
option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT")
|
||||
|
||||
fieldset
|
||||
label(for="theme", translate="USER_PROFILE.FIELD.THEME")
|
||||
select(name="theme", id="theme", ng-model="theme",
|
||||
ng-options="availableTheme for availableTheme in availableThemes")
|
||||
option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT")
|
||||
|
||||
fieldset
|
||||
label(for="bio", translate="USER_PROFILE.FIELD.BIO")
|
||||
|
||||
textarea(name="bio", id="bio", ng-model="user.bio",
|
||||
ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", ng-maxlength="210", maxlength="210")
|
||||
ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}",
|
||||
ng-maxlength="210", maxlength="210")
|
||||
|
||||
fieldset.submit
|
||||
button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}",
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
&.active {
|
||||
span,
|
||||
.icon {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
.button-green,
|
||||
a.button-green {
|
||||
@extend %button;
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@ a.button-gray {
|
|||
background: $gray;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,13 +111,13 @@ a.button-gray {
|
|||
|
||||
.button-bulk {
|
||||
@extend %button;
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
padding: .35rem .5rem;
|
||||
.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
input:checked {
|
||||
+ div {
|
||||
background-color: $fresh-taiga;
|
||||
background-color: $primary-light;
|
||||
margin-left: 50%;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
.created-user {
|
||||
@extend %large;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
cursor: default;
|
||||
&.editable {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.kanban-task {
|
||||
background: $postit;
|
||||
border: 1px solid $postit-hover;
|
||||
background: $card;
|
||||
border: 1px solid $card-hover;
|
||||
box-shadow: none;
|
||||
cursor: move;
|
||||
margin: .2rem;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
&:hover {
|
||||
.icon-edit,
|
||||
.icon-drag-h {
|
||||
color: $postit-dark-hover;
|
||||
color: $card-dark;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: color .3s linear, opacity .3s linear;
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
}
|
||||
}
|
||||
.kanban-tagline {
|
||||
border-color: $postit-hover;
|
||||
border-color: $card-hover;
|
||||
display: flex;
|
||||
height: .6rem;
|
||||
}
|
||||
.kanban-tag {
|
||||
border-top: .3rem solid $postit-hover;
|
||||
border-top: .3rem solid $card-hover;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
height: .6rem;
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
img {
|
||||
margin: 0 auto;
|
||||
&:hover {
|
||||
border: 2px solid $green-taiga;
|
||||
border: 2px solid $primary;
|
||||
transition: border .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
padding: 0 .5rem 0 .8rem;
|
||||
}
|
||||
.task-assigned {
|
||||
color: $postit-dark-hover;
|
||||
color: $card-dark;
|
||||
display: block;
|
||||
}
|
||||
.task-num {
|
||||
|
|
@ -90,12 +90,12 @@
|
|||
.icon-edit,
|
||||
.icon-drag-h {
|
||||
@extend %large;
|
||||
color: $postit-hover;
|
||||
color: $card-hover;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity .2s linear;
|
||||
&:hover {
|
||||
color: darken($postit-hover, 15%);
|
||||
color: darken($card-hover, 15%);
|
||||
transition: color .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
}
|
||||
.task-points {
|
||||
@extend %small;
|
||||
color: darken($postit-hover, 15%);
|
||||
color: darken($card-hover, 15%);
|
||||
margin: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ a.help-button {
|
|||
transition: color .2s linear;
|
||||
}
|
||||
.icon {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.notification-message-success {
|
||||
background: rgba($fresh-taiga, .95);
|
||||
background: rgba($primary-light, .95);
|
||||
box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05);
|
||||
opacity: 1;
|
||||
right: -370px;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
.active {
|
||||
span {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
.dots {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $summary-background: $grayer;
|
|||
}
|
||||
.data {
|
||||
.number {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
.number {
|
||||
|
|
@ -82,7 +82,7 @@ $summary-background: $grayer;
|
|||
position: relative;
|
||||
width: 15%;
|
||||
.current-progress {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
height: 24px;
|
||||
}
|
||||
.defined-points {
|
||||
|
|
@ -97,7 +97,7 @@ $summary-background: $grayer;
|
|||
position: absolute;
|
||||
}
|
||||
.closed-points-progress {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -136,11 +136,11 @@ $summary-background: $grayer;
|
|||
float: right;
|
||||
transition: color .3s linear;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .3s linear;
|
||||
}
|
||||
&.active {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
&.active:hover {
|
||||
color: $green-taiga;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
border: 1px solid $gray-light;
|
||||
z-index: 99910;
|
||||
.ui-state-focus {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
}
|
||||
li {
|
||||
cursor: pointer;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
.add-tag {
|
||||
color: $gray-light;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
.icon-plus {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.taskboard-task {
|
||||
background: $postit;
|
||||
border: 1px solid $postit-hover;
|
||||
background: $card;
|
||||
border: 1px solid $card-hover;
|
||||
box-shadow: none;
|
||||
cursor: move;
|
||||
margin: .2rem;
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
&:hover {
|
||||
.icon-edit,
|
||||
.icon-drag-h {
|
||||
color: $postit-dark-hover;
|
||||
color: $card-dark;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: color .3s linear, opacity .3s linear;
|
||||
|
|
@ -37,12 +37,12 @@
|
|||
}
|
||||
}
|
||||
.taskboard-tagline {
|
||||
border-color: $postit-hover;
|
||||
border-color: $card-hover;
|
||||
display: flex;
|
||||
height: .6rem;
|
||||
}
|
||||
.taskboard-tag {
|
||||
border-top: .3rem solid $postit-hover;
|
||||
border-top: .3rem solid $card-hover;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
height: .6rem;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
img {
|
||||
margin: 0 auto;
|
||||
&:hover {
|
||||
border: 2px solid $green-taiga;
|
||||
border: 2px solid $primary;
|
||||
transition: border .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -86,10 +86,10 @@
|
|||
}
|
||||
.task-assigned {
|
||||
@extend %small;
|
||||
color: $postit-dark-hover;
|
||||
color: $card-dark;
|
||||
display: block;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.task-num {
|
||||
|
|
@ -113,11 +113,11 @@
|
|||
.icon-drag-h {
|
||||
@extend %large;
|
||||
bottom: .5rem;
|
||||
color: $postit-hover;
|
||||
color: $card-hover;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
&:hover {
|
||||
color: $postit-dark-hover;
|
||||
color: $card-dark;
|
||||
}
|
||||
}
|
||||
.icon-edit {
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@
|
|||
}
|
||||
}
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ html {
|
|||
}
|
||||
body {
|
||||
@extend %text;
|
||||
background: $white; // fallback
|
||||
color: $grayer;
|
||||
line-height: 1.3;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -17,15 +15,6 @@ body {
|
|||
}
|
||||
&.loading-project {
|
||||
overflow: hidden;
|
||||
.projects-nav-overlay {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
transition: opacity 1s ease;
|
||||
div {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +27,6 @@ body {
|
|||
}
|
||||
|
||||
.master {
|
||||
background: $white;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -57,7 +45,6 @@ body {
|
|||
}
|
||||
|
||||
.menu-secondary {
|
||||
background: $whitish;
|
||||
flex: 0 0 auto;
|
||||
min-height: $main-height;
|
||||
min-width: 0;
|
||||
|
|
@ -84,17 +71,11 @@ body {
|
|||
}
|
||||
|
||||
.menu-tertiary {
|
||||
background-color: $dark-taiga;
|
||||
flex: 0 0 auto;
|
||||
min-height: $main-height;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.extrabar {
|
||||
background: $whitish;
|
||||
}
|
||||
|
||||
%main,
|
||||
.main {
|
||||
flex: 4;
|
||||
flex-basis: 600px;
|
||||
|
|
|
|||
|
|
@ -3,16 +3,13 @@
|
|||
// Blockquotes
|
||||
blockquote,
|
||||
blockquote p {
|
||||
color: $gray;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 5px solid $whitish;
|
||||
margin: 0 0 20px;
|
||||
padding: .5rem 1.25rem;
|
||||
cite {
|
||||
@extend %small;
|
||||
color: $gray;
|
||||
display: block;
|
||||
&:before {
|
||||
content: '\2014 \0020';
|
||||
|
|
@ -59,14 +56,14 @@ sup {
|
|||
}
|
||||
.is-selected {
|
||||
.pika-button {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: inset 0 1px 3px $green-taiga;
|
||||
box-shadow: inset 0 1px 3px $primary;
|
||||
}
|
||||
}
|
||||
.is-today {
|
||||
.pika-button {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
&.is-selected {
|
||||
button {
|
||||
|
|
@ -76,9 +73,9 @@ sup {
|
|||
}
|
||||
.pika-button {
|
||||
&:hover {
|
||||
background: $fresh-taiga !important; //Important added because plugin has it :S
|
||||
background: $primary-light !important; //Important added because plugin has it :S
|
||||
border-radius: 0 !important; //Important added because plugin has it :S
|
||||
box-shadow: inset 0 1px 3px $fresh-taiga !important; //Important added because plugin has it :S
|
||||
box-shadow: inset 0 1px 3px $primary-light !important; //Important added because plugin has it :S
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,17 +19,11 @@ input[type="date"],
|
|||
input[type="password"],
|
||||
select,
|
||||
textarea {
|
||||
background: $whitish;
|
||||
border: 1px solid $gray-light;
|
||||
color: $grayer;
|
||||
border: 1px solid;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
@include placeholder {
|
||||
color: darken($gray-light, 10%);
|
||||
}
|
||||
&.checksley-error {
|
||||
border: 1px solid $red;
|
||||
transition: border .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -42,14 +36,12 @@ textarea {
|
|||
|
||||
.checksley-error-list {
|
||||
@extend %small;
|
||||
background: rgba($whitish, .8);
|
||||
margin-bottom: 0;
|
||||
padding: 0 .5rem;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 10px;
|
||||
li {
|
||||
color: $red;
|
||||
padding: .2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ h1 {
|
|||
max-width: 40%;
|
||||
}
|
||||
.green {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
.date {
|
||||
@include ellipsis(500px);
|
||||
|
|
@ -92,10 +92,8 @@ hr {
|
|||
// __Links__
|
||||
a,
|
||||
a:visited {
|
||||
color: $grayer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
transition: color .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
// Colors
|
||||
|
||||
$black: #000;
|
||||
$blackish: #050505;
|
||||
$grayer: #444;
|
||||
$gray: #555;
|
||||
$gray-light: #b8b8b8;
|
||||
$whitish: #f5f5f5;
|
||||
$white: #fff;
|
||||
|
||||
|
||||
$green-taiga: #72a114;
|
||||
$fresh-taiga: #9dce0a;
|
||||
$dark-taiga: #879b89;
|
||||
|
||||
$red-light: #ff8282;
|
||||
$red: #f00;
|
||||
|
||||
$postit: #fff8e4;
|
||||
$postit-hover: #f1e8cd;
|
||||
$postit-dark-hover: #cfc29b;
|
||||
|
||||
|
||||
//Loading bar
|
||||
$green-japanese-laurel: #237400;
|
||||
$green-olive: #618000;
|
||||
$red-amaranth: #e43050;
|
||||
$purple-eggplant: #810061;
|
||||
$yellow-pear: #bbe831;
|
||||
|
||||
$menu: #232323;
|
||||
$star-fill: #edd400;
|
||||
|
||||
// Top menu values
|
||||
$top-icon-color: #11241f;
|
||||
$dropdown-width: 350px;
|
||||
$dropdown-color: rgba(darken($grayer, 20%), 1);
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
%mono {font-family: 'courier new', 'monospace';}
|
||||
|
||||
%lightbox {
|
||||
background: rgba($white, .95);
|
||||
bottom: 0;
|
||||
display: none;
|
||||
left: 0;
|
||||
|
|
@ -62,17 +61,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Background
|
||||
%triangled-bg {
|
||||
background: url('/images/bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
%background-taiga {
|
||||
background: url('/images/invitation_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
%loading-spinner {
|
||||
animation-timing-function: ease-in-out;
|
||||
animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
border: 0;
|
||||
}
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .3s linear;
|
||||
&.point {
|
||||
color: $white;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $prefix-for-mozilla: true;
|
|||
// dependencies
|
||||
//#################################################
|
||||
|
||||
@import '../dependencies/colors';
|
||||
@import "variables";
|
||||
@import '../dependencies/mixins';
|
||||
@import '../dependencies/helpers';
|
||||
@import '../dependencies/responsive';
|
||||
|
|
|
|||
|
|
@ -37,8 +37,3 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
//.project-values-options {
|
||||
// margin-bottom: 1rem;
|
||||
// text-align: right;
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
}
|
||||
.button-blackish {
|
||||
&:hover {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
|
|
|
|||
|
|
@ -41,17 +41,11 @@
|
|||
form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
input {
|
||||
background: $white;
|
||||
@include placeholder {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
.login-text,
|
||||
.register-text {
|
||||
text-align: center;
|
||||
a:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
margin: 1rem 0;
|
||||
span {
|
||||
&:last-child {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
padding: 0 .2rem;
|
||||
}
|
||||
a:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
a:first-child {
|
||||
border: 0;
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
|
||||
.us-detail-status {
|
||||
@extend %large;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
.current-progress {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
height: 26px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
text-align: center;
|
||||
transition: color .3s linear;
|
||||
&.active {
|
||||
background: rgba($fresh-taiga, .9);
|
||||
background: rgba($primary-light, .9);
|
||||
color: $whitish;
|
||||
}
|
||||
&:first-child {
|
||||
|
|
@ -316,7 +316,7 @@
|
|||
text-align: center;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
}
|
||||
}
|
||||
&.active {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
.item-block {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
}
|
||||
.row:hover {
|
||||
background: rgba($fresh-taiga, .05);
|
||||
background: rgba($primary-light, .05);
|
||||
cursor: move;
|
||||
transition: background .2s linear;
|
||||
.icon-drag-v,
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
transition: color .2s linear;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
vertical-align: top;
|
||||
width: 32%;
|
||||
&.active {
|
||||
background-color: rgba($green-taiga, .3);
|
||||
background-color: rgba($primary, .3);
|
||||
opacity: 1;
|
||||
}
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -55,9 +55,6 @@
|
|||
.pending {
|
||||
background-color: $red-light;
|
||||
color: $white;
|
||||
.icon {
|
||||
float: rsdsdfdvsdvight;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@
|
|||
}
|
||||
.privacy-project:checked {
|
||||
+ label {
|
||||
background: $fresh-taiga;
|
||||
border: 1px solid $fresh-taiga;
|
||||
background: $primary-light;
|
||||
border: 1px solid $primary-light;
|
||||
span {
|
||||
color: $white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
margin-left: .5rem;
|
||||
transition: color.3s linear;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color.3s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
justify-content: space-between;
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
&:hover {
|
||||
background: lighten($dark-taiga, 3%);
|
||||
background: lighten($primary-dark, 3%);
|
||||
color: $white;
|
||||
transition: all .2s;
|
||||
}
|
||||
&.active {
|
||||
background: lighten($dark-taiga, 10%);
|
||||
background: lighten($primary-dark, 10%);
|
||||
color: $white;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
transition: color .2s linear;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s linear;
|
||||
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
padding: .5rem;
|
||||
transition: background .2s linear;
|
||||
&:hover {
|
||||
background: rgba($fresh-taiga, .1);
|
||||
background: rgba($primary-light, .1);
|
||||
transition: background .2s linear;
|
||||
}
|
||||
&.history-single-open {
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
margin-right: .5rem;
|
||||
width: .8rem;
|
||||
&.history-success {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
}
|
||||
&.history-error {
|
||||
background: $red;
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
@extend %small;
|
||||
color: $gray-light;
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
.project-values-row {
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
cursor: move;
|
||||
transition: background .2s ease-in;
|
||||
.icon {
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
color: $gray;
|
||||
margin-right: .5rem;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .3s linear;
|
||||
.icon-delete {
|
||||
color: $red;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
@include popover(200px, 0, 65%, '', '');
|
||||
a {
|
||||
&.active {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
text-align: center;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
.us-settings,
|
||||
.icon-drag-v {
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
border-bottom: 0;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
box-shadow: 1px 1px 10px rgba($black, .1);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
.row-selected {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
.user-story-name {
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
margin-right: 1rem;
|
||||
vertical-align: super;
|
||||
&:checked+a {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
transition: all .2s linear;
|
||||
}
|
||||
&:hover {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
transition: opacity .2s ease-in;
|
||||
vertical-align: baseline;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
.current-progress {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
border-radius: 2px;
|
||||
height: 8px;
|
||||
left: 0;
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
height: 40px;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
box-shadow: 1px 1px 10px rgba($black, .1);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ $column-margin: 0 10px 0 0;
|
|||
margin-right: .3rem;
|
||||
transition: color .2s linear;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
&.hfold,
|
||||
&.hunfold {
|
||||
|
|
@ -178,9 +178,6 @@ $column-margin: 0 10px 0 0;
|
|||
}
|
||||
}
|
||||
}
|
||||
.taskboard-tasks-box {
|
||||
background: $whitish;
|
||||
}
|
||||
|
||||
.taskboard-userstory-box {
|
||||
padding: .5rem .5rem .5rem 1.5rem;
|
||||
|
|
@ -191,7 +188,7 @@ $column-margin: 0 10px 0 0;
|
|||
top: .7rem;
|
||||
transition: color .2s linear;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
&.icon-plus {
|
||||
right: 2rem;
|
||||
|
|
@ -234,7 +231,7 @@ $column-margin: 0 10px 0 0;
|
|||
|
||||
.points-list {
|
||||
a {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
&:hover {
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
.user-assigned {
|
||||
@extend %large;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
cursor: default;
|
||||
line-height: 1.5rem;
|
||||
&.editable {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
color: $grayer;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
box-shadow: 1px 1px 10px rgba($black, .1);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
display: block;
|
||||
position: absolute;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.settings {
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
}
|
||||
.percentage {
|
||||
background: rgba($green-taiga, .1);
|
||||
background: rgba($primary, .1);
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
|
|
@ -162,11 +162,11 @@
|
|||
color: $gray-light;
|
||||
}
|
||||
.more-attachments-num {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
margin-right: .1rem;
|
||||
width: 15px;
|
||||
&.active {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
}
|
||||
&.inactive {
|
||||
background: $gray;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
justify-content: center;
|
||||
padding: 1rem;
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
cursor: move;
|
||||
transition: background .2s ease-in;
|
||||
.icon {
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
margin-right: 1rem;
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
&.icon-check-square {
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
.icon-check-square {
|
||||
@extend %large;
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
color: $gray-light;
|
||||
}
|
||||
a:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
padding: 0 .2rem;
|
||||
transition: color .3s linear;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
&:first-child {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding: .5rem;
|
||||
&:hover {
|
||||
.icon {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transform: rotate(180deg);
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
color: $grayer;
|
||||
}
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
display: block;
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
.prev-comments-num {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
color: $gray-light;
|
||||
margin-left: .3rem;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -206,12 +206,12 @@
|
|||
vertical-align: baseline;
|
||||
}
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.activity-user {
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
}
|
||||
}
|
||||
.activity-username {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.activity-content {
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
.prev-activity-num {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
.requirement,
|
||||
.iocaine {
|
||||
&:hover {
|
||||
background: $fresh-taiga;
|
||||
border: 1px solid $green-taiga;
|
||||
background: $primary-light;
|
||||
border: 1px solid $primary;
|
||||
color: $white;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
.team-requirement,
|
||||
.iocaine-flag {
|
||||
input:checked+label {
|
||||
background: $green-taiga;
|
||||
border: 1px solid $green-taiga;
|
||||
background: $primary;
|
||||
border: 1px solid $primary;
|
||||
color: $white;
|
||||
|
||||
}
|
||||
|
|
@ -400,7 +400,7 @@
|
|||
padding: 3px;
|
||||
position: relative;
|
||||
.bar {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
transition: width .1s linear;
|
||||
|
|
@ -477,7 +477,7 @@
|
|||
position: relative;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: lighten($green-taiga, 55%);
|
||||
background: lighten($primary, 55%);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
$label-arrow-wh: 12px;
|
||||
|
||||
tg-project-menu {
|
||||
background-color: $dark-taiga;
|
||||
background-image: url('../images/menu.png');
|
||||
background-position: 0 -300px;
|
||||
min-height: $main-height;
|
||||
padding: 1rem 0;
|
||||
|
|
@ -22,7 +20,7 @@ tg-project-menu {
|
|||
}
|
||||
a:hover {
|
||||
background: rgba($black, .2);
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
transition: color .3s linear;
|
||||
.helper {
|
||||
@extend %small;
|
||||
|
|
@ -52,7 +50,6 @@ tg-project-menu {
|
|||
}
|
||||
}
|
||||
svg path {
|
||||
fill: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
|
|
@ -70,9 +67,9 @@ tg-project-menu {
|
|||
}
|
||||
.active {
|
||||
background: rgba($black, .2);
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
svg path {
|
||||
fill: $fresh-taiga;
|
||||
fill: $primary-light;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,141 +0,0 @@
|
|||
.projects-nav {
|
||||
background-color: $menu;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
padding: 2rem 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transform: translate3d(-300px, 0, 0);
|
||||
width: 300px;
|
||||
z-index: 99;
|
||||
form {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
h1 {
|
||||
color: $white;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
background-color: $gray;
|
||||
color: $whitish;
|
||||
}
|
||||
.icon-search {
|
||||
position: absolute;
|
||||
right: .7rem;
|
||||
top: .7rem;
|
||||
}
|
||||
ul {
|
||||
left: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
min-height: 1px; //firefox bug #2057
|
||||
}
|
||||
.create-project-button-wrapper {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1rem;
|
||||
.create-project-button {
|
||||
flex-grow: 8;
|
||||
margin-right: .2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.import-project-button {
|
||||
flex-grow: 1;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
text-align: center;
|
||||
.icon {
|
||||
color: $grayer;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-pagination-previous,
|
||||
.v-pagination-next {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-list {
|
||||
a {
|
||||
@extend %large;
|
||||
@extend %title;
|
||||
color: $whitish;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $gray;
|
||||
color: $green-taiga;
|
||||
transition: background-color .3s linear;
|
||||
.icon {
|
||||
opacity: 1;
|
||||
transition: opacity .3s linear;
|
||||
}
|
||||
}
|
||||
.project-name {
|
||||
display: block;
|
||||
max-width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
color: $whitish;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
li {
|
||||
border-bottom: 2px solid $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-nav-overlay {
|
||||
// @include transition (all 1s ease);
|
||||
@extend %background-taiga;
|
||||
// background-blend-mode: multiply;
|
||||
// background-color: $green-taiga;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99900;
|
||||
.container {
|
||||
left: -200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 15%;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
transform: translateY(-50%);
|
||||
width: 150px;
|
||||
}
|
||||
p {
|
||||
@extend %medium;
|
||||
color: $fresh-taiga;
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
color: $grayer;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
}
|
||||
.iocaine,
|
||||
.iocaine:hover {
|
||||
background: rgba($fresh-taiga, .3);
|
||||
background: rgba($primary-light, .3);
|
||||
.icon-iocaine {
|
||||
@extend %large;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wizard-create-project {
|
||||
@extend %lightbox;
|
||||
background: url('/images/invitation_bg.jpg') no-repeat center center;
|
||||
@extend %background-taiga;
|
||||
background-size: cover;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
input:checked {
|
||||
+label {
|
||||
background: rgba($fresh-taiga, .7);
|
||||
background: rgba($primary-light, .7);
|
||||
transition: background .3s ease-in;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
text-align: center;
|
||||
transition: background .3s ease-in;
|
||||
&:hover {
|
||||
background: rgba($green-taiga, .7);
|
||||
background: rgba($primary, .7);
|
||||
transition: background .3s ease-in;
|
||||
}
|
||||
.icon {
|
||||
|
|
@ -160,12 +160,8 @@
|
|||
left: 25%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
// left: 50%;
|
||||
left: 75%;
|
||||
}
|
||||
// &:nth-child(3) {
|
||||
// left: 75%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.progress-bar-wrapper {
|
||||
|
|
@ -173,7 +169,7 @@
|
|||
height: .5rem;
|
||||
}
|
||||
.bar {
|
||||
background: rgba($fresh-taiga, .9);
|
||||
background: rgba($primary-light, .9);
|
||||
height: .5rem;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
margin-bottom: .5rem;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
.custom-filters {
|
||||
.title {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
a {
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
padding: .5rem 0 .5rem .5rem;
|
||||
transition: color .2s ease-in;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .2s ease-in;
|
||||
.icon {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -49,9 +49,6 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
margin-right: .14rem;
|
||||
width: 24%;
|
||||
|
|
@ -59,6 +56,9 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
border-radius: .2rem;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
.row {
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
.icon {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
}
|
||||
.row-selected {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ $column-margin: 0 10px 0 0;
|
|||
margin-right: .3rem;
|
||||
transition: color .2s linear;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
}
|
||||
&.hfold,
|
||||
&.hunfold {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.search-result-table {
|
||||
|
||||
.empty {
|
||||
.title {
|
||||
border: 0;
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
justify-content: space-between;
|
||||
padding: .5rem;
|
||||
&:hover {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
.ref {
|
||||
|
|
@ -40,7 +39,7 @@
|
|||
}
|
||||
}
|
||||
.row-selected {
|
||||
background: lighten($green-taiga, 60%);
|
||||
background: lighten($primary, 60%);
|
||||
transition: background .2s ease-in;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
padding: 1rem 0 1rem 1rem;
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $green-taiga;
|
||||
color: $primary;
|
||||
transition: color .3s linear;
|
||||
}
|
||||
&.active.icon {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
color: $grayer;
|
||||
}
|
||||
.top {
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
display: none;
|
||||
&:checked {
|
||||
+label {
|
||||
background: $green-taiga;
|
||||
background: $primary;
|
||||
transition: background .3s linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
display: block;
|
||||
padding: .5rem;
|
||||
&:hover {
|
||||
background: $fresh-taiga;
|
||||
background: $primary-light;
|
||||
cursor: pointer;
|
||||
transition: background .3s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
.username {
|
||||
@extend %large;
|
||||
color: $fresh-taiga;
|
||||
color: $primary-light;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
// Any styles in this stylesheet will override any previous defined style in Taiga.
|
||||
|
||||
// Max: Beat it or I'll call the Brute Squad!
|
||||
// Fezzik: I'm on the Brute Squad.
|
||||
// Max: [sees Fezzik's size] You are the Brute Squad!
|
||||
|
||||
.working-on .duty-id,
|
||||
.watching .duty-id,
|
||||
.activity-item p,
|
||||
.table-team .avatar .position,
|
||||
.points-per-role > li,
|
||||
.private path {
|
||||
color: $black;
|
||||
}
|
||||
.navbar a:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.points-per-role > li:first-child {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
.login-main {
|
||||
color: $white;
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.home-project-list {
|
||||
li {
|
||||
border: 1px solid $black;
|
||||
}
|
||||
p {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav .active {
|
||||
background: $white;
|
||||
svg path {
|
||||
fill: $black;
|
||||
}
|
||||
}
|
||||
|
||||
// Titles
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
.date {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
}
|
||||
|
||||
.master,
|
||||
.menu-secondary,
|
||||
.menu-tertiary,
|
||||
.extrabar {
|
||||
background: $white;
|
||||
border-left: 1px solid $black;
|
||||
border-right: 1px solid $black;
|
||||
}
|
||||
|
||||
.button-gray {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
.settings-nav {
|
||||
.active {
|
||||
background: $black;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-submenu ul a {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.policy-table {
|
||||
input:checked {
|
||||
+label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: $black;
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-common .admin-subtitle {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.admin-functionalities .functionality.active {
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
}
|
||||
|
||||
.admin-membership-table {
|
||||
.avatar .email,
|
||||
.delete {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
//*************************
|
||||
//** COLORS
|
||||
//************************
|
||||
|
||||
// Colors
|
||||
$black: #000;
|
||||
$blackish: #212121;
|
||||
$grayer: #212121;
|
||||
$gray: #757575;
|
||||
$gray-light: #f5f5f5;
|
||||
$whitish: #f5f5f5;
|
||||
$white: #fff;
|
||||
|
||||
// Primary colors
|
||||
$primary-light: #212121;
|
||||
$primary: #000;
|
||||
$primary-dark: #000;
|
||||
|
||||
//Warning colors
|
||||
$red-light: #ff0062;
|
||||
$red: #ff2400;
|
||||
|
||||
//Card color
|
||||
$card: #F0EFD1;
|
||||
$card-hover: $black;
|
||||
$card-dark: $black;
|
||||
|
||||
$green-japanese-laurel: #009688;
|
||||
$green-olive: #cddc39;
|
||||
$red-amaranth: #e91e63;
|
||||
$purple-eggplant: #9c27b0;
|
||||
$yellow-pear: #ffc107;
|
||||
|
||||
//*************************
|
||||
//** LAYOUT
|
||||
//*************************
|
||||
|
||||
// Default body color and background
|
||||
body {
|
||||
background: $white; // fallback
|
||||
color: $grayer;
|
||||
}
|
||||
|
||||
// Main
|
||||
.master {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Secondary panel
|
||||
.menu-secondary {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Tertiary panel
|
||||
.menu-tertiary {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
// Extra bar panel
|
||||
.extrabar {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
|
||||
//**************************
|
||||
//** TYPOGRAPHY
|
||||
//**************************
|
||||
|
||||
// Font Sizes
|
||||
%xsmall {font-size: .75rem;}
|
||||
%small {font-size: .9rem;}
|
||||
%medium {font-size: 1rem;}
|
||||
%large {font-size: 1.2rem;}
|
||||
%larger {font-size: 1.6rem;}
|
||||
%xlarge {font-size: 2rem;}
|
||||
%xxlarge {font-size: 3rem;}
|
||||
|
||||
// Font Types
|
||||
%title {font-family: Arial, Helvetica, sans-serif; }
|
||||
%light {font-family: Arial, Helvetica, sans-serif; font-weight: 100; }
|
||||
%text {font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
|
||||
%bold {font-family: Arial, Helvetica, sans-serif; font-weight:800; }
|
||||
%taiga {font-family: 'taiga';}
|
||||
%mono {font-family: 'courier new', 'monospace';}
|
||||
|
||||
// Titles
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $blackish;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grayer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
//**************************
|
||||
//** SCAFFOLDING
|
||||
//**************************
|
||||
|
||||
//Forms
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
input[type="password"],
|
||||
select,
|
||||
textarea {
|
||||
background: $white;
|
||||
border-color: $black;
|
||||
color: $black;
|
||||
@include placeholder {
|
||||
color:$black;
|
||||
}
|
||||
&.checksley-error {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Input errors
|
||||
.checksley-error-list {
|
||||
background: rgba($whitish, .8);
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 5px solid $gray;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
blockquote p {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
cite {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// lightbox
|
||||
%lightbox {
|
||||
background: rgba($white, .95);
|
||||
}
|
||||
|
||||
// Background images
|
||||
%triangled-bg {
|
||||
background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
%background-taiga {
|
||||
background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.summary {
|
||||
background: $grayer;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
//************************
|
||||
//** NAVIGATION
|
||||
//***********************
|
||||
|
||||
// Top navigation bar
|
||||
.navbar {
|
||||
background: $black;
|
||||
&:after {
|
||||
background: url('../images/menu-vert.png') repeat top left;
|
||||
}
|
||||
}
|
||||
|
||||
$top-icon-color: $white;
|
||||
$dropdown-color: rgba(darken($primary-dark, 20%), 1);
|
||||
|
||||
//In project left navigation bar
|
||||
tg-project-menu {
|
||||
background-color: rgba(darken($primary-dark, 15%), 1);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
svg path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** TASKBOARD
|
||||
//******************************
|
||||
|
||||
//Taskboard table
|
||||
.taskboard-table-header {
|
||||
.task-colum-name {
|
||||
background: lighten($white, 20%);
|
||||
border-top: 3px solid $black;
|
||||
.icon {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taskboard-table-body {
|
||||
.taskboard-tasks-box {
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** KANBAN
|
||||
//******************************
|
||||
|
||||
//Kanban table
|
||||
.kanban-table-header {
|
||||
.task-colum-name {
|
||||
background: lighten($white, 20%);
|
||||
border-top: 3px solid $black;
|
||||
.icon {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-table-body {
|
||||
.kanban-uses-box {
|
||||
background: $whitish;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Any styles in this stylesheet will override any previous defined style in Taiga.
|
||||
|
||||
// Max: Beat it or I'll call the Brute Squad!
|
||||
// Fezzik: I'm on the Brute Squad.
|
||||
// Max: [sees Fezzik's size] You are the Brute Squad!
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
//*************************
|
||||
//** COLORS
|
||||
//************************
|
||||
|
||||
// Colors
|
||||
$black: #000;
|
||||
$blackish: #212121;
|
||||
$grayer: #424242;
|
||||
$gray: #757575;
|
||||
$gray-light: #bdbdbd;
|
||||
$whitish: #f5f5f5;
|
||||
$white: #fff;
|
||||
|
||||
// Primary colors
|
||||
$primary-light: #8c9eff;
|
||||
$primary: #3f51b5;
|
||||
$primary-dark: #1a237e;
|
||||
|
||||
//Warning colors
|
||||
$red-light: #ff5252;
|
||||
$red: #f44336;
|
||||
|
||||
//Card color
|
||||
$card: #fff8e4;
|
||||
$card-hover: #f1e8cd;
|
||||
$card-dark: #cfc29b;
|
||||
|
||||
$green-japanese-laurel: #009688;
|
||||
$green-olive: #cddc39;
|
||||
$red-amaranth: #e91e63;
|
||||
$purple-eggplant: #9c27b0;
|
||||
$yellow-pear: #ffc107;
|
||||
|
||||
//*************************
|
||||
//** LAYOUT
|
||||
//*************************
|
||||
|
||||
// Default body color and background
|
||||
body {
|
||||
background: $white; // fallback
|
||||
color: $grayer;
|
||||
}
|
||||
|
||||
// Main
|
||||
.master {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Secondary panel
|
||||
.menu-secondary {
|
||||
background: lighten($primary-light, 22%);
|
||||
}
|
||||
|
||||
// Tertiary panel
|
||||
.menu-tertiary {
|
||||
background-color: $primary-dark;
|
||||
}
|
||||
|
||||
// Extra bar panel
|
||||
.extrabar {
|
||||
background: lighten($primary-light, 22%);
|
||||
}
|
||||
|
||||
|
||||
//**************************
|
||||
//** TYPOGRAPHY
|
||||
//**************************
|
||||
|
||||
@each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, taiga {
|
||||
@font-face {
|
||||
font-family: '#{$font-face}';
|
||||
src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/#{$font-face}.woff') format('woff'),
|
||||
url('../fonts/#{$font-face}.ttf') format('truetype'),
|
||||
url('../fonts/#{$font-face}.svg#{$font-face}') format('svg');
|
||||
}
|
||||
}
|
||||
|
||||
// Font Sizes
|
||||
%xsmall {font-size: .75rem;}
|
||||
%small {font-size: .9rem;}
|
||||
%medium {font-size: 1rem;}
|
||||
%large {font-size: 1.2rem;}
|
||||
%larger {font-size: 1.6rem;}
|
||||
%xlarge {font-size: 2rem;}
|
||||
%xxlarge {font-size: 3rem;}
|
||||
|
||||
// Font Types
|
||||
%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
|
||||
%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
|
||||
%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; }
|
||||
%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; }
|
||||
%taiga {font-family: 'taiga';}
|
||||
%mono {font-family: 'courier new', 'monospace';}
|
||||
|
||||
// Titles
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $blackish;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grayer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
//**************************
|
||||
//** SCAFFOLDING
|
||||
//**************************
|
||||
|
||||
//Forms
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
input[type="password"],
|
||||
select,
|
||||
textarea {
|
||||
background: $whitish;
|
||||
border-color: $primary;
|
||||
color: $grayer;
|
||||
@include placeholder {
|
||||
color: darken($gray-light, 10%);
|
||||
}
|
||||
&.checksley-error {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Input errors
|
||||
.checksley-error-list {
|
||||
background: rgba($whitish, .8);
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 5px solid $primary-light;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
blockquote p {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
cite {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// lightbox
|
||||
%lightbox {
|
||||
background: rgba($white, .95);
|
||||
}
|
||||
|
||||
// Background images
|
||||
%triangled-bg {
|
||||
background: url('https://lh4.googleusercontent.com/-k7YewfrSQ_Q/VGdNZND0NBI/AAAAAAAAD1A/UDZBeSGR7iM/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B480') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
%background-taiga {
|
||||
background: url('https://lh6.googleusercontent.com/-2l_mJ5g6j4k/VGdNZCpaERI/AAAAAAAAD2o/zCx5Z3cYv6Y/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B497') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.summary {
|
||||
background: $grayer;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
//************************
|
||||
//** NAVIGATION
|
||||
//***********************
|
||||
|
||||
// Top navigation bar
|
||||
.navbar {
|
||||
background: rgba($red-amaranth, .6);
|
||||
&:after {
|
||||
background: url('../images/menu-vert.png') repeat top left;
|
||||
}
|
||||
}
|
||||
|
||||
$top-icon-color: $white;
|
||||
$dropdown-color: rgba(darken($primary-dark, 20%), 1);
|
||||
|
||||
//In project left navigation bar
|
||||
tg-project-menu {
|
||||
background-color: rgba(darken($primary-dark, 15%), 1);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
svg path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** TASKBOARD
|
||||
//******************************
|
||||
|
||||
//Taskboard table
|
||||
.taskboard-table-header {
|
||||
.task-colum-name {
|
||||
background: lighten($primary-light, 20%);
|
||||
border-top: 3px solid $primary;
|
||||
.icon {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taskboard-table-body {
|
||||
.taskboard-tasks-box {
|
||||
background: $whitish;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** KANBAN
|
||||
//******************************
|
||||
|
||||
//Kanban table
|
||||
.kanban-table-header {
|
||||
.task-colum-name {
|
||||
background: lighten($primary-light, 20%);
|
||||
border-top: 3px solid $primary;
|
||||
.icon {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-table-body {
|
||||
.kanban-uses-box {
|
||||
background: $whitish;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Any styles in this stylesheet will override any previous defined style in Taiga.
|
||||
|
||||
// Max: Beat it or I'll call the Brute Squad!
|
||||
// Fezzik: I'm on the Brute Squad.
|
||||
// Max: [sees Fezzik's size] You are the Brute Squad!
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
//*************************
|
||||
//** COLORS
|
||||
//************************
|
||||
|
||||
// Colors
|
||||
$black: #000;
|
||||
$blackish: #050505;
|
||||
$grayer: #444;
|
||||
$gray: #555;
|
||||
$gray-light: #b8b8b8;
|
||||
$whitish: #f5f5f5;
|
||||
$white: #fff;
|
||||
|
||||
// Primary colors
|
||||
$primary-light: #9dce0a;
|
||||
$primary: #72a114;
|
||||
$primary-dark: #879b89;
|
||||
|
||||
//Warning colors
|
||||
$red-light: #ff8282;
|
||||
$red: #f00;
|
||||
|
||||
//Card color
|
||||
$card: #fff8e4;
|
||||
$card-hover: #f1e8cd;
|
||||
$card-dark: #cfc29b;
|
||||
|
||||
$green-japanese-laurel: #237400;
|
||||
$green-olive: #618000;
|
||||
$red-amaranth: #e43050;
|
||||
$purple-eggplant: #810061;
|
||||
$yellow-pear: #bbe831;
|
||||
|
||||
//*************************
|
||||
//** LAYOUT
|
||||
//*************************
|
||||
|
||||
// Default body color and background
|
||||
body {
|
||||
background: $white; // fallback
|
||||
color: $grayer;
|
||||
}
|
||||
|
||||
// Main
|
||||
.master {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Secondary panel
|
||||
.menu-secondary {
|
||||
background: $whitish;
|
||||
}
|
||||
|
||||
// Tertiary panel
|
||||
.menu-tertiary {
|
||||
background-color: $primary-dark;
|
||||
}
|
||||
|
||||
// Extra bar panel
|
||||
.extrabar {
|
||||
background: $whitish;
|
||||
}
|
||||
|
||||
|
||||
//**************************
|
||||
//** TYPOGRAPHY
|
||||
//**************************
|
||||
|
||||
// Font Sizes
|
||||
%xsmall {font-size: .75rem;}
|
||||
%small {font-size: .9rem;}
|
||||
%medium {font-size: 1rem;}
|
||||
%large {font-size: 1.2rem;}
|
||||
%larger {font-size: 1.6rem;}
|
||||
%xlarge {font-size: 2rem;}
|
||||
%xxlarge {font-size: 3rem;}
|
||||
|
||||
// Font Types
|
||||
%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
|
||||
%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
|
||||
%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; }
|
||||
%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; }
|
||||
%taiga {font-family: 'taiga';}
|
||||
%mono {font-family: 'courier new', 'monospace';}
|
||||
|
||||
// Titles
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $blackish;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grayer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
//**************************
|
||||
//** SCAFFOLDING
|
||||
//**************************
|
||||
|
||||
//Forms
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
input[type="password"],
|
||||
select,
|
||||
textarea {
|
||||
background: $whitish;
|
||||
border-color: $gray-light;
|
||||
color: $grayer;
|
||||
@include placeholder {
|
||||
color: darken($gray-light, 10%);
|
||||
}
|
||||
&.checksley-error {
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Input errors
|
||||
.checksley-error-list {
|
||||
background: rgba($whitish, .8);
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 5px solid $whitish;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
blockquote p {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
cite {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// lightbox
|
||||
%lightbox {
|
||||
background: rgba($white, .95);
|
||||
}
|
||||
|
||||
// Background images
|
||||
%triangled-bg {
|
||||
background: url('/images/bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
%background-taiga {
|
||||
background: url('/images/invitation_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.summary {
|
||||
background: $grayer;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
//************************
|
||||
//** NAVIGATION
|
||||
//***********************
|
||||
|
||||
// Top navigation bar
|
||||
.navbar {
|
||||
background: rgba($black, .5);
|
||||
&:after {
|
||||
background: url('../images/menu-vert.png') repeat top left;
|
||||
}
|
||||
}
|
||||
|
||||
$top-icon-color: #11241f;
|
||||
$dropdown-color: rgba(darken($grayer, 20%), 1);
|
||||
|
||||
//In project left navigation bar
|
||||
tg-project-menu {
|
||||
background-color: $primary-dark;
|
||||
background-image: url('../images/menu.png');
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
svg path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** TASKBOARD
|
||||
//******************************
|
||||
|
||||
//Taskboard table
|
||||
.taskboard-table-header {
|
||||
.task-colum-name {
|
||||
background: $whitish;
|
||||
border-top: 3px solid $gray-light;
|
||||
.icon {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taskboard-table-body {
|
||||
.taskboard-tasks-box {
|
||||
background: $whitish;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//** KANBAN
|
||||
//******************************
|
||||
|
||||
//Kanban table
|
||||
.kanban-table-header {
|
||||
.task-colum-name {
|
||||
background: $whitish;
|
||||
border-top: 3px solid $gray-light;
|
||||
.icon {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-table-body {
|
||||
.kanban-uses-box {
|
||||
background: $whitish;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
"debug": true,
|
||||
"debugInfo": false,
|
||||
"defaultLanguage": "en",
|
||||
"themes": ["taiga"],
|
||||
"defaultTheme": "taiga",
|
||||
"publicRegisterEnabled": true,
|
||||
"feedbackEnabled": true,
|
||||
"privacyPolicyUrl": null,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
var exports = module.exports = {};
|
||||
var fs = require("fs");
|
||||
|
||||
var Theme = function() {
|
||||
var defaultTheme = "taiga";
|
||||
|
||||
var themesPath = "app/themes";
|
||||
var tmpThemesPath = "tmp/themes";
|
||||
|
||||
var themesSequenceIndex = 0;
|
||||
var themesSequence = [];
|
||||
|
||||
var searchIndex = function(name) {
|
||||
for(var i = 0; i < themesSequence.length; i++) {
|
||||
if (themesSequence[i].name === name) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var initThemes = function () {
|
||||
var availableThemes = {};
|
||||
var files = fs.readdirSync(themesPath);
|
||||
|
||||
files.forEach(function(file) {
|
||||
var path = themesPath + '/' + file;
|
||||
var tmpPath = tmpThemesPath + '/' + file;
|
||||
|
||||
if (fs.statSync(path).isDirectory()) {
|
||||
availableThemes[file] = {
|
||||
name: file,
|
||||
path: path,
|
||||
customVariables: path + "/variables.scss",
|
||||
customScss: path + "/custom.scss",
|
||||
customCss: tmpPath + "/custom.css",
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
themesSequence.push(availableThemes[defaultTheme]);
|
||||
|
||||
for (var theme in availableThemes) {
|
||||
if (theme !== defaultTheme) {
|
||||
themesSequence.push(availableThemes[theme]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
initThemes();
|
||||
|
||||
var obj = {};
|
||||
|
||||
obj.next = function() {
|
||||
themesSequenceIndex++;
|
||||
};
|
||||
|
||||
obj.set = function(name) {
|
||||
themesSequenceIndex = searchIndex(name);
|
||||
};
|
||||
|
||||
Object.defineProperty(obj, "current", {
|
||||
get: function() {
|
||||
return themesSequence[themesSequenceIndex];
|
||||
}
|
||||
});
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
exports.themes = {
|
||||
sequence: function() {
|
||||
return Theme();
|
||||
}
|
||||
};
|
||||
107
gulpfile.js
107
gulpfile.js
|
|
@ -27,6 +27,16 @@ var gulp = require("gulp"),
|
|||
del = require("del"),
|
||||
coffeelint = require('gulp-coffeelint');
|
||||
|
||||
var argv = require('minimist')(process.argv.slice(2));
|
||||
|
||||
var utils = require("./gulp-utils");
|
||||
|
||||
var themes = utils.themes.sequence();
|
||||
|
||||
if (argv.theme) {
|
||||
themes.set(argv.theme);
|
||||
}
|
||||
|
||||
var paths = {};
|
||||
paths.app = "app/";
|
||||
paths.dist = "dist/";
|
||||
|
|
@ -55,10 +65,16 @@ paths.sass = [
|
|||
paths.app + "**/*.scss",
|
||||
"!" + paths.app + "/styles/bourbon/**/*.scss",
|
||||
"!" + paths.app + "/styles/dependencies/**/*.scss",
|
||||
"!" + paths.app + "/styles/extras/**/*.scss"
|
||||
"!" + paths.app + "/styles/extras/**/*.scss",
|
||||
"!" + paths.app + "/themes/**/variables.scss",
|
||||
];
|
||||
|
||||
paths.styles_dependencies = paths.app + "/styles/dependencies/**/*.scss";
|
||||
paths.sass_watch = paths.sass.concat(themes.current.customScss);
|
||||
|
||||
paths.styles_dependencies = [
|
||||
paths.app + "/styles/dependencies/**/*.scss",
|
||||
themes.current.customVariables
|
||||
];
|
||||
|
||||
paths.css = [
|
||||
paths.tmp + "styles/**/*.css",
|
||||
|
|
@ -79,7 +95,8 @@ paths.css_order = [
|
|||
paths.tmp + "styles/modules/**/*.css",
|
||||
paths.tmp + "modules/**/*.css",
|
||||
paths.tmp + "styles/shame/*.css",
|
||||
paths.tmp + "plugins/**/*.css"
|
||||
paths.tmp + "plugins/**/*.css",
|
||||
paths.tmp + "themes/**/*.css"
|
||||
];
|
||||
|
||||
paths.coffee = [
|
||||
|
|
@ -153,7 +170,7 @@ paths.libs = [
|
|||
paths.app + "js/sha1-custom.js"
|
||||
];
|
||||
|
||||
var isDeploy = process.argv[process.argv.length - 1] == "deploy";
|
||||
var isDeploy = argv["_"].indexOf("deploy") !== -1;
|
||||
|
||||
/*
|
||||
############################################################################
|
||||
|
|
@ -213,7 +230,9 @@ gulp.task("scss-lint", [], function() {
|
|||
|
||||
var fail = process.argv.indexOf("--fail") !== -1;
|
||||
|
||||
return gulp.src(paths.sass.concat(ignore))
|
||||
var sassFiles = paths.sass.concat(themes.current.customScss, ignore);
|
||||
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(gulpif(!isDeploy, cache(scsslint({endless: true, sync: true, config: "scsslint.yml"}), {
|
||||
success: function(scsslintFile) {
|
||||
return scsslintFile.scsslint.success;
|
||||
|
|
@ -232,20 +251,25 @@ gulp.task("clear-sass-cache", function() {
|
|||
});
|
||||
|
||||
gulp.task("sass-compile", [], function() {
|
||||
return gulp.src(paths.sass)
|
||||
var sassFiles = paths.sass.concat(themes.current.customScss);
|
||||
|
||||
return gulp.src(sassFiles)
|
||||
.pipe(plumber())
|
||||
.pipe(insert.prepend('@import "dependencies";'))
|
||||
.pipe(cached("sass"))
|
||||
.pipe(sass({
|
||||
includePaths: [
|
||||
paths.app + "styles/extras/"
|
||||
paths.app + "styles/extras/",
|
||||
themes.current.path
|
||||
]
|
||||
}))
|
||||
.pipe(gulp.dest(paths.tmp));
|
||||
});
|
||||
|
||||
gulp.task("css-lint-app", function() {
|
||||
return gulp.src(paths.css)
|
||||
var cssFiles = paths.css.concat(themes.current.customCss);
|
||||
|
||||
return gulp.src(cssFiles)
|
||||
.pipe(gulpif(!isDeploy, cache(csslint("csslintrc.json"), {
|
||||
success: function(csslintFile) {
|
||||
return csslintFile.csslint.success;
|
||||
|
|
@ -260,9 +284,11 @@ gulp.task("css-lint-app", function() {
|
|||
});
|
||||
|
||||
gulp.task("app-css", function() {
|
||||
return gulp.src(paths.css)
|
||||
var cssFiles = paths.css.concat(themes.current.customCss);
|
||||
|
||||
return gulp.src(cssFiles)
|
||||
.pipe(order(paths.css_order, {base: '.'}))
|
||||
.pipe(concat("app.css"))
|
||||
.pipe(concat("theme-" + themes.current.name + ".css"))
|
||||
.pipe(autoprefixer({
|
||||
cascade: false
|
||||
}))
|
||||
|
|
@ -278,15 +304,37 @@ gulp.task("vendor-css", function() {
|
|||
gulp.task("main-css", function() {
|
||||
var _paths = [
|
||||
paths.tmp + "vendor.css",
|
||||
paths.tmp + "app.css"
|
||||
paths.tmp + "theme-" + themes.current.name + ".css"
|
||||
];
|
||||
|
||||
return gulp.src(_paths)
|
||||
.pipe(concat("main.css"))
|
||||
.pipe(concat("theme-" + themes.current.name + ".css"))
|
||||
.pipe(gulpif(isDeploy, minifyCSS({noAdvanced: true})))
|
||||
.pipe(gulp.dest(paths.dist + "styles/"))
|
||||
});
|
||||
|
||||
var compileThemes = function (cb) {
|
||||
return runSequence("clear",
|
||||
"scss-lint",
|
||||
"sass-compile",
|
||||
"css-lint-app",
|
||||
["app-css", "vendor-css"],
|
||||
"main-css",
|
||||
function() {
|
||||
themes.next()
|
||||
|
||||
if (themes.current) {
|
||||
compileThemes(cb);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
gulp.task("compile-themes", function(cb) {
|
||||
compileThemes(cb);
|
||||
});
|
||||
|
||||
gulp.task("styles", function(cb) {
|
||||
return runSequence("scss-lint",
|
||||
"sass-compile",
|
||||
|
|
@ -294,7 +342,6 @@ gulp.task("styles", function(cb) {
|
|||
["app-css", "vendor-css"],
|
||||
"main-css",
|
||||
cb);
|
||||
|
||||
});
|
||||
|
||||
gulp.task("styles-dependencies", function(cb) {
|
||||
|
|
@ -396,7 +443,7 @@ gulp.task("app-deploy", ["coffee", "conf", "locales", "app-loader"], function()
|
|||
# Common tasks
|
||||
##############################################################################
|
||||
*/
|
||||
gulp.task("clear", function(done) {
|
||||
gulp.task("clear", ["clear-sass-cache"], function(done) {
|
||||
return cache.clearAll(done);
|
||||
});
|
||||
|
||||
|
|
@ -406,17 +453,33 @@ gulp.task("copy-svg", function() {
|
|||
.pipe(gulp.dest(paths.dist + "/svg/"));
|
||||
});
|
||||
|
||||
gulp.task("copy-theme-svg", function() {
|
||||
return gulp.src(themes.current.path + "/svg/**/*")
|
||||
.pipe(gulp.dest(paths.dist + "/svg/" + themes.current.name));
|
||||
});
|
||||
|
||||
gulp.task("copy-fonts", function() {
|
||||
return gulp.src(paths.app + "/fonts/*")
|
||||
.pipe(gulp.dest(paths.dist + "/fonts/"));
|
||||
});
|
||||
|
||||
gulp.task("copy-theme-fonts", function() {
|
||||
return gulp.src(themes.current.path + "/fonts/*")
|
||||
.pipe(gulp.dest(paths.dist + "/fonts/" + themes.current.name));
|
||||
});
|
||||
|
||||
gulp.task("copy-images", function() {
|
||||
return gulp.src(paths.app + "/images/**/*")
|
||||
.pipe(gulpif(isDeploy, imagemin({progressive: true})))
|
||||
.pipe(gulp.dest(paths.dist + "/images/"));
|
||||
});
|
||||
|
||||
gulp.task("copy-theme-images", function() {
|
||||
return gulp.src(themes.current.path + "/images/**/*")
|
||||
.pipe(gulpif(isDeploy, imagemin({progressive: true})))
|
||||
.pipe(gulp.dest(paths.dist + "/images/" + themes.current.name));
|
||||
});
|
||||
|
||||
gulp.task("copy-images-plugins", function() {
|
||||
return gulp.src(paths.app + "/plugins/**/images/*")
|
||||
.pipe(flatten())
|
||||
|
|
@ -433,7 +496,17 @@ gulp.task("copy-extras", function() {
|
|||
.pipe(gulp.dest(paths.dist + "/"));
|
||||
});
|
||||
|
||||
gulp.task("copy", ["copy-fonts", "copy-images", "copy-images-plugins", "copy-plugin-templates", "copy-svg", "copy-extras"]);
|
||||
gulp.task("copy", [
|
||||
"copy-fonts",
|
||||
"copy-theme-fonts",
|
||||
"copy-images",
|
||||
"copy-theme-images",
|
||||
"copy-images-plugins",
|
||||
"copy-plugin-templates",
|
||||
"copy-svg",
|
||||
"copy-theme-svg",
|
||||
"copy-extras"
|
||||
]);
|
||||
|
||||
gulp.task("delete-tmp", function() {
|
||||
del.sync(paths.tmp);
|
||||
|
|
@ -464,7 +537,7 @@ gulp.task("express", function() {
|
|||
//Rerun the task when a file changes
|
||||
gulp.task("watch", function() {
|
||||
gulp.watch(paths.jade, ["jade-watch"]);
|
||||
gulp.watch(paths.sass, ["styles"]);
|
||||
gulp.watch(paths.sass_watch, ["styles"]);
|
||||
gulp.watch(paths.styles_dependencies, ["styles-dependencies"]);
|
||||
gulp.watch(paths.svg, ["copy-svg"]);
|
||||
gulp.watch(paths.coffee, ["app-watch"]);
|
||||
|
|
@ -480,7 +553,7 @@ gulp.task("deploy", function(cb) {
|
|||
"jade-deploy",
|
||||
"app-deploy",
|
||||
"jslibs-deploy",
|
||||
"styles"
|
||||
"compile-themes"
|
||||
], cb);
|
||||
});
|
||||
//The default task (called when you run gulp from cli)
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
"karma-sinon": "^1.0.4",
|
||||
"karma-sinon-chai": "^0.3.0",
|
||||
"karma-sourcemap-loader": "^0.3.4",
|
||||
"minimist": "^1.1.1",
|
||||
"mocha": "^2.2.4",
|
||||
"pre-commit": "^1.0.5",
|
||||
"readable-stream": "~1.0.33",
|
||||
|
|
|
|||
Loading…
Reference in New Issue