@gcsa/console-styles 0.1.1 → 0.1.2

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 (3) hide show
  1. package/dist/console-ui.css +41 -5
  2. package/package.json +1 -1
  3. package/src/console-ui.css +38 -5
package/dist/console-ui.css CHANGED
@@ -263,7 +263,10 @@
263
263
 
264
264
  .gcsa-console-shell__header {
265
265
  flex-shrink: 0;
266
+ box-sizing: border-box;
267
+ height: var(--gcsa-console-header-height);
266
268
  min-height: var(--gcsa-console-header-height);
269
+ max-height: var(--gcsa-console-header-height);
267
270
  max-width: 100%;
268
271
  overflow: hidden;
269
272
  border-bottom: 1px solid var(--gcsa-color-border-subtle);
@@ -1950,7 +1953,10 @@
1950
1953
  gap: 8px;
1951
1954
  min-width: 0;
1952
1955
  max-width: 100%;
1956
+ box-sizing: border-box;
1957
+ height: var(--gcsa-console-header-height);
1953
1958
  min-height: var(--gcsa-console-header-height);
1959
+ max-height: var(--gcsa-console-header-height);
1954
1960
  padding-left: 12px;
1955
1961
  overflow: hidden;
1956
1962
  }
@@ -2009,15 +2015,20 @@
2009
2015
  height: 100%;
2010
2016
  min-height: 0;
2011
2017
  overflow: hidden;
2012
- padding: var(--gcsa-space-4) var(--gcsa-space-3);
2018
+ padding: 0 var(--gcsa-space-3) var(--gcsa-space-4);
2013
2019
  }
2014
2020
 
2015
2021
  .gcsa-console-nav__brand {
2016
2022
  display: flex;
2017
2023
  align-items: center;
2024
+ box-sizing: border-box;
2025
+ height: var(--gcsa-console-header-height);
2026
+ min-height: var(--gcsa-console-header-height);
2027
+ max-height: var(--gcsa-console-header-height);
2028
+ overflow: hidden;
2018
2029
  gap: var(--gcsa-space-3);
2019
2030
  flex-shrink: 0;
2020
- padding: var(--gcsa-space-2) var(--gcsa-space-3) var(--gcsa-space-4);
2031
+ padding: 0 var(--gcsa-space-3);
2021
2032
  margin-bottom: var(--gcsa-space-2);
2022
2033
  border-bottom: 1px solid var(--gcsa-color-border-subtle);
2023
2034
  }
@@ -2064,6 +2075,9 @@
2064
2075
  font-weight: 600;
2065
2076
  letter-spacing: 0.06em;
2066
2077
  color: var(--gcsa-color-text-heading);
2078
+ overflow: hidden;
2079
+ text-overflow: ellipsis;
2080
+ white-space: nowrap;
2067
2081
  }
2068
2082
 
2069
2083
  .gcsa-console-nav__brand-text span {
@@ -2073,6 +2087,9 @@
2073
2087
  color: var(--gcsa-color-text-secondary);
2074
2088
  letter-spacing: 0.06em;
2075
2089
  text-transform: uppercase;
2090
+ overflow: hidden;
2091
+ text-overflow: ellipsis;
2092
+ white-space: nowrap;
2076
2093
  }
2077
2094
 
2078
2095
  .gcsa-console-nav__links {
@@ -2222,13 +2239,14 @@
2222
2239
  }
2223
2240
 
2224
2241
  .gcsa-console-nav--collapsed {
2225
- padding: var(--gcsa-space-3) var(--gcsa-space-2);
2242
+ padding: 0 var(--gcsa-space-2) var(--gcsa-space-3);
2226
2243
  }
2227
2244
 
2228
2245
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand {
2229
2246
  justify-content: center;
2230
2247
  gap: 0;
2231
- padding: var(--gcsa-space-2) 0 var(--gcsa-space-3);
2248
+ height: var(--gcsa-console-header-height);
2249
+ padding: 0;
2232
2250
  }
2233
2251
 
