');
102 | this.$modalBody.addClass('modal-body');
103 |
104 | this.append(this.$modalBody);
105 | },
106 | _buildFooter: function()
107 | {
108 | this.$modalFooter = $K.dom('
');
109 | this.$modalFooter.addClass('modal-footer');
110 |
111 | this.append(this.$modalFooter);
112 | },
113 | _buildTemplate: function(template)
114 | {
115 | this.$modalBody.html(template);
116 | }
117 | });
--------------------------------------------------------------------------------
/kube/src/js/services/modal/modal.form.js:
--------------------------------------------------------------------------------
1 | $K.add('class', 'modal.form', {
2 | extends: ['dom'],
3 | init: function(app, element)
4 | {
5 | this.app = app;
6 |
7 | // build
8 | this.build(element);
9 | },
10 |
11 | // public
12 | build: function(element)
13 | {
14 | this.parse(element);
15 | },
16 | getData: function()
17 | {
18 | var data = {};
19 | this.find('[name]').each(function(node)
20 | {
21 | var $node = $K.dom(node);
22 | data[$node.attr('name')] = $node.val();
23 | });
24 |
25 | return data;
26 | },
27 | setData: function(data)
28 | {
29 | this.find('[name]').each(function(node)
30 | {
31 | var $node = $K.dom(node);
32 | var name = $node.attr('name');
33 | if (data.hasOwnProperty(name))
34 | {
35 | if (node.type && node.type === 'checkbox') node.checked = data[name];
36 | else $node.val(data[name]);
37 | }
38 | });
39 | },
40 | getItem: function(name)
41 | {
42 | return this.find('[name=' + name + ']');
43 | }
44 | });
--------------------------------------------------------------------------------
/kube/src/js/services/observer/observer.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'observer', {
2 | init: function(app)
3 | {
4 | this.app = app;
5 | this.opts = app.opts;
6 |
7 | if (this._isObserve())
8 | {
9 | this._build();
10 | }
11 | },
12 |
13 | // private
14 | _isObserve: function()
15 | {
16 | return (typeof this.opts.observer !== 'undefined' && window.MutationObserver);
17 | },
18 | _build: function()
19 | {
20 | var self = this;
21 | var observer = new MutationObserver(function(mutations)
22 | {
23 | mutations.forEach(function(mutation)
24 | {
25 | var newNodes = mutation.addedNodes;
26 | if (newNodes.length === 0 || (newNodes.length === 1 && newNodes.nodeType === 3))
27 | {
28 | return;
29 | }
30 |
31 | self._iterate();
32 | });
33 | });
34 |
35 | // pass in the target node, as well as the observer options
36 | observer.observe(document, {
37 | subtree: true,
38 | childList: true
39 | });
40 | },
41 | _iterate: function()
42 | {
43 | var self = this;
44 | var $nodes = $K.dom('[data-kube]').not('[data-loaded]');
45 | $nodes.each(function(node, i)
46 | {
47 | var $el = $K.dom(node);
48 | var name = $el.attr('data-kube');
49 | var id = ($el.attr('id')) ? $el.attr('id') : name + '-' + (self.app.servicesIndex + i);
50 | var instance = new App.Module(self.app, $el, name, id);
51 |
52 | self._storeElementModule(instance, name, id)
53 | self._call(instance, 'start');
54 | });
55 |
56 | // $R
57 | if (typeof $R !== 'undefined')
58 | {
59 | $R('[data-redactor]');
60 | }
61 | },
62 | _call: function(instance, method, args)
63 | {
64 | if (typeof instance[method] === 'function')
65 | {
66 | return instance[method].apply(instance, args);
67 | }
68 | },
69 | _storeElementModule: function(instance, name, id)
70 | {
71 | if (instance)
72 | {
73 | if (typeof this.app.modules[name] === 'undefined')
74 | {
75 | this.app.modules[name] = {};
76 | }
77 |
78 | this.app.modules[name][id] = instance;
79 | }
80 | }
81 | });
--------------------------------------------------------------------------------
/kube/src/js/services/options/options.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'options', {
2 | init: function(app, type, opts)
3 | {
4 | this.app = app;
5 | this.utils = app.utils;
6 |
7 | return (type === 'global') ? this._build(opts) : this._buildElement(opts);
8 | },
9 | _build: function(opts)
10 | {
11 | return (opts) ? this._extendFromElements(opts) : {};
12 | },
13 | _buildElement: function($el)
14 | {
15 | return $K.extend(
16 | {},
17 | $el.data()
18 | );
19 | },
20 | _extendFromElements: function(options)
21 | {
22 | return (options.hasOwnProperty('append')) ? this.utils.extendData(options, options['append']) : options;
23 | }
24 | });
--------------------------------------------------------------------------------
/kube/src/js/services/progress/progress.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'progress', {
2 | init: function(app)
3 | {
4 | this.app = app;
5 | this.$body = app.$body;
6 |
7 | // defaults
8 | this.defaults = {
9 | selector: 'kube-progress',
10 | target: false,
11 | value: 100
12 | }
13 |
14 | // local
15 | this.$progress = false;
16 | this.$progressBar = false;
17 | },
18 | // public
19 | stop: function()
20 | {
21 | this.$progress = false;
22 | this.$progressBar = false;
23 |
24 | $K.dom('#' + this.params.selector).remove();
25 |
26 | if (this.params.target)
27 | {
28 | var $target = $K.dom(this.params.target);
29 | $target.removeClass('is-relative');
30 | }
31 | },
32 | show: function(params)
33 | {
34 | this._buildDefaults(params);
35 | this._build();
36 | },
37 | hide: function(params)
38 | {
39 | if (this.$progress)
40 | {
41 | this._buildDefaults(params);
42 | this.animate.run(this.$progress, 'fadeOut', this.stop.bind(this));
43 | }
44 | },
45 | update: function(params)
46 | {
47 | this._buildDefaults(params);
48 |
49 | if (!this.$progress) this._build();
50 | this._setValue();
51 | },
52 |
53 | // private
54 | _buildDefaults: function(data)
55 | {
56 | this.params = $K.extend({}, this.defaults, data);
57 | },
58 | _build: function()
59 | {
60 | this.stop();
61 |
62 | this.$progress = $K.dom('
');
63 | this.$progress.attr('id', this.params.selector);
64 | this.$progress.addClass(this.params.selector);
65 |
66 | this.$progressBar = $K.dom('
');
67 | this.$progress.append(this.$progressBar);
68 |
69 | if (this.params.target)
70 | {
71 | var $target = $K.dom(this.params.target);
72 | if ($target.css('position') === 'static')
73 | {
74 | $target.addClass('is-relative');
75 | }
76 |
77 | $target.append(this.$progress);
78 | }
79 | else
80 | {
81 | this.$progress.addClass('is-fixed');
82 | this.$body.append(this.$progress);
83 | }
84 | },
85 | _setValue: function()
86 | {
87 | this.$progressBar.css('width', this.params.value + '%');
88 | }
89 | });
--------------------------------------------------------------------------------
/kube/src/js/services/response/response.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'response', {
2 | init: function(app)
3 | {
4 | this.app = app;
5 | },
6 | // public
7 | parse: function(str)
8 | {
9 | if (str === '') return false;
10 |
11 | var obj = (typeof str === 'object') ? str : JSON.parse(str);
12 | if (obj[0] !== undefined)
13 | {
14 | for (var item in obj)
15 | {
16 | this._parseItem(obj[item]);
17 | }
18 | }
19 | else
20 | {
21 | this._parseItem(obj);
22 | }
23 |
24 | return obj;
25 | },
26 | // private
27 | _parseItem: function(item)
28 | {
29 | if (item.type === 'location')
30 | {
31 | top.location.href = item.data;
32 | }
33 | else if (item.type === 'message')
34 | {
35 | this.message.show(item.data);
36 | }
37 | else
38 | {
39 | for (var key in item.data)
40 | {
41 | var val = item.data[key];
42 | var $el = $K.dom(key);
43 |
44 | if (item.type === 'value')
45 | {
46 | val = (val === null || val === false) ? 0 : val;
47 | val = (val === true) ? 1 : val;
48 |
49 | $el.val(val);
50 | }
51 | else if (item.type === 'html')
52 | {
53 | val = (val === null || val === false) ? '' : val;
54 |
55 | $el.html(this._stripslashes(val));
56 | }
57 | else if (item.type === 'addClass')
58 | {
59 | $el.addClass(val);
60 | }
61 | else if (item.type === 'removeClass')
62 | {
63 | $el.removeClass(val);
64 | }
65 | else if (item.type === 'show')
66 | {
67 | $el.removeClass('is-hidden');
68 | }
69 | else if (item.type === 'hide')
70 | {
71 | $el.addClass('is-hidden');
72 | }
73 | else if (item.type === 'animate')
74 | {
75 | this.animate.run($el, val);
76 | }
77 | }
78 | }
79 |
80 | return item;
81 | },
82 | _stripslashes: function(str)
83 | {
84 | return (str+'').replace(/\0/g, '0').replace(/\\([\\'"])/g, '$1');
85 | }
86 | });
--------------------------------------------------------------------------------
/kube/src/js/services/transition/transition.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'transition', {
2 | init: function(app)
3 | {
4 | this.transitionOpt = true;
5 | },
6 | run: function(element, params)
7 | {
8 | return new $K.TransitionPlay(params, element, this.transitionOpt);
9 |
10 | },
11 | remove: function(element)
12 | {
13 | this.$el = $K.dom(element);
14 |
15 | var classname = this.$el.attr('kube-transition-class');
16 | if (classname)
17 | {
18 | this.$el.removeClass(classname);
19 | this.$el.removeAttr('kube-transition-class');
20 | }
21 |
22 | var css = this.$el.attr('kube-transition-css');
23 | if (css)
24 | {
25 | var names = css.split(',');
26 | for (var i = 0; i < names.length; i++)
27 | {
28 | this.$el.css(names[i], '');
29 | }
30 |
31 | this.$el.removeAttr('kube-transition-css');
32 | }
33 |
34 | this.$el.off('transitionend webkitTransitionEnd');
35 | }
36 | });
37 |
38 |
39 | $K.TransitionPlay = function(params, element, transitionOpt)
40 | {
41 | this.$el = $K.dom(element);
42 | this.params = params;
43 |
44 | this._transition();
45 | };
46 |
47 | $K.TransitionPlay.prototype = {
48 | _transition: function()
49 | {
50 | if (this.params.classname)
51 | {
52 | this.$el.addClass(this.params.classname);
53 | this.$el.attr('kube-transition-class', this.params.classname);
54 | }
55 |
56 | if (this.params.css)
57 | {
58 | this.$el.css(this.params.css);
59 |
60 | var names = [];
61 | for (var key in this.params.css)
62 | {
63 | names.push(key);
64 | }
65 |
66 | this.$el.attr('kube-transition-css', names.join(','))
67 | }
68 |
69 | this._complete();
70 | },
71 | _complete: function()
72 | {
73 | this.$el.one('transitionend webkitTransitionEnd', function(e)
74 | {
75 | if (typeof this.params.callback === 'function') this.params.callback(this.$el);
76 |
77 | }.bind(this));
78 | }
79 | };
--------------------------------------------------------------------------------
/kube/src/js/services/utils/utils.js:
--------------------------------------------------------------------------------
1 | $K.add('service', 'utils', {
2 | init: function(app)
3 | {
4 | this.app = app;
5 | },
6 |
7 | // string
8 | parseOptsString: function(str)
9 | {
10 | var properties = str.replace('{', '').replace('}', '').trim().replace(/;$/, '').split(';');
11 | var obj = {};
12 | properties.forEach(function(property) {
13 | var tup = property.split(':');
14 | obj[tup[0].trim()] = tup[1].trim().replace(/'/g, '');
15 | });
16 |
17 | return obj;
18 | },
19 | ucfirst: function(str)
20 | {
21 | return str.charAt(0).toUpperCase() + str.slice(1);
22 | },
23 |
24 | // object
25 | checkProperty: function(obj)
26 | {
27 | var args = (arguments[1] && Array.isArray(arguments[1])) ? arguments[1] : [].slice.call(arguments, 1);
28 |
29 | for (var i = 0; i < args.length; i++)
30 | {
31 | if (!obj || (typeof obj[args[i]] === 'undefined'))
32 | {
33 | return false;
34 | }
35 |
36 | obj = obj[args[i]];
37 | }
38 |
39 | return obj;
40 | },
41 |
42 | // data
43 | extendData: function(data, elements)
44 | {
45 | if (typeof elements === 'object')
46 | {
47 | data = $K.extend({}, data, elements);
48 | }
49 | else if (typeof elements === 'string')
50 | {
51 | var $elms = $K.dom(elements);
52 | $elms.each(function(node)
53 | {
54 | var $node = $K.dom(node);
55 | if (node.tagName === 'FORM')
56 | {
57 | data = $K.extend({}, data, $node.serialize(true));
58 | }
59 | else
60 | {
61 | var name = ($node.attr('name')) ? $node.attr('name') : $node.attr('id');
62 | var val = $node.val();
63 | data[name] = (this._isNumber(val)) ? parseFloat(val) : this._getBooleanFromStr(val);
64 | }
65 | });
66 | }
67 |
68 | return data;
69 | },
70 | _isNumber: function(str)
71 | {
72 | return !isNaN(str) && !isNaN(parseFloat(str));
73 | },
74 | _getBooleanFromStr: function(str)
75 | {
76 | if (str === 'true') return true;
77 | else if (str === 'false') return false;
78 |
79 | return str;
80 | }
81 | });
--------------------------------------------------------------------------------
/kube/src/js/wrappers/intro.js:
--------------------------------------------------------------------------------
1 | /*
2 | Kube UI Framework
3 | Version 7.2.1
4 | Updated: November 10, 2018
5 |
6 | http://imperavi.com/kube/
7 |
8 | Copyright (c) 2009-2018, Imperavi LLC.
9 | License: MIT
10 | */
11 | (function() {
--------------------------------------------------------------------------------
/kube/src/js/wrappers/outro.js:
--------------------------------------------------------------------------------
1 |
2 | window.Kube = window.$K = $K;
3 | }());
--------------------------------------------------------------------------------
/kube/src/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/breakpoint";
2 | @import "mixins/flex";
3 | @import "mixins/layout";
4 | @import "mixins/button";
5 | @import "mixins/label";
6 | @import "mixins/utils";
--------------------------------------------------------------------------------
/kube/src/sass/_modules.scss:
--------------------------------------------------------------------------------
1 | @import "modules/reset";
2 | @import "modules/icons";
3 | @import "modules/typo";
4 | @import "modules/table";
5 | @import "modules/grid";
6 | @import "modules/label";
7 | @import "modules/button";
8 | @import "modules/form";
9 | @import "modules/breadcrumb";
10 | @import "modules/pager";
11 | @import "modules/alert";
12 | @import "modules/navbar";
13 |
14 | // energy
15 | @import "modules/animation";
16 | @import "modules/message";
17 | @import "modules/tabs";
18 | @import "modules/dropdown";
19 | @import "modules/modal";
20 | @import "modules/progress";
21 | @import "modules/offcanvas";
22 |
23 | // utils
24 | @import "modules/helpers";
25 | @import "modules/space";
26 | @import "modules/print";
--------------------------------------------------------------------------------
/kube/src/sass/addons/autocomplete.scss:
--------------------------------------------------------------------------------
1 | // AUTOCOMPLETE
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | // VARS
7 | $autocomplete-background-color: #fff !default;
8 | $autocomplete-box-shadow: $shadow-1 !default;
9 | $autocomplete-max-height: 200px !default;
10 | $autocomplete-border-radius: $border-radius !default;
11 | $autocomplete-border-width: 0 !default;
12 | $autocomplete-border-style: solid !default;
13 | $autocomplete-border-color: transparent !default;
14 |
15 | // SCSS
16 | .autocomplete {
17 | position: absolute;
18 | background-color: $autocomplete-background-color;
19 | box-shadow: $autocomplete-box-shadow;
20 | padding: 0;
21 | max-height: $autocomplete-max-height;
22 | border-bottom-left-radius: $autocomplete-border-radius;
23 | border-bottom-right-radius: $autocomplete-border-radius;
24 | border: $autocomplete-border-width $autocomplete-border-style $autocomplete-border-color;
25 | overflow: auto;
26 |
27 | & a {
28 | font-size: $font-size-ui;
29 | display: block;
30 | padding: $space-8;
31 | text-decoration: none;
32 | color: $color-text;
33 | border-bottom: 1px solid rgba($color-black, .05);
34 | &:last-child {
35 | border-bottom-color: transparent;
36 | }
37 | &:hover,
38 | &.is-active {
39 | background-color: rgba($color-black, .04);
40 | color: $color-black;
41 | text-decoration: underline;
42 | }
43 | }
44 | }
45 | .autocomplete-labels {
46 | & .label {
47 | margin-right: $space-4;
48 | margin-bottom: $space-4;
49 | }
50 | }
--------------------------------------------------------------------------------
/kube/src/sass/addons/combobox.scss:
--------------------------------------------------------------------------------
1 | // COMBOBOX
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | .combobox {
7 | position: relative;
8 |
9 | & input {
10 | padding-right: 36px;
11 | }
12 | & select {
13 | position: absolute;
14 | top: 0;
15 | right: 0;
16 | width: 32px;
17 | height: 100%;
18 | z-index: 2;
19 | opacity: 0;
20 | cursor: pointer;
21 | }
22 | & .combobox-caret {
23 | position: absolute;
24 | z-index: 1;
25 | top: 0;
26 | right: 0;
27 | width: 32px;
28 | height: 100%;
29 | background-image: url('data:image/svg+xml;utf8,');
30 | background-repeat: no-repeat;
31 | background-position-y: 50%;
32 | background-position-x: 50%;
33 | cursor: pointer;
34 | }
35 | }
--------------------------------------------------------------------------------
/kube/src/sass/addons/editable.scss:
--------------------------------------------------------------------------------
1 | // EDITABLE
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | .editable[placeholder]:empty:before {
7 | content: attr(placeholder);
8 | color: rgba($color-black, .4);
9 | font-weight: normal;
10 | }
11 | .editable[placeholder]:empty:focus:before {
12 | content: "";
13 | }
--------------------------------------------------------------------------------
/kube/src/sass/addons/number.scss:
--------------------------------------------------------------------------------
1 | // NUMBER
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | .input-number {
7 | position: relative;
8 | display: flex;
9 |
10 | & input[type=number]::-webkit-inner-spin-button,
11 | & input[type=number]::-webkit-outer-spin-button {
12 | -webkit-appearance: none;
13 | margin: 0;
14 | }
15 |
16 | & input[type=number] {
17 | -moz-appearance: textfield;
18 | width: auto;
19 | text-align: center;
20 | }
21 |
22 | & input {
23 | border-radius: 0;
24 | border-left: 1px solid transparent;
25 | border-right: 1px solid transparent;
26 | }
27 |
28 | & .is-up,
29 | & .is-down {
30 | width: 32px;
31 | display: inline-flex;
32 | align-items: center;
33 | justify-content: center;
34 | vertical-align: middle;
35 | cursor: pointer;
36 | color: $color-text;
37 | font-size: $font-size-small;
38 | text-decoration: none;
39 | text-align: center;
40 | -webkit-user-select: none;
41 | user-select: none;
42 | border: $input-default-border-width $input-default-border-style $input-default-border-color;
43 |
44 |
45 | &:hover {
46 | background-color: rgba($color-black, .04);
47 | }
48 | }
49 | & .is-up {
50 | border-left-color: transparent;
51 | border-top-right-radius: $border-radius;
52 | border-bottom-right-radius: $border-radius;
53 | margin-left: -1px;
54 | &:hover {
55 | border-radius: $border-radius;
56 | }
57 | }
58 | & .is-down {
59 | border-right-color: transparent;
60 | border-top-left-radius: $border-radius;
61 | border-bottom-left-radius: $border-radius;
62 | margin-right: -1px;
63 | &:hover {
64 | border-radius: $border-radius;
65 | }
66 | }
67 |
68 | & .input-number-input {
69 | & input {
70 | border-left: $input-default-border-width $input-default-border-style $input-default-border-color;
71 | border-right: 1px solid transparent;
72 | }
73 | }
74 | & input,
75 | & .input-number-input input {
76 | &:hover {
77 | border: $input-hover-border-width $input-hover-border-style $input-hover-border-color;
78 | }
79 | &:hover {
80 | border: $input-hover-border-width $input-hover-border-style $input-hover-border-color;
81 | }
82 | &:focus {
83 | border: $input-focus-border-width $input-focus-border-style $input-focus-border-color;
84 | }
85 | &.is-error {
86 | border: $input-error-border-width $input-error-border-style $input-error-border-color;
87 | &:focus {
88 | border-color: $input-error-focus-border-color;
89 | }
90 | }
91 | &.is-success {
92 | border: $input-success-border-width $input-success-border-style $input-success-border-color;
93 | &:focus {
94 | border-color: $input-success-focus-border-color;
95 | }
96 | }
97 | &.is-warning {
98 | border: $input-warning-border-width $input-warning-border-style $input-warning-border-color;
99 | &:focus {
100 | border-color: $input-warning-focus-border-color;
101 | }
102 | }
103 | }
104 | & .input-number-nav {
105 | position: relative;
106 | width: 24px;
107 | margin-left: -1px;
108 |
109 | & .is-up,
110 | & .is-down {
111 | margin: 0;
112 | position: absolute;
113 | cursor: pointer;
114 | width: 24px;
115 | height: 50%;
116 | line-height: 20px;
117 | border: none;
118 | }
119 | & .is-up {
120 | border-top-left-radius: 0;
121 | border-bottom-right-radius: 0;
122 | top: 0;
123 | right: 0;
124 | border-top: $input-default-border-width $input-default-border-style $input-default-border-color;
125 | border-right: $input-default-border-width $input-default-border-style $input-default-border-color;
126 | }
127 | & .is-down {
128 | border-top-right-radius: 0;
129 | border-bottom-right-radius: $border-radius;
130 | border-right: $input-default-border-width $input-default-border-style $input-default-border-color;
131 | border-bottom: $input-default-border-width $input-default-border-style $input-default-border-color;
132 | right: 0;
133 | bottom: 0;
134 | }
135 | }
136 |
137 | }
138 |
--------------------------------------------------------------------------------
/kube/src/sass/addons/slider.scss:
--------------------------------------------------------------------------------
1 | // SLIDER
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | // VARS
7 | $slider-height: 4px !default;
8 | $slider-background-color: rgba($color-black, .1) !default;
9 | $slider-box-shadow: 0 1px 2px rgba($color-black, .2) inset !default;
10 | $slider-border-radius: $border-radius !default;
11 | $slider-border-width: 0 !default;
12 | $slider-border-style: solid !default;
13 | $slider-border-color: transparent !default;
14 |
15 | // fill
16 | $slider-fill-background-color: rgba($color-focus, .7) !default;
17 |
18 | // handle
19 | $slider-handle-width: 14px !default;
20 | $slider-handle-height: 14px !default;
21 | $slider-handle-background-color: #fff !default;
22 | $slider-handle-box-shadow: 0 1px 3px rgba($color-black, 1) !default;
23 | $slider-handle-border-width: 0 !default;
24 | $slider-handle-border-style: solid !default;
25 | $slider-handle-border-color: transparent !default;
26 | $slider-handle-border-radius: 50% !default;
27 |
28 | // ticks
29 | $slider-ticks-height: 6px !default;
30 | $slider-ticks-color: rgba($color-black, .3) !default;
31 | $slider-ticks-font-size: 10px !default;
32 | $slider-ticks-text-color: rgba($color-black, .5) !default;
33 | $slider-ticks-line-height: 1.3 !default;
34 |
35 | // SCSS
36 | .slider {
37 | min-height: $slider-handle-height;
38 | &:disabled,
39 | &.is-disabled {
40 |
41 | opacity: .6;
42 |
43 | & .slider-track,
44 | & .slider-handle,
45 | & .slider-ticks {
46 | cursor: default;
47 | }
48 | & .slider-fill {
49 | background-color: rgba($color-black, .2);
50 | }
51 | }
52 | }
53 | .slider-track {
54 | cursor: pointer;
55 | position: relative;
56 | width: 100%;
57 | height: $slider-height;
58 | box-shadow: $slider-box-shadow;
59 | background-color: $slider-background-color;
60 | border: $slider-border-width $slider-border-style $slider-border-color;
61 | border-radius: $slider-border-radius;
62 | }
63 | .slider-fill {
64 | position: absolute;
65 | height: $slider-height;
66 | background-color: $slider-fill-background-color;
67 | border-radius: $slider-border-radius;
68 | box-shadow: $slider-box-shadow;
69 | }
70 | .slider-handle {
71 | cursor: pointer;
72 | position: absolute;
73 | z-index: 2;
74 | width: $slider-handle-width;
75 | height: $slider-handle-height;
76 | margin-top: -$slider-handle-height/2 + $slider-height/2;
77 | background-color: $slider-handle-background-color;
78 | box-shadow: $slider-handle-box-shadow;
79 | border: $slider-handle-border-width $slider-handle-border-style $slider-handle-border-color;
80 | border-radius: $slider-handle-border-radius;
81 | }
82 | .slider-ticks {
83 | cursor: pointer;
84 | position: relative;
85 | z-index: 1;
86 | min-height: $slider-ticks-height + 4;
87 | margin-bottom: .7rem;
88 |
89 | & span {
90 | position: absolute;
91 | border-left: 1px solid $slider-ticks-color;
92 | height: $slider-ticks-height;
93 | margin-top: 3px;
94 | padding-top: $slider-ticks-height;
95 | font-size: $slider-ticks-font-size;
96 | text-align: center;
97 | line-height: $slider-ticks-line-height;
98 | color: $slider-ticks-text-color;
99 | }
100 | }
--------------------------------------------------------------------------------
/kube/src/sass/addons/upload.scss:
--------------------------------------------------------------------------------
1 | // UPLOAD
2 | // ---------------------------------------------------------------------------
3 | @import '../vars';
4 | @import '../mixins';
5 |
6 | .upload {
7 | @include flex;
8 | @include flex-items-middle;
9 | @include flex-items-center;
10 | @include flex-items-column;
11 |
12 | border: 2px dashed rgba($color-focus, .3);
13 | border-radius: $border-radius;
14 | height: 120px;
15 | cursor: pointer;
16 |
17 | & .upload-placeholder {
18 | color: rgba($color-focus, .5);
19 | font-style: italic;
20 | font-size: $font-size-small;
21 | }
22 | &:hover,
23 | &.is-upload-hover {
24 | border-color: rgba($color-focus, .35);
25 | background-color: rgba($color-focus, .05);
26 | }
27 | &.is-upload-error {
28 | border-color: rgba($color-error, .35);
29 | background-color: rgba($color-error, .05);
30 | }
31 | }
32 | .upload-target {
33 |
34 | background-color: rgba($color-focus, .02);
35 | border: 1px solid rgba($color-focus, .1);
36 | padding: $space-4 $space-8;
37 |
38 | &:empty {
39 | padding: 0;
40 | border: none;
41 | }
42 |
43 | & .upload-item {
44 | @include flex;
45 | font-size: $font-size-small;
46 | border-bottom: 1px solid rgba($color-black, .05);
47 | padding-top: $space-4;
48 | padding-bottom: $space-4;
49 |
50 | & .close {
51 | margin-top: $space-2;
52 | margin-right: $space-4;
53 | }
54 | & em {
55 | font-style: normal;
56 | color: rgba($color-black, .5);
57 | font-size: $font-size-smaller;
58 | margin-left: $space-4;
59 | }
60 | &:last-child {
61 | border-bottom-color: transparent;
62 | }
63 | }
64 | }
65 |
66 | .upload-box {
67 | @include clearfix;
68 |
69 | margin-right: -$space-16;
70 | margin-bottom: -$space-16;
71 |
72 | & .upload-item {
73 | float: left;
74 | width: 120px;
75 | height: 120px;
76 | border: 2px dashed rgba($color-focus, .3);
77 | background-color: #fff;
78 | cursor: pointer;
79 | border-radius: 6px;
80 | position: relative;
81 | font-size: 0;
82 | line-height: 0;
83 | margin-right: $space-16;
84 | margin-bottom: $space-16;
85 |
86 | &.is-uploaded {
87 | border-style: solid;
88 | border-color: rgba($color-focus, .35);
89 | }
90 | & img {
91 | position: relative;
92 | z-index: 2;
93 | object-fit: cover;
94 | height: 100%;
95 | width: 100%;
96 | border-radius: 6px;
97 | }
98 | & .close {
99 | position: absolute;
100 | z-index: 3;
101 | top: -$space-4;
102 | right: -$space-8;
103 | background-color: $color-error;
104 | color: #fff;
105 | opacity: 1;
106 | &:hover {
107 | background-color: $color-black;
108 | }
109 | }
110 | &:after {
111 | position: absolute;
112 | z-index: 1;
113 | top: 50%;
114 | left: 50%;
115 | margin-left: -12px;
116 | margin-top: -20px;
117 | content: '+';
118 | font-size: 40px;
119 | line-height: 1;
120 | font-weight: normal;
121 | color: rgba($color-focus, .5);
122 | }
123 | &:hover,
124 | &.is-upload-hover {
125 | border-color: rgba($color-focus, .35);
126 | background-color: rgba($color-focus, .05);
127 | }
128 | &.is-upload-error {
129 | border-color: rgba($color-error, .35);
130 | background-color: rgba($color-error, .05);
131 | }
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/kube/src/sass/kube.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Kube UI Framework
3 | Version 7.2.1
4 | Updated: November 10, 2018
5 |
6 | http://imperavi.com/kube/
7 |
8 | Copyright (c) 2009-2018, Imperavi LLC.
9 | License: MIT
10 | */
11 | @import "vars";
12 | @import "mixins";
13 | @import "modules";
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_breakpoint.scss:
--------------------------------------------------------------------------------
1 | @mixin breakpoint($min: 0, $max: 0) {
2 | $query: "all" !default;
3 | @if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; }
4 | @else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; }
5 | @else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; }
6 | @media #{$query} { @content; }
7 | }
8 |
9 | @mixin for-mobile() {
10 | @media only screen and (max-width: $sm - 1) { @content; }
11 | }
12 | @mixin not-mobile() {
13 | @media only screen and (min-width: $sm) { @content; }
14 | }
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_button.scss:
--------------------------------------------------------------------------------
1 | @mixin make-button($color-back, $color-text) {
2 | color: $color-text;
3 | background-color: $color-back;
4 |
5 | &:hover {
6 | color: $color-text;
7 | background-color: lighten($color-back, 10%);
8 | }
9 | &:disabled,
10 | &.is-disabled {
11 | color: #fff;
12 | background-color: rgba($color-black, .5);
13 | }
14 | &.is-secondary {
15 | background: none;
16 | border: $button-secondary-border-width solid $color-back;
17 | color: $color-back;
18 | &:hover {
19 | color: rgba($color-text, .95);
20 | background-color: $color-back;
21 | border-color: $color-back;
22 | }
23 | &:disabled,
24 | &.is-disabled {
25 | color: rgba($color-black, .5);
26 | border-color: rgba($color-black, .3);
27 | &:hover {
28 | background-color: transparent;
29 | }
30 | }
31 | &.is-loading:hover:before {
32 | border-color: rgba($color-text, .25);
33 | border-bottom-color: $color-text;
34 | }
35 | }
36 | &.is-tertiary {
37 | background: none;
38 | color: $color-back;
39 | &:hover {
40 | color: $color-back;
41 | }
42 | &:disabled,
43 | &.is-disabled {
44 | text-decoration: none;
45 | color: rgba($color-black, .5);
46 | }
47 | }
48 | &.is-secondary,
49 | &.is-tertiary {
50 | &.is-loading:before {
51 | border-color: rgba($color-back, 0.25);
52 | border-bottom-color: $color-back;
53 | }
54 | }
55 | }
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_flex.scss:
--------------------------------------------------------------------------------
1 | // display
2 | @mixin flex {
3 | display: flex;
4 | }
5 |
6 | // basis
7 | @mixin flex-basis($width) {
8 | flex-basis: $width;
9 | }
10 |
11 | // items wrap
12 | @mixin flex-items-wrap {
13 | flex-wrap: wrap;
14 | }
15 |
16 | // items nowrap
17 | @mixin flex-items-nowrap {
18 | flex-wrap: nowrap;
19 | }
20 |
21 | // items row
22 | @mixin flex-items-row {
23 | flex-direction: row;
24 | }
25 |
26 | // items columns
27 | @mixin flex-items-column {
28 | flex-direction: column;
29 | }
30 |
31 | // items left
32 | @mixin flex-items-left {
33 | justify-content: flex-start;
34 | }
35 |
36 | // items right
37 | @mixin flex-items-right {
38 | justify-content: flex-end;
39 | }
40 |
41 | // items center
42 | @mixin flex-items-center {
43 | justify-content: center;
44 | }
45 |
46 | // items between
47 | @mixin flex-items-space-between {
48 | justify-content: space-between;
49 | }
50 |
51 | // items around
52 | @mixin flex-items-space-around {
53 | justify-content: space-around;
54 | }
55 |
56 | // items vertical top
57 | @mixin flex-items-baseline {
58 | align-items: baseline;
59 | }
60 | @mixin flex-items-top {
61 | align-items: flex-start;
62 | }
63 |
64 | // items vertical middle
65 | @mixin flex-items-middle {
66 | align-items: center;
67 | }
68 |
69 | // items vertical bottom
70 | @mixin flex-items-bottom {
71 | align-items: flex-end;
72 | }
73 |
74 | // item grow
75 | @mixin flex-item-grow($grow: 0) {
76 | flex-grow: $grow;
77 | }
78 |
79 |
80 | // item auto
81 | @mixin flex-item-auto {
82 | flex: auto;
83 | }
84 |
85 | // item one
86 | @mixin flex-item-one {
87 | flex: 1;
88 | }
89 |
90 | // item shrink
91 | @mixin flex-item-shrink($num: 0) {
92 | flex-shrink: $num;
93 | }
94 |
95 | // item width
96 | @mixin flex-item-width($width) {
97 | flex: 0 0 $width;
98 | max-width: $width;
99 |
100 | @include for-mobile() {
101 | flex: 0;
102 | max-width: 100%;
103 | }
104 | }
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_label.scss:
--------------------------------------------------------------------------------
1 | @mixin make-label($color) {
2 | background-color: rgba($color, .07);
3 | color: $color;
4 | &.is-secondary {
5 | background-color: transparent;
6 | color: $color;
7 | border-color: rgba($color, .3);
8 | }
9 | &.is-tertiary {
10 | background-color: transparent;
11 | color: $color;
12 | }
13 | & .close:hover {
14 | background-color: $color;
15 | }
16 | }
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_layout.scss:
--------------------------------------------------------------------------------
1 | // container
2 | @mixin make-container {
3 | display: flex;
4 | flex: 1;
5 |
6 | @include for-mobile {
7 | flex-direction: column;
8 | }
9 | }
10 | @mixin make-container-row {
11 | display: flex;
12 | flex: 1;
13 | }
14 | @mixin make-container-column {
15 | display: flex;
16 | flex-direction: column;
17 | flex: 1;
18 | }
19 |
20 | // middle
21 | @mixin make-items-middle {
22 | @include flex-items-middle;
23 | @include for-mobile {
24 | @include flex-items-left;
25 | align-items: flex-start;
26 | }
27 | }
28 |
29 | // content
30 | @mixin make-content {
31 | flex: 1;
32 | min-width: 0;
33 | }
34 |
35 | // sidebar
36 | @mixin make-sidebar($width) {
37 | @include flex-item-width($width);
38 | }
39 |
40 | // offset
41 | @mixin make-gap-offset($width) {
42 | margin-left: calc($width + #{$grid-gap}) !important;
43 | }
--------------------------------------------------------------------------------
/kube/src/sass/mixins/_utils.scss:
--------------------------------------------------------------------------------
1 | // Clearfix
2 | @mixin clearfix() {
3 | &:after {
4 | content: '';
5 | display: table;
6 | clear: both;
7 | }
8 | }
9 |
10 | // Cropline
11 | @mixin cropline($line-height: 1.5, $lheight: $letter-height, $ctop: $crop-top, $cbottom: $crop-bottom) {
12 | &::before,
13 | &::after {
14 | content: '';
15 | display: block;
16 | height: 0;
17 | width: 0;
18 | }
19 | &::before {
20 | margin-top: calc((#{$lheight} - #{$line-height}) * #{$ctop});
21 | }
22 | &::after {
23 | margin-bottom: calc((#{$lheight} - #{$line-height}) * #{$cbottom});
24 | }
25 | }
26 |
27 | // Transition
28 | @mixin transition($transition: all linear .2s) {
29 | -moz-transition: $transition;
30 | transition: $transition;
31 | }
32 |
33 | // Transform
34 | @mixin transform($transforms) {
35 | -moz-transform: $transforms;
36 | -ms-transform: $transforms;
37 | -webkit-transform: $transforms;
38 | transform: $transforms;
39 | }
40 |
41 | // Blur
42 | @mixin blur($radius) {
43 | -webkit-filter: blur($radius);
44 | -moz-filter: blur($radius);
45 | -ms-filter: blur($radius);
46 | filter: blur($radius);
47 | }
48 |
49 | // Striped
50 | @mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) {
51 | background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
52 | background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
53 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
54 | }
55 |
56 | // Animation
57 | @mixin animation($animation) {
58 | -webkit-animation: $animation;
59 | -moz-animation: $animation;
60 | animation: $animation;
61 | }
62 |
63 | // Retina Images
64 | @mixin retina-background-image($file, $type, $width: auto, $height: auto) {
65 |
66 | background-repeat: no-repeat;
67 | background-image: url($file + '.' + $type);
68 |
69 | @media
70 | only screen and (-webkit-min-device-pixel-ratio: 2),
71 | only screen and (min--moz-device-pixel-ratio: 2),
72 | only screen and (-o-min-device-pixel-ratio: 2/1),
73 | only screen and (min-device-pixel-ratio: 2),
74 | only screen and (min-resolution: 192dpi),
75 | only screen and (min-resolution: 2dppx) {
76 | background-image: url($file + '-2x.' + $type);
77 | background-size: $width $height;
78 | }
79 | }
80 |
81 | // Full Height Footer
82 | @mixin full-height-footer($color: #000) {
83 | box-shadow: 0px 500px 0px 500px $color;
84 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_alert.scss:
--------------------------------------------------------------------------------
1 | // ALERT
2 | // ---------------------------------------------------------------------------
3 |
4 | .alert {
5 | font-family: $alert-font-family;
6 | font-size: $alert-font-size;
7 | font-weight: $alert-font-weight;
8 | text-transform: $alert-text-transform;
9 | background: $alert-background;
10 | color: $alert-color-text;
11 | padding: $alert-padding;
12 | box-shadow: $alert-box-shadow;
13 | border: $alert-border-width $alert-border-style $alert-border-color;
14 | border-radius: $alert-border-radius;
15 |
16 | position: relative;
17 | margin-bottom: $space-16;
18 |
19 | & h1,
20 | & h2,
21 | & h3,
22 | & h4,
23 | & h5,
24 | & h6 {
25 | margin-bottom: $space-2;
26 | }
27 | & a {
28 | color: inherit;
29 | }
30 | & a:hover {
31 | @include transition;
32 | color: $alert-link-color-hover;
33 | }
34 | & .close {
35 | position: absolute;
36 | right: $space-8;
37 | top: $space-20;
38 | }
39 | & p {
40 | margin-top: 0;
41 | margin-bottom: 0;
42 | }
43 | }
44 | .alert.is-error {
45 | background: $alert-error-background;
46 | border-color: $alert-error-border-color;
47 | color: $alert-error-color-text;
48 | & a:hover {
49 | color: $alert-error-link-color-hover;
50 | }
51 | }
52 | .alert.is-success {
53 | background: $alert-success-background;
54 | border-color: $alert-success-border-color;
55 | color: $alert-success-color-text;
56 | & a:hover {
57 | color: $alert-success-link-color-hover;
58 | }
59 | }
60 | .alert.is-focus {
61 | background: $alert-focus-background;
62 | border-color: $alert-focus-border-color;
63 | color: $alert-focus-color-text;
64 | & a:hover {
65 | color: $alert-focus-link-color-hover;
66 | }
67 | }
68 | .alert.is-inverted {
69 | background: $alert-inverted-background;
70 | border-color: $alert-inverted-border-color;
71 | color: $alert-inverted-color-text;
72 | & a:hover {
73 | color: $alert-inverted-link-color-hover;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/kube/src/sass/modules/_animation.scss:
--------------------------------------------------------------------------------
1 | // ANIMATION
2 | // ---------------------------------------------------------------------------
3 |
4 | @keyframes slideUp {
5 | to { height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
6 | }
7 | @keyframes slideDown {
8 | from { height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
9 | }
10 | @keyframes fadeIn {
11 | from { opacity: 0; }
12 | to { opacity: 1; }
13 | }
14 | @keyframes fadeOut {
15 | from { opacity: 1; }
16 | to { opacity: 0; }
17 | }
18 | @keyframes flipIn {
19 | from { opacity: 0; transform: scaleY(0); }
20 | to { opacity: 1; transform: scaleY(1); }
21 | }
22 | @keyframes flipOut {
23 | from { opacity: 1; transform: scaleY(1); }
24 | to { opacity: 0; transform: scaleY(0); }
25 | }
26 | @keyframes zoomIn {
27 | from { opacity: 0; transform: scale3d(.3, .3, .3); }
28 | 50% { opacity: 1; }
29 | }
30 | @keyframes zoomOut {
31 | from { opacity: 1; }
32 | 50% { opacity: 0; transform: scale3d(.3, .3, .3); }
33 | to { opacity: 0; }
34 | }
35 | @keyframes slideInRight {
36 | from { transform: translate3d(100%, 0, 0); visibility: visible; }
37 | to { transform: translate3d(0, 0, 0); }
38 | }
39 | @keyframes slideInLeft {
40 | from { transform: translate3d(-100%, 0, 0); visibility: visible; }
41 | to { transform: translate3d(0, 0, 0); }
42 | }
43 | @keyframes slideInDown {
44 | from { transform: translate3d(0, -100%, 0); visibility: visible; }
45 | to { transform: translate3d(0, 0, 0); }
46 | }
47 | @keyframes slideOutLeft {
48 | from { transform: translate3d(0, 0, 0); }
49 | to { visibility: hidden; transform: translate3d(-100%, 0, 0); }
50 | }
51 | @keyframes slideOutRight {
52 | from { transform: translate3d(0, 0, 0); }
53 | to { visibility: hidden; transform: translate3d(100%, 0, 0); }
54 | }
55 | @keyframes slideOutUp {
56 | from { transform: translate3d(0, 0, 0); }
57 | to { visibility: hidden; transform: translate3d(0, -100%, 0); }
58 | }
59 | @keyframes rotate {
60 | from { transform: rotate(0deg); }
61 | to { transform: rotate(360deg); }
62 | }
63 | @keyframes pulse {
64 | from { transform: scale3d(1, 1, 1); }
65 | 50% { transform: scale3d(1.1, 1.1, 1.1); }
66 | to { transform: scale3d(1, 1, 1); }
67 | }
68 | @keyframes shake {
69 | 15% { transform: translateX(0.5rem); }
70 | 30% { transform: translateX(-0.4rem); }
71 | 45% { transform: translateX(0.3rem); }
72 | 60% { transform: translateX(-0.2rem); }
73 | 75% { transform: translateX(0.1rem); }
74 | 90% { transform: translateX(0); }
75 | 90% { transform: translateX(0); }
76 | }
77 |
78 | .kube-fadeIn { opacity: 0; animation: fadeIn .5s ease-in-out; }
79 | .kube-fadeOut { opacity: 1; animation: fadeOut .5s ease-in-out; }
80 |
81 | .kube-zoomIn { animation: zoomIn .5s ease-in; }
82 | .kube-zoomOut { animation: zoomOut .5s ease-in; }
83 |
84 | .kube-slideInRight { animation: slideInRight .5s ease; }
85 | .kube-slideInLeft { animation: slideInLeft .5s ease; }
86 | .kube-slideInDown { animation: slideInDown .5s ease; }
87 | .kube-slideOutLeft { animation: slideOutLeft .5s ease; }
88 | .kube-slideOutRight { animation: slideOutRight .5s ease; }
89 | .kube-slideOutUp { animation: slideOutUp .5s ease; }
90 |
91 | .kube-slideUp { overflow: hidden; animation: slideUp .3s ease-out; }
92 | .kube-slideDown { overflow: hidden; animation: slideDown .4s ease-in-out; }
93 |
94 | .kube-flipIn { animation: flipIn .5s cubic-bezier(0.5, -0.5, 0.5, 1.5) }
95 | .kube-flipOut { animation: flipOut .5s cubic-bezier(0.5, -0.5, 0.5, 1.5) }
96 |
97 | .kube-rotate { animation: rotate .5s ease-in-out; }
98 | .kube-pulse { animation: pulse .5s ease-out 2; }
99 | .kube-shake { animation: shake .5s ease-in-out; }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | // BREADCRUMB
2 | // ---------------------------------------------------------------------------
3 |
4 | .breadcrumb {
5 |
6 | @include flex;
7 | @include flex-items-middle;
8 |
9 | font-size: $breadcrumb-font-size;
10 | font-weight: $breadcrumb-font-weight;
11 | text-transform: $breadcrumb-text-transform;
12 |
13 | & a,
14 | & span {
15 | font-style: normal;
16 | padding-right: $space-8;
17 | white-space: nowrap;
18 | color: $breadcrumb-color-text;
19 | text-decoration: none;
20 | }
21 | & a:hover {
22 | @include transition;
23 | color: $color-link;
24 | text-decoration: underline;
25 | }
26 | & span:after,
27 | & a:after {
28 | display: inline-block;
29 | content: $breadcrumb-separator-content;
30 | color: $breadcrumb-separator-color-text;
31 | padding-left: $space-8;
32 | }
33 | & span:last-child:after,
34 | & a:last-child:after {
35 | display: none;
36 | }
37 | & span,
38 | & span:last-child {
39 | color: $breadcrumb-active-color-text;
40 | text-decoration: none;
41 | }
42 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_dropdown.scss:
--------------------------------------------------------------------------------
1 | // DROPDOWN
2 | // ---------------------------------------------------------------------------
3 |
4 | .dropdown {
5 | position: absolute;
6 | z-index: $z-over-control;
7 |
8 | background: $dropdown-background;
9 | box-shadow: $dropdown-box-shadow;
10 | border-radius: $dropdown-border-radius;
11 | width: $dropdown-width;
12 | font-size: $dropdown-font-size;
13 | font-weight: $dropdown-font-weight;
14 | border: $dropdown-border-width $dropdown-border-style $dropdown-border-color;
15 | padding: $dropdown-padding;
16 |
17 | & span,
18 | & a {
19 | display: block;
20 | text-decoration: none;
21 | padding: $space-8 $space-16;
22 | white-space: nowrap;
23 | }
24 | & a {
25 | color: $dropdown-item-color-text;
26 | background: $dropdown-item-background;
27 | }
28 | & a:hover {
29 | text-decoration: underline;
30 | color: $dropdown-item-hover-color-text;
31 | background: $dropdown-item-hover-background;
32 | }
33 | & a.is-separator {
34 | padding-bottom: $space-8;
35 | border-bottom: $dropdown-separator-border-bottom;
36 | }
37 | & a:first-child,
38 | & span:first-child {
39 | border-top-left-radius: $dropdown-border-radius;
40 | border-top-right-radius: $dropdown-border-radius;
41 | }
42 | & a.is-active,
43 | & span {
44 | &,
45 | &:hover {
46 | text-decoration: none;
47 | cursor: text;
48 | color: $dropdown-item-active-color-text;
49 | background: $dropdown-item-active-background;
50 | }
51 | }
52 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_grid.scss:
--------------------------------------------------------------------------------
1 | // GRID
2 | // ---------------------------------------------------------------------------
3 |
4 | .is-row {
5 | display: flex;
6 | flex-direction: row;
7 | flex-wrap: wrap;
8 |
9 | margin-left: -$grid-gap;
10 |
11 | &.is-gapless,
12 | &.is-gapless > .is-row {
13 | margin-left: 0;
14 | margin-top: 0;
15 | }
16 | & > .is-col {
17 | flex: 1;
18 | margin-left: $grid-gap;
19 |
20 | &.is-10 { min-width: calc(10% - #{$grid-gap}); }
21 | &.is-20 { min-width: calc(20% - #{$grid-gap}); }
22 | &.is-25 { min-width: calc(25% - #{$grid-gap}); }
23 | &.is-30 { min-width: calc(30% - #{$grid-gap}); }
24 | &.is-33,
25 | &.is-34 { min-width: calc(33.3333% - #{$grid-gap}); }
26 | &.is-35 { min-width: calc(35% - #{$grid-gap}); }
27 | &.is-40 { min-width: calc(40% - #{$grid-gap}); }
28 | &.is-50 { min-width: calc(50% - #{$grid-gap}); }
29 | &.is-60 { min-width: calc(60% - #{$grid-gap}); }
30 | &.is-65 { min-width: calc(65% - #{$grid-gap}); }
31 | &.is-66,
32 | &.is-67 { min-width: calc(66.6666% - #{$grid-gap}); }
33 | &.is-70 { min-width: calc(70% - #{$grid-gap}); }
34 | &.is-75 { min-width: calc(75% - #{$grid-gap}); }
35 | &.is-80 { min-width: calc(80% - #{$grid-gap}); }
36 | &.is-90 { min-width: calc(90% - #{$grid-gap}); }
37 | }
38 |
39 | &.is-gapless > .is-col {
40 | margin-left: 0;
41 | }
42 | }
43 |
44 | // Offset
45 | [class^='is-offset-'],
46 | [class*=' is-offset-'] {
47 | @include for-mobile() {
48 | margin-left: 0;
49 | }
50 | }
51 |
52 | @include for-mobile {
53 | .is-row {
54 | flex-direction: column;
55 | flex-wrap: nowrap;
56 | margin-left: 0;
57 | margin-top: 0;
58 |
59 | & + .is-row {
60 | margin-top: 0;
61 | }
62 | & > .is-col {
63 | flex: 0 0 100%;
64 | width: 100% !important;
65 | max-width: 100% !important;
66 | margin-left: 0;
67 | }
68 | }
69 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_icons.scss:
--------------------------------------------------------------------------------
1 | // ICONS
2 | // ---------------------------------------------------------------------------
3 |
4 | @font-face {
5 | font-family: 'Kube';
6 | src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsMn2SAAAAF4AAADeGhlYWQMP9EUAAAE8AAAADZoaGVhB8IDzQAABSgAAAAkaG10eCYABd4AAAVMAAAAMGxvY2EFWASuAAAFfAAAABptYXhwABcAmwAABZgAAAAgbmFtZfMJxocAAAW4AAABYnBvc3QAAwAAAAAHHAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAKAAAAAAQAA8AADwAUACQANABEAFYAaAB4AIgAmAAAEyIGFREUFjMhMjY1ETQmIwUhESEREzgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjATIWHQEUBiMiJj0BNDYzOAExITIWHQEUBiMiJj0BNDYzOAExATgBMSIGFRQWMzI2NTQmIzM4ATEiBhUUFjMyNjU0JiMzOAExIgYVFBYzMjY1NCYjwFBwcFACgFBwcFD9IQM+/MKrHioqHh4qKh70HioqHh4qKh70HisrHh0rKh7+MBQdHRQUHBwUAbgUHBwUFB0dFP4wHioqHh4qKh70HioqHh4qKh70HisrHh0rKh4DYHBQ/iBQcHBQAeBQcF/9XwKh/n8qHh4qKh4eKioeHioqHh4qKh4eKioeHioCQBwVjhUcHBWOFRwcFY4VHBwVjhUc/rAqHh4qKh4eKioeHioqHh4qKh4eKioeHioAAAABAQAAwAMAAcAACwAAAQcXBycHJzcnNxc3AwDMAjMDAzMCzDTMzAGVqAIrAgIrAqgrqKgAAQGAAEACgAJAAAsAACUnByc3JzcXNxcHFwJVqAIrAgIrAqgrqKhAzAIzAwMzAsw0zMwAAAEBgABAAoACQAALAAABFzcXBxcHJwcnNycBq6gCKwICKwKoK6ioAkDMAjMDAzMCzDTMzAABAQAAwAMAAcAACwAAJTcnNxc3FwcXBycHAQDMAjMDAzMCzDTMzOuoAisCAisCqCuoqAAAAgAP/+UD1AOqAAQACAAAEwEHATcFAScBSwOJPPx3PAOJ/Hc8A4kDqvx3PAOJPDz8dzwDiQAAAAADAIAAgAOAAwAAAwAHAAsAADc1IRUBIRUhESEVIYADAP0AAwD9AAMA/QCAgIABgIABgIAAAgBPAA8DsgNxABgALQAAJQcBDgEjIi4CNTQ+AjMyHgIVFAYHAQEiDgIVFB4CMzI+AjU0LgIjA7JY/t4lWTBBc1YxMVZzQUFzVTIcGQEi/dgxVkAlJUBWMTFWQCUlQFYxZ1gBIRkcMlVzQUFzVjExVnNBMFkm/uACuyVAVjExVkAlJUBWMTFWQCUAAAABAAAAAQAABhlWm18PPPUACwQAAAAAANSQRjkAAAAA1JBGOQAA/+UEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAEABAABgAQAAYAEAAEABAAADwQAAIAEAABPAAAAAAAKABQAHgDYAPIBDAEmAUABXAF2AbwAAAABAAAADACZAAoAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABAAAAAEAAAAAAAIABwBFAAEAAAAAAAMABAAtAAEAAAAAAAQABABaAAEAAAAAAAUACwAMAAEAAAAAAAYABAA5AAEAAAAAAAoAGgBmAAMAAQQJAAEACAAEAAMAAQQJAAIADgBMAAMAAQQJAAMACAAxAAMAAQQJAAQACABeAAMAAQQJAAUAFgAXAAMAAQQJAAYACAA9AAMAAQQJAAoANACAS3ViZQBLAHUAYgBlVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwS3ViZQBLAHUAYgBlS3ViZQBLAHUAYgBlUmVndWxhcgBSAGUAZwB1AGwAYQByS3ViZQBLAHUAYgBlRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 |
11 | [class^="icon-kube-"], [class*=" icon-kube-"], .close, .caret {
12 | /* use !important to prevent issues with browser extensions that change fonts */
13 | font-family: 'Kube' !important;
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | .icon-kube-calendar:before {
27 | content: "\e900";
28 | }
29 | .caret.is-down:before,
30 | .icon-kube-caret-down:before {
31 | content: "\e901";
32 | }
33 | .caret.is-left:before,
34 | .icon-kube-caret-left:before {
35 | content: "\e902";
36 | }
37 | .caret.is-right:before,
38 | .icon-kube-caret-right:before {
39 | content: "\e903";
40 | }
41 | .caret.is-up:before,
42 | .icon-kube-caret-up:before {
43 | content: "\e904";
44 | }
45 | .close:before,
46 | .icon-kube-close:before {
47 | content: "\e905";
48 | }
49 | .icon-kube-menu:before {
50 | content: "\e906";
51 | }
52 | .icon-kube-search:before {
53 | content: "\e907";
54 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_label.scss:
--------------------------------------------------------------------------------
1 | // LABEL
2 | // ---------------------------------------------------------------------------
3 |
4 | .label {
5 | display: inline-block;
6 | vertical-align: baseline;
7 | text-decoration: none;
8 |
9 | font-size: $label-font-size;
10 | font-weight: $label-font-weight;
11 | letter-spacing: $label-letter-spacing;
12 | text-transform: $label-text-transform;
13 | line-height: $label-line-height;
14 | background: $label-background;
15 | color: $label-color-text;
16 | padding: $label-padding;
17 | border: $label-border-width $label-border-style $label-border-color;
18 | border-radius: $label-border-radius;
19 |
20 | & a {
21 | color: inherit;
22 | text-decoration: none;
23 | &:hover {
24 | color: inherit;
25 | text-decoration: underline;
26 | }
27 | }
28 | & .close {
29 | margin-right: -3px;
30 | }
31 | }
32 | a.label {
33 | color: $label-color-text;
34 |
35 | &:hover {
36 | text-decoration: underline;
37 | }
38 | }
39 |
40 | // Secondary
41 | .label.is-secondary {
42 | font-size: $label-secondary-font-size;
43 | font-weight: $label-secondary-font-weight;
44 | letter-spacing: $label-secondary-letter-spacing;
45 | text-transform: $label-secondary-text-transform;
46 | padding: $label-secondary-padding;
47 | background: $label-secondary-background;
48 | color: $label-secondary-color-text;
49 | border: $label-secondary-border-width $label-secondary-border-style $label-secondary-border-color;
50 | border-radius: $label-secondary-border-radius;
51 | }
52 |
53 | // Tertiary
54 | .label.is-tertiary {
55 | letter-spacing: $label-tertiary-letter-spacing;
56 | background: $label-tertiary-background;
57 | color: $label-tertiary-color-text;
58 | text-transform: $label-tertiary-text-transform;
59 | font-size: $label-tertiary-font-size;
60 | font-weight: $label-tertiary-font-weight;
61 | padding: $label-tertiary-padding;
62 | border: $label-tertiary-border-width $label-tertiary-border-style $label-tertiary-border-color;
63 | border-radius: $label-tertiary-border-radius;
64 | }
65 |
66 | // Badges
67 | .label.is-badge {
68 | text-align: center;
69 | font-size: $badge-font-size;
70 | line-height: $badge-line-height;
71 | height: 18px;
72 | border-radius: 64px;
73 | min-width: 18px;
74 | padding-left: $space-2;
75 | padding-right: $space-2;
76 | }
77 |
78 | // State
79 | .label.is-error {
80 | @include make-label($color-error);
81 | }
82 | .label.is-focus {
83 | @include make-label($color-focus);
84 | }
85 | .label.is-success {
86 | @include make-label($color-success);
87 | }
88 | .label.is-warning {
89 | @include make-label($color-warning);
90 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_message.scss:
--------------------------------------------------------------------------------
1 | // MESSAGE
2 | // ---------------------------------------------------------------------------
3 |
4 | .message {
5 | position: fixed;
6 | top: $space-8;
7 | right: $space-8;
8 | width: $message-width;
9 | background: $message-background;
10 | box-shadow: $message-box-shadow;
11 | border-radius: $message-border-radius;
12 | z-index: $z-over-all;
13 | border: $message-border-width $message-border-style $message-border-color;
14 | font-family: $message-font-family;
15 | font-size: $message-font-size;
16 | font-weight: $message-font-weight;
17 | text-transform: $message-text-transform;
18 | color: $message-color-text;
19 | padding: $message-padding;
20 |
21 | & h1,
22 | & h2,
23 | & h3,
24 | & h4,
25 | & h5,
26 | & h6,
27 | & a {
28 | color: inherit;
29 | }
30 | & a:hover {
31 | @include transition;
32 | color: $message-link-color-hover;
33 | }
34 | &.is-center,
35 | &.is-centered {
36 | left: 50%;
37 | margin-left: -180px;
38 | }
39 | &.is-left {
40 | left: $space-8;
41 | right: auto;
42 | }
43 | &.is-line {
44 | width: 100%;
45 | top: 0;
46 | left: 0;
47 | right: 0;
48 | border-radius: 0;
49 | }
50 | }
51 | .message.is-error {
52 | background: $message-error-background;
53 | color: $message-error-color-text;
54 | border-color: $message-error-border-color;
55 | & a:hover {
56 | color: $message-error-link-color-hover;
57 | }
58 | }
59 | .message.is-success {
60 | background: $message-success-background;
61 | color: $message-success-color-text;
62 | border-color: $message-success-border-color;
63 | & a:hover {
64 | color: $message-success-link-color-hover;
65 | }
66 | }
67 | .message.is-focus {
68 | background: $message-focus-background;
69 | color: $message-focus-color-text;
70 | border-color: $message-focus-border-color;
71 | & a:hover {
72 | color: $message-focus-link-color-hover;
73 | }
74 | }
75 | .message.is-black {
76 | background: $message-black-background;
77 | color: $message-black-color-text;
78 | border-color: $message-black-border-color;
79 | & a:hover {
80 | color: $message-black-link-color-hover;
81 | }
82 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_modal.scss:
--------------------------------------------------------------------------------
1 | // MODAL
2 | // ---------------------------------------------------------------------------
3 |
4 | .modal-box {
5 | position: fixed;
6 | top: 0;
7 | left: 0;
8 | bottom: 0;
9 | right: 0;
10 | overflow-x: hidden;
11 | overflow-y: auto;
12 | z-index: $z-over-page;
13 | }
14 | .modal {
15 | position: relative;
16 | margin: $space-16 auto;
17 | padding: 0;
18 |
19 | font-family: $modal-font-family;
20 | background: $modal-background;
21 | box-shadow: $modal-box-shadow;
22 | border-radius: $modal-border-radius;
23 | color: $modal-color-text;
24 |
25 | & input,
26 | & textarea {
27 | @include for-mobile {
28 | font-size: 16px;
29 | }
30 | }
31 | & .close {
32 | position: absolute;
33 | top: 22px;
34 | right: $space-16;
35 | font-size: 16px;
36 | width: 32px;
37 | height: 32px;
38 | line-height: 32px;
39 | opacity: .4;
40 | }
41 | & .close:hover {
42 | opacity: 1;
43 | }
44 | }
45 | .modal-header {
46 | font-size: $modal-header-font-size;
47 | font-weight: $modal-header-font-weight;
48 | background: $modal-header-background;
49 | padding: $modal-header-padding;
50 | border-bottom: $modal-header-border-bottom;
51 | &:empty {
52 | display: none;
53 | }
54 | }
55 | .modal-body {
56 | font-size: $modal-body-font-size;
57 | background: $modal-body-background;
58 | padding: $modal-body-padding;
59 | }
60 | .modal-footer {
61 | font-size: $modal-footer-font-size;
62 | font-weight: $modal-footer-font-weight;
63 | background-color: $modal-footer-background;
64 | padding: $modal-footer-padding;
65 | border-top: $modal-footer-border-top;
66 | &:empty {
67 | display: none;
68 | }
69 | & button {
70 | margin-right: $space-8;
71 | }
72 | & button + button.is-tertiary {
73 | margin-left: $space-8;
74 | }
75 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_navbar.scss:
--------------------------------------------------------------------------------
1 | // NAVBAR
2 | // ---------------------------------------------------------------------------
3 |
4 | .is-navbar-container,
5 | .is-navbar-box {
6 | @include make-container;
7 | @include flex-items-middle;
8 |
9 | min-width: 100%;
10 | min-height: 100%;
11 |
12 | & .is-brand {
13 | @include flex;
14 | @include flex-items-middle;
15 |
16 | & h1,
17 | & h2,
18 | & h3,
19 | & h4,
20 | & h5,
21 | & h6 {
22 | line-height: 1;
23 | margin: 0;
24 | }
25 | }
26 | }
27 | .is-navbar {
28 | @include make-container;
29 | @include flex-items-middle;
30 |
31 | & ul {
32 | @include make-container;
33 | @include flex-items-middle;
34 | }
35 | & li {
36 | white-space: nowrap;
37 | margin-left: $navbar-item-space;
38 | }
39 | & a:not(.button) {
40 | @include cropline(1);
41 | line-height: 1;
42 | display: block;
43 | padding-top: $space-8;
44 | padding-bottom: $space-8;
45 | }
46 | & form {
47 | margin: 0;
48 | }
49 | & input {
50 | position: relative;
51 | top: 1px;
52 | }
53 | & nav.is-justify {
54 | text-align: center;
55 | width: 100%;
56 |
57 | & li {
58 | flex: 1;
59 | margin-left: 0;
60 | margin-right: 0;
61 | }
62 | }
63 | }
64 |
65 | @include for-mobile {
66 | .is-navbar-container.is-scrollable,
67 | .is-navbar-box.is-scrollable {
68 | &,
69 | & .is-navbar,
70 | & .is-navbar ul {
71 | display: flex;
72 | flex-direction: row;
73 | }
74 | }
75 | .is-navbar-container:not(.is-scrollable),
76 | .is-navbar-box:not(.is-scrollable) {
77 | &,
78 | & .is-navbar,
79 | & .is-navbar ul {
80 | align-items: flex-start;
81 | display: block;
82 | max-width: 100%;
83 | }
84 | & .is-navbar {
85 | & li {
86 | margin-left: 0;
87 | }
88 | & input,
89 | & .button.is-small {
90 | margin-top: $space-8;
91 | margin-bottom: $space-8;
92 | }
93 | & nav.is-justify {
94 | text-align: left;
95 | }
96 | }
97 | }
98 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_offcanvas.scss:
--------------------------------------------------------------------------------
1 | // OFFCANVAS
2 | // ---------------------------------------------------------------------------
3 |
4 | .is-offcanvasTransition {
5 | transition: transform .5s ease-in-out;
6 | }
7 | .is-offcanvas {
8 | position: absolute;
9 | top: 0;
10 | left: 0;
11 | right: auto;
12 | overflow-y: scroll;
13 | z-index: $z-over-page;
14 | min-height: 100vh;
15 | width: $offcanvas-width;
16 | padding: $space-16 $space-20;
17 | background-color: $color-black;
18 | font-size: $font-size-ui;
19 | color: #fff;
20 |
21 | &.is-offcanvas-right {
22 | left: auto;
23 | right: 0;
24 | }
25 | &.is-offcanvas-push {
26 | left: -$offcanvas-width;
27 | right: auto;
28 | }
29 | &.is-offcanvas-push.is-offcanvas-right {
30 | right: -$offcanvas-width;
31 | left: auto;
32 | }
33 | & a {
34 | color: #fff;
35 | }
36 | & a:hover {
37 | @include transition;
38 | color: rgba(#fff, .6);
39 | }
40 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_pager.scss:
--------------------------------------------------------------------------------
1 | // PAGER
2 | // ---------------------------------------------------------------------------
3 |
4 | .pager {
5 | @include clearfix;
6 |
7 | font-size: $pager-font-size;
8 | font-weight: $pager-font-weight;
9 | text-transform: $pager-text-transform;
10 | margin-top: $space-20;
11 | margin-bottom: $space-20;
12 |
13 | & a,
14 | & span {
15 | float: left;
16 | padding: $pager-padding;
17 | border: $pager-border-width $pager-border-style $pager-border-color;
18 | border-right-color: transparent;
19 | color: $pager-color-text;
20 | text-decoration: none;
21 | line-height: 1.4;
22 | &:first-child {
23 | border-top-left-radius: $pager-border-radius;
24 | border-bottom-left-radius: $pager-border-radius;
25 | }
26 | &:last-child {
27 | border-right-color: $pager-border-color;
28 | border-top-right-radius: $pager-border-radius;
29 | border-bottom-right-radius: $pager-border-radius;
30 | }
31 | }
32 | & a.is-prev:before,
33 | & a.is-next:after {
34 | position: relative;
35 | top: 1px;
36 | font-size: 125%;
37 | line-height: 1;
38 | }
39 | & a.is-prev:before {
40 | content: '<';
41 | margin-right: $space-8;
42 | }
43 | & a.is-next:after {
44 | content: '>';
45 | margin-left: $space-8;
46 | }
47 | & a.is-prev:empty:before {
48 | margin-right: 0;
49 | }
50 | & a.is-next:empty:after {
51 | margin-left: 0;
52 | }
53 | & a:hover {
54 | @include transition;
55 | background-color: rgba($color-black, .04);
56 | }
57 | & a.is-disabled {
58 | background-color: transparent;
59 | color: rgba($color-black, .3);
60 | }
61 | & span,
62 | & a.is-current,
63 | & a.is-active {
64 | background-color: rgba($color-black, .04);
65 | color: rgba($color-black, .5);
66 | }
67 | &.is-stacked {
68 | & a {
69 | position: relative;
70 | width: 50%;
71 | border: none;
72 | font-size: 1.1rem;
73 | font-weight: bold;
74 | padding: 0;
75 | padding-top: $space-20;
76 | }
77 | & a:hover {
78 | background: none;
79 | text-decoration: underline;
80 | color: $color-link;
81 | }
82 | & a.is-prev:before,
83 | & a.is-next:after {
84 | content: '';
85 | margin: 0;
86 | }
87 | & a.is-prev:after,
88 | & a.is-next:before {
89 | position: absolute;
90 | top: 0;
91 | left: 0;
92 | content: attr(data-label);
93 | font-size: 11px;
94 | text-transform: uppercase;
95 | font-style: normal;
96 | font-weight: normal;
97 | letter-spacing: .03em;
98 | margin-bottom: $space-4;
99 | color: rgba($color-black, .5);
100 | }
101 | & .is-next {
102 | text-align: right;
103 | }
104 | & a.is-next:before {
105 | right: 0;
106 | }
107 | }
108 |
109 | }
110 |
111 | // Responsive
112 | @include for-mobile() {
113 | .pager.is-stacked {
114 | & a {
115 | float: none;
116 | display: block;
117 | width: 100%;
118 | margin-bottom: $space-20;
119 | &:last-child {
120 | margin-bottom: 0;
121 | }
122 | }
123 | & a.is-next {
124 | text-align: left;
125 | }
126 | }
127 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_print.scss:
--------------------------------------------------------------------------------
1 | // PRINT
2 | // ---------------------------------------------------------------------------
3 | @media print {
4 | body {
5 | color: #000;
6 | }
7 | a {
8 | &,
9 | &:link,
10 | &:visited {
11 | color: #000;
12 | text-decoration: none;
13 | }
14 | }
15 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_progress.scss:
--------------------------------------------------------------------------------
1 | // PROGRESS
2 | // ---------------------------------------------------------------------------
3 |
4 | @keyframes progress-bar-stripes {
5 | from { background-position: 40px 0; }
6 | to { background-position: 0 0; }
7 | }
8 |
9 | .kube-progress {
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | z-index: 11000;
14 | width: 100%;
15 | background-color: $progress-background-box-color;
16 |
17 | & span {
18 | @include striped;
19 | @include animation(progress-bar-stripes 2s linear infinite);
20 |
21 | content: '';
22 | display: block;
23 | min-height: 8px;
24 | width: 100%;
25 | height: 100%;
26 | background-color: $progress-background-color;
27 | background-size: 40px 40px;
28 | }
29 | }
30 |
31 |
32 |
--------------------------------------------------------------------------------
/kube/src/sass/modules/_reset.scss:
--------------------------------------------------------------------------------
1 | // RESET
2 | // ---------------------------------------------------------------------------
3 | html {
4 | box-sizing: border-box;
5 | -webkit-text-size-adjust: 100%;
6 | }
7 | *,
8 | *:before,
9 | *:after {
10 | box-sizing: inherit;
11 | }
12 | * {
13 | margin: 0;
14 | padding: 0;
15 | outline: none;
16 | }
17 | img,
18 | video,
19 | audio {
20 | max-width: 100%;
21 | }
22 | img,
23 | video {
24 | height: auto;
25 | }
26 | audio,
27 | canvas,
28 | iframe,
29 | img,
30 | svg,
31 | video {
32 | vertical-align: middle;
33 | }
34 | svg {
35 | max-height: 100%;
36 | }
37 | svg:not(:root) {
38 | overflow: hidden;
39 | }
40 | iframe {
41 | border: none;
42 | width: 100%;
43 | }
44 | button,
45 | [type="submit"] {
46 | -webkit-appearance: button;
47 | }
48 | [type="radio"],
49 | [type="checkbox"] {
50 | vertical-align: middle;
51 | position: relative;
52 | bottom: 0.15rem;
53 | margin-right: 2px;
54 | }
55 | input[type="search"] {
56 | -webkit-appearance: textfield;
57 | }
58 | input[type="search"]::-webkit-search-decoration,
59 | input[type="search"]::-webkit-search-cancel-button {
60 | -webkit-appearance: none;
61 | }
62 | ::-moz-focus-inner {
63 | border: none;
64 | padding: 0;
65 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_space.scss:
--------------------------------------------------------------------------------
1 | // SPACE
2 | // ---------------------------------------------------------------------------
3 |
4 | // inset
5 | .is-inset-none {
6 | padding: 0;
7 | }
8 | @each $name, $space in $map-space {
9 | .is-inset-#{$name} { padding: $space; }
10 | }
11 | @include for-mobile {
12 | .inset-none-mobile {
13 | padding: 0;
14 | }
15 | @each $name, $space in $map-space {
16 | .is-inset-#{$name}-mobile { padding: $space; }
17 | }
18 | }
19 |
20 | // inset x
21 | .is-inset-x-none {
22 | padding-left: 0;
23 | padding-right: 0;
24 | }
25 | @each $name, $space in $map-space {
26 | .is-inset-x-#{$name} { padding-left: $space; padding-right: $space; }
27 | }
28 | @include for-mobile {
29 | .inset-x-none-mobile {
30 | padding-left: 0; padding-right: 0;
31 | }
32 | @each $name, $space in $map-space {
33 | .is-inset-x-#{$name}-mobile { padding-left: $space; padding-right: $space; }
34 | }
35 | }
36 |
37 | // inset y
38 | .is-inset-y-none {
39 | padding-top: 0;
40 | padding-bottom: 0;
41 | }
42 | @each $name, $space in $map-space {
43 | .is-inset-y-#{$name} { padding-top: $space; padding-bottom: $space; }
44 | }
45 | @include for-mobile {
46 | .inset-y-none-mobile {
47 | padding-top: 0; padding-bottom: 0;
48 | }
49 | @each $name, $space in $map-space {
50 | .is-inset-y-#{$name}-mobile { padding-top: $space; padding-bottom: $space; }
51 | }
52 | }
53 |
54 | // inset top
55 | .is-inset-top-none {
56 | padding-top: 0;
57 | }
58 | @each $name, $space in $map-space {
59 | .is-inset-top-#{$name} { padding-top: $space; }
60 | }
61 | @include for-mobile {
62 | .is-inset-top-none-mobile {
63 | padding-top: 0;
64 | }
65 | @each $name, $space in $map-space {
66 | .is-inset-top-#{$name}-mobile { padding-top: $space; }
67 | }
68 | }
69 |
70 | // inset bottom
71 | .is-inset-bottom-none {
72 | padding-bottom: 0;
73 | }
74 | @each $name, $space in $map-space {
75 | .is-inset-bottom-#{$name} { padding-bottom: $space; }
76 | }
77 | @include for-mobile {
78 | .is-inset-bottom-none-mobile {
79 | padding-bottom: 0;
80 | }
81 | @each $name, $space in $map-space {
82 | .is-inset-bottom-#{$name}-mobile { padding-bottom: $space; }
83 | }
84 | }
85 |
86 | // inset left
87 | .is-inset-left-none {
88 | padding-left: 0;
89 | }
90 | @each $name, $space in $map-space {
91 | .is-inset-left-#{$name} { padding-left: $space; }
92 | }
93 | @include for-mobile {
94 | .is-inset-left-none {
95 | padding-left: 0;
96 | }
97 | @each $name, $space in $map-space {
98 | .is-inset-left-#{$name}-mobile { padding-left: $space; }
99 | }
100 | }
101 |
102 | // inset right
103 | .is-inset-right-none {
104 | padding-right: 0;
105 | }
106 | @each $name, $space in $map-space {
107 | .is-inset-right-#{$name} { padding-right: $space; }
108 | }
109 | @include for-mobile {
110 | .is-inset-right-none-mobile {
111 | padding-right: 0;
112 | }
113 | @each $name, $space in $map-space {
114 | .is-inset-right-#{$name}-mobile { padding-right: $space; }
115 | }
116 | }
117 |
118 | // outset
119 | .is-outset-none {
120 | margin: 0;
121 | }
122 | @each $name, $space in $map-space {
123 | .is-outset-#{$name} { margin: $space; }
124 | }
125 | @include for-mobile {
126 | .is-outset-none-mobile {
127 | margin: 0;
128 | }
129 | @each $name, $space in $map-space {
130 | .is-outset-#{$name}-mobile { margin: $space; }
131 | }
132 | }
133 |
134 | // outset x
135 | .is-outset-x-none {
136 | margin-left: 0; margin-right: 0;
137 | }
138 | @each $name, $space in $map-space {
139 | .is-outset-x-#{$name} { margin-left: $space; margin-right: $space; }
140 | }
141 | @include for-mobile {
142 | .is-outset-x-none-mobile {
143 | margin-left: 0; margin-right: 0;
144 | }
145 | @each $name, $space in $map-space {
146 | .is-outset-x-#{$name}-mobile { margin-left: $space; margin-right: $space; }
147 | }
148 | }
149 |
150 | // outset y
151 | .is-outset-y-none {
152 | margin-top: 0; margin-bottom: 0;
153 | }
154 | @each $name, $space in $map-space {
155 | .is-outset-y-#{$name} { margin-top: $space; margin-bottom: $space; }
156 | }
157 | @include for-mobile {
158 | .is-outset-y-none-mobile {
159 | margin-top: 0; margin-bottom: 0;
160 | }
161 | @each $name, $space in $map-space {
162 | .is-outset-y-#{$name}-mobile { margin-top: $space; margin-bottom: $space; }
163 | }
164 | }
165 |
166 | // stack
167 | .is-stack-none,
168 | .is-col-stack-none .is-col {
169 | margin-bottom: 0;
170 | }
171 | @each $name, $space in $map-space {
172 | .is-stack-#{$name},
173 | .is-col-stack-#{$name} .is-col { margin-bottom: $space; }
174 | }
175 | @include for-mobile {
176 | .is-stack-none-mobile,
177 | .is-col-stack-none-mobile .is-col {
178 | margin-bottom: 0;
179 | }
180 | @each $name, $space in $map-space {
181 | .is-stack-#{$name}-mobile,
182 | .is-col-stack-#{$name}-mobile .is-col { margin-bottom: $space; }
183 | }
184 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_table.scss:
--------------------------------------------------------------------------------
1 | // TABLE
2 | // ---------------------------------------------------------------------------
3 |
4 | table {
5 | font-size: $table-font-size;
6 | border-collapse: collapse;
7 | border-spacing: 0;
8 | max-width: 100%;
9 | width: 100%;
10 | empty-cells: show;
11 | margin-bottom: $space-20;
12 | }
13 | table caption {
14 | text-align: left;
15 | font-size: $table-caption-font-size;
16 | font-weight: $table-caption-font-weight;
17 | text-transform: $table-caption-text-transform;
18 | color: $table-caption-color-text;
19 | letter-spacing: $table-caption-letter-spacing;
20 | margin-bottom: $space-2;
21 | }
22 | th {
23 | font-weight: $table-head-font-weight;
24 | color: $table-head-color-text;
25 | text-align: left;
26 | vertical-align: bottom;
27 | }
28 | td {
29 | color: $table-color-text;
30 | vertical-align: top;
31 | }
32 | tbody.is-middle td,
33 | tr.is-middle td,
34 | td.is-middle {
35 | vertical-align: middle;
36 | }
37 | th,
38 | td {
39 | @include cropline;
40 |
41 | padding: $table-padding-tb $table-padding-rl;
42 | border-bottom: $table-border;
43 | &:first-child {
44 | padding-left: 0;
45 | }
46 | &:last-child {
47 | padding-right: 0;
48 | }
49 | }
50 | tbody th,
51 | tbody td {
52 | border-width: $table-th-border-width;
53 | border-color: $table-th-border-color;
54 | }
55 | tfoot th,
56 | tfoot td {
57 | color: rgba($color-text, .5);
58 | }
59 |
60 | // Bordered
61 | table.is-border,
62 | table.is-bordered {
63 |
64 | & td,
65 | & th {
66 | border: $table-border;
67 | }
68 | & tbody th,
69 | & tbody td {
70 | border-bottom-width: $table-th-border-width;
71 | border-bottom-color: $table-th-border-color;
72 | }
73 | }
74 |
75 | // Striped
76 | table.is-striped tr:nth-child(odd) td {
77 | background-color: $table-background-striped;
78 | }
79 |
80 | table.is-border,
81 | table.is-bordered,
82 | table.is-striped {
83 | & td,
84 | & th {
85 | &:first-child {
86 | padding-left: $table-padding-rl;
87 | }
88 | &:last-child {
89 | padding-right: $table-padding-rl;
90 | }
91 | }
92 | }
93 |
94 | // Responsive
95 | @include for-mobile() {
96 | table.is-responsive {
97 | th {
98 | display: none;
99 | }
100 | tr, td {
101 | display: block;
102 | }
103 | tr:nth-child(odd) {
104 | background-color: $table-background-striped;
105 | }
106 | td {
107 | padding: $space-16;
108 | text-align: right;
109 | }
110 | td:before {
111 | margin-top: $space-2;
112 | content: attr(data-label);
113 | float: left;
114 | font-size: $font-size-small;
115 | font-weight: bold;
116 | text-transform: uppercase;
117 | white-space: nowrap;
118 | }
119 | }
120 | }
121 |
122 | // Container
123 | .is-table-container {
124 | overflow-x: auto;
125 | -webkit-overflow-scrolling: touch;
126 | margin-bottom: $space-16;
127 |
128 | & table {
129 | margin-bottom: 0;
130 | }
131 | }
--------------------------------------------------------------------------------
/kube/src/sass/modules/_tabs.scss:
--------------------------------------------------------------------------------
1 | // TABS
2 | // ---------------------------------------------------------------------------
3 |
4 | .tabs {
5 | @include flex;
6 |
7 | font-size: $tabs-font-size;
8 | font-weight: $tabs-font-weight;
9 | text-transform: $tabs-text-transform;
10 | margin-bottom: $space-20;
11 | border-bottom: 1px solid rgba($color-black, .1);
12 |
13 | & a {
14 | position: relative;
15 | top: 1px;
16 | display: block;
17 | padding: $tabs-padding;
18 | border-bottom: $tabs-border-width $tabs-border-style $tabs-border-color;
19 | color: $tabs-color-text;
20 | background-color: $tabs-background-color;
21 | text-decoration: $tabs-text-decoration;
22 | }
23 | & a:hover {
24 | @include transition;
25 |
26 | color: $tabs-hover-color-text;
27 | background: $tabs-hover-background;
28 | text-decoration: $tabs-hover-text-decoration;
29 | border-bottom: $tabs-hover-border-width $tabs-hover-border-style $tabs-hover-border-color;
30 | }
31 | & a.is-active {
32 | cursor: default;
33 | color: $tabs-active-color-text;
34 | background: $tabs-active-background;
35 | text-decoration: $tabs-active-text-decoration;
36 | border-bottom: $tabs-active-border-width $tabs-active-border-style $tabs-active-border-color;
37 | }
38 | }
39 |
40 | @include for-mobile {
41 | .tabs {
42 | display: block;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/kube/src/sass/themes/kube.theme.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Kube Example Theme
3 | */
4 | @import "../vars";
5 | @import "kube.theme.vars";
6 | @import "../mixins";
7 | @import "../modules";
--------------------------------------------------------------------------------
/kube/src/sass/themes/kube.theme.vars.scss:
--------------------------------------------------------------------------------
1 | // border
2 | $border-radius: 1px;
3 |
4 | // form
5 | $form-item-margin: 36px;
6 |
7 | // label
8 | $form-label-font-size: 0.71875rem; // 11.5px
9 | $form-label-font-weight: 600;
10 | $form-label-text-transform: uppercase;
11 | $form-label-color-text: $color-text;
--------------------------------------------------------------------------------