@policystudio/policy-studio-ui-vue 1.1.39 → 1.1.40

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.
Files changed (4) hide show
  1. package/dist/css/psui_styles.css +17 -14
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsDateCardInfo.scss +6 -10
  4. package/src/components/badges-and-tags/PsDateCardInfo.vue +6 -11
package/dist/css/psui_styles.css CHANGED
@@ -4213,30 +4213,33 @@ video {
4213
4213
  .psui-el-date-card {
4214
4214
  display: flex;
4215
4215
  flex-direction: column;
4216
- align-items: center;
4217
- padding-top: 0.5rem;
4218
- padding-bottom: 0.5rem;
4219
4216
  --bg-opacity: 1;
4220
4217
  background-color: #318FAC;
4221
4218
  background-color: rgba(49, 143, 172, var(--bg-opacity));
4222
- color: #ffffff ;
4219
+ --text-opacity: 1;
4220
+ color: #E0EFF6;
4221
+ color: rgba(224, 239, 246, var(--text-opacity));
4223
4222
  font-size: 14px;
4224
4223
  line-height: 130%;
4225
- width: 2.5rem;
4226
- border-radius: 3px;
4224
+ font-weight: 700;
4225
+ text-align: center;
4226
+ overflow: hidden;
4227
+ border-radius: 0.25rem;
4228
+ width: 61px;
4227
4229
  }
4228
4230
 
4229
- .psui-el-date-card-month {
4230
- margin-bottom: 0.25rem;
4231
- }
4232
-
4233
- .psui-el-date-card-day {
4234
- font-size: 18px;
4235
- font-weight: 700;
4231
+ .psui-el-date-card-month-day,
4232
+ .psui-el-date-card-year {
4233
+ padding-top: 0.25rem;
4234
+ padding-bottom: 0.25rem;
4236
4235
  }
4237
4236
 
4238
4237
  .psui-el-date-card-year {
4239
- font-size: 10px;
4238
+ --bg-opacity: 1;
4239
+ background-color: #64B5CE;
4240
+ background-color: rgba(100, 181, 206, var(--bg-opacity));
4241
+ width: 100%;
4242
+ font-weight: 700;
4240
4243
  }
4241
4244
 
4242
4245
  .psui-el-tag-scope {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.1.39",
3
+ "version": "1.1.40",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
package/src/assets/scss/components/PsDateCardInfo.scss CHANGED
@@ -1,19 +1,15 @@
1
1
  @layer components {
2
2
  .psui-el-date-card {
3
- @apply psui-flex psui-flex-col psui-items-center psui-py-2 psui-bg-blue-60 psui-text-white psui-text-small psui-w-10;
4
- border-radius: 3px;
3
+ @apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-small psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
4
+ width: 61px;
5
5
 
6
- &-month {
7
- @apply psui-mb-1;
8
- }
9
-
10
- &-day {
11
- font-size: 18px;
12
- @apply psui-font-bold;
6
+ &-month-day,
7
+ &-year {
8
+ @apply psui-py-1;
13
9
  }
14
10
 
15
11
  &-year {
16
- font-size: 10px;
12
+ @apply psui-bg-blue-50 psui-w-full psui-font-bold;
17
13
  }
18
14
  }
19
15
  }
package/src/components/badges-and-tags/PsDateCardInfo.vue CHANGED
@@ -1,13 +1,10 @@
1
1
  <template>
2
2
  <div class="psui-el-date-card">
3
- <span class="psui-el-date-card-month">
4
- {{getMonthFromDate}}
5
- </span>
6
- <span class="psui-el-date-card-day">
7
- {{getDayFromDate}}
3
+ <span class="psui-el-date-card-month-day">
4
+ {{ getMonthAndDayFromDate }}
8
5
  </span>
9
6
  <span class="psui-el-date-card-year">
10
- {{getYearFromDate}}
7
+ {{ getYearFromDate }}
11
8
  </span>
12
9
  </div>
13
10
  </template>
@@ -22,11 +19,9 @@ export default {
22
19
  }
23
20
  },
24
21
  computed: {
25
- getMonthFromDate() {
26
- return (new Date(this.date))?.toLocaleString('default', { month: 'short' }).replace('.', '')
27
- },
28
- getDayFromDate() {
29
- return (new Date(this.date))?.toLocaleString('default', { day: '2-digit' })
22
+ getMonthAndDayFromDate() {
23
+ const options = { month: 'short', day: '2-digit' }
24
+ return (new Date(this.date))?.toLocaleString('default', options).replace('.', '')
30
25
  },
31
26
  getYearFromDate() {
32
27
  return (new Date(this.date))?.toLocaleString('default', { year: 'numeric' })