hippo-fw 0.9.6 → 0.9.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/client/hippo/components/asset.jsx +22 -2
  3. data/client/hippo/components/asset.scss +1 -1
  4. data/client/hippo/components/data-list.jsx +38 -27
  5. data/client/hippo/components/data-list/data-list.scss +2 -0
  6. data/client/hippo/components/data-table.jsx +4 -2
  7. data/client/hippo/components/data-table/formatters.js +7 -0
  8. data/client/hippo/components/data-table/table-styles.scss +10 -0
  9. data/client/hippo/components/date-time.jsx +93 -133
  10. data/client/hippo/components/date-time.scss +1 -36
  11. data/client/hippo/components/form/api.js +4 -3
  12. data/client/hippo/components/form/fields.jsx +7 -1
  13. data/client/hippo/components/form/fields/date-wrapper.jsx +4 -4
  14. data/client/hippo/components/icon.jsx +10 -1
  15. data/client/hippo/components/query-builder.jsx +6 -1
  16. data/client/hippo/components/record-finder/query-layer.jsx +1 -1
  17. data/client/hippo/components/save-button.jsx +55 -0
  18. data/client/hippo/components/text-editor.jsx +10 -9
  19. data/client/hippo/components/text-editor/text-editor.scss +0 -1
  20. data/client/hippo/components/time-zone-select.jsx +60 -0
  21. data/client/hippo/models/asset.js +10 -5
  22. data/client/hippo/models/base.js +1 -1
  23. data/client/hippo/models/pub_sub.js +22 -67
  24. data/client/hippo/models/pub_sub/channel.js +28 -8
  25. data/client/hippo/models/pub_sub/map.js +57 -0
  26. data/client/hippo/models/query/array-result.js +5 -4
  27. data/client/hippo/models/query/field.js +19 -3
  28. data/client/hippo/models/system-setting.js +16 -1
  29. data/client/hippo/models/tenant.js +8 -7
  30. data/client/hippo/screens/system-settings.jsx +10 -12
  31. data/client/hippo/screens/user-management/edit-form.jsx +10 -11
  32. data/client/hippo/workspace/index.jsx +6 -3
  33. data/client/hippo/workspace/menu-option.jsx +2 -5
  34. data/client/hippo/workspace/menu.jsx +13 -1
  35. data/client/hippo/workspace/styles.scss +11 -26
  36. data/command-reference-files/initial/Gemfile +1 -1
  37. data/command-reference-files/model/client/appy-app/models/test_test.js +1 -1
  38. data/command-reference-files/model/spec/server/models/test_test_spec.rb +10 -0
  39. data/lib/hippo/api/cable.rb +0 -2
  40. data/lib/hippo/command/generate_model.rb +2 -3
  41. data/lib/hippo/spec_helper.rb +4 -2
  42. data/lib/hippo/tenant.rb +7 -1
  43. data/lib/hippo/version.rb +1 -1
  44. data/package-lock.json +60 -46
  45. data/package.json +5 -2
  46. data/spec/client/components/__snapshots__/record-finder.spec.jsx.snap +1 -0
  47. data/spec/client/components/__snapshots__/time-zone-select.spec.jsx.snap +48 -0
  48. data/spec/client/components/form.spec.jsx +7 -0
  49. data/spec/client/components/time-zone-select.spec.jsx +11 -0
  50. data/spec/client/models/pub_sub.spec.js +1 -3
  51. data/spec/client/models/pub_sub/channel.spec.js +45 -0
  52. data/spec/client/models/system-setting.spec.js +14 -0
  53. data/spec/client/workspace/__snapshots__/menu.spec.jsx.snap +9 -9
  54. data/spec/server/api/tenant_change_spec.rb +1 -1
  55. data/templates/client/models/model.js +1 -1
  56. data/templates/spec/factories/model.rb +6 -0
  57. data/templates/spec/server/model_spec.rb +4 -4
  58. data/views/hippo_root_view.erb +4 -0
  59. metadata +11 -10
  60. data/client/hippo/components/date-time/calendar.jsx +0 -113
  61. data/client/hippo/components/date-time/date-time-drop.jsx +0 -75
  62. data/client/hippo/components/date-time/date-time.scss +0 -157
  63. data/client/hippo/components/date-time/time.jsx +0 -119
  64. data/client/hippo/workspace/foo.js +0 -0
  65. data/command-reference-files/model/spec/fixtures/appy-app/test_test.yml +0 -11
  66. data/command-reference-files/model/spec/server/test_test_spec.rb +0 -10
  67. data/spec/client/components/date-time.spec.jsx +0 -20