2234
2252
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand-text {
@@ -2279,6 +2297,11 @@
2279
2297
  width: 100%;
2280
2298
  min-height: var(--gcsa-console-header-height);
2281
2299
  padding: var(--gcsa-space-2) var(--gcsa-space-6) var(--gcsa-space-2) 0;
2300
+ box-sizing: border-box;
2301
+ height: var(--gcsa-console-header-height);
2302
+ min-height: var(--gcsa-console-header-height);
2303
+ max-height: var(--gcsa-console-header-height);
2304
+ overflow: hidden;
2282
2305
  }
2283
2306
 
2284
2307
  .gcsa-console-shell__header .gcsa-console-header {
@@ -2286,6 +2309,10 @@
2286
2309
  grid-template-columns: minmax(0, 1fr) auto;
2287
2310
  align-items: center;
2288
2311
  column-gap: 12px;
2312
+ box-sizing: border-box;
2313
+ height: var(--gcsa-console-header-height);
2314
+ max-height: var(--gcsa-console-header-height);
2315
+ overflow: hidden;
2289
2316
  min-height: var(--gcsa-console-header-height);
2290
2317
  padding: 0 var(--gcsa-space-6) 0 0;
2291
2318
  }
@@ -2299,6 +2326,7 @@
2299
2326
  .gcsa-console-shell__header .gcsa-console-header__title-row {
2300
2327
  flex-wrap: nowrap;
2301
2328
  min-width: 0;
2329
+ overflow: hidden;
2302
2330
  }
2303
2331
 
2304
2332
  .gcsa-console-shell__header .gcsa-console-header__title {
@@ -2307,8 +2335,14 @@
2307
2335
  text-overflow: ellipsis;
2308
2336
  white-space: nowrap;
2309
2337
  min-width: 0;
2310
- }
2311
2338
 
2339
+ }
2340
+ .gcsa-console-shell__header .gcsa-console-header__subtitle {
2341
+ overflow: hidden;
2342
+ text-overflow: ellipsis;
2343
+ white-space: nowrap;
2344
+ min-width: 0;
2345
+ }
2312
2346
  .gcsa-console-shell__header .gcsa-console-header__actions {
2313
2347
  position: static;
2314
2348
  top: auto;
@@ -2382,6 +2416,8 @@
2382
2416
  align-items: center;
2383
2417
  column-gap: 8px;
2384
2418
  padding: 0 var(--gcsa-space-3) 0 0;
2419
+ height: var(--gcsa-console-header-height);
2420
+ max-height: var(--gcsa-console-header-height);
2385
2421
  min-height: var(--gcsa-console-header-height);
2386
2422
  }
2387
2423
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gcsa/console-styles",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "GCSA console component styles",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
package/src/console-ui.css CHANGED
@@ -1576,7 +1576,10 @@
1576
1576
  gap: 8px;
1577
1577
  min-width: 0;
1578
1578
  max-width: 100%;
1579
+ box-sizing: border-box;
1580
+ height: var(--gcsa-console-header-height);
1579
1581
  min-height: var(--gcsa-console-header-height);
1582
+ max-height: var(--gcsa-console-header-height);
1580
1583
  padding-left: 12px;
1581
1584
  overflow: hidden;
1582
1585
  }
@@ -1635,15 +1638,20 @@
1635
1638
  height: 100%;
1636
1639
  min-height: 0;
1637
1640
  overflow: hidden;
1638
- padding: var(--gcsa-space-4) var(--gcsa-space-3);
1641
+ padding: 0 var(--gcsa-space-3) var(--gcsa-space-4);
1639
1642
  }
1640
1643
 
1641
1644
  .gcsa-console-nav__brand {
1642
1645
  display: flex;
1643
1646
  align-items: center;
1647
+ box-sizing: border-box;
1648
+ height: var(--gcsa-console-header-height);
1649
+ min-height: var(--gcsa-console-header-height);
1650
+ max-height: var(--gcsa-console-header-height);
1651
+ overflow: hidden;
1644
1652
  gap: var(--gcsa-space-3);
1645
1653
  flex-shrink: 0;
1646
- padding: var(--gcsa-space-2) var(--gcsa-space-3) var(--gcsa-space-4);
1654
+ padding: 0 var(--gcsa-space-3);
1647
1655
  margin-bottom: var(--gcsa-space-2);
1648
1656
  border-bottom: 1px solid var(--gcsa-color-border-subtle);
1649
1657
  }
