rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1055 from lvuch/lv-polish 

Lv polish - styleguide
This commit is contained in:
Vincent Fiduccia 2017-03-06 17:46:01 -07:00 committed by GitHub
parent 87e02c8d3b 00498f471b
commit bc108f558e
16 changed files with 832 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/authenticated/style-guide/controller.js Normal file
View File

@ -0,0 +1,4 @@
import Ember from 'ember';
export default Ember.Controller.extend({
});

7
app/authenticated/style-guide/route.js Normal file
View File

@ -0,0 +1,7 @@
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return [ ];
},
});

629
app/authenticated/style-guide/template.hbs Normal file
View File

@ -0,0 +1,629 @@
<h2>Grid</h2>
<div id="grid" class="">
<div class="section row">
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
</div>
<div class="section row">
<div class="col span-1 offset-11 bg-default">1 of 12 offset 11</div>
</div>
<div class="section row">
<div class="col span-2 offset-10 bg-default">2 of 12 offset 10</div>
</div>
<div class="section row">
<div class="col span-3 offset-9 bg-default">3 of 12 offset 9</div>
</div>
<div class="section row">
<div class="col span-4 offset-8 bg-default">4 of 12 offset 8</div>
</div>
<div class="section row">
<div class="col span-5 offset-7 bg-default">5 of 12 offset 7</div>
</div>
<div class="section row">
<div class="col span-6 offset-6 bg-default">6 of 12 offset 6</div>
</div>
<div class="section row">
<div class="col span-7 offset-5 bg-default">7 of 12 offset 5</div>
</div>
<div class="section row">
<div class="col span-8 offset-4 bg-default">8 of 12 offset 4</div>
</div>
<div class="section row">
<div class="col span-9 offset-3 bg-default">9 of 12 offset 3</div>
</div>
<div class="section row">
<div class="col span-10 offset-2 bg-default">10 of 12 offset 2</div>
</div>
<div class="section row">
<div class="col span-11 offset-1 bg-default">11 of 12 offset 1</div>
</div>
<div class="section row">
<div class="col span-12 bg-default">12 of 12</div>
</div>
<div class="section">
<h3>Columns with no gutters (no right margin)</h3>
<div class="row gutless">
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
<div class="col span-1 bg-default">1 of 12</div>
</div>
<div class="row gutless">
<div class="col span-4 bg-default">4 of 12</div>
<div class="col span-4 bg-default">4 of 12</div>
<div class="col span-4 bg-default">4 of 12</div>
</div>
</div>
</div>
<h3>Nested Columns</h3>
<div class="row">
<div class="col span-6 bg-default gutless">
Column
<div class="col span-4 bg-secondary">4 of 12</div>
<div class="col span-4 bg-secondary">4 of 12</div>
<div class="col span-4 bg-secondary">4 of 12</div>
</div>
<div class="col span-6 bg-default gutless">
Column
<div class="col span-4 bg-secondary">4 of 12</div>
<div class="col span-4 bg-secondary">4 of 12</div>
<div class="col span-4 bg-secondary">4 of 12</div>
</div>
</div>
<hr/>
<h2>Headers &amp; Copy</h2>
<div class="section row">
<div class="col span-4">
<h1>Lorem Ipsum header</h1>
<h2>Lorem Ipsum header</h2>
<h3>Lorem Ipsum header</h3>
<h4>Lorem Ipsum header</h4>
<h5>Lorem Ipsum header</h5>
<h6>Lorem Ipsum header</h6>
</div>
<div class="col span-8">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}</code></pre>
</div>
</div>
<hr/>
<h2>Tables</h2>
<table class="span-12 mb-20 striped">
<thead>
<tr>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 2<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 3<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 4<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
</tbody>
</table>
<table class="span-12 mb-20">
<thead>
<tr>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 2<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 3<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 4<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>
<div class="btn-group action-menu">
<button type="button" class="btn bg-default">[</button>
<button type="button" class="btn bg-default">]</button>
</div>
</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>
<div class="btn-group action-menu">
<button type="button" class="btn bg-default">[</button>
<button type="button" class="btn bg-default">]</button>
</div>
</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>
<div class="btn-group action-menu">
<button type="button" class="btn bg-default">[</button>
<button type="button" class="btn bg-default">]</button>
</div>
</td>
</tr>
</tbody>
</table>
<table class="solid span-12">
<thead>
<tr>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 2<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 3<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 4<span class="icon icon-select-arrows"></span>
</th>
<th>Table Header 1<span class="icon icon-select-arrows"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
<tr>
<td>Table Item 1</td>
<td>Table Item 2</td>
<td>Table Item 3</td>
<td>Table Item 4</td>
<td>Table Item 5</td>
</tr>
</tbody>
</table>
<hr/>
<h2>Buttons</h2>
<button type="button" class="btn bg-primary">Primary</button>
<button type="button" class="btn bg-secondary">Secondary</button>
<button type="button" class="btn bg-success">Success</button>
<button type="button" class="btn bg-info">Info</button>
<button type="button" class="btn bg-warning">Warning</button>
<button type="button" class="btn bg-error">Error</button>
<button type="button" class="btn bg-disabled">Disabled</button>
<button type="button" class="btn bg-transparent">Link</button>
<h4>Button Group</h4>
<div class="btn-group mr-20">
<button type="button" class="btn bg-default">One</button>
<button type="button" class="btn bg-default">Two</button>
<button type="button" class="btn bg-primary">Three</button>
</div>
<div class="btn-group action-menu mr-20">
<button type="button" class="btn bg-default">[</button>
<button type="button" class="btn bg-default">]</button>
</div>
<div class="btn-group action-menu">
<button type="button" class="btn bg-default">Main Action</button>
<button type="button" class="btn bg-default">[</button>
</div>
<div class="btn-group action-menu">
<button type="button" class="btn bg-primary">Main Action</button>
<button type="button" class="btn bg-primary">\/</button>
</div>
<h4>Button with label</h4>
<a href="" class="btn has-label bg-default">button has a<span class="btn-label">label</span></a>
<a href="" class="btn-xs has-label bg-default">button has a<span class="btn-label">label</span></a>
<a href="" class="btn-sm has-label bg-default">button has a<span class="btn-label">label</span></a>
<a href="" class="btn-lg has-label bg-default">button has a<span class="btn-label">label</span></a>
<!--pagination-->
<h4>pagination</h4>
<div class="row">
<div class="btn-group mb-20">
<a type="button" class="btn bg-transparent">|</a>
<a type="button" class="btn bg-transparent">|</a>
<a type="button" class="btn bg-transparent">X-XX of XXX</a>
<a type="button" class="btn bg-transparent">|</a>
<a type="button" class="btn bg-transparent">|</a>
</div>
</div>
<div class="row">
<div class="btn-group btn-group-sm">
<button type="button" class="btn bg-transparent">|</button>
<button type="button" class="btn bg-transparent">|</button>
<button type="button" class="btn bg-transparent">X-XX of XXX</button>
<button type="button" class="btn bg-transparent">|</button>
<button type="button" class="btn bg-transparent">|</button>
</div>
</div>
<p class="text-info">Fun Fact: The :hover and :active states of .btn are determined by a mixin that darkens the background color by 10%.</p>
<hr/>
<h2>Badges and Tags</h2>
<span class="badge bg-primary">10</span>
<span class="badge bg-secondary">5</span>
<span class="badge bg-success">1</span>
<span class="badge bg-info">10</span>
<span class="badge bg-warning"><span class="icon icon-alert"></span></span>
<span class="badge bg-error">!</span>
<span class="badge bg-disabled">10</span>
<span class="tag bg-primary">hello</span>
<span class="tag bg-secondary">hello</span>
<span class="tag bg-success">hello</span>
<span class="tag bg-info">hello</span>
<span class="tag bg-warning">hello</span>
<span class="tag bg-error">hello</span>
<span class="tag bg-default">hello <span class="icon icon-x text-small text-disabled"></span></span>
<span class="tag bg-disabled">hello</span>
<hr/>
<h2>Tooltips</h2>
<span class="tooltip bg-primary">hello</span>
<span class="tooltip bg-secondary">hello</span>
<span class="tooltip bg-success">hello</span>
<span class="tooltip bg-info">hello</span>
<span class="tooltip bg-warning">hello</span>
<span class="tooltip bg-error">hello</span>
<span class="tooltip bg-disabled">hello</span>
<span class="tooltip bg-default">hello this is a tooltip <span class="badge bg-error">4</span></span>
<h2>Banners</h2>
<div class="banner bg-primary">
<div class="banner-icon"><span class="icon icon-help"></span></div>
<div class="banner-message">
<p>Primary Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-secondary">
<div class="banner-icon"><span class="icon icon-gear"></span></div>
<div class="banner-message">
<p>Secondary Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-success">
<div class="banner-icon"><span class="icon icon-success"></span></div>
<div class="banner-message">
<p>Success Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-info">
<div class="banner-icon"><span class="icon icon-info"></span></div>
<div class="banner-message">
<p>Info Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-warning">
<div class="banner-icon"><span class="icon icon-alert"></span></div>
<div class="banner-message">
<p>Warning Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-error">
<div class="banner-icon"><span class="icon icon-notification"></span></div>
<div class="banner-message">
<p>Error Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<div class="banner bg-default">
<div class="banner-icon"><span class="icon icon-notification"></span></div>
<div class="banner-message">
<p>Link Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">this is a link</a></p>
</div>
</div>
<p class="text-info">Fun Fact: The text color of any .bg-* is set based on background color and calculated a dark or light contrasted text color.</p>
<hr/>
<h2>Alerts</h2>
<div class="section row">
<div class="col span-4 alert">
<h3 class="text-default alert-header">Default: Alert of Modal header</h3>
<hr/>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<button class="btn bg-default">button</button>
</div>
<div class="col span-4 alert">
<h3 class="text-info alert-header">Info: Alert of Modal header</h3>
<hr/>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<button class="btn bg-info">button</button>
</div>
<div class="col span-4 alert">
<h3 class="text-success alert-header">Success! Alert of Modal header</h3>
<hr/>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<button class="btn bg-success">button</button>
</div>
</div>
<h2>Modal Alerts</h2>
<div class="overlay-demo section row">
<div class="modal col span-6 offset-3">
<div class="text-default modal-header">
<h4 class="modal-title">Default: Alert of Modal header</h4>
<button class="btn bg-transparent close"><span class="icon icon-close text-right"></span></button>
</div>
<div class="modal-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div class="modal-footer text-right">
<button class="btn bg-transparent">button</button>
<button class="btn bg-primary">button</button>
</div>
</div>
</div>
<hr/>
<h2>Forms</h2>
<form action="#" method="post" class="form">
<label for="name">Text Input:</label>
<input type="text" name="name" placeholder="placeholder lorem" id="name" value="" tabindex="1" />
<div class="row">
<div class="col span-3">
<label for="name">Text Input:</label>
<input type="text" name="name" placeholder="Nailed it" id="name" value="" tabindex="1" class="success" />
</div>
<div class="col span-3">
<label for="name">Text Input:</label>
<input type="text" name="name" placeholder="This requires blah blah blah" id="name" value="" tabindex="1" class="warning" />
</div>
<div class="col span-3">
<label for="name">Text Input:</label>
<input type="text" name="name" placeholder="Bzzz! Wrong!" id="name" value="" tabindex="1" class="error" />
</div>
<div class="col span-3">
<label for="name">Text Input:</label>
<input type="text" name="name" placeholder="Nope" id="name" value="" tabindex="1" class="disabled" />
</div>
</div>
<div class="row inline-form">
<div class="col span-2 inline-label">
<label for="name">Text Input:</label>
</div>
<div class="col span-10">
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
</div>
<div class="row inline-form gutless">
<div class="col span-11">
<input type="text" name="name" placeholder="lorem ipsume dolor" id="name" value="" tabindex="1" />
</div>
<div class="col span-1">
<button class="btn bg-primary" type="button">Edit</button>
</div>
</div>
<div class="row inline-form gutless">
<div class="col span-11">
<input type="text" name="name" placeholder="lorem ipsume dolor" id="name" value="" tabindex="1" />
</div>
<div class="col span-1">
<button class="btn bg-success" type="button">Save</button>
</div>
</div>
<h4>Input group</h4>
<div class="row inline-form gutless">
<div class="col span-11">
<input type="text" name="name" placeholder="lorem ipsume dolor" id="name" value="" tabindex="1" />
</div>
<div class="col span-1">
<span class="input-label bg-default" type="button">unit</span>
</div>
</div>
<div class="row inline-form gutless">
<span class="col span-1 input-label bg-default">unit</span>
<input class="col span-11" type="text" name="name" placeholder="lorem ipsume dolor" id="name" value="" tabindex="1" />
</div>
<div class="row inline-form gutless">
<span class="col span-1 input-label bg-default btn-sm"><label>unit</label></span>
<input class="col span-11 input-sm" type="text" name="name" placeholder="lorem ipsume dolor" id="name" value="" tabindex="1" />
</div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
<div class="row inline-form">
<div class="col span-2 inline-label">
<label for="select-choice">Select Dropdown Choice:</label>
</div>
<div class="col span-2">
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
</div>
<button type="submit" value="Submit" class="btn bg-default">submit</button>
</form>
<hr/>
<h2>Tabs</h2>
<div class="tabs">
<ul class="tab-header">
<li><a href="#">Tab Header 1</a></li>
<li><a href="#" class="active">Tab Header 2</a></li>
<li><a href="#">Tab Header 3</a></li>
</ul>
<div class="tab-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<div class="row inline-form">
<div class="col span-2 inline-label text-right">
<label for="name">Text Input for a thing:</label>
</div>
<div class="col span-10">
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
</div>
<div class="row inline-form">
<div class="col span-2 inline-label text-right">
<label for="name">Text Input:</label>
</div>
<div class="col span-10">
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
</div>
</div>
</div>

2
app/components/page-header/template.hbs
View File

@ -83,7 +83,7 @@
</ul>
<!--quick add-->
<ul class="dropdown">
<ul class="quick-add dropdown">
<li>
<a class="btn btn-sm dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" aria-label={{t 'nav.user.label' username=session.user}}>
Quick Add <i class="icon icon-plus"></i>

8
app/components/settings/catalog-url/template.hbs
View File

@ -1,10 +1,10 @@
<h3>{{t 'catalogSettings.header'}}</h3>
<h5>{{t 'catalogSettings.subtext'}}</h5>
<p>{{t 'catalogSettings.subtext'}}</p>
<hr>
<div class="row row-same-height">
<div class="col span-6">
<h5>{{t (if settings.isRancher 'catalogSettings.certified.header.rancher' 'catalogSettings.certified.header.pl') appName=settings.appName}}</h5>
<p>{{t (if settings.isRancher 'catalogSettings.certified.header.rancher' 'catalogSettings.certified.header.pl') appName=settings.appName}}</p>
<div class="">
<label class="mr-20 hand">
{{radio-button selection=enableLibrary value=true}} {{t 'generic.enabled'}}
@ -22,7 +22,7 @@
</p>
</div>
<div class="col span-6">
<h5>{{t (if settings.isRancher 'catalogSettings.community.header.rancher' 'catalogSettings.community.header.pl') appName=settings.appName}}</h5>
<p>{{t (if settings.isRancher 'catalogSettings.community.header.rancher' 'catalogSettings.community.header.pl') appName=settings.appName}}</p>
<div class="">
<label class="mr-20 hand">
{{radio-button selection=enableCommunity value=true}} {{t 'generic.enabled'}}
@ -43,7 +43,7 @@
<hr>
<h5>{{t 'catalogSettings.more.header'}}</h5>
<p>{{t 'catalogSettings.more.header'}}</p>
<p class="text-info">{{format-html-message 'catalogSettings.more.helpText'}}</p>
<button class="bg-transparent text-primary" {{action "add"}}><i class="icon icon-plus-circle"/> <span>{{t 'catalogSettings.more.addActionLabel'}}</span></button>

2
app/router.js
View File

@ -12,7 +12,6 @@ Router.map(function() {
this.route('failWhale', {path: '/fail'});
this.route('not-found', {path: '*path'});
this.route('signup', {path: '/signup'});
this.route('verify', {path: '/verify/:verify_token'});
this.route('verify-reset-password', {path: '/verify-reset-password/:verify_token'});
@ -23,6 +22,7 @@ Router.map(function() {
this.route('logout');
this.route('authenticated', {path: '/'}, function() {
this.route('style-guide', {path: '/style-guide'});
this.route('dummy-dev', {path: '/dev'});
this.route('user-settings', {path: '/user-settings', resetNamespace: true});
// Settings

4
app/styles/base/_color.scss
View File

@ -46,8 +46,8 @@
}
.bg-disabled {
@include bg-color($bg-disabled);
@include contrasted($bg-disabled);
background-color: $bg-disabled;
color: darken($bg-disabled, 30);
}
.bg-primary {

16
app/styles/components/_button.scss
View File

@ -6,7 +6,8 @@ $lg-padding: 18px 30px;
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------
.btn,
button {
button,
[class^='btn-'] {
display: inline-block;
text-align: center;
white-space: nowrap;
@ -30,14 +31,15 @@ button {
}
&.has-label {
text-align: left;
padding-right: 0;
padding: 0 0 0 15px;
clear: both;
.btn-label {
@extend .pull-right;
text-align: center;
min-width:60px;
padding: 5px 15px;
margin-top: -5px;
float: right;
padding: 5px 10px;
border-radius : 0 3px 3px 0;
background: rgba($accent-two, .3);
}
}
@ -86,6 +88,10 @@ button {
fieldset[disabled] .btn {
@extend .bg-disabled;
cursor: not-allowed;
&:hover {
background: $bg-disabled;
}
}
//button group

1
app/styles/components/_catalog-box.scss
View File

@ -176,7 +176,6 @@ $lines-to-show: 4;
.badge-thirdparty {
@extend .badge-rancher;
background-color: $primary;
color: black;
&:before {
border-color: $primary;

2
app/styles/components/_modals.scss
View File

@ -45,7 +45,7 @@
z-index: 15;
max-height: 0;
position: relative;
padding: 20px 20px 0 20px;
padding: 20px;
margin-bottom: 20px;
&.large-modal {

11
app/styles/components/_nav.scss
View File

@ -1,3 +1,5 @@
$nav-spacing: 4px;
nav {
border-collapse: collapse;
border-spacing: 0px;
@ -9,6 +11,7 @@ nav {
display: table-cell;
padding: 0;
width: 100%;
vertical-align: middle;
.logo {
@ -17,13 +20,12 @@ nav {
> li {
list-style-type: none;
display: inline-block;
// padding-top: 4px;
&.active {
> a {
color: $info;
border: 0;
border-bottom: solid 4px mix($user-btn, black, 50%);
border-bottom: solid $nav-spacing mix($user-btn, black, 50%);
}
}
@ -31,13 +33,14 @@ nav {
color: $header-link;
display: block;
padding: 10px;
border-bottom: solid 4px transparent;
border-bottom: solid $nav-spacing transparent;
border-top: solid $nav-spacing transparent;
&:hover {
background-color: mix($user-btn, black, 80%);
color: white;
text-decoration: none;
border-bottom: solid 4px mix($user-btn, black, 50%);
border-bottom: solid $nav-spacing mix($user-btn, black, 50%);
}
}
}

23
app/styles/components/_page-header.scss
View File

@ -52,11 +52,30 @@
.nav-user {
display:table-cell;
width: 80px;
// border-left: 20px solid transparent;
background: $user-btn;
border-radius: 0 3px 3px 0;
vertical-align: middle;
margin: 0;
a {
display: block;
&:hover {
border-bottom: 0;
}
}
}
.quick-add {
display:table-cell;
border-radius: 0;
margin: 0;
padding: 0;
li {
display: block;
a {
display: block;
}
}
}
.logo-oss {

68
app/styles/components/_tables.scss
View File

@ -2,104 +2,89 @@
// Important: Almost all selectors in here need to be ">"-ed together so they
// apply only to the current table, not one nested inside another table.
//
TABLE {
position: relative;
&.no-lines {
* {
border: none;
}
}
position: relative;
.faded {
opacity: .5;
}
&.fixed {
table-layout: fixed;
width: 100%;
}
.fixed-header-actions {
min-height: 40px;
width: 100%;
z-index: 1;
background: $body-bg;
}
.fixed-header {
z-index: 2;
background: $link-color;
> TH {
BUTTON {
padding: 0;
}
}
}
> THEAD .bulk-actions {
margin: 0 3px;
}
&.has-sub-rows {
TABLE > THEAD > .fixed-header-actions {
z-index: 3;
background-color: transparent;
}
TABLE > THEAD > .fixed-header {
z-index: 4;
}
TABLE .bulk-actions {
margin: 0 18px;
}
}
.fixed-header-placeholder {
visibility: hidden;
TH {
padding: 0 !important;
height: 0 !important;
}
}
> THEAD > TR > TH,
> TBODY > TR > TD {
padding: 5px;
}
> TBODY > TR.separator-row > TD {
background-color: $body-bg;
}
> TBODY > TR.no-bottom TD {
padding-bottom: 0;
}
> TBODY > TR.no-top TD {
padding-top: 0;
}
// &.has-sub-rows > TBODY {
// > TR.main-row > TD {
// padding-bottom: 0;
// }
//
// > TR.sub-row > TD {
// padding-top: 0;
// }
// }
// &.has-sub-rows > TBODY {
// > TR.main-row > TD {
// padding-bottom: 0;
// }
//
// > TR.sub-row > TD {
// padding-top: 0;
// }
// }
&.small {
> THEAD {
> TR > TH {
padding: 2px 5px;
}
}
> TBODY > TR > TD {
padding: 2px 5px;
}
}
> THEAD > TR {
width: 100%;
box-sizing: border-box;
@ -108,14 +93,12 @@ TABLE {
border-radius: 0;
outline: none;
transition: all ease-in-out .2s;
&.fixed-header {
background: $link-color;
th .btn {
color: white;
}
}
> TH {
border-width: 0 0 3px 0;
border-color: $table-border-color;
@ -126,47 +109,52 @@ TABLE {
font-weight: normal;
}
}
&.has-sub-rows TABLE > THEAD > TR.fixed-header {
background: lighten($link-color, 30);
background: lighten($link-color, 20);
th .btn {
color: black;
}
}
> TBODY {
border: none;
background-color: $table-bg;
> TR {
> TD {
border: solid thin $table-border-color;
}
&.row-selected {
background-color: $table-bg-hover;
}
}
}
&.striped > TBODY > TR {
> TD {
border: none;
}
&:nth-child(odd) {
background-color: $table-bg;
}
&:nth-child(even) {
background-color: $table-bg-accent;
}
&.row-selected {
background-color: $table-bg-selected;
}
}
&.solid > TBODY {
background: $light-grey;
tr {
&:hover {
background-color: lighten($info, 25%);
}
td {
border: solid 2px white;
&:hover {
background-color: $info;
}
}
}
}
.select-for-action {
text-align: center;
}

2
app/styles/layout/_grid.scss
View File

@ -44,7 +44,7 @@ $GUTTER: 1.5%;
.span-#{$span}#{$suffix} { width: decimal-round( (((100 - ($GUTTER * ($cols - 1))) / $cols) * $span) + (($span - 1) * $GUTTER) , 3, 'floor'); }
// Gutterless column
.gutless .span-#{$span}#{$suffix} { margin-left: 0; width: decimal-round( $span / $cols * 100%, 3, 'floor'); }
.gutless .span-#{$span}#{$suffix} { margin-right: 0; width: decimal-round( $span / $cols * 100%, 3, 'floor'); }
// Offsets
.offset-#{$span}#{$suffix} {

4
app/styles/themes/_dark.scss
View File

@ -15,7 +15,7 @@ $error : desaturate($error, .75); // stopped inact
$bg-default : mix($mid-grey, $dark-grey);
$bg-disabled : desaturate($mid-grey, .65);
$bg-primary : desaturate($primary, 20%);
$bg-primary : desaturate($primary, 50%);
$bg-secondary : desaturate($secondary, 20%);
$bg-success : desaturate($success, 20%);
$bg-info : desaturate($info, 20%);
@ -38,7 +38,7 @@ $accent-bg : $accent-two;
$accent-border : rgba($light-grey,.05);
/*header*/
$header : $bg-secondary;
$header : $bg-primary;
$header-link : $light-grey;
$header-link-active : $primary;
$user-btn : darken($header, 5%);

6
app/styles/themes/_light.scss
View File

@ -15,7 +15,7 @@ $warning : $warning; //orange degraded
$error : $error; //red stopped inactive bad
$bg-default : $light-grey;
$bg-disabled : rgba($mid-grey, .65);
$bg-disabled : lighten($mid-grey, 25);
$bg-primary : $primary;
$bg-secondary : $secondary;
$bg-success : $success;
@ -56,7 +56,7 @@ $border : $light-grey;
$shadow : rgba($mid-grey, 0.35);
// Default background color used for all tables.
$table-bg : rgba($light-grey, .5);
$table-bg : lighten($light-grey, 5%);
$table-header : $link-color;
// Background color used for `.table-striped`
@ -96,7 +96,7 @@ $input-bg : lighten($light-grey, 4%);
$input-bg-hover : $mid-grey;
// `<input disabled>` background color
$input-bg-disabled : $dark-grey;
$input-bg-disabled : $mid-grey;
// Text color for `<input>`s
$input-color : $secondary;