data/spec/client/models/system-setting.spec.js CHANGED
@@ -1,5 +1,8 @@
1
1
  import SystemSettings from 'hippo/models/system-setting';
2
2
  import Asset from 'hippo/models/asset';
3
+ import Config from 'hippo/config';
4
+
5
+ jest.mock('hippo/config');
3
6
 
4
7
  const TEST_SETTINGS = {
5
8
  id: 1,
@@ -16,4 +19,15 @@ describe('SystemSettings Model', () => {
16
19
  ss.logo = { };
17
20
  expect(ss.logo).toBeInstanceOf(Asset);
18
21
  });
22
+
23
+ it('sets Config logo when updated', () => {
24
+ const ss = new SystemSettings(TEST_SETTINGS);
25
+ ss.logo = TEST_SETTINGS.logo;
26
+ ss.logo.file = { mockData: true };
27
+ expect(ss.logo.isDirty).toEqual(true);
28
+ ss.syncData = { foo: 'bar' };
29
+ ss.logo.file = null;
30
+ expect(Config.logo).toEqual(ss.logo.file_data);
31
+ expect(ss.syncData).toMatchObject({ settings: TEST_SETTINGS.settings });
32
+ });
19
33
  });
data/spec/client/workspace/__snapshots__/menu.spec.jsx.snap CHANGED
@@ -31,7 +31,7 @@ exports[`Workspace Menu has groups with screens 1`] = `
31
31
  Settings
32
32
  <span
33
33
  aria-hidden={true}
34
- className="fa fa-wrench"
34
+ className="fa fa-wrench icon"
35
35
  />
36
36
  </h4>
37
37
  </header>
@@ -42,11 +42,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
42
42
  href={undefined}
43
43
  onClick={[Function]}
44
44
  >
45
- User Management
46
45
  <span
47
46
  aria-hidden={true}
48
- className="fa fa-group"
47
+ className="fa fa-group icon"
49
48
  />
49
+ User Management
50
50
  </a>
51
51
  <a
52
52
  aria-label={undefined}
@@ -54,11 +54,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
54
54
  href={undefined}
55
55
  onClick={[Function]}
56
56
  >
57
- System Settings
58
57
  <span
59
58
  aria-hidden={true}
60
- className="fa fa-cogs"
59
+ className="fa fa-cogs icon"
61
60
  />
61
+ System Settings
62
62
  </a>
63
63
  <a
64
64
  aria-label={undefined}
@@ -66,11 +66,11 @@ exports[`Workspace Menu has groups with screens 1`] = `
66
66
  href={undefined}
67
67
  onClick={[Function]}
68
68
  >
69
- title
70
69
  <span
71
70
  aria-hidden={true}
72
- className="fa fa-red"
71
+ className="fa fa-red icon"
73
72
  />
73
+ title
74
74
  </a>
75
75
  </nav>
76
76
  `;
@@ -82,10 +82,10 @@ exports[`Workspace Menu has renders menu options 1`] = `
82
82
  href={undefined}
83
83
  onClick={[Function]}
84
84
  >
85
- title
86
85
  <span
87
86
  aria-hidden={true}
88
- className="fa fa-red"
87
+ className="fa fa-red icon"
89
88
  />
89
+ title
90
90
  </a>