@@ -1690,6 +1698,9 @@
1690
1698
  font-weight: 600;
1691
1699
  letter-spacing: 0.06em;
1692
1700
  color: var(--gcsa-color-text-heading);
1701
+ overflow: hidden;
1702
+ text-overflow: ellipsis;
1703
+ white-space: nowrap;
1693
1704
  }
1694
1705
 
1695
1706
  .gcsa-console-nav__brand-text span {
@@ -1699,6 +1710,9 @@
1699
1710
  color: var(--gcsa-color-text-secondary);
1700
1711
  letter-spacing: 0.06em;
1701
1712
  text-transform: uppercase;
1713
+ overflow: hidden;
1714
+ text-overflow: ellipsis;
1715
+ white-space: nowrap;
1702
1716
  }
1703
1717
 
1704
1718
  .gcsa-console-nav__links {
@@ -1848,13 +1862,14 @@
1848
1862
  }
1849
1863
 
1850
1864
  .gcsa-console-nav--collapsed {
1851
- padding: var(--gcsa-space-3) var(--gcsa-space-2);
1865
+ padding: 0 var(--gcsa-space-2) var(--gcsa-space-3);
1852
1866
  }
1853
1867
 
1854
1868
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand {
1855
1869
  justify-content: center;
1856
1870
  gap: 0;
1857
- padding: var(--gcsa-space-2) 0 var(--gcsa-space-3);
1871
+ height: var(--gcsa-console-header-height);
1872
+ padding: 0;
1858
1873
  }
1859
1874
 
1860
1875
  .gcsa-console-nav--collapsed .gcsa-console-nav__brand-text {
@@ -1905,6 +1920,11 @@
1905
1920
  width: 100%;
1906
1921
  min-height: var(--gcsa-console-header-height);
1907
1922
  padding: var(--gcsa-space-2) var(--gcsa-space-6) var(--gcsa-space-2) 0;
1923
+ box-sizing: border-box;
1924
+ height: var(--gcsa-console-header-height);
1925
+ min-height: var(--gcsa-console-header-height);
1926
+ max-height: var(--gcsa-console-header-height);
1927
+ overflow: hidden;
1908
1928
  }
1909
1929
 
1910
1930
  .gcsa-console-shell__header .gcsa-console-header {
@@ -1912,6 +1932,10 @@
1912
1932
  grid-template-columns: minmax(0, 1fr) auto;
1913
1933
  align-items: center;
1914
1934
  column-gap: 12px;
1935
+ box-sizing: border-box;
1936
+ height: var(--gcsa-console-header-height);
1937
+ max-height: var(--gcsa-console-header-height);
1938
+ overflow: hidden;
1915
1939
  min-height: var(--gcsa-console-header-height);
1916
1940
  padding: 0 var(--gcsa-space-6) 0 0;
1917
1941
  }
@@ -1925,6 +1949,7 @@
1925
1949
  .gcsa-console-shell__header .gcsa-console-header__title-row {
1926
1950
  flex-wrap: nowrap;
1927
1951
  min-width: 0;
1952
+ overflow: hidden;
1928
1953
  }
1929
1954
 
1930
1955
  .gcsa-console-shell__header .gcsa-console-header__title {
@@ -1933,8 +1958,14 @@
1933
1958
  text-overflow: ellipsis;
1934
1959
  white-space: nowrap;
1935
1960
  min-width: 0;
1936
- }
1937
1961
 
1962
+ }
1963
+ .gcsa-console-shell__header .gcsa-console-header__subtitle {
1964
+ overflow: hidden;
1965
+ text-overflow: ellipsis;
1966
+ white-space: nowrap;
1967
+ min-width: 0;
1968
+ }
1938
1969
  .gcsa-console-shell__header .gcsa-console-header__actions {
1939
1970
  position: static;
1940
1971
  top: auto;
@@ -2008,6 +2039,8 @@
2008
2039
  align-items: center;
2009
2040
  column-gap: 8px;
2010
2041
  padding: 0 var(--gcsa-space-3) 0 0;
2042
+ height: var(--gcsa-console-header-height);
2043
+ max-height: var(--gcsa-console-header-height);
2011
2044
  min-height: var(--gcsa-console-header-height);
2012
2045
  }
2013
2046