todo: use inline icons
This commit is contained in:
parent
10a61558f7
commit
34f8604a25
2 changed files with 55 additions and 52 deletions
|
@ -8,22 +8,58 @@
|
|||
<div class="box box--paper">
|
||||
<% if @isAdmin: %>
|
||||
<h3><%- @T('Configuration') %></h3>
|
||||
<div class="todo is-done"><%- @T('Branding') %></div>
|
||||
<div class="todo"><%- @T('Your Email Configuration') %></div>
|
||||
<div class="todo"><%- @T('Invite Agents/Colleges') %></div>
|
||||
<a class="todo is-done">
|
||||
<%- @Icon('checkmark') %>
|
||||
<%- @T('Branding') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Your Email Configuration') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Invite Agents/Colleges') %>
|
||||
</a>
|
||||
<% end %>
|
||||
<h3><%- @T('How to use it') %></h3>
|
||||
<div class="todo"><a href="#" class="intro"><%- @T('Intro') %></a></div>
|
||||
<div class="todo is-done"><%- @T('Create a Test Ticket') %></div>
|
||||
<div class="todo"><%- @T('Create new Overviews') %></div>
|
||||
<div class="todo is-done"><%- @T('Create Text Modues') %></div>
|
||||
<div class="todo"><%- @T('Create Macros') %></div>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Intro') %></a>
|
||||
</a>
|
||||
<a class="todo is-done">
|
||||
<%- @Icon('checkmark') %>
|
||||
<%- @T('Create a Test Ticket') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Create new Overviews') %>
|
||||
</a>
|
||||
<a class="todo is-done">
|
||||
<%- @Icon('checkmark') %>
|
||||
<%- @T('Create Text Modues') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Create Macros') %>
|
||||
</a>
|
||||
<% if @isAdmin: %>
|
||||
<h3><%- @T('Additionals Channels') %></h3>
|
||||
<div class="todo"><%- @T('Twitter') %></div>
|
||||
<div class="todo"><%- @T('Facebook') %></div>
|
||||
<div class="todo is-done"><%- @T('Chat') %></div>
|
||||
<div class="todo"><%- @T('Widget') %></div>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Twitter') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Facebook') %>
|
||||
</a>
|
||||
<a class="todo is-done">
|
||||
<%- @Icon('checkmark') %>
|
||||
<%- @T('Chat') %>
|
||||
</a>
|
||||
<a class="todo">
|
||||
<%- @Icon('small-dot') %>
|
||||
<%- @T('Widget') %>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,28 +17,6 @@ $highlight-color: hsl(205,90%,60%);
|
|||
|
||||
$largeScreenBreakpoint: 1280px;
|
||||
|
||||
/// Replace `$search` with `$replace` in `$string`
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@function icon($name, $color) {
|
||||
$data-uri: asset-data-url("/assets/images/icons/#{$name}");
|
||||
$replace-src: str-replace("@{data-uri}", "#50E3C2", $color);
|
||||
@return $replace-src;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -7765,28 +7743,17 @@ output {
|
|||
}
|
||||
|
||||
.todo {
|
||||
padding: 0 22px;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
/* circle */
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 12px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,.1);
|
||||
.icon {
|
||||
fill: hsl(0,0%,80%);
|
||||
vertical-align: middle;
|
||||
margin: -2px 3px 0 0;
|
||||
}
|
||||
|
||||
&.is-done {
|
||||
// background: icon("checkmark.svg", $supergood-color) no-repeat 0 9px;
|
||||
background: url("images/icons/checkmark.svg") no-repeat 0 9px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&.is-done .icon {
|
||||
fill: $supergood-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue