diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css index 263dde6..429706f 100644 --- a/src/assets/css/src/2.blocks.design-to-light.css +++ b/src/assets/css/src/2.blocks.design-to-light.css @@ -37,19 +37,44 @@ left: .5rem; top: .5rem; } -#dtl-btn[data-grade]::after { +#dtl-btn[data-grade]::after, +#dtl-btn .new { position: absolute; right: .25rem; top: .25rem; width: 2rem; height: 2rem; + user-select: none; + border-radius: var(--rounded-sm); +} +#dtl-btn[data-new][data-grade]::after { + display: none; +} +#dtl-btn .new { + color: var(--color-white); + background: var(--color-primary-50); + font-weight: 700; + font-size: var(--text-xs); + padding: .5rem 0; + z-index: 10; +} +#dtl-btn .new::after { + content: ""; + width: .5rem; + height: .5rem; + border: 2px solid var(--color-black); + border-radius: 50%; + background: var(--color-primary); + display: block; + position: absolute; + top: -.333rem; + right: -.333rem; } /* Grades */ [data-grade]::after { content: attr(data-grade); color: transparent; - user-select: none; border-radius: var(--rounded-sm); background-repeat: no-repeat; background-position: center; diff --git a/src/components/design-to-light/DTLButton.vue b/src/components/design-to-light/DTLButton.vue index 19a4e8f..2d3dd35 100644 --- a/src/components/design-to-light/DTLButton.vue +++ b/src/components/design-to-light/DTLButton.vue @@ -1,6 +1,7 @@