91
91
  `;
data/spec/server/api/tenant_change_spec.rb CHANGED
@@ -16,7 +16,7 @@ describe "Tenant changes", api: true, vcr: VCR_OPTS do
16
16
  'SERVER_NAME' => "#{tenant.slug}.example.ua",
17
17
  }
18
18
 
19
- expect(tenant.reload.slug).to eq('RED')
19
+ expect(tenant.reload.slug).to eq('red')
20
20
  email = Mail::TestMailer.deliveries.last
21
21
  expect(email).not_to be_nil
22
22
  expect(email.body).to include(tenant.domain)
data/templates/client/models/model.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import {
2
- BaseModel, identifiedBy, identifier, belongsTo, hasMany, field, computed
2
+ BaseModel, identifiedBy, identifier, field, session, belongsTo, hasMany,
3
3
  } from './base';
4
4
 
5
5
  @identifiedBy('<%= identifier %>/<%= file_name %>')
data/templates/spec/factories/model.rb ADDED
@@ -0,0 +1,6 @@
1
+ FactoryGirl.define do
2
+ factory :<%= file_name %>, class: <%= namespace %>::<%= class_name %> do
3
+ tenant { Hippo::Tenant.current }
4
+
5
+ end
6
+ end
data/templates/spec/server/model_spec.rb CHANGED
@@ -1,10 +1,10 @@
1
- require_relative 'spec_helper'
1
+ require_relative '../spec_helper'
2
2
 
3
- describe <%= identifier %>::<%= class_name %> do
3
+ describe <%= namespace %>::<%= class_name %> do
4
4
 
5
5
  it "can be instantiated" do
6
- model = <%= identifier %>::<%= class_name %>.new
7
- expect( model ).to be_an(<%= identifier %>::<%= class_name %>)
6
+ model = <%= namespace %>::<%= class_name %>.new
7
+ expect(model).to be_an(<%= namespace %>::<%= class_name %>)
8
8
  end
9
9
 
10
10
  end
data/views/hippo_root_view.erb CHANGED
@@ -3,6 +3,10 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
7
+ <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
8
+ <meta name="apple-mobile-web-app-capable" content="yes">
9
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
6
10
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
7
11
  <title><%= Hippo::Extensions.controlling.title %></title>
8
12
  <style>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: hippo-fw
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.9.6
4
+ version: 0.9.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nathan Stitt
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-19 00:00:00.000000000 Z
11
+ date: 2017-09-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: activejob
@@ -702,14 +702,11 @@ files:
702
702
  - client/hippo/components/data-list.jsx
703
703
  - client/hippo/components/data-list/data-list.scss
704
704
  - client/hippo/components/data-table.jsx
705
+ - client/hippo/components/data-table/formatters.js
705
706
  - client/hippo/components/data-table/header-cell.jsx
706
707
  - client/hippo/components/data-table/table-styles.scss
707
708
  - client/hippo/components/date-time.jsx
708
709
  - client/hippo/components/date-time.scss
709
- - client/hippo/components/date-time/calendar.jsx
710
- - client/hippo/components/date-time/date-time-drop.jsx
711
- - client/hippo/components/date-time/date-time.scss
712
- - client/hippo/components/date-time/time.jsx
713
710
  - client/hippo/components/enabled.js.erb
714
711
  - client/hippo/components/field-validation.js
715
712
  - client/hippo/components/form.jsx
@@ -742,6 +739,7 @@ files:
742
739
  - client/hippo/components/record-finder/query-layer.jsx
743
740
  - client/hippo/components/record-finder/record-finder.scss
744
741
  - client/hippo/components/request-spinner/index.js
742
+ - client/hippo/components/save-button.jsx
745
743
  - client/hippo/components/screen.jsx
746
744
  - client/hippo/components/select-field/index.js
747
745
  - client/hippo/components/select-field/styles.scss
@@ -764,6 +762,7 @@ files:
764
762
  - client/hippo/components/text-editor/plugins.js
765
763
  - client/hippo/components/text-editor/renderer.jsx
766
764
  - client/hippo/components/text-editor/text-editor.scss
765
+ - client/hippo/components/time-zone-select.jsx
767
766
  - client/hippo/components/tool-tip.jsx
768
767
  - client/hippo/components/toolbar/changes-notification.scss
769
768
  - client/hippo/components/toolbar/index.js
@@ -799,6 +798,7 @@ files:
799
798
  - client/hippo/models/index.js
800
799
  - client/hippo/models/pub_sub.js
801
800
  - client/hippo/models/pub_sub/channel.js
801
+ - client/hippo/models/pub_sub/map.js
802
802
  - client/hippo/models/query.js
803
803
  - client/hippo/models/query/array-result.js
804
804
  - client/hippo/models/query/clause.js
@@ -855,7 +855,6 @@ files:
855
855
  - client/hippo/testing/screens.js
856
856
  - client/hippo/testing/utils.js
857
857
  - client/hippo/user.js
858
- - client/hippo/workspace/foo.js
859
858
  - client/hippo/workspace/index.jsx
860
859
  - client/hippo/workspace/menu-group.jsx
861
860
  - client/hippo/workspace/menu-option.jsx
@@ -913,8 +912,7 @@ files:
913
912
  - command-reference-files/model/lib/appy-app/model.rb
914
913
  - command-reference-files/model/lib/appy-app/models/test_test.rb
915
914
  - command-reference-files/model/spec/client/models/test_test.spec.js
916
- - command-reference-files/model/spec/fixtures/appy-app/test_test.yml
917
- - command-reference-files/model/spec/server/test_test_spec.rb
915
+ - command-reference-files/model/spec/server/models/test_test_spec.rb
918
916
  - command-reference-files/screen/client/appy-app/screens/ready-set-go.jsx
919
917
  - command-reference-files/screen/config/screens.rb
920
918
  - command-reference-files/screen/spec/client/screens/ready-set-go.spec.jsx
@@ -1071,21 +1069,23 @@ files:
1071
1069
  - spec/client/components/__snapshots__/network-activity-overlay.spec.jsx.snap
1072
1070
  - spec/client/components/__snapshots__/query-builder.spec.jsx.snap
1073
1071
  - spec/client/components/__snapshots__/record-finder.spec.jsx.snap
1072
+ - spec/client/components/__snapshots__/time-zone-select.spec.jsx.snap
1074
1073
  - spec/client/components/asset.spec.jsx
1075
1074
  - spec/client/components/data-list.spec.jsx
1076
1075
  - spec/client/components/data-table.spec.jsx
1077
- - spec/client/components/date-time.spec.jsx
1078
1076
  - spec/client/components/form.spec.jsx
1079
1077
  - spec/client/components/master-detail.spec.jsx
1080
1078
  - spec/client/components/network-activity-overlay.spec.jsx
1081
1079
  - spec/client/components/query-builder.spec.jsx
1082
1080
  - spec/client/components/record-finder.spec.jsx
1081
+ - spec/client/components/time-zone-select.spec.jsx
1083
1082
  - spec/client/extension/base.spec.js
1084
1083
  - spec/client/lib/util.spec.js
1085
1084
  - spec/client/models/asset.spec.js
1086
1085
  - spec/client/models/base.spec.js
1087
1086
  - spec/client/models/collection.spec.js
1088
1087
  - spec/client/models/pub_sub.spec.js
1088
+ - spec/client/models/pub_sub/channel.spec.js
1089
1089
  - spec/client/models/query.spec.js
1090
1090
  - spec/client/models/sync.spec.js
1091
1091
  - spec/client/models/system-setting.spec.js
@@ -1193,6 +1193,7 @@ files:
1193
1193
  - templates/spec/client/models/model.spec.js
1194
1194
  - templates/spec/client/screen.spec.jsx
1195
1195
  - templates/spec/client/setup.js
1196
+ - templates/spec/factories/model.rb
1196
1197
  - templates/spec/fixtures/namespace/model.yml
1197
1198
  - templates/spec/server/model_spec.rb
1198
1199
  - templates/spec/server/spec_helper.rb
data/client/hippo/components/date-time/calendar.jsx DELETED
@@ -1,113 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { observer } from 'mobx-react';
4
- import { action } from 'mobx';
5
- import cx from 'classnames';
6
- import range from 'lodash/range';
7
- import chunk from 'lodash/chunk';
8
- import Header from 'grommet/components/Header';
9
- import Button from 'grommet/components/Button';
10
- import Title from 'grommet/components/Title';
11
- import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious';
12
- import LinkNextIcon from 'grommet/components/icons/base/LinkNext';
13
-
14
- const Day = ({ i, w, d, className, ...props }) => {
15
- const prevMonth = 0 === w && i > 7;
16
- const nextMonth = w >= 4 && i <= 14;
17
- const cls = cx(className, {
18
- 'prev-month': prevMonth,
19
- 'next-month': nextMonth,
20
- 'current-day': !prevMonth && !nextMonth && i === d,
21
- });
22
-
23
- return <td className={cls} {...props}>{i}</td>;
24
- };
25
-
26
-
27
- @observer
28
- export default class Calendar extends React.PureComponent {
29
- static propTypes = {
30
- moment: PropTypes.object.isRequired,
31
- onChange: PropTypes.func.isRequired,
32
- }
33
-
34
- @action.bound
35
- selectDate(i, w) {
36
- const prevMonth = 0 === w && i > 7;
37
- const nextMonth = w >= 4 && i <= 14;
38
- const m = this.props.moment;
39
-
40
- m.date(i);
41
- if (prevMonth) m.subtract(1, 'month');
42
- if (nextMonth) m.add(1, 'month');
43
- this.props.onChange(m);
44
- this.forceUpdate();
45
- }
46
-
47
- @action.bound
48
- prevMonth(e) {
49
- e.preventDefault();
50
- this.props.onChange(this.props.moment.subtract(1, 'month'));
51
- this.forceUpdate();
52
- }
53
-
54
- @action.bound
55
- nextMonth(e) {
56
- e.preventDefault();
57
- this.props.onChange(this.props.moment.add(1, 'month'));
58
- this.forceUpdate();
59
- }
60
-
61
- render() {
62
- const m = this.props.moment;
63
- const d = m.date();
64
- const d1 = m.clone().subtract(1, 'month').endOf('month').date();
65
- const d2 = m.clone().date(1).day();
66
- const d3 = m.clone().endOf('month').date();
67
- const days = [].concat(
68
- range((d1 - d2) + 1, d1 + 1),
69
- range(1, d3 + 1),
70
- range(1, ((42 - d3) - d2) + 1),
71
- );
72
- const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
73
-
74
- return (
75
- <div className={cx('calendar', this.props.className)}>
76
-
77
- <Header key='header' justify='between'>
78
- <Button className="previous" icon={<LinkPreviousIcon />} onClick={this.prevMonth} />
79
- <Title className="title" responsive={false}>
80
- {m.format('MMMM YYYY')}
81
- </Title>
82
- <Button className="next" icon={<LinkNextIcon />} onClick={this.nextMonth} />
83
- </Header>
84
-
85
- <div className="grid">
86
- <table>
87
- <thead>
88
- <tr>
89
- {weeks.map((w, i) => <td key={i}>{w}</td>)}
90
- </tr>
91
- </thead>
92
-
93
- <tbody>
94
- {chunk(days, 7).map((row, w) =>
95
- <tr key={w}>
96
- {row.map(i =>
97
- <Day
98
- key={i}
99
- i={i}
100
- d={d}
101
- w={w}
102
- onClick={() => this.selectDate(i, w)}
103
- />,
104
- )}
105
- </tr>,
106
- )}
107
- </tbody>
108
- </table>
109
- </div>
110
- </div>
111
- );
112
- }
113
- }
data/client/hippo/components/date-time/date-time-drop.jsx DELETED
@@ -1,75 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { action, observable } from 'mobx';
4
- import { observer } from 'mobx-react';
5
- import CSSClassnames from 'grommet/utils/CSSClassnames';
6
- import CalendarIcon from 'grommet/components/icons/base/Calendar';
7
- import ClockIcon from 'grommet/components/icons/base/Clock';
8
- import Box from 'grommet/components/Box';
9
- import cn from 'classnames';
10
-
11
- import Calendar from './calendar';
12
- import Time from './time';
13
-
14
- const FORM_FIELD = CSSClassnames.FORM_FIELD;
15
- const CLASS_ROOT = 'date-time';
16
-
17
- @observer
18
- export default class DateTimeDrop extends React.Component {
19
- static propTypes = {
20
- value: PropTypes.object.isRequired,
21
- onChange: PropTypes.func.isRequired,
22
- minuteStep: PropTypes.number,
23
- }
24
-
25
- static className = 'date-time-drop';
26
-
27
- @observable isShowingTime = false;
28
-
29
- @action.bound
30
- toggleTabs() {
31
- this.isShowingTime = !this.isShowingTime;
32
- }
33
-
34
- render() {
35
- return (
36
- <Box
37
- className={`${this.constructor.className} component date-time-drop`}
38
- >
39
- <Box
40
- direction='row'
41
- className="tabs"
42
- >
43
- <Box
44
- onClick={this.isShowingTime ? this.toggleTabs : null}
45
- colorIndex={this.isShowingTime ? '' : 'neutral-1'}
46
- align="center" justify="center" flex direction='row' className="calendar"
47
- >
48
- <CalendarIcon />
49
- Day
50
- </Box>
51
- <Box
52
- onClick={this.isShowingTime ? null : this.toggleTabs}
53
- colorIndex={this.isShowingTime ? 'neutral-1' : ''}
54
- align="center" justify="center" flex direction='row' className="time"
55
- >
56
- <ClockIcon />
57
- Time
58
- </Box>
59
- </Box>
60
- <div className={cn('tab', { active: !this.isShowingTime })}>
61
- <Calendar
62
- moment={this.props.value}
63
- onChange={this.props.onChange}
64
- />
65
- </div>
66
- <div className={cn('tab', { active: this.isShowingTime })}>
67
- <Time
68
- moment={this.props.value}
69
- onChange={this.props.onChange}
70
- />
71
- </div>
72
- </Box>
73
- );
74
- }
75
- }
data/client/hippo/components/date-time/date-time.scss DELETED
@@ -1,157 +0,0 @@
1
- @import '../../styles/global';
2
-
3
- .date-time-drop {
4
- $slider-handle-size: 20px;
5
- $slider-size: 4px;
6
- $slider-fix: 20px;
7
- .calendar {
8
- header {
9
- min-height: 50px;
10
- }
11
- .grid {
12
- width: 100%;
13
- padding: 12px;
14
- }
15
- table {
16
- width: 100%;
17
- border-collapse: collapse;
18
- border-spacing: 0;
19
- }
20
- td {
21
- padding: 8px 0;
22
- text-align: center;
23
- cursor: pointer;
24
- }
25
- thead {
26
- td {
27
- color: $secondary-text-color;
28
- font-weight: normal;
29
- }
30
- }
31
- tbody td {
32
- color: #666666;
33
-
34
- &:hover {
35
- background-color: $hover-background-color;
36
- color: $hover-text-color;
37
- }
38
- }
39
- .current-day {
40
- background-color: $brand-color;
41
- color: $colored-text-color;
42
- font-weight: 700;
43
- }
44
- .prev-month,
45
- .next-month {
46
- color: #999999;
47
- }
48
- }
49
-
50
-
51
- .time-picker {
52
- color: $background-color;
53
- padding-top: 50px;
54
-
55
- .showtime {
56
- text-align: center;
57
- }
58
-
59
- .am-pm {
60
- display: flex;
61
- flex-direction: column;
62
- margin-left: 10px;
63
- }
64
-
65
- .separater {
66
- display: inline-block;
67
- font-size: 32px;
68
- font-weight: bold;
69
- color: $inverse-background-color;
70
- width: 32px;
71
- height: 65px;
72
- line-height: 65px;
73
- text-align: center;
74
- }
75
-
76
- .time-text {
77
- position: relative;
78
- left: -10px;
79
- font-size: 15px;
80
- color: $inverse-background-color;
81
- margin-top: 7px;
82
- margin-bottom: 10px;
83
- }
84
-
85
- .sliders {
86
- padding: 40px;
87
- max-width: 500px;
88
- margin: auto;
89
- }
90
-
91
- .minutes,
92
- .hour {
93
- width: 65px;
94
- height: 65px;
95
- padding: 0;
96
- font-size: 38px;
97
- background-color: $inverse-background-color;
98
- border-radius: 3px;
99
- text-align: center;
100
- &:focus {
101
- padding: 0;
102
- }
103
- }
104
- }
105
-
106
-
107
- .u-slider-time {
108
- position: relative;
109
- display: inline-block;
110
- background-color: $control-background-color;
111
- border-radius: 3px;
112
- height: $slider-size;
113
- width: 100%;
114
- cursor: pointer;
115
-
116
- .value {
117
- position: absolute;
118
- background-color: $brand-color;
119
- border-radius: 3px;
120
- top: 0;
121
- height: 100%;
122
- }
123
-
124
- .handle {
125
- position: absolute;
126
- width: $slider-size;
127
- height: $slider-size;
128
-
129
- &:after {
130
- position: relative;
131
- display: block;
132
- content: '';
133
- top: -$slider-fix/2 - 2;
134
- left: -($slider-size+$slider-fix)/2;
135
- width: $slider-size + $slider-fix;
136
- height: $slider-size + $slider-fix;
137
- background-color: #fff;
138
- border: 3px solid $brand-color; //inverse-background-color;
139
- border-radius: 50%;
140
- cursor: pointer;
141
- }
142
- }
143
- }
144
-
145
- .tab {
146
- display: none;
147
- &.active { display: block; }
148
- }
149
-
150
- .tabs {
151
- > * { padding: 0.5rem; }
152
- margin-bottom: 10px;
153
- border-bottom: 1px solid;
154
- .grommetux-control-icon { margin-right: 0.5rem; }
155
- }
156
-
157
- }