@aquera/nile-elements 0.0.7 → 0.0.8

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.
@@ -70,18 +70,24 @@ export const styles = css `
70
70
  .dialog__header {
71
71
  flex: 0 0 auto;
72
72
  display: flex;
73
- padding: 24px 24px 24px 24px;
74
- background-color: #FAFAFA;
73
+ padding: 12px 24px;
74
+ background-color: #fafafa;
75
75
  border-radius: 4px 4px 0 0;
76
-
76
+ border: 1px solid #e5e9eb;
77
77
  }
78
78
 
79
79
  .dialog__title {
80
+ display: flex;
80
81
  flex: 1 1 auto;
81
- font: inherit;
82
- font-size: 1.25rem;
83
- line-height: 1.4;
82
+ align-items: center;
84
83
  margin: 0;
84
+ color: #000;
85
+ font-family: Colfax-regular;
86
+ font-size: 16px;
87
+ font-style: normal;
88
+ font-weight: 400;
89
+ line-height: 16px;
90
+ letter-spacing: 0.2px;
85
91
  }
86
92
 
87
93
  .dialog__header-actions {
@@ -106,14 +112,17 @@ export const styles = css `
106
112
  padding: 1.25rem;
107
113
  overflow: auto;
108
114
  -webkit-overflow-scrolling: touch;
115
+ border: 1px solid #e5e9eb;
116
+ border-radius: 4px 4px 0px 0px;
109
117
  }
110
118
 
111
119
  .dialog__footer {
112
120
  flex: 0 0 auto;
113
121
  text-align: right;
114
122
  padding: 12px 24px;
115
- background-color: #FAFAFA;
123
+ background-color: #fafafa;
116
124
  border-radius: 0 0 4px 4px;
125
+ border: 1px solid #e5e9eb;
117
126
  }
118
127
 
119
128
  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
@@ -1 +1 @@
1
- {"version":3,"file":"nile-dialog.css.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 24px 24px 24px 24px;\n background-color: #FAFAFA;\n border-radius: 4px 4px 0 0;\n\n }\n\n .dialog__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: 1.25rem;\n line-height: 1.4;\n margin: 0;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #FAFAFA;\n border-radius: 0 0 4px 4px;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-dialog.css.js","sourceRoot":"","sources":["../../../src/nile-dialog/nile-dialog.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Modal CSS\n */\nexport const styles = css`\n :host {\n --width: 31rem;\n --header-spacing: 1.25rem;\n --body-spacing: 1.25rem;\n --footer-spacing: 1.25rem;\n\n display: contents;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 800;\n }\n\n .dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - 2.25rem);\n max-height: calc(100% - 2.25rem);\n background-color: hsl(0, 0%, 100%);\n border-radius: 4px;\n box-shadow: 0 4px 16px rgb(0 0 0 / 24%);\n }\n\n .dialog__panel:focus {\n outline: none;\n }\n\n @media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n }\n\n .dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n }\n\n .dialog__header {\n flex: 0 0 auto;\n display: flex;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 4px 4px 0 0;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__title {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n margin: 0;\n color: #000;\n font-family: Colfax-regular;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .dialog__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: end;\n gap: 24px;\n }\n\n .dialog__header-actions nile-icon-button,\n .dialog__header-actions ::slotted(nile-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1rem;\n }\n\n .dialog__body {\n flex: 1 1 auto;\n display: block;\n padding: 1.25rem;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border: 1px solid #e5e9eb;\n border-radius: 4px 4px 0px 0px;\n }\n\n .dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: 12px 24px;\n background-color: #fafafa;\n border-radius: 0 0 4px 4px;\n border: 1px solid #e5e9eb;\n }\n\n .dialog__footer ::slotted(nile-button:not(:first-of-type)) {\n margin-inline-start: 0.5rem;\n }\n\n .dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n }\n\n .dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: hsl(0 0% 0% / 43%);\n }\n\n @media (forced-colors: active) {\n .dialog__panel {\n border: solid 1px hsl(240, 5.9%, 11%);\n }\n }\n`;\n\nexport default [styles];\n"]}