@tempots/beatui 0.34.0 → 0.35.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/dist/beatui.css CHANGED
@@ -7275,7 +7275,7 @@ span.bc-sidebar-link {
7275
7275
  }
7276
7276
 
7277
7277
 
7278
- /* Ribbon component - diagonal label on the top-right corner */
7278
+ /* Ribbon component - diagonal label at specified corner */
7279
7279
 
7280
7280
  .bc-ribbon {
7281
7281
  position: absolute;
@@ -7285,14 +7285,9 @@ span.bc-sidebar-link {
7285
7285
  height: 0;
7286
7286
  }
7287
7287
 
7288
- /* The diagonal band */
7288
+ /* The diagonal band - base styles */
7289
7289
  .bc-ribbon {
7290
7290
  position: absolute;
7291
- top: 0;
7292
- left: 100%;
7293
- /* Keep the band centerline on the corner regardless of width */
7294
- transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
7295
- translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
7296
7291
  display: flex;
7297
7292
  justify-content: center;
7298
7293
  background: var(--ribbon-bg);
@@ -7308,6 +7303,38 @@ span.bc-sidebar-link {
7308
7303
  height: max-content;
7309
7304
  }
7310
7305
 
7306
+ /* Top-right corner (default) */
7307
+ .bc-ribbon {
7308
+ top: 0;
7309
+ left: 100%;
7310
+ transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
7311
+ translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
7312
+ }
7313
+
7314
+ /* Top-left corner */
7315
+ .bc-ribbon[style*="--ribbon-corner: top-left"] {
7316
+ top: 0;
7317
+ left: 0;
7318
+ transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
7319
+ translate(calc(var(--ribbon-inset, 0px) * -1), var(--ribbon-offset, 0px));
7320
+ }
7321
+
7322
+ /* Bottom-right corner */
7323
+ .bc-ribbon[style*="--ribbon-corner: bottom-right"] {
7324
+ top: 100%;
7325
+ left: 100%;
7326
+ transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
7327
+ translate(var(--ribbon-inset, 0px), calc(var(--ribbon-offset, 0px) * -1));
7328
+ }
7329
+
7330
+ /* Bottom-left corner */
7331
+ .bc-ribbon[style*="--ribbon-corner: bottom-left"] {
7332
+ top: 100%;
7333
+ left: 0;
7334
+ transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
7335
+ translate(calc(var(--ribbon-inset, 0px) * -1), calc(var(--ribbon-offset, 0px) * -1));
7336
+ }
7337
+
7311
7338
  /* Dark mode overrides */
7312
7339
  .b-dark .bc-ribbon {
7313
7340
  background: var(--ribbon-bg-dark);
@@ -6950,7 +6950,7 @@ span.bc-sidebar-link {
6950
6950
  }
6951
6951
 
6952
6952
 
6953
- /* Ribbon component - diagonal label on the top-right corner */
6953
+ /* Ribbon component - diagonal label at specified corner */
6954
6954
 
6955
6955
  .bc-ribbon {
6956
6956
  position: absolute;
@@ -6960,14 +6960,9 @@ span.bc-sidebar-link {
6960
6960
  height: 0;
6961
6961
  }
6962
6962
 
6963
- /* The diagonal band */
6963
+ /* The diagonal band - base styles */
6964
6964
  .bc-ribbon {
6965
6965
  position: absolute;
6966
- top: 0;
6967
- left: 100%;
6968
- /* Keep the band centerline on the corner regardless of width */
6969
- transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
6970
- translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
6971
6966
  display: flex;
6972
6967
  justify-content: center;
6973
6968
  background: var(--ribbon-bg);
@@ -6983,6 +6978,38 @@ span.bc-sidebar-link {
6983
6978
  height: max-content;
6984
6979
  }
6985
6980
 
6981
+ /* Top-right corner (default) */
6982
+ .bc-ribbon {
6983
+ top: 0;
6984
+ left: 100%;
6985
+ transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
6986
+ translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
6987
+ }
6988
+
6989
+ /* Top-left corner */
6990
+ .bc-ribbon[style*="--ribbon-corner: top-left"] {
6991
+ top: 0;
6992
+ left: 0;
6993
+ transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
6994
+ translate(calc(var(--ribbon-inset, 0px) * -1), var(--ribbon-offset, 0px));
6995
+ }
6996
+
6997
+ /* Bottom-right corner */
6998
+ .bc-ribbon[style*="--ribbon-corner: bottom-right"] {
6999
+ top: 100%;
7000
+ left: 100%;
7001
+ transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
7002
+ translate(var(--ribbon-inset, 0px), calc(var(--ribbon-offset, 0px) * -1));
7003
+ }
7004
+
7005
+ /* Bottom-left corner */
7006
+ .bc-ribbon[style*="--ribbon-corner: bottom-left"] {
7007
+ top: 100%;
7008
+ left: 0;
7009
+ transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
7010
+ translate(calc(var(--ribbon-inset, 0px) * -1), calc(var(--ribbon-offset, 0px) * -1));
7011
+ }
7012
+
6986
7013
  /* Dark mode overrides */
6987
7014
  .b-dark .bc-ribbon {
6988
7015
  background: var(--ribbon-bg-dark);