mirror of https://github.com/rancher/ui.git
Merge branch 'reskin' of https://github.com/rancher/ui into reskin
This commit is contained in:
Vincent Fiduccia
commit
f9dca4bcea
|
|
@ -1,5 +1,6 @@
|
|||
<td>
|
||||
<span class="badge state {{model.stateBackground}}">
|
||||
{{container-dot model=model}}
|
||||
<span class="{{model.stateColor}}">
|
||||
{{model.displayState}}
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -11,21 +12,19 @@
|
|||
</td>
|
||||
<td class="clip">
|
||||
{{display-image model.imageUuid}}
|
||||
</td>
|
||||
<td class="clip">
|
||||
{{#if model.command}}
|
||||
{{model.command}}
|
||||
{{#if model.command~}}
|
||||
({{model.command}})
|
||||
{{else}}
|
||||
<span class="text-muted">None</span>
|
||||
<span class="text-muted">(none)</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
{{#if showStats}}
|
||||
<td class="spark-td">
|
||||
{{#if model.cpuSpark}}
|
||||
{{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax classNames="spark-tl" prefix="CPU: " formatter="percent"}}
|
||||
{{spark-line data=model.memorySpark width=60 height=15 max=memoryMax classNames="spark-tr" prefix="Memory: " formatter="mib"}}
|
||||
{{spark-line data=model.networkSpark width=60 height=15 max=networkMax classNames="spark-bl" prefix="Network: " formatter="kbps"}}
|
||||
{{spark-line data=model.storageSpark width=60 height=15 max=storageMax classNames="spark-br" prefix="Storage: " formatter="kbps"}}
|
||||
{{spark-line data=model.cpuSpark width=60 height=15 max=cpuMax prefix="CPU: " formatter="percent"}}
|
||||
{{spark-line data=model.memorySpark width=60 height=15 max=memoryMax prefix="Memory: " formatter="mib"}}
|
||||
{{spark-line data=model.networkSpark width=60 height=15 max=networkMax prefix="Network: " formatter="kbps"}}
|
||||
{{spark-line data=model.storageSpark width=60 height=15 max=storageMax prefix="Storage: " formatter="kbps"}}
|
||||
{{/if}}
|
||||
</td>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
|
||||
export default Ember.Component.extend({
|
||||
data: null,
|
||||
classNames: ['col-sm-12', 'col-md-4', 'col-md-height', 'col-md-full-height', 'col-top'],
|
||||
//attributeBindings: ['tooltip'],
|
||||
tagName: 'div',
|
||||
|
||||
width: null,
|
||||
height: 110,
|
||||
min: 0,
|
||||
max: null,
|
||||
interpolation: 'step-after',
|
||||
formatter: 'value',
|
||||
prefix: '',
|
||||
|
||||
svg: null,
|
||||
line: null,
|
||||
dot: null,
|
||||
x: null,
|
||||
y: null,
|
||||
|
||||
|
||||
didInsertElement: function() {
|
||||
this.set('width', this.$('#inner-content').width());
|
||||
},
|
||||
|
||||
hasData: function() {
|
||||
if (this.get('data.length') > 0 && !this.get('svg')) {
|
||||
this.create();
|
||||
}
|
||||
}.observes('data.length'),
|
||||
|
||||
create() {
|
||||
var svg = d3.select(this.$('#cpu-graph')[0])
|
||||
.append('svg:svg')
|
||||
.attr('width', '100%')
|
||||
.attr('height', '100%');
|
||||
|
||||
this.set('svg', svg);
|
||||
this.set('x', d3.scale.linear().range([0, this.get('width')]));
|
||||
this.set('y', d3.scale.linear().range([this.get('height'), 0]));
|
||||
|
||||
var line = d3.svg.line()
|
||||
.x((d, i) => {
|
||||
return this.get('x')(i);
|
||||
})
|
||||
.y((d) => {
|
||||
return this.get('y')(d);
|
||||
});
|
||||
this.set('line', line);
|
||||
|
||||
//svg.append('path').attr('class', `node-${this.get('data')[0][0]}`).attr('d', line(this.get('data')[0].slice(1)))
|
||||
//.attr('stroke', 'green')
|
||||
//.attr('stroke-width', 2)
|
||||
//.attr('fill', 'none');
|
||||
},
|
||||
|
||||
generateYAxis: function() {
|
||||
var out;
|
||||
if (this.get('type') === 'cpu') {
|
||||
out = d3.svg.axis()
|
||||
.scale(this.get('y'))
|
||||
.ticks(6)
|
||||
.tickFormat(function(d) { return d + "%"; })
|
||||
.orient('right');
|
||||
} else {
|
||||
out = d3.svg.axis()
|
||||
.scale(this.get('y'))
|
||||
.ticks(6)
|
||||
.orient('right');
|
||||
}
|
||||
return out;
|
||||
},
|
||||
|
||||
update: function() {
|
||||
var svg = this.get('svg');
|
||||
var data = (this.get('data') || []).slice();
|
||||
var x = this.get('x');
|
||||
var y = this.get('y');
|
||||
var line = this.get('line');
|
||||
var width = this.get('width');
|
||||
var height = this.get('height');
|
||||
|
||||
if (svg && data && x && y && line) {
|
||||
x.domain([0, 60]);
|
||||
x.range([0, width - 1]);
|
||||
|
||||
y.domain([0, 100]);
|
||||
y.range([height, 0]);
|
||||
|
||||
|
||||
var yAxis = this.generateYAxis();
|
||||
|
||||
//svg.selectAll('path')
|
||||
//.data([data[0].splice(1)])
|
||||
//.attr('d', line);
|
||||
|
||||
data.forEach((v,i,d) => { // jshint ignore:line
|
||||
//debugger;
|
||||
if (svg.select(`.node-${v[0]}`)[0][0]) {
|
||||
/*svg.select(`.node-${v[0]}`)
|
||||
.data(v.slice(1))
|
||||
.attr('d', line);*/
|
||||
} else {
|
||||
//debugger;
|
||||
svg.append('path').attr('class', `node-${v[0]}`).attr('d', line(v.slice(1)))
|
||||
.attr('stroke', 'green')
|
||||
.attr('stroke-width', 2)
|
||||
.attr('fill', 'none');
|
||||
}
|
||||
});
|
||||
svg.append('g')
|
||||
.attr('class', 'y-axis')
|
||||
.attr('transform', 'translate(0, 0)')
|
||||
.call(yAxis);
|
||||
|
||||
}
|
||||
}.observes('data', 'data.[]'),
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="well no-padding-margin">
|
||||
<div id="inner-content" style="padding: 20px;">
|
||||
<label class="section text-muted">{{type}}</label>
|
||||
<hr>
|
||||
<div class="info-graph {{unless active 'hide'}}" id="cpu-graph">
|
||||
</div>
|
||||
<div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
|
||||
<i class="icon icon-spinner icon-spin"></i> Connecting...
|
||||
</div>
|
||||
<div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
|
||||
Utilization stats are only available while active/running.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<div class="form-control-static">
|
||||
<button class="btn-circle-plus" {{action "addEnvironment" target="view"}}></button>
|
||||
<button class="btn-circle-plus" {{action "addEnvironment" target="view"}}><i class="icon icon-plus-circle"></i></button>
|
||||
</div>
|
||||
|
||||
{{#if environmentArray.length}}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="col-sm-12 col-md-8">
|
||||
{{#unless editing}}
|
||||
<div>
|
||||
<button class="btn-circle-plus" {{action "addPort" target="view"}}></button>
|
||||
<button class="btn-circle-plus" {{action "addPort" target="view"}}><i class="icon icon-plus-circle"></i></button>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{#if portsArray.length}}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default Ember.Component.extend({
|
|||
cpuGraph: null,
|
||||
cpuData: null,
|
||||
setCpuScale: false,
|
||||
cpuD3Data: null,
|
||||
|
||||
memoryCanvas: '#memoryGraph',
|
||||
memoryGraph: null,
|
||||
|
|
@ -142,6 +143,7 @@ export default Ember.Component.extend({
|
|||
row.push(point.cpu_total);
|
||||
}
|
||||
|
||||
this.set('cpuD3Data', data);
|
||||
if ( point.cpu_count && this.get('renderOk') && !this.get('setCpuScale') )
|
||||
{
|
||||
graph.axis.max(point.cpu_count*100);
|
||||
|
|
@ -234,6 +236,7 @@ export default Ember.Component.extend({
|
|||
x.push(i);
|
||||
}
|
||||
this.set('cpuData', [x]);
|
||||
this.set('cpuD3Data', [x]);
|
||||
|
||||
var cpuGraph = c3.generate({
|
||||
bindto: this.get('cpuCanvas'),
|
||||
|
|
@ -405,11 +408,14 @@ export default Ember.Component.extend({
|
|||
|
||||
//console.log('Init Network');
|
||||
var x = ['x'];
|
||||
var z = [];
|
||||
for ( var i = 0 ; i < MAX_POINTS ; i++ )
|
||||
{
|
||||
x.push(i);
|
||||
z.push(i);
|
||||
}
|
||||
this.set('networkData', [x]);
|
||||
this.set('networkD3Data', z);
|
||||
|
||||
var networkGraph = c3.generate({
|
||||
bindto: this.get('networkCanvas'),
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<div class="row">
|
||||
<div class="row-same-height row-full-height">
|
||||
<div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
|
||||
<div class="well no-padding-margin" style="height: 100%;">
|
||||
<div style="padding: 20px;">
|
||||
<label class="section">Info</label>
|
||||
<div>
|
||||
<div class="container-fluid container-multi-stat">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12 {{model.stateBackground}}">
|
||||
<label class="section r-mt5" style="color:white;">Info: {{model.displayState~}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row-same-height row-full-height">
|
||||
<div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
|
||||
<div class="well no-padding-margin">
|
||||
<div style="padding: 20px;">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<section class="instances">
|
||||
<table class="grid fixed" style="margin-bottom: 0;">
|
||||
<table class="grid fixed" style="margin-bottom: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
|
||||
{{sortable-th sortable=this action="changeSort" name="name"}}
|
||||
{{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}}
|
||||
{{sortable-th sortable=this action="changeSort" name="image"}}
|
||||
{{sortable-th sortable=this action="changeSort" name="command"}}
|
||||
<th class="stats" width="128">Stats</th>
|
||||
<th class="actions" width="50"> </th>
|
||||
{{sortable-th sortable=this action="changeSort" name="image (command)"}}
|
||||
<th class="stats">Stats</th>
|
||||
<th class="actions" width="70"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -18,6 +16,4 @@
|
|||
<tr><td colspan="7" class="text-center text-muted">This host does not have any containers yet.</td></tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<section>
|
||||
<table class="grid fixed" style="margin-bottom: 0;">
|
||||
<table class="grid fixed" style="margin-bottom: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
{{sortable-th sortable=this action="changeSort" name="state" width="120"}}
|
||||
|
|
@ -15,6 +14,4 @@
|
|||
<tr><td colspan="4" class="text-center text-muted">This host does not have any volumes.</td></tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,73 @@
|
|||
|
||||
<section>
|
||||
{{#info-multi-stats model=model linkName="hostStats" single=true}}
|
||||
<div class="row multi-stats">
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
<label>IP Address</label>
|
||||
{{model.displayIp}} {{zero-clipboard text=model.displayIp}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.memoryBlurb}}
|
||||
<label>Memory</label>
|
||||
{{model.memoryBlurb}}
|
||||
{{else}}
|
||||
<span class="text-muted">No Memory Footprint</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.osDetail}}
|
||||
<label>OS</label>
|
||||
{{model.osDetail}}
|
||||
{{else}}
|
||||
<span class="text-muted">No OS Details</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.dockerBlurb}}
|
||||
<label>Docker</label>
|
||||
{{model.dockerBlurb}}
|
||||
{{else}}
|
||||
<span class="text-muted">No Docker Details</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row multi-stats">
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.cpuBlurb}}
|
||||
<label>CPU</label>
|
||||
{{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.diskBlurb}}
|
||||
<label>Storage</label>
|
||||
{{#if model.diskDetail}}
|
||||
{{#each model.diskDetail as |disk|}}
|
||||
<span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
{{model.diskBlurb}} (total)
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="text-muted">No Storage Details</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
{{#if model.info.osInfo.kernelVersion}}
|
||||
<label>Kernel</label>
|
||||
{{model.info.osInfo.kernelVersion}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||||
<label>Provider</label>
|
||||
{{#if model.machine}}
|
||||
{{model.machine.driver}}
|
||||
{{else}}
|
||||
<span class="text-muted">No Provider</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{!--
|
||||
<ul class="list-lines">
|
||||
{{#if model.showTransitioningMessage}}
|
||||
<li>
|
||||
|
|
@ -21,87 +88,17 @@
|
|||
</span>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
<li>
|
||||
<label>IP Address</label>
|
||||
{{model.displayIp}} {{zero-clipboard text=model.displayIp}}
|
||||
</li>
|
||||
|
||||
{{#if model.machine}}
|
||||
<li>
|
||||
<label>Provider</label>
|
||||
{{model.machine.driver}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.cpuBlurb}}
|
||||
<li>
|
||||
<label>CPU</label>
|
||||
{{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.memoryBlurb}}
|
||||
<li>
|
||||
<label>Memory</label>
|
||||
{{model.memoryBlurb}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.diskBlurb}}
|
||||
<li>
|
||||
<label>Storage</label>
|
||||
{{#if model.diskDetail}}
|
||||
{{#each model.diskDetail as |disk|}}
|
||||
<span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
{{model.diskBlurb}} (total)
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.osDetail}}
|
||||
<li>
|
||||
<label>OS</label>
|
||||
{{model.osDetail}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.info.osInfo.kernelVersion}}
|
||||
<li>
|
||||
<label>Kernel</label>
|
||||
{{model.info.osInfo.kernelVersion}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if model.dockerBlurb}}
|
||||
<li>
|
||||
<label>Docker</label>
|
||||
{{model.dockerBlurb}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
<li>
|
||||
<label>Labels</label>
|
||||
{{#if userLabelArray.length}}
|
||||
{{#each userLabelArray as |label|}}
|
||||
<span class="label label-default clip" style="display: inline-block; max-width: 100%;">{{label.key}}{{#if label.value}}={{label.value}}{{/if}}</span>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<span class="text-muted">None</span>
|
||||
{{/if}}
|
||||
</li>
|
||||
</ul>
|
||||
--}}
|
||||
{{/info-multi-stats}}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul class="nav nav-tabs nav-tabs-well">
|
||||
<ul class="nav nav-tabs nav-tabs-well shadowed">
|
||||
{{#link-to "host.containers" tagName="li" href=false}}<a><i class="icon icon-box"></i> Containers</a>{{/link-to}}
|
||||
{{#link-to "host.storage" tagName="li" href=false}}<a><i class="icon icon-hdd"></i> Storage</a>{{/link-to}}
|
||||
</ul>
|
||||
<div class="well nav-well">
|
||||
<div class="table-flat">
|
||||
{{outlet}}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<div style="max-width: 360px; margin: 100px auto 0 auto;">
|
||||
<div class="farm-box login top-colors">
|
||||
<section>
|
||||
<div class="logo"></div>
|
||||
|
||||
<h1>Welcome to Rancher</h1>
|
||||
|
||||
|
||||
<h1>Howdy!<br>Welcome to Rancher</h1>
|
||||
<div class="logo"></div>
|
||||
<section>
|
||||
<br/>
|
||||
{{#if isGithub}}
|
||||
<p>Rancher uses GitHub to manage accounts and teams. Click the button below to log in and give us read-only access to your basic GitHub account information.</p>
|
||||
|
|
|
|||
|
|
@ -32,3 +32,4 @@
|
|||
@import "app/styles/spark-line";
|
||||
@import "app/styles/catalog";
|
||||
@import "app/styles/service-addtl-info";
|
||||
@import "app/styles/multi-stats";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$normal-weight: 400;
|
||||
$bold-weight: 600;
|
||||
$normal-weight: 500;
|
||||
$bold-weight: 900;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
|
|
@ -36,7 +36,7 @@ H1, H2, H3, H4, H5, H6 {
|
|||
vertical-align: middle;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid #e3e5e6;
|
||||
border-right: 1px solid $lightGray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,15 @@ H1, H2, H3, H4, H5, H6 {
|
|||
|
||||
|
||||
/*buttons*/
|
||||
.btn {
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-disabled,
|
||||
.btn.disabled {
|
||||
background: $lightGrayDark;
|
||||
}
|
||||
.btn-disabled,
|
||||
.btn.disabled,
|
||||
.btn[disabled],
|
||||
|
|
@ -107,6 +115,8 @@ fieldset[disabled] .btn {
|
|||
|
||||
.btn-default {
|
||||
box-shadow: none;
|
||||
background: white;
|
||||
color: $midGray;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
|
|
@ -137,6 +147,11 @@ fieldset[disabled] .btn {
|
|||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
&.borderless {
|
||||
.btn {
|
||||
border: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
|
|
@ -224,26 +239,31 @@ fieldset[disabled] .btn {
|
|||
|
||||
|
||||
.bg-default { background-color: $lightGrayTwo; color: $midGray; }
|
||||
.bg-primary { background-color: $brand-primary; }
|
||||
.bg-success { background-color: $brand-success; }
|
||||
.bg-danger { background-color: $brand-danger; }
|
||||
.bg-warning { background-color: $brand-warning; }
|
||||
.bg-info { background-color: $brand-info; }
|
||||
.bg-primary { background-color: $brand-primary; color:white;}
|
||||
.bg-success { background-color: $brand-success; color:white;}
|
||||
.bg-danger { background-color: $brand-danger; color:white;}
|
||||
.bg-warning { background-color: $brand-warning; color:$yellowDark;}
|
||||
.bg-info { background-color: $brand-info; color:$lightTealDark;}
|
||||
|
||||
.badge {
|
||||
border-radius: 90px;
|
||||
&.bg-default { background-color: $lightGrayTwo; color: $midGray; }
|
||||
&.bg-primary { background-color: $brand-primary; }
|
||||
&.bg-success { background-color: $brand-success; }
|
||||
&.bg-danger { background-color: $brand-danger; }
|
||||
&.bg-warning { background-color: $brand-warning; }
|
||||
&.bg-primary { background-color: $brand-primary; color: white;}
|
||||
&.bg-success { background-color: $brand-success; color: white;}
|
||||
&.bg-danger { background-color: $brand-danger; color: $redTwoDark;}
|
||||
&.bg-warning { background-color: $brand-warning; color: $yellowDark;}
|
||||
&.bg-info { background-color: $brand-info; }
|
||||
|
||||
&.badge-default { background-color: $lightGrayTwo; color: $midGray;}
|
||||
&.badge-primary { background-color: $brand-primary; }
|
||||
&.badge-default { background-color: $lightGrayTwoDark; color: $darkestGrayTwo;}
|
||||
&.badge-primary { background-color: #cce3ee; color: $brand-primary; }
|
||||
&.badge-success { background-color: $brand-success; }
|
||||
&.badge-danger { background-color: $brand-danger; }
|
||||
&.badge-warning { background-color: $brand-warning; }
|
||||
&.badge-info { background-color: $brand-info; }
|
||||
&.badge-warning { background-color: $brand-warning; color: $yellow;}
|
||||
&.badge-info { background-color: $brand-info; color: $yellow;}
|
||||
}
|
||||
|
||||
.label-warning {
|
||||
background-color: $brand-warning; color: $yellowDark;
|
||||
}
|
||||
|
||||
.border-default { border-color: $lightGrayTwo; }
|
||||
|
|
@ -386,6 +406,7 @@ HR {
|
|||
|
||||
.dropdown-header {
|
||||
padding-left: 10px;
|
||||
color: $midGrayDark;
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
|
|
@ -411,7 +432,7 @@ HR {
|
|||
}
|
||||
|
||||
.badge.state {
|
||||
border-radius: 1px;
|
||||
border-radius: 90px;
|
||||
font-size: 11px;
|
||||
font-weight: $normal-weight;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -429,7 +450,7 @@ LABEL {
|
|||
FORM LABEL,
|
||||
.horizontal-form LABEL,
|
||||
.form-group LABEL {
|
||||
color: #abb6b9;
|
||||
color: $darkestGrayTwo;
|
||||
font-weight: $normal-weight;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $lines-to-show: 4;
|
|||
}
|
||||
|
||||
H4 {
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ $stateBorder: 2px;
|
|||
top: ($stackHeight - $stateBorder)/2 - $stateRadius;
|
||||
text-align: center;
|
||||
line-height: $stateRadius*2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.count {
|
||||
|
|
@ -45,7 +44,7 @@ $stateBorder: 2px;
|
|||
|
||||
P {
|
||||
margin: 12px 0 0 0;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,38 @@
|
|||
// Thanks: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
|
||||
// Open Sans by Steve Matteson, Apache License 2.0
|
||||
/* open-sans-300 - latin */
|
||||
/* Webfont: Lato-Black 900*/
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'Lato';
|
||||
src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
|
||||
src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
|
||||
url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
|
||||
url('fonts/Lato-Black.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* Webfont: Lato-Light 300 */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('fonts/Lato-Light.eot'); /* IE9 Compat Modes */
|
||||
src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
|
||||
url('fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
|
||||
url('fonts/Lato-Light.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Open Sans Light'), local('OpenSans-Light'),
|
||||
url('fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
|
||||
url('fonts/open-sans-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* open-sans-regular - latin */
|
||||
/* Webfont: Lato-Medium 500*/
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'Lato';
|
||||
src: url('fonts/Lato-Medium.eot'); /* IE9 Compat Modes */
|
||||
src: url('fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
|
||||
url('fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */
|
||||
url('fonts/Lato-Medium.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'),
|
||||
url('fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
|
||||
url('fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* open-sans-600 - latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
|
||||
url('fonts/open-sans-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
|
||||
url('fonts/open-sans-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
font-weight: 500;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
// Animated Icons
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ HEADER {
|
|||
&>A {
|
||||
height: $topHeight;
|
||||
line-height: $topHeight;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&>A {
|
||||
|
|
@ -47,7 +48,16 @@ HEADER {
|
|||
}
|
||||
&.active {
|
||||
color: white;
|
||||
border-bottom: solid $primary;
|
||||
&:after{
|
||||
content: "";
|
||||
border-width: 5px;
|
||||
border-color: transparent;
|
||||
border-bottom-color: white;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -177,7 +187,7 @@ HEADER {
|
|||
.bottom-row {
|
||||
min-height: $bottomHeight;
|
||||
background-color: white;
|
||||
border-bottom: solid 2px $lightGrayTwo;
|
||||
border-bottom: solid 2px $lightGray;
|
||||
|
||||
NAV {
|
||||
font-size: 14px;
|
||||
|
|
@ -190,12 +200,22 @@ HEADER {
|
|||
color: $midGrayDark;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: $blueTwo
|
||||
}
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: rgba($lightTeal, 0.1);
|
||||
&:after{
|
||||
content: "";
|
||||
border-width: 5px;
|
||||
border-color: transparent;
|
||||
border-bottom-color: $lightGray;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
I {
|
||||
|
|
|
|||
|
|
@ -35,11 +35,7 @@ B {
|
|||
}
|
||||
|
||||
.farm {
|
||||
background-image: url('images/logos/login-bg.jpg');
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
/**********
|
||||
|
|
@ -182,6 +178,7 @@ UL.list-lines {
|
|||
margin-top: 5px;
|
||||
border-bottom: 1px solid #e8ecf2;
|
||||
font-size: $font-size-small;
|
||||
padding: 5px 0 5px 15px;
|
||||
|
||||
LABEL {
|
||||
font-weight: $normal-weight;
|
||||
|
|
@ -309,18 +306,28 @@ TABLE.graphs {
|
|||
}
|
||||
|
||||
.farm-box {
|
||||
h1 {
|
||||
background-image: url(images/logos/cowhide.jpg);
|
||||
background-size: cover;
|
||||
padding: 40px 20px;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
SECTION {
|
||||
min-width: 50%;
|
||||
margin: 20px auto 0 auto;
|
||||
background-color: white;
|
||||
border-radius: $border-radius-large;
|
||||
padding: 20px;
|
||||
box-shadow: $boxShadow;
|
||||
}
|
||||
|
||||
SECTION:first-of-type {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.hand {
|
||||
|
|
@ -391,7 +398,8 @@ $spacing-property-map: (
|
|||
|
||||
.btn-circle-plus {
|
||||
@extend .btn-circle;
|
||||
background-image: url('images/circle-plus.svg');
|
||||
font-size: 1.5em;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.btn-circle-x {
|
||||
|
|
@ -672,8 +680,8 @@ ASIDE {
|
|||
|
||||
A {
|
||||
border: 0 !important;
|
||||
background-color: $lightGrayTwo;
|
||||
color: $lightGrayDark;
|
||||
background-color: $lightGray;
|
||||
color: $darkestGrayTwo;
|
||||
}
|
||||
|
||||
&.active A,
|
||||
|
|
|
|||
|
|
@ -1,19 +1,28 @@
|
|||
.login {
|
||||
color: #848a9a;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.logo {
|
||||
background-image: url('images/logos/dark.svg');
|
||||
width: 44px;
|
||||
height: 25px;
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
background-image: url(images/logos/main.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 44px;
|
||||
background-size: 39px;
|
||||
background-position: center center;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
background-color: $primary;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 115px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
H1 {
|
||||
font-size: 28px;
|
||||
color: #393d47;
|
||||
color: white;
|
||||
}
|
||||
|
||||
SECTION {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
.container-multi-stat {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.multi-stats {
|
||||
border-left: 1px solid $gray-light;
|
||||
border-right: 1px solid $gray-light;
|
||||
border-bottom: 1px solid $gray-light;
|
||||
background-color: white;
|
||||
>div[class*='-3'] {
|
||||
padding: 12px;
|
||||
min-height: 50px;
|
||||
&:not(:first-of-type) {
|
||||
border-left: 1px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-tabs {
|
||||
&.shadowed {
|
||||
a {
|
||||
box-shadow: inset 0px 0px 1px rgba(0,0,0,.15);
|
||||
}
|
||||
li.active {
|
||||
a {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
li {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-flat {
|
||||
background-color: white;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
table {
|
||||
thead {
|
||||
background-color: $gray-light;
|
||||
color: white;
|
||||
th:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
td:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
td {
|
||||
i.icon-circle-o {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,6 @@ $subpod-detail: #9a9a9a;
|
|||
display: inline-block;
|
||||
border-bottom-left-radius: $border-radius-base;
|
||||
border-bottom-right-radius: $border-radius-base;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ pre[class*="language-"] {
|
|||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -76,12 +76,18 @@ module.exports = function(defaults) {
|
|||
app.import('vendor/icons/fonts/rancher-icons.ttf', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/icons/fonts/rancher-icons.woff', {destDir: 'assets/fonts'});
|
||||
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-300.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-300.woff2', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-600.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-600.woff2', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-regular.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/open-sans/open-sans-v13-latin-regular.woff2', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Light.ttf', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Light.eot', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Light.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Light.woff2', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Black.ttf', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Black.eot', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Black.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Black.woff2', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Medium.ttf', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Medium.eot', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Medium.woff', {destDir: 'assets/fonts'});
|
||||
app.import('vendor/lato/Lato-Medium.woff2', {destDir: 'assets/fonts'});
|
||||
|
||||
return app.toTree();
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -16,8 +16,8 @@ $gray-lighter: #eff2f6; //lighten($gray-base, 90%); // #eee
|
|||
|
||||
$brand-primary: #0075a8;
|
||||
$brand-success: #2ecc71;
|
||||
$brand-info: #f9e79f;
|
||||
$brand-warning: #f3be90;
|
||||
$brand-info: #78c9cf;
|
||||
$brand-warning: #fbf9de;
|
||||
$brand-danger: #f15354;
|
||||
|
||||
$primary: #0075a8;
|
||||
|
|
@ -35,6 +35,7 @@ $yellowDark: #e49701;
|
|||
$yellowTwo: #eadf5a;
|
||||
$yellowTwoDark: #d7c320;
|
||||
|
||||
|
||||
$green: #2ecc71;
|
||||
$greenDark: #27ae60;
|
||||
$greenTwo: #a5c63b;
|
||||
|
|
@ -105,7 +106,7 @@ $link-hover-decoration: none;
|
|||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
|
||||
$font-family-sans-serif: "Lato", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
|
@ -556,9 +557,9 @@ $state-info-text: #fff;
|
|||
$state-info-bg: $brand-info;
|
||||
$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
|
||||
|
||||
$state-warning-text: #fff;
|
||||
$state-warning-bg: $brand-warning;
|
||||
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%);
|
||||
$state-warning-text: $yellowDark;
|
||||
$state-warning-border: $yellowDark;
|
||||
|
||||
$state-danger-text: #fff;
|
||||
$state-danger-bg: $brand-danger;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit aface0a579380fe81e755e2d126f9bb28265703a
|
||||
Subproject commit 864e685f9345d8543f12469faea475b8f05e8648
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue