@shoprenter/sr-styleguide 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +146 -16
- package/dist/demo/src/demo_bootstrap_js.css +26 -28
- package/dist/demo/src/demo_bootstrap_js.js +1 -1
- package/dist/{demo/src/index.html → index.html} +1 -1
- package/dist/stylesheet/sr-styleguide.css +6 -6
- package/package.json +1 -2
- package/src/components/app-containers/SrModule/SrModule.scss +1 -1
- package/src/components/app-containers/SrModule/SrModule.vue +19 -8
- package/src/components/app-containers/SrPage/SrPage.vue +19 -16
- package/src/components/app-containers/scope.js +12 -0
- package/src/components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.scss +47 -0
- package/src/components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.vue +45 -0
- package/src/components/breadcrumbs/tests/SrBreadcrumbs.spec.js +109 -0
- package/src/components/form/SrFormDivider/SrFormDivider.scss +4 -0
- package/src/components/form/SrFormDivider/SrFormDivider.vue +9 -0
- package/src/components/form/SrFormRow/SrFormRow.scss +21 -21
- package/src/components/form/SrFormRow/SrFormRow.vue +3 -2
- package/src/components/inputs/SrDatePicker/SrDatePicker.vue +4 -1
- package/src/components/inputs/SrSelect/SrSelect.vue +8 -1
- package/src/components/inputs/SrSwitch/SrSwitch.vue +0 -1
- package/src/components/inputs/SrTextarea/SrTextarea.vue +20 -0
- package/src/components/layouts/slim/SrSlimHeading/SrSlimHeading.scss +9 -0
- package/src/components/layouts/slim/SrSlimHeading/SrSlimHeading.vue +2 -2
- package/src/components/layouts/slim/SrSlimLayout/SrSlimLayout.vue +8 -0
- package/src/components/layouts/standard/SrStandardLayout/SrStandardLayout.scss +4 -0
- package/src/components/layouts/standard/SrStandardLayout/SrStandardLayout.vue +21 -0
- package/src/components/progress-indicators/SrFinitePreloader/SrFinitePreloader.vue +26 -0
- package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.scss +3 -0
- package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.vue +29 -0
- package/src/components/progress-indicators/SrInfinitePreloader/SrInfinitePreloader.vue +22 -0
- package/src/components/tables/SrSimpleTableFilterTd/SrSimpleTableFilterTd.vue +27 -0
- package/src/components/tabs/SrTabsItems/SrTabsItems.vue +1 -1
- package/src/plugins/component-library/index.js +6 -4
- package/src/plugins/component-library/library/SrBreadcrumbs.js +7 -0
- package/src/plugins/component-library/library/{SrFormRow.js → SrForm.js} +2 -0
- package/src/plugins/component-library/library/SrInputs.js +2 -0
- package/src/plugins/component-library/library/SrLayouts.js +4 -0
- package/src/plugins/component-library/library/SrProgressIndicators.js +17 -0
- package/src/plugins/component-library/library/SrTables.js +2 -1
- package/src/plugins/vuetify/preset/icons/index.js +4 -0
- package/src/plugins/vuetify/preset/locale/sr-en.js +2 -1
- package/src/plugins/vuetify/preset/locale/sr-hu.js +2 -1
- package/src/plugins/vuetify/preset/style/scss/components/_table.scss +7 -1
- package/src/plugins/vuetify/preset/variables.scss +2 -2
- package/src/plugins/component-library/library/SrMilestoneIndicators.js +0 -11
- /package/src/components/{milestone-indicators → progress-indicators}/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.scss +0 -0
- /package/src/components/{milestone-indicators → progress-indicators}/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.vue +0 -0
- /package/src/components/{milestone-indicators → progress-indicators}/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.scss +0 -0
- /package/src/components/{milestone-indicators → progress-indicators}/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.vue +0 -0
package/README.md
CHANGED
|
@@ -1,35 +1,165 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @shoprenter/sr-styleguide
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This package is a UI component library for the Shoprenter admin interface.
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
- **Npm**: 10
|
|
5
|
+
It provides a pre-configured Vuetify 2 instance and reusable Vuetify-based components designed to ensure a consistent look and feel across the Shoprenter admin interface.
|
|
7
6
|
|
|
7
|
+
## Features
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
- Pre-configured Vuetify 2.6.14 setup
|
|
10
|
+
- Vue 2 compatible
|
|
11
|
+
- Ready-to-use design components
|
|
12
|
+
- Custom SCSS/CSS design
|
|
13
|
+
- Easy integration with remote applications
|
|
14
|
+
- Supports full-page apps and embeddable modules
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
## Getting Started
|
|
12
17
|
|
|
13
|
-
|
|
14
|
-
|
|
18
|
+
### Requirements
|
|
19
|
+
|
|
20
|
+
- **Node.js:** 14.x (22.x for developing the styleguide itself)
|
|
21
|
+
- **npm:** 10.x
|
|
22
|
+
- **Vue:** 2.x
|
|
23
|
+
- **Vuetify:** 2.6.14 (comes bundled with the package)
|
|
24
|
+
|
|
25
|
+
### Installation
|
|
26
|
+
|
|
27
|
+
Install the styleguide package via npm:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install @shoprenter/sr-styleguide
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Usage
|
|
34
|
+
|
|
35
|
+
To use the styleguide components and styles in your Vue application:
|
|
36
|
+
|
|
37
|
+
1. **Import the component library and register it:**
|
|
38
|
+
|
|
39
|
+
```js
|
|
15
40
|
import Vue from 'vue'
|
|
16
41
|
import { SrStyleguideComponents } from '@shoprenter/sr-styleguide'
|
|
17
42
|
|
|
18
43
|
Vue.use(SrStyleguideComponents)
|
|
19
44
|
```
|
|
20
45
|
|
|
21
|
-
|
|
22
|
-
|
|
46
|
+
2. **Initialize your Vue app with the pre-configured Vuetify instance:**
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
import Vue from 'vue'
|
|
50
|
+
import { SrStyleguide } from '@shoprenter/sr-styleguide'
|
|
51
|
+
import App from './App.vue'
|
|
52
|
+
|
|
53
|
+
new Vue({
|
|
54
|
+
vuetify: SrStyleguide,
|
|
55
|
+
render: h => h(App)
|
|
56
|
+
}).$mount('#app')
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
3. **Load the styleguide stylesheet:**
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import '@shoprenter/sr-styleguide/dist/stylesheet/sr-styleguide.css'
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Example: App Integration
|
|
66
|
+
|
|
67
|
+
Here is a simple example of how to use the styleguide in your Vue application:
|
|
68
|
+
|
|
69
|
+
```js
|
|
23
70
|
import Vue from 'vue'
|
|
24
|
-
import {SrStyleguide} from '@shoprenter/sr-styleguide'
|
|
71
|
+
import { SrStyleguide, SrStyleguideComponents } from '@shoprenter/sr-styleguide'
|
|
72
|
+
import App from './App.vue'
|
|
73
|
+
|
|
74
|
+
import '@shoprenter/sr-styleguide/dist/stylesheet/sr-styleguide.css'
|
|
75
|
+
|
|
76
|
+
Vue.use(SrStyleguideComponents)
|
|
25
77
|
|
|
26
|
-
|
|
78
|
+
export default function createApp() {
|
|
79
|
+
return new Vue({
|
|
27
80
|
vuetify: SrStyleguide,
|
|
28
81
|
render: h => h(App)
|
|
29
|
-
})
|
|
82
|
+
})
|
|
83
|
+
}
|
|
30
84
|
```
|
|
31
|
-
- be kell töltenünk az oldalra a Styleguide stílusfájlt
|
|
32
85
|
|
|
33
|
-
|
|
34
|
-
|
|
86
|
+
## Demo
|
|
87
|
+
|
|
88
|
+
The latest version's component & style demos and documentation can be viewed here:
|
|
89
|
+
|
|
90
|
+
https://styleguide.shoprenter.hu/
|
|
91
|
+
|
|
92
|
+
OR
|
|
93
|
+
|
|
94
|
+
You can find the detailed documentation and component demos for the given version inside the package itself:
|
|
95
|
+
|
|
35
96
|
```
|
|
97
|
+
/dist/index.html
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Open this file in a browser to explore the available components and their usage.
|
|
101
|
+
|
|
102
|
+
## Changelog
|
|
103
|
+
|
|
104
|
+
### [1.3.0] - 2025-05-13
|
|
105
|
+
#### Added
|
|
106
|
+
- Preloader components
|
|
107
|
+
- Finite progress bar component
|
|
108
|
+
|
|
109
|
+
#### Changed
|
|
110
|
+
- Demo page index.html file moved to the root of the dist folder
|
|
111
|
+
|
|
112
|
+
### [1.2.0] - 2025-04-17
|
|
113
|
+
#### Added
|
|
114
|
+
- SrStandardLayout component
|
|
115
|
+
- Breadcrumbs from route parameters to layout containers
|
|
116
|
+
- Demo list page
|
|
117
|
+
- Language-aware default placeholder for SrSelect component
|
|
118
|
+
- SrSimpleTableFilterTd component to simplify the creation of filterable table columns
|
|
119
|
+
- Demo form page
|
|
120
|
+
- SrTextarea component
|
|
121
|
+
- SrFormDivider component
|
|
122
|
+
- Getting Started page
|
|
123
|
+
|
|
124
|
+
#### Fixed
|
|
125
|
+
- Resolved an issue where global `html` tag styles were not being applied correctly.
|
|
126
|
+
- Demo page menu is now scrollable and condensable
|
|
127
|
+
- Help button & breadcrumb container no longer takes up space when empty
|
|
128
|
+
- Style rule scope now includes package version
|
|
129
|
+
- SrEditIcon component now contains the correct icon
|
|
130
|
+
- SrFormRow now has properly applied bottom margin
|
|
131
|
+
- SrDatePicker is now clearable just like the other input components
|
|
132
|
+
- SrSwitch is able to display hint and validation errors and consequentially has the same layout as the other input components
|
|
133
|
+
- SrDatePicker now displays in localized language and format
|
|
134
|
+
- If an app-container component gets an id attribute, it applies properly and no longer breaks styling
|
|
135
|
+
|
|
136
|
+
#### Changed
|
|
137
|
+
- Updated margins for the SrHeading component
|
|
138
|
+
- Style adjustments to the SrSimpleTable component
|
|
139
|
+
- SrHeading now adds space between the header buttons
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
### [1.1.0] - 2025-04-09
|
|
143
|
+
#### Added
|
|
144
|
+
- Added new SrSimpleMultiCheckbox component for cases when only a straightforward listing of selectable options is required.
|
|
145
|
+
|
|
146
|
+
#### Fixed
|
|
147
|
+
- Changed the suboptimal ordering of some style rules in the stylesheet
|
|
148
|
+
- Removed unused style rules to make the stylesheet's size smaller
|
|
149
|
+
- Fixed SrCheckbox component to handle v-model correctly
|
|
150
|
+
- Fixed SrRadioGroup component to handle v-model correctly
|
|
151
|
+
|
|
152
|
+
#### Changed
|
|
153
|
+
- Updated the SrMultiCheckbox demo example to clearly demonstrate that individual checkbox options can implement custom behaviors, such as forced selection, disabled state, or triggering custom events.
|
|
154
|
+
- Vuetify dependency got constrained to version 2.6.14 specifically. Previously it defaulted to the latest package of version 2.
|
|
155
|
+
|
|
156
|
+
### [1.0.0] - 2025-04-04
|
|
157
|
+
#### Initial release
|
|
158
|
+
- Basic components and package functionality
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
## Contribution
|
|
162
|
+
|
|
163
|
+
This package is maintained by the Shoprenter team.
|
|
164
|
+
|
|
165
|
+
---
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
#sr-styleguide .admin-
|
|
2
|
-
#sr-styleguide
|
|
3
|
-
#sr-styleguide .admin-breadcrumb-container{display:flex;justify-content:space-between;align-items:center}@media(max-width: 599.98px){#sr-styleguide .admin-breadcrumb-container{display:none}}@media(max-width: 599.98px){#sr-styleguide .admin-page-header{margin-left:20px;margin-right:20px}}#sr-styleguide .admin-page-header .admin-page-header-title{display:flex;background:rgba(0,0,0,0);flex-direction:column;margin-bottom:20px}@media(min-width: 600px){#sr-styleguide .admin-page-header .admin-page-header-title{flex-direction:row;justify-content:space-between;margin-top:50px}}#sr-styleguide .admin-page-header .admin-page-header-title h1{margin:0;color:var(--sr-black)}#sr-styleguide .admin-page-header .admin-page-header-title h1 svg{display:none}@media screen and (min-width: 520px){#sr-styleguide .admin-page-header.sticky-head-active{position:fixed;width:calc(100% - var(--header-height));margin:0;top:0;display:flex;left:var(--header-height);z-index:201 !important;height:var(--header-height);background-color:var(--sr-black);padding:0 var(--container-padding);align-items:center;color:#fff}#sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-title{margin:0;width:100%}#sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-title h1{color:#fff;font-size:18px}#sr-styleguide .admin-page-header.sticky-head-active .admin-breadcrumb-container, #sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-head, #sr-styleguide .admin-page-header.sticky-head-active .admin-page-header-foot{display:none}}@media(min-width: 960px){#sr-styleguide .admin-page-header.sticky-head-active{width:calc(100% - var(--sidebar-width));left:var(--sidebar-width)}}@media screen and (min-width: 1700px){#sr-styleguide .admin-page-header.sticky-head-active{padding:0 20px}}#sr-styleguide .admin-page-header-content{display:flex;align-items:center}@media(max-width: 959.98px){#sr-styleguide .admin-page-header-content{flex-wrap:wrap}#sr-styleguide .admin-page-header-content .v-toolbar__items{width:100%;margin-top:10px}#sr-styleguide .admin-page-header-content .v-toolbar__content{height:auto !important}}
|
|
4
|
-
#sr-styleguide .admin-breadcrumbs{padding:0}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item{transition:none;color:var(--sr-link-grey) !important}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item:hover{color:var(--sr-dark-grey) !important}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__item .v-icon{margin-right:5px;color:inherit}#sr-styleguide .admin-breadcrumbs .v-breadcrumbs__divider{padding:0 5px}#sr-styleguide .admin-breadcrumbs li:last-child{font-weight:500}
|
|
5
|
-
#sr-styleguide .sg-iconset{--icon-size: 50px;display:grid;grid-template-columns:1fr;grid-gap:20px}#sr-styleguide .sg-icon-container{height:var(--icon-size);width:var(--icon-size);background-color:var(--sr-light-grey);display:flex;justify-content:center;align-items:center;flex-shrink:0}#sr-styleguide .sg-iconset>div{display:flex;align-items:center;gap:20px}#sr-styleguide sr-code-block{flex-grow:1;min-width:300px}
|
|
1
|
+
#sr-styleguide-1-3-0 .admin-style-guide-layout{display:grid;grid-gap:40px;grid-template-columns:1fr}@media only screen and (min-width: 600px){#sr-styleguide-1-3-0 .admin-style-guide-layout{grid-template-columns:1fr}}@media only screen and (min-width: 960px){#sr-styleguide-1-3-0 .admin-style-guide-layout{grid-template-columns:250px 1fr}}@media only screen and (min-width: 1264px){#sr-styleguide-1-3-0 .admin-style-guide-layout{grid-template-columns:300px 1fr}}#sr-styleguide-1-3-0 .sg-page-header{padding:30px 0 60px 0}#sr-styleguide-1-3-0 .sg-section{margin-top:60px;margin-bottom:40px}#sr-styleguide-1-3-0 .sg-section-header{border-left:5px solid var(--sr-black);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase}#sr-styleguide-1-3-0 .sg-subsection{width:100%;margin-top:50px;margin-bottom:50px}#sr-styleguide-1-3-0 .sg-subsection h2{margin-bottom:20px;font-weight:500;position:relative;padding-left:40px;text-transform:uppercase}#sr-styleguide-1-3-0 .sg-subsection h2:before{content:"";display:block;width:30px;height:4px;background:var(--sr-black);position:absolute;left:0;top:calc(50% - 2px)}#sr-styleguide-1-3-0 .sg-subsection h4{font-weight:400;border-left:3px solid var(--v-secondary-base);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase;margin-bottom:20px}#sr-styleguide-1-3-0 .sg-block{margin-top:50px}#sr-styleguide-1-3-0 .sg-button-list{display:flex;justify-content:space-between}#sr-styleguide-1-3-0 .sg-button-type{flex:0 0 20%}
|
|
2
|
+
#sr-styleguide-1-3-0 .sg-iconset{--icon-size: 50px;display:grid;grid-template-columns:1fr;grid-gap:20px}#sr-styleguide-1-3-0 .sg-icon-container{height:var(--icon-size);width:var(--icon-size);background-color:var(--sr-light-grey);display:flex;justify-content:center;align-items:center;flex-shrink:0}#sr-styleguide-1-3-0 .sg-iconset>div{display:flex;align-items:center;gap:20px}#sr-styleguide-1-3-0 sr-code-block{flex-grow:1;min-width:300px}
|
|
6
3
|
/**
|
|
7
4
|
* prism.js default theme for JavaScript, CSS and HTML
|
|
8
5
|
* Based on dabblet (http://dabblet.com)
|
|
9
6
|
* @author Lea Verou
|
|
10
7
|
*/
|
|
11
8
|
|
|
12
|
-
#sr-styleguide code[class*="language-"], #sr-styleguide pre[class*="language-"] {
|
|
9
|
+
#sr-styleguide-1-3-0 code[class*="language-"], #sr-styleguide-1-3-0 pre[class*="language-"] {
|
|
13
10
|
color: black;
|
|
14
11
|
background: none;
|
|
15
12
|
text-shadow: 0 1px white;
|
|
@@ -32,90 +29,91 @@
|
|
|
32
29
|
hyphens: none;
|
|
33
30
|
}
|
|
34
31
|
|
|
35
|
-
#sr-styleguide pre[class*="language-"]::-moz-selection, #sr-styleguide pre[class*="language-"] ::-moz-selection, #sr-styleguide code[class*="language-"]::-moz-selection, #sr-styleguide code[class*="language-"] ::-moz-selection {
|
|
32
|
+
#sr-styleguide-1-3-0 pre[class*="language-"]::-moz-selection, #sr-styleguide-1-3-0 pre[class*="language-"] ::-moz-selection, #sr-styleguide-1-3-0 code[class*="language-"]::-moz-selection, #sr-styleguide-1-3-0 code[class*="language-"] ::-moz-selection {
|
|
36
33
|
text-shadow: none;
|
|
37
34
|
background: #b3d4fc;
|
|
38
35
|
}
|
|
39
36
|
|
|
40
|
-
#sr-styleguide pre[class*="language-"]::selection, #sr-styleguide pre[class*="language-"] ::selection, #sr-styleguide code[class*="language-"]::selection, #sr-styleguide code[class*="language-"] ::selection {
|
|
37
|
+
#sr-styleguide-1-3-0 pre[class*="language-"]::selection, #sr-styleguide-1-3-0 pre[class*="language-"] ::selection, #sr-styleguide-1-3-0 code[class*="language-"]::selection, #sr-styleguide-1-3-0 code[class*="language-"] ::selection {
|
|
41
38
|
text-shadow: none;
|
|
42
39
|
background: #b3d4fc;
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
@media print {
|
|
46
|
-
#sr-styleguide code[class*="language-"], #sr-styleguide pre[class*="language-"] {
|
|
43
|
+
#sr-styleguide-1-3-0 code[class*="language-"], #sr-styleguide-1-3-0 pre[class*="language-"] {
|
|
47
44
|
text-shadow: none;
|
|
48
45
|
}
|
|
49
46
|
}
|
|
50
47
|
|
|
51
48
|
/* Code blocks */
|
|
52
|
-
#sr-styleguide pre[class*="language-"] {
|
|
49
|
+
#sr-styleguide-1-3-0 pre[class*="language-"] {
|
|
53
50
|
padding: 1em;
|
|
54
51
|
margin: .5em 0;
|
|
55
52
|
overflow: auto;
|
|
56
53
|
}
|
|
57
54
|
|
|
58
|
-
#sr-styleguide :not(pre) > code[class*="language-"], #sr-styleguide pre[class*="language-"] {
|
|
55
|
+
#sr-styleguide-1-3-0 :not(pre) > code[class*="language-"], #sr-styleguide-1-3-0 pre[class*="language-"] {
|
|
59
56
|
background: #f5f2f0;
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
/* Inline code */
|
|
63
|
-
#sr-styleguide :not(pre) > code[class*="language-"] {
|
|
60
|
+
#sr-styleguide-1-3-0 :not(pre) > code[class*="language-"] {
|
|
64
61
|
padding: .1em;
|
|
65
62
|
border-radius: .3em;
|
|
66
63
|
white-space: normal;
|
|
67
64
|
}
|
|
68
65
|
|
|
69
|
-
#sr-styleguide .token.comment, #sr-styleguide .token.prolog, #sr-styleguide .token.doctype, #sr-styleguide .token.cdata {
|
|
66
|
+
#sr-styleguide-1-3-0 .token.comment, #sr-styleguide-1-3-0 .token.prolog, #sr-styleguide-1-3-0 .token.doctype, #sr-styleguide-1-3-0 .token.cdata {
|
|
70
67
|
color: slategray;
|
|
71
68
|
}
|
|
72
69
|
|
|
73
|
-
#sr-styleguide .token.punctuation {
|
|
70
|
+
#sr-styleguide-1-3-0 .token.punctuation {
|
|
74
71
|
color: #999;
|
|
75
72
|
}
|
|
76
73
|
|
|
77
|
-
#sr-styleguide .token.namespace {
|
|
74
|
+
#sr-styleguide-1-3-0 .token.namespace {
|
|
78
75
|
opacity: .7;
|
|
79
76
|
}
|
|
80
77
|
|
|
81
|
-
#sr-styleguide .token.property, #sr-styleguide .token.tag, #sr-styleguide .token.boolean, #sr-styleguide .token.number, #sr-styleguide .token.constant, #sr-styleguide .token.symbol, #sr-styleguide .token.deleted {
|
|
78
|
+
#sr-styleguide-1-3-0 .token.property, #sr-styleguide-1-3-0 .token.tag, #sr-styleguide-1-3-0 .token.boolean, #sr-styleguide-1-3-0 .token.number, #sr-styleguide-1-3-0 .token.constant, #sr-styleguide-1-3-0 .token.symbol, #sr-styleguide-1-3-0 .token.deleted {
|
|
82
79
|
color: #905;
|
|
83
80
|
}
|
|
84
81
|
|
|
85
|
-
#sr-styleguide .token.selector, #sr-styleguide .token.attr-name, #sr-styleguide .token.string, #sr-styleguide .token.char, #sr-styleguide .token.builtin, #sr-styleguide .token.inserted {
|
|
82
|
+
#sr-styleguide-1-3-0 .token.selector, #sr-styleguide-1-3-0 .token.attr-name, #sr-styleguide-1-3-0 .token.string, #sr-styleguide-1-3-0 .token.char, #sr-styleguide-1-3-0 .token.builtin, #sr-styleguide-1-3-0 .token.inserted {
|
|
86
83
|
color: #690;
|
|
87
84
|
}
|
|
88
85
|
|
|
89
|
-
#sr-styleguide .token.operator, #sr-styleguide .token.entity, #sr-styleguide .token.url, #sr-styleguide .language-css .token.string, #sr-styleguide .style .token.string {
|
|
86
|
+
#sr-styleguide-1-3-0 .token.operator, #sr-styleguide-1-3-0 .token.entity, #sr-styleguide-1-3-0 .token.url, #sr-styleguide-1-3-0 .language-css .token.string, #sr-styleguide-1-3-0 .style .token.string {
|
|
90
87
|
color: #9a6e3a;
|
|
91
88
|
/* This background color was intended by the author of this theme. */
|
|
92
89
|
background: hsla(0, 0%, 100%, .5);
|
|
93
90
|
}
|
|
94
91
|
|
|
95
|
-
#sr-styleguide .token.atrule, #sr-styleguide .token.attr-value, #sr-styleguide .token.keyword {
|
|
92
|
+
#sr-styleguide-1-3-0 .token.atrule, #sr-styleguide-1-3-0 .token.attr-value, #sr-styleguide-1-3-0 .token.keyword {
|
|
96
93
|
color: #07a;
|
|
97
94
|
}
|
|
98
95
|
|
|
99
|
-
#sr-styleguide .token.function, #sr-styleguide .token.class-name {
|
|
96
|
+
#sr-styleguide-1-3-0 .token.function, #sr-styleguide-1-3-0 .token.class-name {
|
|
100
97
|
color: #DD4A68;
|
|
101
98
|
}
|
|
102
99
|
|
|
103
|
-
#sr-styleguide .token.regex, #sr-styleguide .token.important, #sr-styleguide .token.variable {
|
|
100
|
+
#sr-styleguide-1-3-0 .token.regex, #sr-styleguide-1-3-0 .token.important, #sr-styleguide-1-3-0 .token.variable {
|
|
104
101
|
color: #e90;
|
|
105
102
|
}
|
|
106
103
|
|
|
107
|
-
#sr-styleguide .token.important, #sr-styleguide .token.bold {
|
|
104
|
+
#sr-styleguide-1-3-0 .token.important, #sr-styleguide-1-3-0 .token.bold {
|
|
108
105
|
font-weight: bold;
|
|
109
106
|
}
|
|
110
|
-
#sr-styleguide .token.italic {
|
|
107
|
+
#sr-styleguide-1-3-0 .token.italic {
|
|
111
108
|
font-style: italic;
|
|
112
109
|
}
|
|
113
110
|
|
|
114
|
-
#sr-styleguide .token.entity {
|
|
111
|
+
#sr-styleguide-1-3-0 .token.entity {
|
|
115
112
|
cursor: help;
|
|
116
113
|
}
|
|
117
114
|
|
|
118
|
-
#sr-styleguide .sr-code-block .code-block{position:relative;background:rgba(0,0,0,0);padding:0;border-radius:0;color:#333;font-family:monospace;overflow-x:auto;overflow-y:auto;width:500px;font-size:14px;line-height:1.4}#sr-styleguide .sr-code-block .code-block pre{background:var(--sr-light-grey) !important;border:none !important;border-radius:5px;padding:12px 40px 12px 12px;font-size:14px;line-height:1.5;font-weight:bold}#sr-styleguide .sr-code-block .code-block code{background:none !important;border:none !important;font-weight:bold}#sr-styleguide .sr-code-block.code-container{flex-grow:1;min-width:300px;display:flex;align-items:center}#sr-styleguide .sr-code-block .copied-text{background:var(--sr-primary);color:var(--sr-white);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;opacity:1;z-index:10;transition:opacity .3s,transform .3s;transform:translateY(0);font-family:"Roboto",sans-serif}#sr-styleguide .fade-enter-active, #sr-styleguide .fade-leave-active{transition:opacity .3s,transform .3s}#sr-styleguide .fade-enter, #sr-styleguide .fade-leave-to{opacity:0;transform:translateY(-5px)}
|
|
119
|
-
#sr-styleguide .style-
|
|
120
|
-
#sr-styleguide
|
|
121
|
-
#sr-styleguide #
|
|
115
|
+
#sr-styleguide-1-3-0 .sr-code-block .code-block{position:relative;background:rgba(0,0,0,0);padding:0;border-radius:0;color:#333;font-family:monospace;overflow-x:auto;overflow-y:auto;width:500px;font-size:14px;line-height:1.4}#sr-styleguide-1-3-0 .sr-code-block .code-block pre{background:var(--sr-light-grey) !important;border:none !important;border-radius:5px;padding:12px 40px 12px 12px;font-size:14px;line-height:1.5;font-weight:bold}#sr-styleguide-1-3-0 .sr-code-block .code-block code{background:none !important;border:none !important;font-weight:bold}#sr-styleguide-1-3-0 .sr-code-block.code-container{flex-grow:1;min-width:300px;display:flex;align-items:center}#sr-styleguide-1-3-0 .sr-code-block .copied-text{background:var(--sr-primary);color:var(--sr-white);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;opacity:1;z-index:10;transition:opacity .3s,transform .3s;transform:translateY(0);font-family:"Roboto",sans-serif}#sr-styleguide-1-3-0 .fade-enter-active, #sr-styleguide-1-3-0 .fade-leave-active{transition:opacity .3s,transform .3s}#sr-styleguide-1-3-0 .fade-enter, #sr-styleguide-1-3-0 .fade-leave-to{opacity:0;transform:translateY(-5px)}
|
|
116
|
+
#sr-styleguide-1-3-0 .admin-style-guide__menu{position:sticky;top:60px;height:100vh;max-height:500px;overflow-y:auto}#sr-styleguide-1-3-0 .clickable-menu-item{cursor:pointer;transition:background-color .3s ease}#sr-styleguide-1-3-0 .clickable-menu-item:hover{background-color:rgba(0,0,0,.04)}
|
|
117
|
+
#sr-styleguide-1-3-0 .style-guide-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}#sr-styleguide-1-3-0 .style-guide-row .element-container{width:200px;min-width:200px;display:flex;justify-content:flex-start}@media(max-width: 768px){#sr-styleguide-1-3-0 .style-guide-row .style-guide-row{flex-direction:column}#sr-styleguide-1-3-0 .style-guide-row .element-container{width:100%}}
|
|
118
|
+
#sr-styleguide-1-3-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-3-0 #sr-style-guide-layouts #slim-layout .sr-code-block{margin:0 auto 48px auto;padding:0 30px}@media(min-width: 600px){#sr-styleguide-1-3-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-3-0 #sr-style-guide-layouts #slim-layout .sr-code-block{max-width:560px}}@media(min-width: 960px){#sr-styleguide-1-3-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-3-0 #sr-style-guide-layouts #slim-layout .sr-code-block{max-width:760px}}#sr-styleguide-1-3-0 #sr-style-guide-layouts #standard-layout .sr-code-block{margin:0 auto 70px auto;padding:0 30px}
|
|
119
|
+
#sr-styleguide-1-3-0 #app-containers .sr-page, #sr-styleguide-1-3-0 .sr-module{border:1px solid var(--sr-dark-grey)}
|