mirror of https://github.com/wekan/wekan
* Implement visibility choice on board creation;
* Rework the board header bar. Remove links to un-implemented
features;
* Implement a board star counter (visible if the board have >2 stars);
* Define a new icon (a thin cross) to close elements;
* Remove $(document).on('mouseover') event handlers that were
basically fired hundreds of times for nothing, we now define a proper
Tracker dependency to execute jquery-ui plugin initialization only
when something has changed;
* Bug fixes related to list scrolling.
pull/188/head
Maxime Quandalle
10 years ago
parent
42f6dc686f
commit
dcc64f44f9
@ -0,0 +1,94 @@ |
||||
template(name="headerBoard") |
||||
h1.header-board-menu( |
||||
class="{{#if currentUser.isBoardMember}}is-clickable js-edit-board-title{{/if}}") |
||||
= title |
||||
|
||||
.board-header-btns.left |
||||
unless isSandstorm |
||||
if currentUser |
||||
a.board-header-btn.js-star-board(class="{{#if isStarred}}is-hovered{{/if}}" |
||||
title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}") |
||||
i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}") |
||||
if showStarCounter |
||||
span {{_ 'board-nb-stars' stars}} |
||||
|
||||
a.board-header-btn.js-change-visibility(class="{{#unless currentUser.isBoardAdmin}}no-edit{{/unless}}") |
||||
i.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}") |
||||
span {{_ permission}} |
||||
|
||||
.board-header-btns.right |
||||
a.board-header-btn.js-open-filter-view( |
||||
title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{/if}}" |
||||
class="{{#if Filter.isActive}}emphasis{{/if}}") |
||||
i.fa.fa-filter |
||||
if Filter.isActive |
||||
span {{_ 'filter-on'}} |
||||
a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}") |
||||
i.fa.fa-times-thin |
||||
else |
||||
span {{_ 'filter'}} |
||||
.separator |
||||
a.board-header-btn.js-open-board-menu |
||||
i.board-header-btn-icon.fa.fa-cog |
||||
|
||||
template(name="boardMenuPopup") |
||||
ul.pop-over-list |
||||
li: a.js-change-board-color Change color |
||||
li: a Copy this board |
||||
li: a Permissions |
||||
|
||||
template(name="boardVisibilityList") |
||||
ul.pop-over-list |
||||
li |
||||
with "private" |
||||
a.js-select-visibility |
||||
i.fa.fa-lock.colorful |
||||
| {{_ 'private'}} |
||||
if visibilityCheck |
||||
i.fa.fa-check |
||||
span.sub-name {{_ 'private-desc'}} |
||||
li |
||||
with "public" |
||||
a.js-select-visibility |
||||
i.fa.fa-globe.colorful |
||||
| {{_ 'public'}} |
||||
if visibilityCheck |
||||
i.fa.fa-check |
||||
span.sub-name {{_ 'public-desc'}} |
||||
|
||||
template(name="boardChangeVisibilityPopup") |
||||
+boardVisibilityList |
||||
|
||||
template(name="boardChangeColorPopup") |
||||
.board-backgrounds-list.clearfix |
||||
each backgroundColors |
||||
.board-background-select.js-select-background |
||||
span.background-box(class="board-color-{{this}}") |
||||
if isSelected |
||||
i.fa.fa-check |
||||
|
||||
template(name="createBoardPopup") |
||||
form |
||||
label |
||||
| {{_ 'title'}} |
||||
input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required) |
||||
if visibilityMenuIsOpen.get |
||||
+boardVisibilityList |
||||
else |
||||
p.quiet |
||||
if $eq visibility.get 'public' |
||||
span.fa.fa-globe.colorful |
||||
| {{{_ 'board-public-info'}}} |
||||
else |
||||
span.fa.fa-lock.colorful |
||||
| {{{_ 'board-private-info'}}} |
||||
a.js-change-visibility Change. |
||||
input.primary.wide(type="submit" value="{{_ 'create'}}") |
||||
|
||||
|
||||
template(name="boardChangeTitlePopup") |
||||
form |
||||
label |
||||
| {{_ 'title'}} |
||||
input.js-board-name(type="text" value="{{title}}" autofocus) |
||||
input.primary.wide(type="submit" value="{{_ 'rename'}}") |
||||
@ -0,0 +1,157 @@ |
||||
Template.boardMenuPopup.events({ |
||||
'click .js-rename-board': Popup.open('boardChangeTitle'), |
||||
'click .js-change-board-color': Popup.open('boardChangeColor') |
||||
}); |
||||
|
||||
Template.boardChangeTitlePopup.events({ |
||||
submit: function(evt, t) { |
||||
var title = t.$('.js-board-name').val().trim(); |
||||
if (title) { |
||||
Boards.update(this._id, { |
||||
$set: { |
||||
title: title |
||||
} |
||||
}); |
||||
Popup.close(); |
||||
} |
||||
evt.preventDefault(); |
||||
} |
||||
}); |
||||
|
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'headerBoard'; |
||||
}, |
||||
|
||||
isStarred: function() { |
||||
var boardId = this.currentData()._id; |
||||
var user = Meteor.user(); |
||||
return boardId && user && user.hasStarred(boardId); |
||||
}, |
||||
|
||||
// Only show the star counter if the number of star is greater than 2
|
||||
showStarCounter: function() { |
||||
return this.currentData().stars > 2; |
||||
}, |
||||
|
||||
events: function() { |
||||
return [{ |
||||
'click .js-edit-board-title': Popup.open('boardChangeTitle'), |
||||
'click .js-star-board': function() { |
||||
Meteor.user().toggleBoardStar(Session.get('currentBoard')); |
||||
}, |
||||
'click .js-open-board-menu': Popup.open('boardMenu'), |
||||
'click .js-change-visibility': Popup.open('boardChangeVisibility'), |
||||
'click .js-open-filter-view': function() { |
||||
Sidebar.setView('filter'); |
||||
}, |
||||
'click .js-filter-reset': function(evt) { |
||||
evt.stopPropagation(); |
||||
Sidebar.setView(); |
||||
Filter.reset(); |
||||
} |
||||
}]; |
||||
} |
||||
}).register('headerBoard'); |
||||
|
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'boardChangeColorPopup'; |
||||
}, |
||||
|
||||
backgroundColors: function() { |
||||
return Boards.simpleSchema()._schema.color.allowedValues; |
||||
}, |
||||
|
||||
isSelected: function() { |
||||
var currentBoard = Boards.findOne(Session.get('currentBoard')); |
||||
return currentBoard.color === this.currentData().toString(); |
||||
}, |
||||
|
||||
events: function() { |
||||
return [{ |
||||
'click .js-select-background': function(evt) { |
||||
var currentBoardId = Session.get('currentBoard'); |
||||
Boards.update(currentBoardId, { |
||||
$set: { |
||||
color: this.currentData().toString() |
||||
} |
||||
}); |
||||
evt.preventDefault(); |
||||
} |
||||
}]; |
||||
} |
||||
}).register('boardChangeColorPopup'); |
||||
|
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'createBoardPopup'; |
||||
}, |
||||
|
||||
onCreated: function() { |
||||
this.visibilityMenuIsOpen = new ReactiveVar(false); |
||||
this.visibility = new ReactiveVar('private'); |
||||
}, |
||||
|
||||
visibilityCheck: function() { |
||||
return this.currentData() === this.visibility.get(); |
||||
}, |
||||
|
||||
setVisibility: function(visibility) { |
||||
this.visibility.set(visibility); |
||||
this.visibilityMenuIsOpen.set(false); |
||||
}, |
||||
|
||||
toogleVisibilityMenu: function() { |
||||
this.visibilityMenuIsOpen.set(! this.visibilityMenuIsOpen.get()); |
||||
}, |
||||
|
||||
onSubmit: function(evt) { |
||||
evt.preventDefault(); |
||||
var title = this.find('.js-new-board-title').value; |
||||
var visibility = this.visibility.get(); |
||||
|
||||
var boardId = Boards.insert({ |
||||
title: title, |
||||
permission: visibility |
||||
}); |
||||
|
||||
Utils.goBoardId(boardId); |
||||
}, |
||||
|
||||
events: function() { |
||||
return [{ |
||||
'click .js-select-visibility': function() { |
||||
this.setVisibility(this.currentData()); |
||||
}, |
||||
'click .js-change-visibility': this.toogleVisibilityMenu, |
||||
submit: this.onSubmit |
||||
}]; |
||||
} |
||||
}).register('createBoardPopup'); |
||||
|
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'boardChangeVisibilityPopup'; |
||||
}, |
||||
|
||||
visibilityCheck: function() { |
||||
var currentBoard = Boards.findOne(Session.get('currentBoard')); |
||||
return this.currentData() === currentBoard.permission; |
||||
}, |
||||
|
||||
selectBoardVisibility: function() { |
||||
Boards.update(Session.get('currentBoard'), { |
||||
$set: { |
||||
permission: this.currentData() |
||||
} |
||||
}); |
||||
Popup.close(); |
||||
}, |
||||
|
||||
events: function() { |
||||
return [{ |
||||
'click .js-select-visibility': this.selectBoardVisibility |
||||
}]; |
||||
} |
||||
}).register('boardChangeVisibilityPopup'); |
||||
@ -1,4 +1,11 @@ |
||||
//- |
||||
XXX This template can't be transformed into a component because it is |
||||
included by iron-router. That's a bug. |
||||
See https://github.com/peerlibrary/meteor-blaze-components/issues/44 |
||||
template(name="boards") |
||||
+boardList |
||||
|
||||
template(name="boardList") |
||||
if boards |
||||
ul.board-list.clearfix |
||||
each boards |
||||
@ -0,0 +1,34 @@ |
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'boardList'; |
||||
}, |
||||
|
||||
boards: function() { |
||||
return Boards.find({}, { |
||||
sort: ['title'] |
||||
}); |
||||
}, |
||||
|
||||
starredBoards: function() { |
||||
var cursor = Boards.find({ |
||||
_id: { $in: Meteor.user().profile.starredBoards || [] } |
||||
}, { |
||||
sort: ['title'] |
||||
}); |
||||
return cursor.count() === 0 ? null : cursor; |
||||
}, |
||||
|
||||
isStarred: function() { |
||||
var user = Meteor.user(); |
||||
return user && user.hasStarred(this._id); |
||||
}, |
||||
|
||||
events: function() { |
||||
return [{ |
||||
'click .js-star-board': function(evt) { |
||||
Meteor.user().toggleBoardStar(this._id); |
||||
evt.preventDefault(); |
||||
} |
||||
}]; |
||||
} |
||||
}).register('boardList'); |
||||
@ -1,96 +0,0 @@ |
||||
var toggleBoardStar = function(boardId) { |
||||
var queryType = Meteor.user().hasStarred(boardId) ? '$pull' : '$addToSet'; |
||||
var query = {}; |
||||
query[queryType] = { |
||||
'profile.starredBoards': boardId |
||||
}; |
||||
Meteor.users.update(Meteor.userId(), query); |
||||
}; |
||||
|
||||
Template.boards.events({ |
||||
'click .js-star-board': function(evt) { |
||||
toggleBoardStar(this._id); |
||||
evt.preventDefault(); |
||||
} |
||||
}); |
||||
|
||||
Template.headerBoard.events({ |
||||
'click .js-star-board': function() { |
||||
toggleBoardStar(this._id); |
||||
}, |
||||
'click .js-open-board-menu': Popup.open('boardMenu'), |
||||
'click #permission-level:not(.no-edit)': Popup.open('boardChangePermission'), |
||||
'click .js-filter-cards-indicator': function(evt) { |
||||
Session.set('currentWidget', 'filter'); |
||||
evt.preventDefault(); |
||||
}, |
||||
'click .js-filter-card-clear': function(evt) { |
||||
Filter.reset(); |
||||
evt.stopPropagation(); |
||||
} |
||||
}); |
||||
|
||||
Template.boardMenuPopup.events({ |
||||
'click .js-rename-board': Popup.open('boardChangeTitle'), |
||||
'click .js-change-board-color': Popup.open('boardChangeColor') |
||||
}); |
||||
|
||||
Template.createBoardPopup.events({ |
||||
'submit #CreateBoardForm': function(evt, t) { |
||||
var title = t.$('#boardNewTitle'); |
||||
|
||||
// trim value title
|
||||
if ($.trim(title.val())) { |
||||
// İnsert Board title
|
||||
var boardId = Boards.insert({ |
||||
title: title.val(), |
||||
permission: 'public' |
||||
}); |
||||
|
||||
// Go to Board _id
|
||||
Utils.goBoardId(boardId); |
||||
} |
||||
evt.preventDefault(); |
||||
} |
||||
}); |
||||
|
||||
Template.boardChangeTitlePopup.events({ |
||||
'submit #ChangeBoardTitleForm': function(evt, t) { |
||||
var title = t.$('.js-board-name').val().trim(); |
||||
if (title) { |
||||
Boards.update(this._id, { |
||||
$set: { |
||||
title: title |
||||
} |
||||
}); |
||||
Popup.close(); |
||||
} |
||||
evt.preventDefault(); |
||||
} |
||||
}); |
||||
|
||||
Template.boardChangePermissionPopup.events({ |
||||
'click .js-select': function(evt) { |
||||
var $this = $(evt.currentTarget); |
||||
var permission = $this.attr('name'); |
||||
|
||||
Boards.update(this._id, { |
||||
$set: { |
||||
permission: permission |
||||
} |
||||
}); |
||||
Popup.close(); |
||||
} |
||||
}); |
||||
|
||||
Template.boardChangeColorPopup.events({ |
||||
'click .js-select-background': function(evt) { |
||||
var currentBoardId = Session.get('currentBoard'); |
||||
Boards.update(currentBoardId, { |
||||
$set: { |
||||
color: this.toString() |
||||
} |
||||
}); |
||||
evt.preventDefault(); |
||||
} |
||||
}); |
||||
@ -1,87 +0,0 @@ |
||||
template(name="headerBoard") |
||||
h1.header-board-menu.js-open-board-menu |
||||
= title |
||||
span.fa.fa-angle-down |
||||
|
||||
.board-header-btns.left |
||||
unless isSandstorm |
||||
a.board-header-btn.js-star-board(class="{{#if isStarred}}board-header-starred{{/if}}" |
||||
title="{{# if isStarred }}{{_ 'click-to-unstar'}}{{ else }}{{_ 'click-to-star'}}{{/ if }} {{_ 'starred-boards-description'}}") |
||||
span.board-header-btn-icon.icon-sm.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}") |
||||
//- XXX To implement |
||||
span.board-header-btn-text Starred |
||||
//- |
||||
XXX Normally we would disable this field for sandstorm, but we keep it |
||||
until sandstorm implements sharing capabilities |
||||
|
||||
a.board-header-btn.perms-btn.js-change-vis(class="{{#unless currentUser.isBoardAdmin}}no-edit{{/ unless}}" id="permission-level") |
||||
span.board-header-btn-icon.icon-sm.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}") |
||||
span.board-header-btn-text {{_ permission}} |
||||
|
||||
a.board-header-btn.js-search |
||||
span.board-header-btn-icon.icon-sm.fa.fa-tag |
||||
span.board-header-btn-text Labels |
||||
|
||||
//- XXX Clicking here should open a search field |
||||
a.board-header-btn.js-search |
||||
span.board-header-btn-icon.icon-sm.fa.fa-search |
||||
span.board-header-btn-text {{_ 'search'}} |
||||
|
||||
//- +boardMembersHeader |
||||
|
||||
template(name="boardMembersHeader") |
||||
.board-header-members |
||||
each currentBoard.members |
||||
+userAvatar(userId=userId draggable=true showBadges=true) |
||||
unless isSandstorm |
||||
if currentUser.isBoardAdmin |
||||
a.member.add-board-member.js-open-manage-board-members |
||||
i.fa.fa-plus |
||||
|
||||
template(name="boardMenuPopup") |
||||
ul.pop-over-list |
||||
li: a.js-rename-board {{_ 'rename-board'}} |
||||
li: a.js-change-board-color Change color |
||||
li: a Copy this board |
||||
li: a Rules |
||||
|
||||
template(name="boardChangeTitlePopup") |
||||
form#ChangeBoardTitleForm |
||||
label {{_ 'name'}} |
||||
input.js-board-name(type="text" value="{{ title }}" autofocus) |
||||
input.primary.wide.js-rename-board(type="submit" value="{{_ 'rename'}}") |
||||
|
||||
template(name="boardChangePermissionPopup") |
||||
ul.pop-over-list |
||||
li |
||||
a.js-select.light-hover(name="private") |
||||
span.icon-sm.fa.fa-lock.vis-icon |
||||
| {{_ 'private'}} |
||||
if check 'private' |
||||
span.icon-sm.fa.fa-check |
||||
span.sub-name {{_ 'private-desc'}} |
||||
li |
||||
a.js-select.light-hover(name="public") |
||||
span.icon-sm.fa.fa-globe.vis-icon |
||||
| {{_ 'public'}} |
||||
if check 'public' |
||||
span.icon-sm.fa.fa-check |
||||
span.sub-name {{_ 'public-desc'}} |
||||
|
||||
template(name="boardChangeColorPopup") |
||||
.board-backgrounds-list.clearfix |
||||
each backgroundColors |
||||
.board-background-select.js-select-background |
||||
span.background-box(class="board-color-{{this}}") |
||||
if isSelected |
||||
i.fa.fa-check |
||||
|
||||
template(name="createBoardPopup") |
||||
.content.clearfix |
||||
form#CreateBoardForm |
||||
label(for="boardNewTitle") {{_ 'title'}} |
||||
input#boardNewTitle.non-empty(type="text" name="name" placeholder="{{_ 'bucket-example'}}" autofocus) |
||||
p.quiet |
||||
span.icon-sm.fa.fa-globe |
||||
| {{{_ 'board-public-info'}}} |
||||
input.primary.wide(type="submit" value="{{_ 'create'}}") |
||||
@ -1,7 +0,0 @@ |
||||
Template.headerBoard.helpers({ |
||||
isStarred: function() { |
||||
var boardId = Session.get('currentBoard'); |
||||
var user = Meteor.user(); |
||||
return boardId && user && user.hasStarred(boardId); |
||||
} |
||||
}); |
||||
@ -1,137 +0,0 @@ |
||||
@import 'nib' |
||||
|
||||
.board-header { |
||||
height: auto; |
||||
overflow: hidden; |
||||
padding: 10px 30px 10px 8px; |
||||
position: relative; |
||||
transition: padding .15s ease-in; |
||||
} |
||||
|
||||
.board-header-btns { |
||||
position: relative; |
||||
display: block; |
||||
} |
||||
|
||||
.board-header-btn { |
||||
border-radius: 3px; |
||||
color: #f6f6f6; |
||||
cursor: default; |
||||
float: left; |
||||
font-size: 12px; |
||||
height: 30px; |
||||
line-height: 32px; |
||||
margin: 2px 4px 0 0; |
||||
overflow: hidden; |
||||
padding-left: 30px; |
||||
position: relative; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.board-header-btn:empty { |
||||
display: none; |
||||
} |
||||
|
||||
.board-header-btn-without-icon { |
||||
padding-left: 8px; |
||||
} |
||||
|
||||
.board-header-btn-icon { |
||||
background-clip: content-box; |
||||
background-origin: content-box; |
||||
color: #f6f6f6 !important; |
||||
padding: 6px; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.board-header-btn-text { |
||||
padding-right: 8px; |
||||
} |
||||
|
||||
.board-header-btn:not(.no-edit) .text { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.board-header-btn:not(.no-edit):hover { |
||||
background: rgba(0, 0, 0, .12); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.board-header-btn:hover { |
||||
color: #f6f6f6; |
||||
} |
||||
|
||||
.board-header-btn.board-header-btn-enabled { |
||||
background-color: rgba(0, 0, 0, .1); |
||||
|
||||
&:hover { |
||||
background-color: rgba(0, 0, 0, .3); |
||||
} |
||||
|
||||
.board-header-btn-icon.icon-star { |
||||
color: #e6bf00 !important; |
||||
} |
||||
} |
||||
|
||||
.board-header-btn-name { |
||||
cursor: default; |
||||
font-size: 18px; |
||||
font-weight: 700; |
||||
line-height: 30px; |
||||
padding-left: 4px; |
||||
text-decoration: none; |
||||
|
||||
.board-header-btn-text { |
||||
padding-left: 6px; |
||||
} |
||||
} |
||||
|
||||
.board-header-btn-name-org-logo { |
||||
border-radius: 3px; |
||||
height: 30px; |
||||
left: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 30px; |
||||
|
||||
.board-header-btn-text { |
||||
padding-left: 32px; |
||||
} |
||||
} |
||||
|
||||
.board-header-btn-org-name { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
max-width: 400px; |
||||
} |
||||
|
||||
.board-header-btn-filter-indicator { |
||||
background: #3d990f; |
||||
padding-right: 30px; |
||||
color: #fff; |
||||
text-shadow: 0; |
||||
|
||||
&:hover { |
||||
background: #43a711 !important; |
||||
} |
||||
|
||||
.board-header-btn-icon-close { |
||||
background: #43a711; |
||||
border-top-left-radius: 0; |
||||
border-top-right-radius: 3px; |
||||
border-bottom-right-radius: 3px; |
||||
border-bottom-left-radius: 0; |
||||
color: #fff; |
||||
padding: 6px; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
|
||||
&:hover { |
||||
background: #48b512; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@ |
||||
template(name="minicard") |
||||
.minicard.card.js-minicard( |
||||
class="{{#if isSelected}}is-selected{{/if}}") |
||||
a.minicard-details.clearfix.show(href=absoluteUrl) |
||||
if cover |
||||
.minicard-cover.js-card-cover(style="background-image: url({{cover.url}});") |
||||
if labels |
||||
.minicard-labels |
||||
each labels |
||||
.minicard-label(class="card-label-{{color}}" title="{{name}}") |
||||
.minicard-title= title |
||||
if members |
||||
.minicard-members.js-minicard-members |
||||
each members |
||||
+userAvatar(userId=this size="small" cardId="{{../_id}}") |
||||
.badges |
||||
if comments.count |
||||
.badge(title="{{_ 'card-comments-title' comments.count }}") |
||||
span.badge-icon.icon-sm.fa.fa-comment-o |
||||
.badge-text= comments.count |
||||
if description |
||||
.badge.badge-state-image-only(title=description) |
||||
span.badge-icon.icon-sm.fa.fa-align-left |
||||
if attachments.count |
||||
.badge |
||||
span.badge-icon.icon-sm.fa.fa-paperclip |
||||
span.badge-text= attachments.count |
||||
@ -0,0 +1,14 @@ |
||||
// Template.cards.events({
|
||||
// 'click .member': Popup.open('cardMember')
|
||||
// });
|
||||
|
||||
|
||||
BlazeComponent.extendComponent({ |
||||
template: function() { |
||||
return 'minicard'; |
||||
}, |
||||
|
||||
isSelected: function() { |
||||
return Session.equals('currentCard', this.currentData()._id); |
||||
} |
||||
}).register('minicard'); |
||||
@ -0,0 +1,28 @@ |
||||
.emoji |
||||
height: 18px |
||||
width: 18px |
||||
vertical-align: text-bottom |
||||
|
||||
// Implement a thiner close icon as suggested in |
||||
// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950 |
||||
.fa.fa-times-thin:before |
||||
content: '\00d7'; |
||||
|
||||
.fa.fa-globe.colorful |
||||
color: #4caf50 |
||||
|
||||
.fa.fa-lock.colorful |
||||
color: #f44336 |
||||
|
||||
.pop-over .pop-over-list li a:hover |
||||
.fa, .fa.colorful |
||||
color: white |
||||
|
||||
&:hover |
||||
color: white |
||||
|
||||
a.fa, a i.fa |
||||
color: darken(white, 35%) |
||||
|
||||
&:hover |
||||
color: darken(white, 60%) |
||||
Loading…
Reference in new issue